diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 39b1b9b69..370ec8eb3 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -25,9 +25,6 @@ jobs: - name: set-vfe-branch run: | export VFE_BRANCH='' - if [[ ${{ contains(github.event.pull_request.body, 'ci:next') }} ]]; then - export VFE_BRANCH=next - fi if [[ "${{ steps.install-vfe.outputs.match }}" != "" ]]; then export VFE_BRANCH=${{ steps.install-vfe.outputs.group1 }} fi diff --git a/package-lock.json b/package-lock.json index a6e765f2d..1266a401c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@processmaker/screen-builder", - "version": "3.0.0", + "version": "3.0.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@processmaker/screen-builder", - "version": "3.0.0", + "version": "3.0.1", "dependencies": { "@chantouchsek/validatorjs": "1.2.3", "@storybook/addon-docs": "^7.6.13", @@ -34,7 +34,7 @@ "@fortawesome/fontawesome-free": "^5.6.1", "@originjs/vite-plugin-commonjs": "^1.0.3", "@panter/vue-i18next": "^0.15.2", - "@processmaker/vue-form-elements": "0.60.0", + "@processmaker/vue-form-elements": "0.60.1", "@processmaker/vue-multiselect": "2.3.0", "@storybook/addon-essentials": "^7.6.13", "@storybook/addon-interactions": "^7.6.13", @@ -97,7 +97,7 @@ }, "peerDependencies": { "@panter/vue-i18next": "^0.15.0", - "@processmaker/vue-form-elements": "0.60.0", + "@processmaker/vue-form-elements": "0.60.1", "i18next": "^15.0.8", "vue": "^2.6.12", "vuex": "^3.1.1" @@ -4015,10 +4015,11 @@ } }, "node_modules/@processmaker/vue-form-elements": { - "version": "0.60.0", - "resolved": "https://registry.npmjs.org/@processmaker/vue-form-elements/-/vue-form-elements-0.60.0.tgz", - "integrity": "sha512-Rndk+TlCl3SXGx7VeZq0207fzA3ALNEjfapXazra1yI+AQFqPYAdSLrisckSvGYPTG0TFGGBhpzh+cHjOWlwug==", + "version": "0.60.1", + "resolved": "https://registry.npmjs.org/@processmaker/vue-form-elements/-/vue-form-elements-0.60.1.tgz", + "integrity": "sha512-cFmhrqMz0n3aOS556wJpb5Jm0dasvqLNIaHAuT1T4uhboo+JI6Lxfp57JbJuQ8NS7c2FcTm0MgoPAxtiWTt6Ng==", "dev": true, + "license": "MIT", "dependencies": { "@chantouchsek/validatorjs": "1.2.3", "@tinymce/tinymce-vue": "2.0.0", diff --git a/package.json b/package.json index 96ccaaa04..a4aeaba6f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@processmaker/screen-builder", - "version": "3.0.0", + "version": "3.0.1", "scripts": { "dev": "VITE_COVERAGE=true vite", "build": "vite build", @@ -57,7 +57,7 @@ "@fortawesome/fontawesome-free": "^5.6.1", "@originjs/vite-plugin-commonjs": "^1.0.3", "@panter/vue-i18next": "^0.15.2", - "@processmaker/vue-form-elements": "0.60.0", + "@processmaker/vue-form-elements": "0.60.1", "@processmaker/vue-multiselect": "2.3.0", "@storybook/addon-essentials": "^7.6.13", "@storybook/addon-interactions": "^7.6.13", @@ -116,7 +116,7 @@ }, "peerDependencies": { "@panter/vue-i18next": "^0.15.0", - "@processmaker/vue-form-elements": "0.60.0", + "@processmaker/vue-form-elements": "0.60.1", "i18next": "^15.0.8", "vue": "^2.6.12", "vuex": "^3.1.1" diff --git a/src/components/ScreenTemplateCard.vue b/src/components/ScreenTemplateCard.vue index b187726c9..56c12bff5 100644 --- a/src/components/ScreenTemplateCard.vue +++ b/src/components/ScreenTemplateCard.vue @@ -41,7 +41,11 @@ :key="option.value" class="col apply-options-container d-flex align-items-baseline flex-column" > -
+
@@ -61,7 +65,7 @@ type="button" size="sm" class="btn btn-outline-secondary card-btn" - @click="onCancel" + @click.stop="onCancel" > {{ $t("Cancel") }} @@ -70,7 +74,7 @@ type="button" size="sm" class="btn btn-primary ml-2 card-btn" - @click="applyTemplate" + @click.stop="applyTemplate" > {{ $t("Apply") }} @@ -166,6 +170,14 @@ export default { onCancel() { this.isApplyOptionsActive = false; this.selected = []; + }, + toggleOption(value) { + const index = this.selected.indexOf(value); + if (index === -1) { + this.selected.push(value); + } else { + this.selected.splice(index, 1); + } } } }; diff --git a/src/components/ScreenTemplates.vue b/src/components/ScreenTemplates.vue index 26e4858a6..4edf2b73e 100644 --- a/src/components/ScreenTemplates.vue +++ b/src/components/ScreenTemplates.vue @@ -35,6 +35,9 @@ data-cy="my-templates-list" > + + + + + + { this.myTemplatesData = response.data.data; - if (!this.myTemplatesData || this.myTemplatesData.length === 0) { + if ( + this.myTemplatesData.length === 0 || + this.myTemplatesData === undefined + ) { this.noMyTemplatesFound = true; } }) .catch((error) => { console.error(error); + }) + .finally(() => { + this.loading = false; }); }, fetchSharedTemplates() { + this.loading = true; ProcessMaker.apiClient .get(`templates/screen?is_public=1&screen_type=${this.screenType}`) .then((response) => { @@ -154,6 +169,9 @@ export default { }) .catch((error) => { console.error(error); + }) + .finally(() => { + this.loading = false; }); }, showSharedTemplates() { diff --git a/src/components/renderer/file-upload.vue b/src/components/renderer/file-upload.vue index f577fc523..ceeb00bb7 100644 --- a/src/components/renderer/file-upload.vue +++ b/src/components/renderer/file-upload.vue @@ -61,32 +61,34 @@ - + {{ $t('Skip Uploading') }} - - {{ $t('Add File/Photo') }} + {{ $t('Add File/Photo') }} {{ $t('Add another') }} - - {{ $t('Send All') }} + + {{ $t('Send All') }} {{ $t('Submit File/Photo') }} @@ -270,7 +272,7 @@ export default { return this.screenType === 'conversational-forms'; }, showSingleUploadButton() { - return this.files.length === 0 || !this.multipleUpload; + return this.files.length === 0 && !this.multipleUpload; }, showMultiUploadButton() { return this.files.length !== 0 && this.multipleUpload; @@ -402,7 +404,6 @@ export default { }, setRequestFiles() { _.set(window, `PM4ConfigOverrides.requestFiles["${this.fileDataName}"]`, this.files); - console.log("!!!!!! SET REQUEST FILES", this.valueToSend()); this.$emit('input', this.valueToSend()); }, valueToSend() { @@ -491,7 +492,7 @@ export default { } this.$delete(this.nativeFiles, id); } - + this.$emit('file-deleted', this.files); }, addToFiles(fileInfo) { if (this.multipleUpload) { @@ -528,6 +529,19 @@ export default { this.prefix = parent.loopContext + '.'; } }, + validateFile(file, acceptFiles){ + const extensions = acceptFiles.filter(item => item.startsWith('.')); + const mimeTypes = acceptFiles.filter(item => !item.startsWith('.')); + const fileExtension = '.' + file.name.split('.').pop().toLowerCase(); + const fileType = file.fileType; + const isExtensionValid = extensions.includes(fileExtension); + const isMimeTypeValid = mimeTypes.includes(fileType); + + if (!isExtensionValid && !isMimeTypeValid) { + return false; + } + return true; + }, addFile(file) { if (this.disabled) { file.ignored = true; @@ -544,7 +558,7 @@ export default { if (this.filesAccept) { file.ignored = true; - if (this.filesAccept.indexOf(file.fileType) !== -1) { + if (this.validateFile(file, this.filesAccept)) { file.ignored = false; } if (file.ignored) { @@ -612,7 +626,6 @@ export default { this.$set(this.nativeFiles, id, rootFile); this.addToFiles(fileInfo); } else { - console.log("!!!!!! FILE UPLOADED", name); this.$emit('input', name); } }, @@ -750,4 +763,8 @@ export default { box-shadow: 0px 12px 24px -12px #0000001F; } +.form-control-file.cf-single-file-upload label { + display: none; +} + diff --git a/src/components/task.vue b/src/components/task.vue index a5513cf4e..bb7dfbaa8 100644 --- a/src/components/task.vue +++ b/src/components/task.vue @@ -866,6 +866,7 @@ export default { if ( elementDestinationValue && + elementDestinationValue !== 'taskSource' && data?.params[0]?.tokenId === this.taskId && data?.params[0]?.requestStatus === 'ACTIVE' ) { diff --git a/src/form-control-common-properties.js b/src/form-control-common-properties.js index 50a7463e3..2a3d67049 100644 --- a/src/form-control-common-properties.js +++ b/src/form-control-common-properties.js @@ -96,8 +96,8 @@ export const keyNameProperty = { config: { label: 'Variable Name', name: 'Variable Name', - // Update tests/e2e/specs/Builder.spec.js when changing this - validation: 'regex:/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(? + + + + + + + + +
+ {{ __("Save") }} +
+ + + + + + + + + diff --git a/tests/e2e/fixtures/Expense_Report_Launcher_Main_13_screen.json b/tests/e2e/fixtures/Expense_Report_Launcher_Main_13_screen.json new file mode 100644 index 000000000..44662b847 --- /dev/null +++ b/tests/e2e/fixtures/Expense_Report_Launcher_Main_13_screen.json @@ -0,0 +1,13881 @@ +{ + "id": 7340, + "screen_id": 2007, + "screen_category_id": 222, + "draft": 0, + "title": "Expense Report - Launcher Main 13", + "description": "Expense Report - Launcher Main", + "type": "FORM", + "config": [ + { + "name": "Upload Expense From Mobile Container", + "items": [ + { + "label": "Nested Screen", + "config": { + "icon": "fas fa-file-invoice", + "name": "Nested Screen", + "label": "Nested Screen", + "value": null, + "screen": 2008, + "variant": "primary" + }, + "component": "FormNestedScreen", + "editor-control": "FormNestedScreen", + "editor-component": "FormNestedScreen" + }, + { + "items": [ + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "
\n

<\/p>\n<\/center>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "bg-header" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

Screens for Expenses:<\/p>", + "interactive": true, + "renderVarHtml": false, + "conditionalHide": "false", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "bgcolor": "alert alert-primary", + "options": [ + { + "value": "1", + "content": "12" + } + ], + "conditionalHide": "false", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [ + { + "label": "Nested Screen", + "config": { + "icon": "fas fa-file-invoice", + "name": "Nested Screen", + "label": "Nested Screen", + "value": null, + "screen": 2009, + "variant": "primary", + "conditionalHide": null, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": null + }, + "component": "FormNestedScreen", + "editor-control": "FormNestedScreen", + "editor-component": "FormNestedScreen" + }, + { + "label": "Nested Screen", + "config": { + "icon": "fas fa-file-invoice", + "name": "Nested Screen", + "label": "Nested Screen", + "value": null, + "screen": 2010, + "variant": "primary", + "conditionalHide": "selectedExpense or checkSaveExpenseButton or action == \"expense_update\"" + }, + "component": "FormNestedScreen", + "editor-control": "FormNestedScreen", + "editor-component": "FormNestedScreen" + }, + { + "label": "Nested Screen", + "config": { + "icon": "fas fa-file-invoice", + "name": "Nested Screen", + "label": "Nested Screen", + "value": null, + "screen": 2012, + "variant": "primary", + "conditionalHide": "SelectReport == \"1\"" + }, + "component": "FormNestedScreen", + "editor-control": "FormNestedScreen", + "editor-component": "FormNestedScreen" + }, + { + "items": [ + [], + [ + { + "label": "Submit Button", + "config": { + "icon": "fas fa-share-square", + "name": "action", + "event": "submit", + "label": "Don't Delete Me", + "loading": true, + "tooltip": [], + "variant": "primary", + "fieldValue": "expense_new", + "loadingLabel": "Loading...", + "defaultSubmit": true, + "conditionalHide": "false", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "btn-new" + }, + "component": "FormButton", + "editor-control": "FormSubmit", + "editor-component": "FormButton" + }, + { + "label": "Submit Button", + "config": { + "icon": "fas fa-share-square", + "name": "action", + "event": "submit", + "label": "Save", + "loading": true, + "tooltip": [], + "variant": "primary", + "ariaLabel": null, + "fieldValue": "expense_update", + "loadingLabel": "Loading...", + "defaultSubmit": true, + "conditionalHide": "checkSaveExpenseButton or action == \"expense_update\"", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "btn-bx2" + }, + "component": "FormButton", + "editor-control": "FormSubmit", + "editor-component": "FormButton" + } + ], + [] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "4" + }, + { + "value": "2", + "content": "4" + }, + { + "value": "3", + "content": "4" + } + ], + "conditionalHide": "action == \"expense_update\" or selectedExpense and selectedExpense.requestStatus != \"In review\"", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "Btn-mobile" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "conditionalHide": "action == \"expense_update\" or not btn_tab or btn_tab == \"expenses1\" or btn_tab == \"expenses2\"", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

Screens for Reports<\/p>", + "interactive": true, + "renderVarHtml": false, + "conditionalHide": "false" + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "bgcolor": "alert alert-primary", + "options": [ + { + "value": "1", + "content": "12" + } + ], + "conditionalHide": "false", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [ + { + "label": "Nested Screen", + "config": { + "icon": "fas fa-file-invoice", + "name": "Nested Screen", + "label": "Nested Screen", + "value": null, + "screen": 2011, + "variant": "primary", + "conditionalHide": null, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormNestedScreen", + "editor-control": "FormNestedScreen", + "editor-component": "FormNestedScreen" + }, + { + "items": [ + [], + [ + { + "label": "Submit Button", + "config": { + "icon": "fas fa-share-square", + "name": "action", + "event": "submit", + "label": "Save", + "loading": true, + "tooltip": [], + "variant": "primary", + "ariaLabel": null, + "fieldValue": "report_new", + "loadingLabel": "Loading...", + "defaultSubmit": true, + "conditionalHide": null, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "btn-bx2" + }, + "component": "FormButton", + "editor-control": "FormSubmit", + "editor-component": "FormButton" + } + ], + [] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "4" + }, + { + "value": "2", + "content": "4" + }, + { + "value": "3", + "content": "4" + } + ], + "conditionalHide": "btn_rep_create == \"show_form\"", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "Btn-mobile" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [], + [ + { + "label": "Submit Button", + "config": { + "icon": "fas fa-share-square", + "name": "action", + "event": "submit", + "label": "Send Report", + "loading": true, + "tooltip": [], + "variant": "primary", + "ariaLabel": null, + "fieldValue": "sendReport", + "loadingLabel": "Loading...", + "defaultSubmit": true, + "conditionalHide": null, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "btn-bx2" + }, + "component": "FormButton", + "editor-control": "FormSubmit", + "editor-component": "FormButton" + } + ], + [] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "4" + }, + { + "value": "2", + "content": "4" + }, + { + "value": "3", + "content": "4" + } + ], + "conditionalHide": "regularButton == \"submitReport\"", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "Btn-mobile" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [], + [ + { + "label": "Submit Button", + "config": { + "icon": "fas fa-share-square", + "name": "action", + "event": "submit", + "label": "Add Expenses", + "loading": true, + "tooltip": [], + "variant": "primary", + "ariaLabel": null, + "fieldValue": "addUnreportedExpenses", + "loadingLabel": "Loading...", + "defaultSubmit": true, + "conditionalHide": null, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "btn-unreported" + }, + "component": "FormButton", + "editor-control": "FormSubmit", + "editor-component": "FormButton" + } + ], + [] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "4" + }, + { + "value": "2", + "content": "4" + }, + { + "value": "3", + "content": "4" + } + ], + "conditionalHide": "checkSelectedReports > 0", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "Btn-mobile" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "conditionalHide": "btn_tab == \"reports1\" or btn_tab == \"reports2\"", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "label": "File Upload", + "config": { + "icon": "fas fa-file-upload", + "name": "receiptUpload", + "label": null, + "accept": "image\/png, image\/jpeg, image\/tiff, application\/pdf", + "conditionalHide": "not addUnreExpenses", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "FloatingButton" + }, + "component": "FileUpload", + "editor-control": "FileUpload", + "editor-component": "FileUpload" + } + ], + "order": 1 + }, + { + "name": "My Reports", + "items": [ + { + "items": [ + [ + { + "label": "Submit Button", + "config": { + "icon": "fas fa-share-square", + "name": null, + "event": "submit", + "label": "New Submitasdasdasdasdas", + "loading": false, + "tooltip": [], + "variant": "primary", + "fieldValue": null, + "loadingLabel": "Loading...", + "defaultSubmit": true + }, + "component": "FormButton", + "editor-control": "FormSubmit", + "editor-component": "FormButton" + } + ], + [] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "6" + }, + { + "value": "2", + "content": "6" + } + ] + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + } + ], + "order": 2 + }, + { + "name": "My Expenses", + "items": [ + { + "items": [ + [ + { + "label": "Page Navigation", + "config": { + "icon": "far fa-compass", + "event": "pageNavigate", + "label": "My Report", + "variant": "primary", + "eventData": "0" + }, + "component": "FormButton", + "editor-control": "PageNavigation", + "editor-component": "FormButton" + } + ], + [ + { + "label": "Submit Button", + "config": { + "icon": "fas fa-share-square", + "name": null, + "event": "script", + "label": "expenses", + "loading": false, + "tooltip": [], + "variant": "link", + "fieldValue": null, + "loadingLabel": "Loading...", + "defaultSubmit": true, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormButton", + "editor-control": "FormSubmit", + "editor-component": "FormButton" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "6" + }, + { + "value": "2", + "content": "6" + } + ], + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "GridExpenses" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "label": "Nested Screen", + "config": { + "icon": "fas fa-file-invoice", + "name": "Nested Screen", + "label": "Nested Screen", + "value": null, + "screen": 2009, + "variant": "primary" + }, + "component": "FormNestedScreen", + "editor-control": "FormNestedScreen", + "editor-component": "FormNestedScreen" + } + ], + "order": 3 + } + ], + "computed": [ + { + "id": 1, + "name": "Process Name", + "type": "javascript", + "order": 1, + "byPass": false, + "formula": "return \"Mobile Expense\";", + "property": "processName" + }, + { + "id": 2, + "name": "processIdFromUrl", + "type": "javascript", + "order": 2, + "byPass": false, + "formula": "if(empty(this.processIdFromUrl)) { \r\n var url = window.location.href;\r\n var arr = url.split(\"\/\");\r\n return arr[4];\r\n} else {\r\n return this.processIdFromUrl\r\n}\r\n\r\nfunction empty(val) {\r\n return [null, \"\", undefined].indexOf(val) != -1;\r\n}", + "property": "processIdFromUrl" + }, + { + "id": 3, + "name": "submitClick", + "type": "javascript", + "order": 3, + "byPass": false, + "formula": "if(this.receiptUpload != null) {\n var button = $(\"[selector='btn-new'] button\");\n setTimeout(function() {\n button.trigger('click');\n }, 2500);\n}\n\nreturn true;", + "property": "submitClick" + }, + { + "id": 4, + "name": "requestCreator", + "type": "javascript", + "order": 4, + "byPass": false, + "formula": "return this._user;", + "property": "requestCreator" + }, + { + "id": 5, + "name": "caseSummary", + "type": "javascript", + "order": 5, + "byPass": false, + "formula": "return \"Mobile Expense for \" + this._user.fullname;", + "property": "caseSummary" + }, + { + "id": 6, + "name": "checkSaveExpenseButton", + "type": "javascript", + "order": 6, + "byPass": false, + "formula": "function compareData(exp, receiptMerchant, receiptDate, receiptAmount, reportSelected, receiptCategory, receiptComments ) {\r\n if (exp.requestStatus == \"Scanning\") { return false; }\r\n if (exp.receiptMerchant !== receiptMerchant ||\r\n exp.receiptDate !== receiptDate ||\r\n exp.reportSelected !== reportSelected || \r\n parseFloat(exp.receiptAmount) !== parseFloat(receiptAmount) ||\r\n exp.category !== receiptCategory ||\r\n (exp.comments || \"\") !== receiptComments) {\r\n return true;\r\n }\r\n return false;\r\n}\r\n\r\nif(this.selectedExpense != null && this.selectedExpense != undefined && this.selectedExpense != \"\"){\r\n return compareData(this.selectedExpense, this.receiptMerchant, this.receiptDate, this.receiptAmount, this.reportSelected, this.receiptCategory, this.receiptComments);\r\n}\r\nreturn false;", + "property": "checkSaveExpenseButton" + }, + { + "id": 7, + "name": "blankAmountFound", + "type": "javascript", + "order": 7, + "byPass": false, + "formula": "if([null, \"\", undefined].indexOf(this.reportedExpensesArr) != -1) { return true; }\nif([null, \"\", undefined].indexOf(this.reportedExpensesArr.receipts) != -1) { return true; }\n\nvar rep = this.reportedExpensesArr.receipts;\nlet flag = false;\n\nfor (const element of rep) {\n if([null, \"\", undefined].indexOf(element.data.receiptAmount) != -1) {\n flag = true;\n break;\n }\n};\n\nreturn flag;", + "property": "blankAmountFound" + }, + { + "id": 8, + "name": "cleanDescription", + "type": "javascript", + "order": 8, + "byPass": true, + "formula": "let button=this.action\r\ndocument.querySelectorAll(\"[selector='clean'] textarea\").forEach(function(element){\r\n element.value = \"\"\r\n})", + "property": "cleanDescription" + } + ], + "custom_css": "[selector='MenuSpaces']{\n margin-top: 10px !important;\n}\n\n.text-truncate{\n display: none !important;\n}\n[selector='Bg-uploader'] .text-truncate{\n -webkit-box-shadow: none !important;\n -moz-box-shadow: none !important;\n box-shadow: none !important;\n}\n\n[selector='Bg-uploader'] label{\n -webkit-box-shadow: none !important;\n -moz-box-shadow: none !important;\n box-shadow: none !important;\n}\n\n.card{\n border:1px solid #FFF !important;\n}\n\n\n\n\/****************Add-BtnCamara***************\/\n[selector='FloatingButton'] .form-control-file {\n position: fixed;\n bottom: 0;\n right: 0;\n width: auto;\n margin-right: -90px;\n margin-bottom: 0px;\n}\n[selector='FloatingButton'] .form-control-file > p {\n color: transparent !important;\n display: none;\n}\n[selector='FloatingButton'] .uploader-list {\n display: none;\n}\n[selector='FloatingButton'] .invalid-feedback {\n display: none;\n}\n\n[selector='FloatingButton'] .form-control-file label.btn {\n border-radius: 50px;\n max-width: 37%;\n max-height: 55px;\n text-align: center !important;\n padding-bottom: 55px;\n padding-top: initial;\n margin-right: 10px;\n}\n[selector='FloatingButton'] .form-control-file label.btn::before {\n font-family: \"Font Awesome 5 Free\";\n font-weight: 900;\n content: \"\\f030\";\n font-size: 35px;\n \/*visibility: visible;\n background-color: #0052D4;\n border: 1px solid #0052D4;\n border-radius: 50px;\n padding: 10px;*\/\n}\n[selector='FloatingButton'] .btn-secondary{\n background-color: #0052D4;\n border-radius: 50px;\n \/*visibility: visible;*\/\n}\n\n\/****************End-BtnCamara***************\/", + "created_at": "2024-09-12 21:09:41", + "updated_at": "2024-09-12 21:09:41", + "status": "ACTIVE", + "key": null, + "watchers": [], + "translations": null, + "is_template": 0, + "asset_type": null, + "nested": [ + { + "id": 7341, + "screen_id": 2008, + "screen_category_id": 1, + "draft": 0, + "title": "Expense Report - General CSS Mobile 13", + "description": "General CSS Mobile - Expenses Process", + "type": "DISPLAY", + "config": [ + { + "name": "General css - Expenses Process", + "items": [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

STYLE GENERAL MOBILE - EXPENSES PROCESS<\/strong><\/h1>", + "interactive": true, + "renderVarHtml": false, + "conditionalHide": "false", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ], + "order": 1 + } + ], + "computed": [], + "custom_css": "\/*****StyleDiego-Version-19-07-24*****\/\r\n[selector=\"check-img\"] {\r\n margin-top: 5em;\r\n text-align: center;\r\n margin-bottom: 4em;\r\n}\r\n\r\n.pm-TitleNotice { \r\n color: #556271; \r\n font-family: 'Trebuchet MS'; \r\n font-size: 20px;\r\n font-weight: 600;\r\n text-align: left;\r\n}\r\n.pm-TitleNotice2 { \r\n color: #566877 !important;\r\n font-size: 17px !important;\r\n font-weight: 600 !important;\r\n font-family: 'Trebuchet MS' !important;\r\n padding: 0px !important;\r\n text-transform: capitalize !important;\r\n margin-bottom: 0rem !important;\r\n}\r\n.pm-SubTitleNotice { \r\n color: #556271; \r\n font-family: 'Trebuchet MS'; \r\n font-size: 17px;\r\n font-weight: 400;\r\n \/*line-height: 30.13px;*\/\r\n margin-bottom: 0px;\r\n}\r\n.pm-TextNotice{ \r\n color: #556271; \r\n font-family: 'Trebuchet MS'; \r\n font-size: 12.8px;\r\n font-weight: 400;\r\n text-align: left;\r\n}\r\n\r\n.pm-TitleExpense{ \r\n color: #556271; \r\n font-family: 'Trebuchet MS'; \r\n font-size: 25px;\r\n font-weight: 600;\r\n line-height: 38.96px;\r\n margin: 0 !important;\r\n text-align: center;\r\n}\r\n.pm-MessageExpense{ \r\n background-color: #F2F9FF; \r\n color: #1572C2;\r\n border: 1px solid #eaf4ff; \r\n font-family: 'Trebuchet MS'; \r\n font-size: 16px;\r\n font-weight: 400;\r\n line-height: 38.96px;\r\n margin: 0 auto!important;\r\n text-align: center;\r\n border-radius: 5px;\r\n box-shadow: -1px 4px 5px -2px rgba(0,0,0,0.37);\r\n -webkit-box-shadow: -1px 2px 5px -4px rgba(0,0,0,0.37);\r\n -moz-box-shadow: -1px 4px 5px -2px rgba(0, 0, 0, 0.37);\r\n}\r\n.form-grid-label { \r\n color: #556271;\r\n font-style: normal;\r\n font-weight: 700;\r\n font-size: 10px !important;\r\n font-family: 'Trebuchet MS';\r\n line-height: 16.34px;\r\n text-transform: uppercase;\r\n}\r\n.form-group label { \r\n color: #556271;\r\n font-style: normal;\r\n font-weight: 700;\r\n font-size: 12px !important;\r\n font-family: 'Trebuchet MS';\r\n line-height: 16.34px;\r\n text-transform: capitalize !important;\r\n}\r\n.labelTextTitle{ \r\n color: #566877;\r\n font-weight: 600;\r\n font-size: 17px !important;\r\n font-family: 'Trebuchet MS';\r\n line-height: 16.34px;\r\n text-transform: capitalize;\r\n}\r\n.form-control {\r\n color: #556271;\r\n border: none;\r\n border-bottom: 1px solid #CDDDEE;\r\n border-radius: 0px;\r\n font-size: 12px;\r\n font-family: 'Trebuchet MS';\r\n}\r\n\r\n[selector='Btn-mobile'] .btn-primary{\r\n color: #ffffff !important;\r\n background-color: #2773F3 !important;\r\n border: 1px solid #2773F3 !important;\r\n border-radius: 8px 8px 8px 8px !important;\r\n text-align: center !important;\r\n text-transform: capitalize !important;\r\n width: 100% !important;\r\n font-size: 14px;\r\n font-family: 'Trebuchet MS';\r\n padding: 8px 5px 8px 5px !important;\r\n}\r\n\r\n[selector='positionDetails']{\r\n text-align: right !important;\r\n}\r\n[selector='positionDetails'] .btn-link {\r\n font-weight: 700;\r\n color: #1572C2;\r\n font-size: 12px !important;\r\n font-family: 'Trebuchet MS';\r\n line-height: 21.79px;\r\n text-transform: capitalize;\r\n}\r\n\r\n\/*********\/\r\n.multiselect__tags {\r\n font-size: 12px !important;\r\n}\r\n.multiselect__option--highlight{\r\n font-size: 12px !important;\r\n}\r\n.multiselect, .multiselect__input, .multiselect__single{\r\n font-size: 12px !important;\r\n}\r\n.multiselect__option--highlight {\r\n background: #F2F8FE !important;\r\n color: #2381C8 !important;\r\n}\r\n.multiselect__option--selected.multiselect__option--highlight {\r\n background: #f1f1f1 !important;\r\n color: #ff6a6a !important;\r\n}\r\n[selector='InfoReportMobile'] .multiselect__tags {\r\n font-size: 12px !important;\r\n}\r\n[selector='InfoReportMobile'] .multiselect .multiselect__tags{\r\n color: #556271;\r\n border: none;\r\n border-bottom: 1px solid #CDDDEE;\r\n border-radius: 0px;\r\n font-size: 12px;\r\n font-family: 'Trebuchet MS';\r\n font-weight: 400;\r\n}\r\n[selector='InfoReportMobile'] .multiselect__tags {\r\n font-size: 12px !important;\r\n}\r\n[selector='InfoReportMobile'] .multiselect__option--highlight{\r\n font-size: 12px !important;\r\n}\r\n[selector='InfoReportMobile'] .multiselect, .multiselect__input, .multiselect__single{\r\n font-size: 12px !important;\r\n}\r\n[selector='InfoReportMobile'] .custom-css-scope .multiselect, .custom-css-scope .multiselect__input, .custom-css-scope .multiselect__single{\r\n font-size: 12px !important;\r\n}\r\n[selector='InfoReportMobile'] .multiselect__option--highlight {\r\n background: #F2F8FE !important;\r\n color: #2381C8 !important;\r\n}\r\n[selector='InfoReportMobile'] .multiselect__option--selected.multiselect__option--highlight {\r\n background: #f1f1f1 !important;\r\n color: #ff6a6a !important;\r\n}\r\n\r\n[selector='container'] {\r\n width: 859px;\r\n margin: 0 auto; \/* center *\/\r\n}\r\n\/*** UPLOAD ***\/\r\n[selector='header']{\r\n border: 1px solid #CDDDEE !important;\r\n border-radius: 12px;\r\n padding: 10px !important;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n font-size: 17px;\r\n font-weight: 600;\r\n background-color: #F3F9FE;\r\n}\r\n[selector='UploadFile'] .form-control-file > p::before{\r\n font-family: \"Font Awesome 5 Free\";\r\n font-size: 3rem;\r\n content: \"\\f030\" !important;\r\n display: block;\r\n color: #0B71C2;\r\n}\r\n\r\n[selector='UploadFile'] .form-control-file > p {\r\n text-align: center;\r\n color: transparent !important;\r\n}\r\n\r\n[selector='UploadFile'] .form-control-file > p::after {\r\n color: #0B71C2 !important;\r\n white-space: pre;\r\n}\r\n[selector='UploadFile'] .form-control-file label {\r\n white-space: break-spaces !important;\r\n}\r\n[selector='UploadFile'] .form-control-file label.btn {\r\n background: white;\r\n border-radius: 50px;\r\n color: transparent !important;\r\n font-size: 13px !important;\r\n font-weight: 500;\r\n max-width: 55%;\r\n margin: auto;\r\n max-height: 32px;\r\n \/*text-align: center !important;*\/\r\n}\r\n\r\n[selector='FileUploads'] .btn{\r\n text-transform: none !important;\r\n}\r\n\r\n[selector='UploadFile'] .form-control-file label.btn::before {\r\n content: \"\u271a Upload an Expense\" !important;\r\n color: #556271 !important;\r\n text-align: center !important;\r\n}\r\n\r\n\/* Media container button styles *\/\r\n.media-container > div {\r\n border: 1px solid #BED4E5;\r\n background: white;\r\n color: transparent !important;\r\n border-radius: 17px;\r\n width: 60%;\r\n margin-left: 20%;\r\n max-height: 45px;\r\n padding: 10px 0;\r\n -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4);\r\n -moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.4);\r\n box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);\r\n}\r\n\r\n.media-container input[type=file] {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n opacity: 0;\r\n margin-left: 20%;\r\n width: 60%;\r\n height: 100%;\r\n}\r\n\r\n\/*************previewFile************\/\r\n[selector='previewFile'] {\r\n border: 1px solid #CDDDEE !important;\r\n border-radius: 12px;\r\n padding: 10px !important;\r\n background-color: #F3F9FE;\r\n margin: auto;\r\n}\r\n[selector='previewFile'] .uploader {\r\n display: inline-block;\r\n width: auto;\r\n}\r\n[selector='previewFile'] label {\r\n display: inline-block;\r\n width: auto;\r\n border: 1px solid #BED4E5 !important;\r\n background: white !important;\r\n color: #556271 !important;\r\n border-radius: 17px !important;\r\n text-transform: capitalize !important;\r\n -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4);\r\n -moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.4);\r\n box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1) !important;\r\n}\r\n[selector='previewFile'] .uploader-list {\r\n width: 100%;\r\n}\r\n[selector='previewFile'] .required-asterisk {\r\n display: none;\r\n}\r\n[selector='previewFile'] .form-control-file, .form-control-range {\r\n width: 65%;\r\n margin: auto;\r\n}\r\n\r\n[selector='previewFile'] .was-validated {\r\n display: block;\r\n}\r\n[selector='previewFile'] img{\r\n max-width: 80% !important;\r\n}\r\n\/*******End-previewFile*********\/\r\n\r\n\/********************************AddstyleDiego******************************\/\r\n[selector='bg-header'] {\r\n background-color: #0052D4;\r\n text-align: center;\r\n}\r\n[selector='card-container-upload-mobile'] {\r\n background-color: #F2F8FE;\r\n border-radius: 12px;\r\n border: 1px solid #CDDDEE;\r\n \/*padding: 5px 0px 20px 0px;*\/\r\n padding: 10px;\r\n text-align: center;\r\n margin-bottom: 20px;\r\n}\r\n[selector='imagePosition'] {\r\n text-align: center;\r\n padding: 10px;\r\n}\r\n[selector='TextPosition'] {\r\n text-align: center;\r\n}\r\n.media-container > div::before {\r\n content: \"Take picture\";\r\n color: #556271 !important;\r\n text-transform: none;\r\n font-size: 16px;\r\n font-family: 'Trebuchet MS'; \r\n font-weight: 400;\r\n line-height: 24px;\r\n}\r\n[selector='Btn-edit'] .btn-secondary{\r\n border: 1px solid #BED4E5 !important;\r\n background: white !important;\r\n color: #556271 !important;\r\n border-radius: 17px !important;\r\n width: 60% !important;\r\n max-height: 45px !important;\r\n padding: 10px 0 !important;\r\n text-transform: capitalize !important;\r\n -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4);\r\n -moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.4);\r\n box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1) !important;\r\n}\r\n.alert-warning {\r\n color: #855900;\r\n background-color: #ffeecc;\r\n border-color: #ffe7b8;\r\n padding: 5px 1px 5px 1px !important;\r\n border-radius: 5px;\r\n margin-bottom: -20px !important;\r\n font-size: 12px;\r\n}\r\n[selector='cancelBtn'] .btn-link {\r\n font-weight: 500;\r\n color: #1572C2;\r\n font-size: 16px;\r\n font-family: 'Trebuchet MS';\r\n border-radius: 20px !important;\r\n line-height: 24.51px;\r\n text-transform: capitalize;\r\n text-align: center;\r\n width: 100%;\r\n margin: auto;\r\n background-color: white;\r\n border: 1px solid #bddfff;\r\n margin-top: 10px !important;\r\n}\r\n[selector='AlertMessage'] .mt-5 {\r\n margin-top: 10px !important;\r\n}\r\n.AlertSucess{\r\n background-color: #ECFFF9;\r\n border-radius: 2px;\r\n border: 1px solid #CDDDEE;\r\n color: #556271;\r\n text-align: center;\r\n padding: 10px 0px;\r\n}\r\n\r\n.imgCircle{\r\n color: #4EA075;\r\n font-size: 20px;\r\n}\r\n\r\n[selector='Btn-DesActive']{\r\n background-color: #bddfff;\r\n}\r\n\r\n\/******\/\r\n[selector='BtnExpenses'] .btn-link{\r\n background-color: #D9EFFB;\r\n color: #0052D4 !important;\r\n font-size: 17px !important;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n border-radius: 4px 4px 4px 4px !important;\r\n line-height: 24.51px;\r\n text-transform: capitalize;\r\n padding: 5px 10px 5px 10px !important;\r\n margin:0px 0px 10px 0px;\r\n}\r\n[selector='BtnExpenses'] .btn-light{\r\n background-color: #FFFFFF;\r\n color: #556271 !important;\r\n font-size: 17px !important;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n border-radius: 0 !important;\r\n line-height: 24.51px;\r\n text-transform: capitalize;\r\n padding: 5px 10px 5px 10px !important;\r\n margin:0px 0px 10px 0px;\r\n}\r\n[selector='BtnReports'] .btn-link{\r\n background-color: #D9EFFB;\r\n color: #0052D4 !important;\r\n font-size: 17px !important;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n border-radius: 4px 4px 4px 4px !important;\r\n line-height: 24.51px;\r\n text-transform: capitalize;\r\n padding: 5px 10px 5px 10px !important;\r\n margin:0px 0px 10px 0px;\r\n float:right;\r\n right: 0;\r\n}\r\n[selector='BtnReports'] .btn-light{\r\n background-color: #FFFFFF;\r\n color: #556271 !important;\r\n font-size: 17px !important;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n border-radius: 0 !important;\r\n line-height: 24.51px;\r\n text-transform: capitalize;\r\n padding: 5px 10px 5px 10px !important;\r\n margin:0px 0px 10px 0px;\r\n float:right;\r\n right: 0;\r\n}\r\n\/*****\/\r\n[selector='GridExpenses'] .row{\r\n flex-wrap: nowrap !important;\r\n}\r\n[selector='GridExpenses'] .col-sm-4{\r\n padding-right: 10px !important;\r\n padding-left: 5px !important;\r\n max-width: 35%;\r\n}\r\n[selector='GridExpenses'] .col-sm-8{\r\n padding-right: 5px !important;\r\n padding-left: 15px !important;\r\n max-width: 65%;\r\n}\r\n\/***BgGridExpenses***\/\r\n[selector='BgGridExpenses'] .pm-TitleDetails { \r\n color: #566877;\r\n font-family: 'Trebuchet MS';\r\n font-size: 17px;\r\n font-weight: 600;\r\n margin: 0 !important;\r\n margin-top: 10px !important;\r\n}\r\n.pm-TextDetails{ \r\n color: #566877; \r\n font-style: normal;\r\n font-family: 'Trebuchet MS'; \r\n font-size: 14px;\r\n font-weight: 400;\r\n}\r\n[selector='BgGridExpenses'] .form-group{\r\n margin-bottom: 0 !important;\r\n padding-top: 0 !important;\r\n}\r\n[selector='BgGridExpenses'] .col-sm-1{\r\n padding-right: 0px !important;\r\n padding-left: 0px !important;\r\n max-width: 10% !important;\r\n}\r\n[selector='BgGridExpenses'] .col-sm-3{\r\n padding-right: 5px !important;\r\n padding-left: 0px !important;\r\n max-width: 30%;\r\n \/*background-color: greenyellow;*\/\r\n}\r\n[selector='BgGridExpenses'] .col-sm-4{\r\n padding-right: 5px !important;\r\n padding-left: 0px !important;\r\n max-width: 40%;\r\n \/*background-color: greenyellow;*\/\r\n}\r\n[selector='BgGridExpenses'] .col-sm-5{\r\n padding-right: 0px !important;\r\n padding-left: 0px !important;\r\n \/*background-color: greenyellow;*\/\r\n}\r\n[selector='BgGridExpenses'] .col-sm-6{\r\n padding-right: 0px !important;\r\n padding-left: 5px !important;\r\n \/*background-color: greenyellow;*\/\r\n}\r\n[selector='BgGridExpenses'] .col-sm-7{\r\n padding-right: 5px !important;\r\n padding-left: 5px !important;\r\n max-width: 60%;\r\n \/*background-color: yellow;*\/\r\n}\r\n[selector='BgGridExpenses'] .col-sm-9{\r\n padding-right: 5px !important;\r\n padding-left: 5px !important;\r\n max-width: 80%;\r\n}\r\n[selector='BgGridExpenses'] .col-sm-11{\r\n padding-right: 0px !important;\r\n padding-left: 0px !important;\r\n max-width: 90%;\r\n}\r\n[selector='BgGridExpenses'] .col-sm-2{\r\n padding-right: 5px !important;\r\n padding-left: 5px !important;\r\n max-width: 20%;\r\n}\r\n\r\n[selector='BgGridExpenses'] .row{\r\n flex-wrap: nowrap !important;\r\n background-color: #FFFFFF;\r\n margin-right: 0;\r\n margin-left: 0;\r\n padding:0px 0px 0px 0px !important;\r\n}\r\n[selector='BgGridExpenses'] .col-sm-4{\r\n flex-wrap: nowrap !important;\r\n background-color: #FFFFFF;\r\n margin-right: 0;\r\n margin-left: 0;\r\n padding:0px 0px 5px 0px;\r\n}\r\n\/*****GridReports****\/\r\n[selector='BgGridReports'] .col-sm-1{\r\n padding-right: 0px !important;\r\n padding-left: 0px !important;\r\n max-width: 18%;\r\n}\r\n[selector='BgGridReports'] .col-sm-3{\r\n padding-right: 5px !important;\r\n padding-left: 0px !important;\r\n max-width: 30%;\r\n \/*background-color: greenyellow;*\/\r\n}\r\n[selector='BgGridReports'] .col-sm-8{\r\n padding-right: 5px !important;\r\n padding-left: 15px !important;\r\n max-width: 60%;\r\n \/*background-color: yellow;*\/\r\n}\r\n\/****GridReports***\/\r\n[selector='BgGridReports'] .row{\r\n flex-wrap: nowrap !important;\r\n background-color: #FFFFFF;\r\n margin-right: 0;\r\n margin-left: 0;\r\n padding:0px 0px 5px 0px;\r\n}\r\n[selector='BgGridReports'] .col-sm-4{\r\n flex-wrap: nowrap !important;\r\n background-color: #FFFFFF;\r\n margin-right: 0;\r\n margin-left: 0;\r\n padding:0px 0px 5px 0px;\r\n}\r\n\/***ADD-inline-content**\/\r\n\r\n[selector='inline-content'] {\r\n padding: 10px 0px 10px 0px;\r\n}\r\n\r\n[selector='inline-content'] div {\r\n display: flex;\r\n}\r\n\r\n[selector='inline-content'] p {\r\n margin: auto;\r\n}\r\n\r\n[selector='inline-content'] .btn-light {\r\n background-color: white;\r\n border: 1px solid #CDDDEE;\r\n margin: 5px 10px;\r\n border-radius: 5px !important;\r\n font-size: 15px;\r\n padding: 5px 10px;\r\n}\r\n[selector='inline-content'] .Btn-PagText{\r\n background-color: white;\r\n border: 1px solid #CDDDEE;\r\n padding: 5px 10px;\r\n border-radius: 5px;\r\n color:#556271;\r\n font-size: 15px;\r\n}\r\n\r\n\/***END-inline-content***\/\r\n\r\n\/*******************UploadFile*************\/\r\n\r\n[selector='Bg-uploader']{\r\n border: 1px solid #CDDDEE !important;\r\n border-radius: 12px;\r\n padding: 10px !important;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n font-size: 12px;\r\n font-weight: 600;\r\n background-color: #F3F9FE;\r\n margin-bottom: 15px;\r\n}\r\n[selector='Bg-uploader'] .uploader {\r\n display: inline-block;\r\n width: auto;\r\n}\r\n[selector='Bg-uploader'] label {\r\n width: 100%;\r\n border: none;\r\n background: white !important;\r\n color: #556271 !important;\r\n border-radius: 17px !important;\r\n -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4);\r\n -moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.4);\r\n box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1)!important;\r\n font-size: 15px;\r\n}\r\n[selector='Bg-uploader'] .uploader-list {\r\n width: 100%;\r\n}\r\n\r\n[selector='Bg-uploader'] .uploader-list .btn-outline{\r\n display: none;\r\n}\r\n\r\n[selector='Bg-uploader'] .required-asterisk {\r\n display: none;\r\n}\r\n[selector='Bg-uploader'] .form-control-file, .form-control-range {\r\n width: 100%;\r\n margin: auto;\r\n}\r\n[selector='Bg-uploader'] .was-validated {\r\n display: block;\r\n}\r\n[selector='Bg-uploader'] .form-control-file p{\r\n display:none;\r\n}\r\n\r\n[selector='container-position']{\r\n background-color: #F2F8FE;\r\n border:1px solid #CDDDEE;\r\n height: auto !important;\r\n margin:auto !important;\r\n}\r\n.ImgContainer {\r\n vertical-align: middle;\r\n border-style: none;\r\n max-width: 40%;\r\n display: flex;\r\n margin: auto;\r\n margin-top: 15px;\r\n}\r\n[selector='selectedExpensePreview'] > div {\r\n text-align: center;\r\n}\r\n\r\n.TextValue {\r\n color:#1572C2;\r\n font-weight: 600;\r\n font-size: 17px;\r\n font-family: 'Trebuchet MS';\r\n text-align: right;\r\n margin-top: -8px;\r\n float: right;\r\n}\r\n\r\n[selector='BgReport'] .btn-light{\r\n width: 100%;\r\n border: none;\r\n background: white !important;\r\n color: #556271 !important;\r\n border-radius: 17px !important;\r\n -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4);\r\n -moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.4);\r\n box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1)!important;\r\n font-size: 14px !important;\r\n font-weight: 500;\r\n padding: 5px 5px;\r\n}\r\n[selector='borderBg']{\r\n background-color: #FFFFFF;\r\n border: 1px solid #CDDDEE;\r\n}\r\n[selector='BgContainerMobile']{\r\n text-align: center;\r\n background-color: #FFFFFF;\r\n margin: 0 auto;\r\n padding-top: 15%;\r\n padding-bottom: 30%;\r\n}\r\n.lead {\r\n text-align: center;\r\n color:#556271;\r\n font-size: 24px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n}\r\n.leadText {\r\n text-align: center;\r\n color:#556271;\r\n font-size: 16px;\r\n font-weight: 400;\r\n line-height: 31.22px;\r\n font-family: 'Trebuchet MS';\r\n}\r\n[selector='cleared'] img{\r\n text-align: center;\r\n margin: auto;\r\n vertical-align: middle;\r\n}\r\n\/**************AND status following**************\/\r\n.Inreview{\r\n background-color: #FFF0DB;\r\n color:#404040;\r\n border-radius: 4.5px 4.5px 4.5px 4.5px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n \/*max-width: 70%;*\/\r\n text-align: center;\r\n padding: 4px 8px;\r\n}\r\n.Processing{\r\n background-color: #E8F1F7;\r\n color:#404040;\r\n border-radius: 4.5px 4.5px 4.5px 4.5px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n \/*max-width: 70%;*\/\r\n text-align: center;\r\n padding: 4px 8px;\r\n}\r\n.Reported{\r\n background-color: #C8F0CF;\r\n color:#404040;\r\n border-radius: 4.5px 4.5px 4.5px 4.5px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n text-align: center;\r\n padding: 4px 8px;\r\n}\r\n.Unreported{\r\n background-color: #FEE6E5;\r\n color:#404040;\r\n border-radius: 4.5px 4.5px 4.5px 4.5px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n text-align: center;\r\n padding: 4px 8px;\r\n}\r\n.Scanning{\r\n background-color: #fbdade !important;\r\n color:#404040;\r\n border-radius: 4.5px 4.5px 4.5px 4.5px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n \/*max-width: 70%;*\/\r\n text-align: center;\r\n padding: 4px 8px;\r\n}\r\n.labelUnreported{\r\n background-color: #FEE6E5;\r\n color:#404040;\r\n border-radius: 4.5px 4.5px 4.5px 4.5px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n text-align: center;\r\n padding: 4px 8px;\r\n}\r\n\r\n.labelUnreported{\r\n background-color: #FEE6E5;\r\n color:#404040;\r\n border-radius: 4.5px 4.5px 4.5px 4.5px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n text-align: center;\r\n padding: 4px 8px;\r\n}\r\n.labelTextExpenses{\r\n background-color: #E9ECF1;\r\n color:#404040;\r\n border-radius: 4.5px 4.5px 4.5px 4.5px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n \/*max-width: 70%;*\/\r\n width: fit-content;\r\n text-align: center;\r\n padding: 4px 8px;\r\n margin-bottom: 0px !important;\r\n}\r\n.labelName{\r\n background-color: #ffeabf;\r\n color:#404040;\r\n border-radius: 4.5px 4.5px 4.5px 4.5px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n text-align: center;\r\n padding: 4px 8px;\r\n margin-bottom: 0rem !important;\r\n}\r\n.labelNameExpenses{\r\n background-color: #E9ECF1;\r\n color:#404040;\r\n border-radius: 4.5px 4.5px 4.5px 4.5px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n width: 100%;\r\n text-align: center;\r\n padding: 4px 8px;\r\n margin-bottom: 0rem !important;\r\n}\r\n\r\n\/**********End - status following**********\/\r\n\r\n[selector='textData'] .btn-link{\r\n color: #566877 !important;\r\n font-size: 17px !important;\r\n font-weight: 600 !important;\r\n font-family: 'Trebuchet MS' !important;\r\n padding: 0px !important;\r\n text-align: left !important;\r\n text-transform: capitalize !important;\r\n line-height: normal !important;\r\n}\r\n[selector='textData'] .form-group{\r\n margin-bottom:0px !important;\r\n}\r\n[selector='textData'] .col-sm-8{\r\n padding-right: 0px !important;\r\n padding-left: 0px !important;\r\n}\r\n[selector='textPaid']{\r\n margin-top: 10px;\r\n}\r\n[selector='textPaid'] p{\r\n font-family: 'Trebuchet MS' !important;\r\n padding: 0px !important;\r\n text-align: left !important;\r\n text-transform: capitalize !important;\r\n margin-bottom: 0rem !important;\r\n}\r\n[selector='textPaid'] .form-group{\r\n margin-bottom: 0px !important;\r\n}\r\n\r\n[selector='textPaid'] .col-sm-8{\r\n padding-right: 0px !important;\r\n padding-left: 0px !important;\r\n}\r\n\/***TextpaidReport**\/\r\n[selector='textPaidReport']{\r\n margin-top: 10px;\r\n}\r\n[selector='textPaidReport'] p{\r\n font-family: 'Trebuchet MS' !important;\r\n padding: 0px !important;\r\n text-align: right !important;\r\n text-transform: capitalize !important;\r\n margin-bottom: 0rem !important;\r\n}\r\n[selector='textPaidReport'] .form-group{\r\n margin-bottom: 0px !important;\r\n}\r\n\/****\/\r\n[selector='textTotal'] p{\r\n color: #8f98a1 !important;\r\n font-size: 14px !important;\r\n font-weight: 600 !important;\r\n font-family: 'Trebuchet MS' !important;\r\n padding: 0px !important;\r\n text-align: left !important;\r\n text-transform: capitalize !important;\r\n margin-top: 0;\r\n margin-bottom: 0rem !important;\r\n}\r\n[selector='textTotal'] .form-group{\r\n margin-bottom: 0px !important;\r\n}\r\n\r\n[selector='btn-bx1'] .btn-primary {\r\n background-color: #2381C8;\r\n border:1px solid #2381C8;\r\n color:#FFFFFF;\r\n width: 100%;\r\n border-radius: 30px;\r\n padding: 5px;\r\n font-size: 14px;\r\n text-transform: capitalize;\r\n font-weight: 600;\r\n line-height: 24.56px;\r\n font-family: 'Trebuchet MS';\r\n}\r\n[selector='btn-bx2'] .btn-secondary{\r\n background-color: #FFFFFF;\r\n border: 1px solid #CDDDEE;\r\n color: #556271;\r\n width: 100%;\r\n border-radius: 30px;\r\n padding: 5px;\r\n font-size: 14px;\r\n text-transform: capitalize;\r\n font-weight: 600;\r\n line-height: 24.56px;\r\n font-family: 'Trebuchet MS';\r\n -webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.4);\r\n -moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.4);\r\n box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);\r\n}\r\n[selector='text-title'] {\r\n color: #556271;\r\n font-weight: 400px;\r\n font-size: 39.81px;\r\n line-height: 50.95px;\r\n}\r\n[selector='btn-retry'] button {\r\n color: #276BB9;\r\n font-weight: 700px;\r\n font-size: 15px;\r\n line-height: 19.2px;\r\n}\r\n[selector='btn-new-scan'] button {\r\n color:#556271;\r\n text-transform: none;\r\n font-weight: 400px;\r\n font-size: 16px;\r\n line-height: 21.79px;\r\n}\r\n[selector='btn-cancel'] button {\r\n color: red;\r\n font-weight: 700px;\r\n font-size: 15px;\r\n line-height: 19.2px;\r\n}\r\n\r\n[selector='options-bar-mobile'] {\r\n width: 100%;\r\n display:inline-block;\r\n}\r\n[selector='options-bar-mobile'] > div {\r\n width: 100%;\r\n float: left;\r\n display: flex;\r\n justify-content: space-between;\r\n text-align: center;\r\n}\r\n\r\n[selector='options-bar-mobile'] div {\r\n width: auto;\r\n padding: 0px;\r\n margin: 0 auto;\r\n}\r\n\r\n\r\n\/*******************UploadFile*************\/\r\n[selector='UploadFile'] {\r\n margin-top: -20px;\r\n}\r\n[selector='UploadFile'] .uploader {\r\n display: inline-block;\r\n width: auto;\r\n}\r\n[selector='UploadFile'] .uploader-list>ul{\r\n list-style: none;\r\n padding: 0;\r\n width: 80%;\r\n margin: auto;\r\n margin-left: 5px;\r\n}\r\n[selector='UploadFile'] label {\r\n display: inline-block;\r\n}\r\n[selector='UploadFile'] .uploader-list {\r\n width: 350px;\r\n}\r\n[selector='UploadFile'] .required-asterisk {\r\n display: none;\r\n}\r\n[selector='UploadFile'] .form-control-file > p::after {\r\n content: \"Upload Expense Here\";\r\n font-family: 'Trebuchet MS';\r\n}\r\n\/*\r\n[selector='UploadFile'] .form-control-file, .form-control-range {\r\n width: 80%;\r\n margin: auto;\r\n}*\/\r\n[selector='UploadFile'] .was-validated {\r\n display: block;\r\n}\r\n\/*******End-UploadFile*********\/\r\n\r\n\/****Calendar****\/\r\n[selector='DateStyle'] .vdpHeader{\r\n background: #DEEEFA;\r\n border-bottom: 1px solid #1572C2;\r\n}\r\n\r\n[selector='DateStyle'] .vdpCell.today {\r\n color: #2381C8;\r\n font-weight: 700;\r\n font-size: 11px;\r\n}\r\n[selector='DateStyle'] .vdpInnerWrap{\r\n border: 1px solid #1572C2;\r\n -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4);\r\n -moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.4);\r\n box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1)!important;\r\n}\r\n[selector='DateStyle'] .vdpPeriodControl > button{\r\n color: #1572C2;\r\n font-size: 13px;\r\n font-weight: 700;\r\n font-family: 'Trebuchet MS';\r\n}\r\n[selector='DateStyle'] .vdpCell.selectable:hover .vdpCellContent{\r\n background-color: #6A7888;\r\n color: #FFFFFF;\r\n}\r\n[selector='DateStyle'] .vdpHeadCellContent {\r\n color: #6A7888;\r\n font-size: 10px;\r\n font-weight: 600;\r\n}\r\n[selector='DateStyle'] .vdpCell.selected .vdpCellContent{\r\n background: #1572C2;\r\n color: #fff;\r\n}\r\n[selector='DateStyle'] .vdpArrowNext:after {\r\n border-left-color: #1572C2;\r\n}\r\n[selector='DateStyle'] .vdpArrowPrev:after {\r\n border-right-color: #1572C2;\r\n}\r\n\/****End Calendar****\/\r\n\r\n\/***ADD-inline-content-rep**\/\r\n\r\n[selector='inline-content-rep'] {\r\n padding: 10px 0px 10px 0px;\r\n}\r\n\r\n[selector='inline-content-rep'] div {\r\n display: flex;\r\n}\r\n\r\n[selector='inline-content-rep'] p {\r\n margin: auto;\r\n}\r\n\r\n[selector='inline-content-rep'] .btn-light {\r\n background-color: white;\r\n border: 1px solid #CDDDEE;\r\n margin: 5px 10px;\r\n border-radius: 5px !important;\r\n font-size: 15px;\r\n padding: 5px 10px;\r\n}\r\n[selector='inline-content-rep'] .Btn-PagText{\r\n background-color: white;\r\n border: 1px solid #CDDDEE;\r\n padding: 5px 10px;\r\n border-radius: 5px;\r\n color:#556271;\r\n font-size: 15px;\r\n}\r\n\r\n\/***END-inline-content-rep***\/\r\n\r\n.imgLogoMobile{\r\n padding-top: 12px;\r\n}\r\n[selector='TextDateReport']{\r\n text-align: left;\r\n margin-top: 15px;\r\n}\r\n[selector='TextDateReport'] p{\r\n color: #556271;\r\n font-size: 12px;\r\n font-family: Trebuchet MS;\r\n margin-bottom: 0rem !important;\r\n line-height: 0px !important;\r\n}\r\n[selector='TextDate']{\r\n text-align: center;\r\n margin-top: 15px;\r\n}\r\n[selector='TextDate'] p{\r\n color: #556271;\r\n font-size: 12px;\r\n font-family: Trebuchet MS;\r\n margin-bottom: 0rem !important;\r\n}\r\n[selector='LogoIcon']{\r\n text-align: center;\r\n margin-top: 15px;\r\n}\r\n.TextPaid{\r\n color: #556271;\r\n font-size: 14px;\r\n font-family: Trebuchet MS;\r\n margin-left: 5px;\r\n}\r\n\r\n.TextInfo{\r\n color: #566877;\r\n font-size: 14px;\r\n font-family: Trebuchet MS;\r\n}\r\n[selector='FormText'] .multiselect .multiselect__tags {\r\n border-bottom: 1px solid #CDDDEE !important;\r\n}\r\n[selector='FormText'] .multiselect__tags {\r\n border: none !important;\r\n}\r\n\r\n[selector='Btn-ReportExpense'] .btn-light {\r\n color: #212529 !important;\r\n font-size: 16px;\r\n background-color: #FFFFFF !important;\r\n border: 1px solid #CDDDEE !important;\r\n width: 100%;\r\n border-radius: 8px 8px 8px 8px !important;\r\n margin-top: 20px;\r\n padding: 10px 10px 10px 10px;\r\n text-transform: capitalize !important;\r\n text-shadow: 1px 1px 0px #CDDDEE;\r\n}\r\n\r\n[selector='Btn-ReportExpense'] .btn-light::before {\r\n font-family: \"Font Awesome 5 Free\";\r\n font-weight: 900;\r\n content: \"\\f15c\";\r\n}\r\n\r\n[selector='Btn-ReportDetails'] .btn-light {\r\n color: #212529 !important;\r\n font-size: 16px;\r\n background-color: #FFFFFF !important;\r\n border: 1px solid #CDDDEE !important;\r\n width: 100%;\r\n border-radius: 8px 8px 8px 8px !important;\r\n padding: 15px 10px 15px 10px;\r\n text-transform: capitalize !important;\r\n\r\n}\r\n[selector='Btn-ReportDetails'] .btn-light:hover {\r\n color: #556271 !important;\r\n font-size: 16px;\r\n background-color: #CDDDEE !important;\r\n border: 1px solid #CDDDEE !important;\r\n width: 100%;\r\n border-radius: 8px 8px 8px 8px !important;\r\n padding: 15px 10px 15px 10px;\r\n text-transform: capitalize !important;\r\n}\r\n[selector='Btn-ReportDetails'] .btn-light::before {\r\n font-family: \"Font Awesome 5 Free\";\r\n font-weight: 900;\r\n content: \"\\f1ea\";\r\n}\r\n\r\n[selector='Btn-Send'] .btn-light {\r\n color: #556271 !important;\r\n font-size: 16px;\r\n background-color: #FFFFFF !important;\r\n border: 1px solid #CDDDEE !important;\r\n width: 100%;\r\n border-radius: 8px 8px 8px 8px !important;\r\n padding: 15px 10px 15px 10px;\r\n text-transform: capitalize !important;\r\n}\r\n[selector='Btn-Send'] .btn-light:hover {\r\n color: #556271 !important;\r\n font-size: 16px;\r\n background-color: #CDDDEE !important;\r\n border: 1px solid #CDDDEE !important;\r\n width: 100%;\r\n border-radius: 8px 8px 8px 8px !important;\r\n padding: 15px 10px 15px 10px;\r\n text-transform: capitalize !important;\r\n}\r\n[selector='Btn-Send'] .btn-light::before {\r\n font-family: \"Font Awesome 5 Free\";\r\n font-weight: 900;\r\n content: \"\\f062\";\r\n}\r\n[selector='GridName'] .col-sm-5 {\r\n padding-left: 0px !important;\r\n padding-right: 0px !important;\r\n}\r\n[selector='GridName'] .col-sm-8 {\r\n padding-right: 0px !important;\r\n padding-left: 5px !important;\r\n}\r\n[selector='BtnReturn'] .btn-primary{\r\n background-color: #FFFFFF;\r\n color: #6A7888;\r\n font-size: 14px;\r\n border: none !important;\r\n text-align: center;\r\n border-radius: 50px;\r\n margin-top: -3px !important;\r\n}\r\n[selector='BtnReturn'] .btn-primary::before {\r\n font-family: \"Font Awesome 5 Free\";\r\n font-weight: 900;\r\n content: \"\\f053\";\r\n}\r\n[selector='ReportName'] p {\r\n margin-bottom: 0rem !important;\r\n}\r\n[selector='Status'] {\r\n width: fit-content;\r\n}\r\n[selector='Status'] p {\r\n margin-bottom: 0rem !important;\r\n}\r\n[selector='Status'] .Scanning{\r\n background-color: #fbdade !important;\r\n color:#404040;\r\n border-radius: 4.5px 4.5px 4.5px 4.5px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n \/*max-width: 70%;*\/\r\n text-align: center;\r\n padding: 4px 8px;\r\n}\r\n[selector='ExpensesDetailsName'] p {\r\n margin-bottom: 0rem !important;\r\n}\r\n\r\n\/***BgGridExpensesLoop***\/\r\n[selector='BgGridExpensesLoop'] .col-sm-1{\r\n padding-right: 5px !important;\r\n padding-left: 5px !important;\r\n max-width: 18%;\r\n}\r\n[selector='BgGridExpensesLoop'] .col-sm-7{\r\n padding-right: 5px !important;\r\n padding-left: 5px !important;\r\n max-width: 60%;\r\n}\r\n[selector='BgGridExpensesLoop'] .col-sm-3{\r\n padding-right: 5px !important;\r\n padding-left: 5px !important;\r\n max-width: 30%;\r\n}\r\n\r\n[selector='BgGridExpensesLoop'] .row{\r\n flex-wrap: nowrap !important;\r\n margin-right: 0;\r\n margin-left: 0;\r\n padding:0px;\r\n \/*background-color: #FFFFFF;\r\n border-bottom:1px solid #CDDDEE ;*\/\r\n}\r\n\r\n[selector='BgReportSent']{\r\n text-align: center;\r\n background-color: #FFFFFF;\r\n margin: 0 auto;\r\n padding-top: 15%;\r\n padding-bottom: 30%;\r\n}\r\n[selector='BgExpensesAdded']{\r\n text-align: center;\r\n background-color: #FFFFFF;\r\n margin: 0 auto;\r\n padding-top: 15%;\r\n padding-bottom: 30%;\r\n}\r\n\r\n[selector='BgCheck'] .form-check {\r\n padding-left: 0rem !important;\r\n margin-top: -10px;\r\n}\r\n[selector='BgCheck'] .form-check-input {\r\n margin-left: 0rem;\r\n} \r\n\r\n[selector='BorderLeft'] {\r\n border-left: 1px solid #CDDDEE;\r\n}\r\n[selector='BorderRight'] {\r\n border-right: 1px solid #CDDDEE;\r\n}\r\n[selector='BorderLeft'] .col-sm-12{\r\n padding-right: 0px !important;\r\n padding-left: 5px !important;\r\n}\r\n[selector='BorderRight'] .col-sm-12{\r\n padding-left: 0px !important;\r\n padding-right: 0px !important;\r\n}\r\n\r\n[selector='Btn-NewReport'] .btn-light {\r\n color: #20242A !important;\r\n font-size: 16px;\r\n background-color: #FFFFFF !important;\r\n border: 1px solid #D7DDE5 !important;\r\n width: 100%;\r\n border-radius: 8px 8px 8px 8px !important;\r\n padding: 10px 10px 10px 10px;\r\n text-transform: capitalize !important;\r\n}\r\n[selector='Btn-NewReport'] .btn-light:hover {\r\n color: #20242A !important;\r\n background-color: #D7DDE5 !important;\r\n border: 1px solid #D7DDE5 !important;\r\n}\r\n[selector='Btn-NewReport'] .btn-light::before {\r\n font-family: \"Font Awesome 5 Free\";\r\n font-weight: 900;\r\n content: \"\\2b\";\r\n}", + "created_at": "2024-09-12 21:09:42", + "updated_at": "2024-09-12 21:09:42", + "status": "ACTIVE", + "key": null, + "watchers": [], + "translations": null, + "is_template": 0, + "asset_type": null + }, + { + "id": 7342, + "screen_id": 2009, + "screen_category_id": 223, + "draft": 0, + "title": "Expense Report - Launcher Expenses Manager Copy 13", + "description": "Expense Report - Launcher Expenses Manager", + "type": "FORM", + "config": [ + { + "name": "Upload Expense Document", + "items": [ + { + "label": "Nested Screen", + "config": { + "icon": "fas fa-file-invoice", + "name": "Nested Screen", + "label": "Nested Screen", + "value": null, + "screen": 2008, + "variant": "primary" + }, + "component": "FormNestedScreen", + "editor-control": "FormNestedScreen", + "editor-component": "FormNestedScreen" + }, + { + "items": [ + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

 <\/em><\/span> Expense uploaded<\/p>", + "interactive": true, + "renderVarHtml": false, + "conditionalHide": "false", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "items": [ + [], + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

\n
\n
\n

 <\/em><\/h3>\n<\/div>\n
\n

The system encountered an unsupported document format during processing. Please ensure that the uploaded document is an image of an expense<\/p>\n<\/div>\n<\/div>\n<\/div>\n", + "interactive": true, + "renderVarHtml": true, + "conditionalHide": "uploadError", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "AlertMessage" + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ], + [] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "2" + }, + { + "value": "2", + "content": "8" + }, + { + "value": "3", + "content": "2" + } + ], + "conditionalHide": "not receiptUpload" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "conditionalHide": "not selectedExpense", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": null + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [ + { + "items": [ + [ + { + "items": [ + [ + { + "label": "Submit Button", + "config": { + "icon": "fas fa-share-square", + "name": "btn_tab", + "event": "script", + "label": "My Reports", + "loading": false, + "tooltip": [], + "variant": "light", + "fieldValue": "reports1", + "loadingLabel": "Loading...", + "defaultSubmit": true, + "customCssSelector": "BtnReports" + }, + "component": "FormButton", + "editor-control": "FormSubmit", + "editor-component": "FormButton" + } + ], + [ + { + "label": "Submit Button", + "config": { + "icon": "fas fa-share-square", + "name": "btn_tab", + "event": "script", + "label": "My Expenses", + "loading": false, + "tooltip": [], + "variant": "link", + "fieldValue": "expenses2", + "loadingLabel": "Loading...", + "defaultSubmit": true, + "conditionalHide": "btn_tab == \"expenses1\"", + "customCssSelector": "BtnExpenses" + }, + "component": "FormButton", + "editor-control": "FormSubmit", + "editor-component": "FormButton" + }, + { + "label": "Submit Button", + "config": { + "icon": "fas fa-share-square", + "name": "btn_tab", + "event": "script", + "label": "My Expenses", + "loading": false, + "tooltip": [], + "variant": "link", + "fieldValue": "expenses1", + "loadingLabel": "Loading...", + "defaultSubmit": true, + "conditionalHide": "not btn_tab or btn_tab == \"expenses2\"", + "customCssSelector": "BtnExpenses" + }, + "component": "FormButton", + "editor-control": "FormSubmit", + "editor-component": "FormButton" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "6" + }, + { + "value": "2", + "content": "6" + } + ], + "conditionalHide": "not btn_tab or btn_tab == \"expenses1\" or btn_tab == \"expenses2\"", + "customCssSelector": "GridExpenses" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "customCssSelector": "MenuSpaces" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + { + "items": [ + [ + { + "items": [ + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

{{data.receiptDateMonth}}<\/p>\n

{{data.receiptDateDay}}<\/p>", + "interactive": true, + "renderVarHtml": false, + "conditionalHide": null, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "TextDate" + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "BorderRight" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "MultiColumn", + "editor-component": "MultiColumn" + } + ], + [ + { + "label": "Submit Button", + "config": { + "icon": "fas fa-share-square", + "name": "receiptButton", + "event": "script", + "label": "{{data.receiptMerchant_label}}", + "loading": false, + "tooltip": [], + "variant": "link", + "fieldValue": "{{id}}", + "loadingLabel": "Loading...", + "defaultSubmit": true, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "textData" + }, + "component": "FormButton", + "editor-control": "FormSubmit", + "editor-component": "FormButton" + }, + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

{{data.requestStatus}}<\/p>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "Status" + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ], + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

You Paid<\/p>\n

USD 35<\/p>", + "interactive": true, + "renderVarHtml": false, + "conditionalHide": "false", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "textPaid" + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

You Paid<\/p>\n

USD{{data.receiptAmount}}<\/p>", + "interactive": true, + "renderVarHtml": false, + "conditionalHide": null, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "textPaid" + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "1" + }, + { + "value": "2", + "content": "8" + }, + { + "value": "2", + "content": "3" + } + ], + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "BgGridExpenses" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "MultiColumn", + "editor-component": "MultiColumn" + }, + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

.<\/p>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ], + "label": "Loop", + "config": { + "icon": "fas fa-redo", + "name": "expenses.receipts", + "label": null, + "settings": { + "add": false, + "type": "existing", + "times": "3", + "varname": "expenses.receipts" + }, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "receipts_list" + }, + "component": "FormLoop", + "container": true, + "editor-control": "Loop", + "editor-component": "Loop" + }, + { + "items": [ + [ + { + "label": "Submit Button", + "config": { + "icon": "fas fa-share-square", + "name": "goToPage", + "event": "script", + "label": "<", + "loading": false, + "tooltip": [], + "variant": "light", + "fieldValue": "{{expenses.prev}}", + "loadingLabel": "Loading...", + "defaultSubmit": true, + "conditionalHide": "expenses.page > 1", + "customCssSelector": "btn_prev" + }, + "component": "FormButton", + "editor-control": "FormSubmit", + "editor-component": "FormButton" + }, + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

{{expenses.text}}<\/p>", + "interactive": true, + "renderVarHtml": false + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "label": "Submit Button", + "config": { + "icon": "fas fa-share-square", + "name": "goToPage", + "event": "script", + "label": ">", + "loading": false, + "tooltip": [], + "variant": "light", + "fieldValue": "{{expenses.next}}", + "loadingLabel": "Loading...", + "defaultSubmit": true, + "conditionalHide": "expenses.page < expenses.top", + "customCssSelector": "btn_next" + }, + "component": "FormButton", + "editor-control": "FormSubmit", + "editor-component": "FormButton" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "conditionalHide": "expenses.top > 1", + "customCssSelector": "inline-content" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "conditionalHide": "not selectedExpense and action != \"expense_update\"", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "expenses-list" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [ + { + "label": "Image", + "config": { + "icon": "fas fa-image", + "name": "Social%2003", + "event": "submit", + "image": "data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIYAAACGCAYAAAAYefKRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAuxSURBVHgB7Z1fbFPXHce\/1zdxkuWf3UQNCyrYKTTjoWuoCn3plGRSX9imhSemdRtB66RuLzOT+rAHmmRM6kMfCk\/wMIl0E5OmPZCh0ad1CRtPLRoBNLVASwyMDBAsTkJI4vj67vyubZSE3MSxz7n33OPzkawk2AZjf\/P9\/c7v9zvnAhqNRqPRaDQajUaj0Wg0Go1Go9FoNBqNRqPRaDQanhjQOExM2T3sy\/fZLWIDMfbGJGFiDBbOx6NGEhVGRQuDiSGSBRLsTfgl+zHi9jh2\/zEmjsOoICpWGEwUXcwZzrBvY0U+ZXwa6N0dNVKoAEKoQL6ashNMFJdQvCiIribgFCqEihMGE8Ugs8kPUQLseX03crmI8lSUMPKiGEAZmGU+PyhUTI7x5ZTdF8rlFGXDco2o6rlGRTgGSzRjoRLDx1rUby43CSSVEkrI\/mPgRDXQDMVRXhgshPSzFUg\/NJtCeWGEBCSLS06aoTZKC4PcAgLygTkqlyuO0quSm1P2BAQIoyNqKL+aU9YxRLlFpaCsMEIVUogShZLCyLfQYxDE5Ly9HYqjqmMchEAWF9AFxVFSGKxu0QOBZKGFEThEhxHCECw8GVDRMYSGkTw9l6bsCBRGKWHQqB4LI33wgKbcOKCyKCUMKycKT36TDcX7L0oJw+PaRWxixvYibPmCMqVdSjpZGBmFICZnM7j4nzSuPVzCbDqLyRkL9+es5J2UNcbexWTIzp5PHXlhDIqgkjBGeS9TL95dxOjNBZy99gSzi3YxT0nZNkaWMumhhaF4EgFGCWFQXyTEcYJ7djGL9\/4+xUSxiJKxMTRzZOsgAooSwuDZRZ2cyeDtkUcsdFjgwHh6Kb0\/iO4R+OSTJr8hpyiIrnBVeLR2YCKGgBFox6Ah3\/zGIS5L1H2\/v89TFMsZDy2le1ND8cBMlgfaMfKrEC6iOPnpjChREF2Z6ppAjQEEVhi8Q8jJzx5DJCHYiYajd3oQEAIpDB47ypZDeYUXGIYZGNcInDBoacpTFGc\/fyIyhKzAgN0TFNcIlDB41yuIk5\/NwkuC4hqBEQaFD96iKMUtfrG3AT\/fU49SYa7RFRmYkL5lL70waElK5W5DQINss26xLWLi\/Teb8J3O2qIe60LEqg53Q3KkFga5BNUpRIzqleIWv\/5Wo\/P13LWFdR934nsRnHur1fV+IwCjgVWQDBq2YXI9aGeRgMARvVJyi23NVbidyuDcdXdhkFP88Jtfw9V7adfHtNSZXTOQGymEQWKgIRtmvt3OBFZW7LDN6M35klYip6\/M4er9DG5Puz\/35baw8\/UKe5wb8eeq+j5h\/R3mHL2yngjouTAoZ2Bvaw8TwSvsRypp0yFpdH4Fimpsc+D05TmUwh+vzG\/4mOmFnGhOfOpeMKOCGnL\/94kbU\/bQzqgxCMkQ3iuZyA3NUkw9mM8VYvAR+lD2\/eEBePByWzWmWYv+dsp65s+v3l9yfV5jTQj\/fHvL8j9Ksg9iP3OPcUiCsOSTBJFPHieop5E\/oyIGn+FRt2iuDeHcj1rwxvYwTnw3guaalb9f64mCoHmPVYM\/TjOQvWenyFEhAdwdo9hDVf2Ap1sUIHGQMM5d39xQz8c\/aUN749pLWuY\/QywQHfPznC+ujpFvgxdqDtIVcU5f5t8ou3ArvWlREOuNCtLJgM3kID4OG3MTRkEUkHSNTm4xOlHGqB5nKJxsQMy2MEzTaX4IhJsw8qKIQVLOfuFds6wYaOq8SByBeJ1\/cBEGz9kIEZBbnP1i46WmzFDyTr98dF4pPKBsYZCKDW\/2i5YM5RYyuQVR5HaE1VC958yN3C+iUMoWhiVBbWI9yC1OX3kC2Sgix3CFklPm0lw7zaspWximxG5Bb75X01leQ3tnWWJ6SdSu+7KFYUvsFoIHfGVA2KUylD2cjfIKGUMIb+hSGSzP43ZOegEewpBurwTlFR9ckL2xzQ\/m2gneq5WyhcEUOwKJKOwmqzRo7JFnvsHDMY5DEtcoJJuK5xVuRHie8lO2MFirOMUWXocgAbRDPSiiaG8ywRvm3glersEl+dwRNUb8Fsd7n5R5bIHHNIaF5P2RCKfyAbdXx8QxzD6WOHw4mZ+WpUEredOwjgh4HU7H9dXtihrJjqgRZ5Y2CI\/yDhKF6H2nIhAlDHDqbgt5dSzvGGLusTsvkCQEQeEjiKIg3IZ0OMAlx\/DkfIwvH9r9pvl05rNsaPXxwYXpwHZM15j55AqP66l4Uvnc0WoMMxfppRwka+FQvvZRUqgpLEmD3EbvbK2GQLiEcE+3D+zK7aEYzt9wZ8ruTrNmkFFkh1bAUUi+0NkiVBhcJs197ZW8EDXOvxg1DlHCSk6CdfKRaw\/TyhSvRNQwChj5X7pykaaJRuGG\/ad2szzk2Or7qCF24E8Plalovra1BoJIspD9ETgg1d7VeG5c\/vBXj+xbRggfUj5By1GVuqTkFp2tYt72\/CqQC9JtaiZebDGO\/fnfi81H\/jY1qFrf47V2MW7BnHawg5NbEFIKo+m3k4mfnnmYgIL0xjc+W2OzkChYrjYEjkglDDppxgrXnILtzSS011AY6e3gKwyaxWCiOA7OSCOMxqO3+7KGecqw1b1yEOcwQhuh+1n4OA8B+C6MyPv\/jdmWfcqGcy0zpXlnbyM4kKKVG+\/QsRpfhdF09O5g1spKt\/lZBCSKMvsjjiBmgONebHb25SzxLYnRmGWGR2FbMTtUBdukWw2yVXXOV\/pZJSi3+PjHbSgBEsMYKzYdiwsKGW748glYIXOAREHfG9mMc8PSAkxMO\/fbZhhWTSOy1Q3Si8SwcxuHbGPtWiGJ4nd9rdgESSaGEfa3jTBbuOzXUQj+vOuG0cVWHu53W2lUPaGB3kc5kdRG8m7iv0hICOZ8CkZm3nmdy4VhV4Udx7PCjez7mqei2CCEpPJNxTGWmo61R41bkADpPdsRyVzusBN6w61aetPr4DWOIJ78D+bitOv9BnM9x\/kWprFv91b86s04a7GvGa3HnBCxhL\/En5fneKXl+CIMum5YKWddmulZ52aHqmHVRZEN17taOE\/M9BxMJs6CO6xHY20Vfta9HQf2tq++y0kemaSHZXGF9fBFGJls5qPqkEmVzZJWI0Z2yXERe76ahZhaJpLnhIQZCgVVjx\/g\/uONwzwJ4gevb8WB19uZS6x4LWPUw\/A6eSwXX1YlRGtiNGGETC5b6+hDeXHb13FnsY5bB\/atVxrwzp5GJxT8KzmNv165h+v35nBvehGzCxnn32yoNfHqtghejTWj+xstKwTB3GGYedlw0ARRwDdhEC2J0f6QERpgyWgMm2RnW73zgfR0tmLnlvqnHwodBU0n85UqEGqJv\/tGU8lTViSINDC0S9KDXYvFV2EUaH33H92w0MdeTZeRZSVxY1mIsZHqeL4+tacj0vNSWwM62W1LtGa1XT8DCeTstXnn2qnFQGHjN9+OMmGEUSKBDBluSCGMjaBh4pBZ2nb\/i3fTzjS5m4OQQ1DIKEMQyayFwztaDan28JaL8sIoQAKhqy5PPs44u8BoWKa3o66sMnW+RD3k53mcolCr9rwO5AhluMJqhHY2ZUDZg1NEQcklK3HtViWXcKNiHIMHooZiZEQLoziSrM23\/yWJrg4gmkAIwzSdjqNfJNmCtzfodYnNEpQcw6+sf5zyiUoTBREUYSThMfkks1fFpWgxBKKOQdAp\/PDoTFESBW2dRAUTmOWqwWmz7kZoUeQIUh1jDOIZZ5XMw9AEJ5TQJbXo+moQN1FekasPNwLjGLTh2VhjJzwntChWEbSSuJDDZqk7qkWxkkAJQ8Rhs7QhWLWWOQ8Ck2Msh+UbAzafsyCc4yeheYZAdlfpuEgeh4RQXgHNmgS27Z4XB32wSZQADdnovMKdQIaS1eRDSz+Kr4yOV3K5uxiUEAbx+ZQdq7bQEzKdq0THXB7myRECKqCMMJYz8cDuQjW2Y+Vut3FmD+e1S2g0Go1Go9FoNBqNRqPRaDQajUaj0Wg0Go1GoxHM\/wEtcHcgrWd9zwAAAABJRU5ErkJggg==", + "label": "Image", + "value": null, + "variant": "primary", + "renderImage": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "cleared" + }, + "component": "FormImage", + "editor-control": "FormImage", + "editor-component": "FormImage" + }, + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

Nothing in here<\/p>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

No new expenses at this moment.<\/p>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "conditionalHide": "not expenses.receipts", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "BgContainerMobile" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "label": "Nested Screen", + "config": { + "icon": "fas fa-file-invoice", + "name": "Nested Screen", + "label": "Nested Screen", + "value": null, + "screen": 2010, + "variant": "primary", + "conditionalHide": "false and (action == \"expense_update\" or selectedExpense)", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "details-screen" + }, + "component": "FormNestedScreen", + "editor-control": "FormNestedScreen", + "editor-component": "FormNestedScreen" + }, + { + "label": "Submit Button", + "config": { + "icon": "fas fa-share-square", + "name": "checkExpensesScan", + "event": "script", + "label": "Do not remove this button", + "loading": false, + "tooltip": [], + "variant": "primary", + "fieldValue": null, + "loadingLabel": "Loading...", + "defaultSubmit": true, + "conditionalHide": "0", + "customCssSelector": "buttonScan" + }, + "component": "FormButton", + "editor-control": "FormSubmit", + "editor-component": "FormButton" + }, + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "goToPage", + "type": "text", + "label": "Do not remove this field", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [], + "placeholder": null, + "defaultValue": { + "mode": "basic", + "value": null + }, + "conditionalHide": "false" + }, + "component": "FormInput", + "editor-control": "FormInput", + "editor-component": "FormInput" + }, + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "dummy_for_reports_list", + "type": "text", + "label": "Do not remove this field", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [], + "placeholder": null, + "defaultValue": { + "mode": "basic", + "value": null + }, + "conditionalHide": "false" + }, + "component": "FormInput", + "editor-control": "FormInput", + "editor-component": "FormInput" + }, + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "selectedExpenseId", + "type": "text", + "label": "Do not remove this field", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [], + "placeholder": null, + "conditionalHide": "false" + }, + "component": "FormInput", + "editor-control": "FormInput", + "editor-component": "FormInput" + } + ], + "order": 1 + } + ], + "computed": [ + { + "id": 4, + "name": "selectedExpense", + "type": "javascript", + "order": 1, + "byPass": false, + "formula": "if([null, \"\", undefined].indexOf(this.expenses) != -1) { return null; }\nif([null, \"\", undefined].indexOf(this.expenses.receipts) != -1) { return null; }\n\nvar exp = this.expenses.receipts;\nvar ret = null;\n\nfor(var i = 0; i < exp.length; i++) {\n\tif(exp[i].receiptButton != null) {\n\t\texp[i][\"data\"][\"expenseId\"] = exp[i].receiptButton;\n\t\texp[i].receiptButton = null;\n\t\tret = exp[i][\"data\"];\n\t}\n}\n\nreturn ret;", + "property": "selectedExpense" + }, + { + "id": 5, + "name": "selectedExpenseId", + "type": "javascript", + "order": 2, + "byPass": false, + "formula": "if([null, \"\", undefined].indexOf(this.selectedExpense) != -1) {\n return null;\n}\n\nreturn this.selectedExpense.expenseId;", + "property": "selectedExpenseId" + }, + { + "id": 6, + "name": "searchScanningExpense", + "type": "javascript", + "order": 3, + "byPass": true, + "formula": "var hasScan = this.expenses.receipts.some(function(item) {\r\n return item.data.requestStatus === \"Scanning\";\r\n});\r\nif(hasScan){\r\n var button = $(\"div[selector='buttonScan']\").find(\"button[name='checkExpensesScan']\");\r\n setTimeout(function() {\r\n button.trigger('click');\r\n \/\/button.prop('disabled', true);\r\n }, 5000);\r\n}\r\nreturn hasScan;", + "property": "searchScanningExpense" + } + ], + "custom_css": ".TextDate{\r\n color:#99a1aa;\r\n font-size: 12px;\r\n font-family: 'Poppins' !important;\r\n font-weight: 400;\r\n}\r\n[selector='DataDate'] p{\r\n margin-bottom: -10px !important;\r\n}", + "created_at": "2024-09-12 21:09:44", + "updated_at": "2024-09-12 21:09:44", + "status": "ACTIVE", + "key": null, + "watchers": [ + { + "input_data": "{\n \"_request\": {\n \"process_id\": \"{{processIdFromUrl}}\"\n },\n \"userId\": \"{{_user.id}}\"\n}", + "script_configuration": "{}", + "synchronous": false, + "show_async_loading": false, + "run_onload": true, + "name": "Fill In Report List", + "watching": "dummy_for_reports_list", + "output_variable": "searchResponse", + "script": { + "id": "script-459", + "uuid": "9b47798d-86a5-47bf-aff6-901b76e8a2eb", + "key": null, + "title": "Expense Report - Get Registered Reports 15", + "description": "Get Registered Reports", + "language": "php", + "code": " $_SERVER['HOST_URL'],'verify' => false]);\n$guzzleOptions['headers']['Accept'] = 'application\/json';\n$guzzleOptions['headers']['Authorization'] = 'Bearer ' . getenv('API_TOKEN');\n\n$guzzleApi = '\/api\/1.0\/requests?page=1&per_page=1000&include=data&pmql=process_id='.$process_id.' and user_id=' . $userId . ' and data.reportName!=\"\" and status=\"ACTIVE\" and data.requestStatus in [\"New\",\"Returned\"]';\n\ntry {\n $res = $guzzleClient->request('GET', $guzzleApi, $guzzleOptions);\n $dataResult = json_decode($res->getBody(), true);\n\n $searchResults = [];\n\n if (is_array($dataResult[\"data\"]) && count($dataResult[\"data\"]) > 0) {\n foreach ($dataResult[\"data\"] as $key => $value) {\n $responseDataResult = getReportData($value);\n $searchResults[] = (object) $responseDataResult;\n }\n }\n\n} catch (\\Throwable $th) {\n return [\n 'errorCode' => $th->getCode(),\n 'errorMessage' => $th->getMessage()\n ];\n}\n\n\n$reportData[\"value\"] = 0;\n$reportData[\"content\"] = \"Create new report\";\n$searchResults[] = (object) $reportData;\nreturn [\n \"searchResults\" => $searchResults\n];\n\nfunction getReportData($sourceData) {\n $reportData[\"value\"] = $sourceData[\"id\"];\n $reportData[\"content\"] = $sourceData[\"data\"][\"reportName\"];\n\n return $reportData;\n}", + "retry_wait_time": 5, + "retry_attempts": 0, + "timeout": 60, + "run_as_user_id": 1, + "created_at": "2024-02-07T13:34:03+00:00", + "updated_at": "2024-05-20T20:04:45+00:00", + "status": "ACTIVE", + "script_category_id": "14", + "script_executor_id": 10, + "is_template": 0, + "asset_type": null, + "projects": "[{\"id\":1,\"uuid\":\"9b3b92d8-70c8-440e-ac65-879086e6c403\",\"user_id\":1,\"title\":\"Expense Approval\",\"status\":\"ACTIVE\",\"deleted_at\":null,\"created_at\":\"2024-02-01T15:34:50+00:00\",\"updated_at\":\"2024-05-27T16:20:39+00:00\"}]" + }, + "script_id": "459", + "script_key": null, + "uid": "17156979355721", + "byPass": false, + "order": 1 + }, + { + "input_data": "{\n \"process_id\": \"{{processIdFromUrl}}\",\n \"userId\": \"{{_user.id}}\",\n \"page\": \"{{goToPage}}\",\n \"collectionId\": \"{{expenses.collectionId}}\"\n}", + "script_configuration": "{\n\t\"per_page\": \"5\",\n\t\"merchant_length\": \"15\"\n}", + "synchronous": false, + "show_async_loading": false, + "run_onload": true, + "name": "Get All Expenses", + "watching": "goToPage", + "script": { + "id": "script-458", + "uuid": "9c1acc92-2330-4c3d-9f58-79ac69d4a5b7", + "key": null, + "title": "Expense Report - Get Full Expenses 12", + "description": "Expense Report - Get All Expenses", + "language": "php", + "code": " $_SERVER['HOST_URL'],'verify' => false]);\n$guzzleOptions['headers']['Accept'] = 'application\/json';\n$guzzleOptions['headers']['Authorization'] = 'Bearer ' . getenv('API_TOKEN');\n\n$userId = $data[\"userId\"];\n$page = $data[\"page\"]\n$per_page = $config[\"per_page\"]\n$expMaxLen = $config[\"merchant_length\"];\n\n\/\/Get collection from collection id = 1\nif(empty($collectionId)) {\n $collectionId = 3;\n}\n\n$guzzleApi = '\/api\/1.0\/collections\/' . $collectionId . '\/records?page=' . $page . '&per_page=' . $per_page . '&order_by=updated_at&order_direction=desc&pmql=data.requestCreator=' . $userId . ' and data.processName=\"Expense\" and data.status=\"ACTIVE\"';\n\ntry {\n $res = $guzzleClient->request('GET', $guzzleApi, $guzzleOptions);\n $dataResult = json_decode($res->getBody(), true)[\"data\"];\n} catch (\\Throwable $th) {\n return [\n 'errorCode' => $th->getCode(),\n 'errorMessage' => $th->getMessage()\n ];\n}\n \n\/\/ Look for file URL\nforeach($dataResult as &$expense) { \n \/\/ Exeptions for Merchant Name for Expense List elements.\n $expense[\"data\"][\"receiptMerchant_label\"] = $expense[\"data\"][\"receiptMerchant\"];\n if(empty($expense[\"data\"][\"receiptMerchant_label\"])) {\n $expense[\"data\"][\"receiptMerchant_label\"] = str_repeat(\"-\", $expMaxLen);\n }\n if(strlen($expense[\"data\"][\"receiptMerchant_label\"]) > $expMaxLen) {\n $expense[\"data\"][\"receiptMerchant_label\"] = substr($expense[\"data\"][\"receiptMerchant_label\"], 0, $expMaxLen) . \"...\";\n }\n\n $filteredExpenses[] = array(\n \"id\" => $expense[\"data\"][\"requestId\"],\n \"data\" => $expense[\"data\"]\n );\n}\n\nreturn [\n \"receipts\" => $filteredExpenses\n];", + "retry_wait_time": 5, + "retry_attempts": 0, + "timeout": 60, + "run_as_user_id": 5, + "created_at": "2024-05-22T14:45:52+00:00", + "updated_at": "2024-07-24T20:14:45+00:00", + "status": "ACTIVE", + "script_category_id": "9", + "script_executor_id": 11, + "is_template": 0, + "asset_type": null, + "projects": "[]" + }, + "script_id": "458", + "script_key": null, + "output_variable": "expenses", + "uid": "17163915808711", + "byPass": false, + "order": 2 + }, + { + "input_data": "{\n \"requestId\": \"{{selectedExpenseId}}\"\n}", + "script_configuration": "{}", + "synchronous": false, + "show_async_loading": false, + "run_onload": false, + "script": { + "id": "script-460", + "uuid": "9c8f9c37-f94f-4955-83c5-b810e004e62b", + "key": null, + "title": "Expense Report - Expense Get File Path 12", + "description": "Expense Report - Expense Get File Path", + "language": "php", + "code": " null];\n}\n\n\/*Init Guzzle (use endpoint) and set options *\/\n$guzzleClient = new \\GuzzleHttp\\Client(['base_uri'=> $_SERVER['HOST_URL'],'verify' => false]);\n$guzzleOptions['headers']['Accept'] = 'application\/json';\n$guzzleOptions['headers']['Authorization'] = 'Bearer ' . getenv('API_TOKEN');\n\n$guzzleApi = '\/api\/1.0\/requests\/' . $requestId . '\/files';\n\n$res = $guzzleClient->request('GET', $guzzleApi, $guzzleOptions);\n$files = json_decode($res->getBody(), true)[\"data\"];\n\nif(is_array($files)) {\n $original_url = $files[0][\"original_url\"];\n}\n\nreturn [\"original_url\" => $original_url];", + "retry_wait_time": 5, + "retry_attempts": 0, + "timeout": 60, + "run_as_user_id": 5, + "created_at": "2024-05-22T18:43:50+00:00", + "updated_at": "2024-07-19T16:22:54+00:00", + "status": "ACTIVE", + "script_category_id": "41", + "script_executor_id": 11, + "is_template": 0, + "asset_type": null, + "projects": "[]" + }, + "script_id": "460", + "script_key": null, + "output_variable": "expFileInfo", + "watching": "selectedExpenseId", + "name": "Get Expense File Path", + "uid": "17223615625661", + "byPass": true, + "order": 3 + }, + { + "input_data": "{\r\n \"process_id\": \"{{processIdFromUrl}}\",\r\n \"userId\": \"{{_user.id}}\",\r\n \"page\": \"{{goToPage}}\",\r\n \"collectionId\": \"{{expenses.collectionId}}\"\r\n}", + "script_configuration": "{\n\t\"per_page\": \"5\",\n\t\"merchant_length\": \"15\"\n}", + "synchronous": false, + "show_async_loading": false, + "run_onload": false, + "name": "Check Scan Expense", + "watching": "checkExpensesScan", + "script": { + "id": "script-458", + "uuid": "9c1acc92-2330-4c3d-9f58-79ac69d4a5b7", + "key": null, + "title": "Expense Report - Get Full Expenses 12", + "description": "Expense Report - Get All Expenses", + "language": "php", + "code": " $_SERVER['HOST_URL'],'verify' => false]);\n$guzzleOptions['headers']['Accept'] = 'application\/json';\n$guzzleOptions['headers']['Authorization'] = 'Bearer ' . getenv('API_TOKEN');\n\n$processId = $data[\"process_id\"];\n$userId = $data[\"userId\"];\n$page = $data[\"page\"];\n$collectionId = $data[\"collectionId\"];\n\n$per_page = $config[\"per_page\"];\n$expMaxLen = $config[\"merchant_length\"];\n\/*\/\n$processId = 28;\n$userId = 9;\n$page = 1;\n$per_page = 5;\n$expMaxLen = 15;\n\/*\/\n\/\/Get collection from collection id = 1\nif(empty($collectionId)) {\n \/\/$collectionId = 2;\n $collectionId = getCacheCollectionId();\n}\n\nif(empty($page)) {\n $page = 1;\n}\n\n\/\/$guzzleApi = '\/api\/1.0\/requests?page=' . $page . '&per_page=' . $per_page . '&order_by=updated_at&order_direction=desc&include=data&pmql=process_id=' . $processId . ' and data.requestCreator.id=' . $userId . ' and data.processName=\"Expense\" and status=\"ACTIVE\"';\n$guzzleApi = '\/api\/1.0\/collections\/' . $collectionId . '\/records?page=' . $page . '&per_page=' . $per_page . '&order_by=updated_at&order_direction=desc&pmql=data.requestCreator=' . $userId . ' and data.processName=\"Expense\" and data.status=\"ACTIVE\"';\n\ntry {\n $res = $guzzleClient->request('GET', $guzzleApi, $guzzleOptions);\n $dataResult = json_decode($res->getBody(), true)[\"data\"];\n} catch (\\Throwable $th) {\n return [\n 'errorCode' => $th->getCode(),\n 'errorMessage' => $th->getMessage()\n ];\n}\n \n$months = [\"JAN\",\"FEB\",\"MAR\",\"APR\",\"MAY\",\"JUN\",\"JUL\",\"AUG\",\"SEP\",\"OCT\",\"NOV\",\"DEC\"];\n \n\/\/ Look for file URL\nforeach($dataResult as &$expense) { \n $temp[\"receiptMerchant\"] = $expense[\"data\"][\"receiptMerchant\"];\n $temp[\"receiptAmount\"] = $expense[\"data\"][\"receiptAmount\"];\n $temp[\"receiptDate\"] = $expense[\"data\"][\"receiptDate\"];\n $temp[\"requestStatus\"] = $expense[\"data\"][\"requestStatus\"];\n $temp[\"reportSelected\"] = $expense[\"data\"][\"reportSelected\"];\n $temp[\"category\"] = $expense[\"data\"][\"category\"];\n $temp[\"category_label\"] = $expense[\"data\"][\"category_label\"];\n $temp[\"comments\"] = $expense[\"data\"][\"comments\"];\n $temp[\"visibility\"] = $expense[\"data\"][\"requestStatus\"] == \"In review\"? true : $expense[\"data\"][\"visibility\"];\n $temp[\"requestId\"] = $expense[\"data\"][\"requestId\"];\n $temp[\"original_url\"] = $expense[\"data\"][\"original_url\"];\n\n $expense[\"data\"] = $temp;\n\n \/\/ Exeptions for Merchant Name for Expense List elements.\n $expense[\"data\"][\"receiptMerchant_label\"] = $expense[\"data\"][\"receiptMerchant\"];\n if(empty($expense[\"data\"][\"receiptMerchant_label\"])) {\n $expense[\"data\"][\"receiptMerchant_label\"] = str_repeat(\"-\", $expMaxLen);\n }\n if(strlen($expense[\"data\"][\"receiptMerchant_label\"]) > $expMaxLen) {\n $expense[\"data\"][\"receiptMerchant_label\"] = substr($expense[\"data\"][\"receiptMerchant_label\"], 0, $expMaxLen) . \"...\";\n }\n\n if(!empty($expense[\"data\"][\"receiptDate\"])) {\n $date = explode(\"-\", $expense[\"data\"][\"receiptDate\"]);\n $expense[\"data\"][\"receiptDateMonth\"] = $months[$date[1] - 1];\n $expense[\"data\"][\"receiptDateDay\"] = $date[2];\n }\n\n \/\/$expense[\"data\"][\"requestStatus_style\"] = $expense[\"data\"][\"requestStatus\"];\n $expense[\"data\"][\"requestStatus_style\"] = implode(\"\", explode(\" \", $expense[\"data\"][\"requestStatus\"]));\n\n \/\/TEC-2250\n $expense[\"data\"][\"original_url\"] = str_replace(\"https:\/\/plg2.plgdev.processmaker.io\",getenv('HOST_URL'),$expense[\"data\"][\"original_url\"]);\n\n $filteredExpenses[] = array(\n \/\/\"id\" => $expense[\"id\"],\n \"id\" => $expense[\"data\"][\"requestId\"],\n \"data\" => $expense[\"data\"]\n );\n}\n\n\/\/$guzzleApi = '\/api\/1.0\/requests?per_page=60&pmql=process_id=' . $processId . ' and data.requestCreator.id=' . $userId . ' and data.processName=\"Expense\" and status=\"ACTIVE\"';\n\/\/$guzzleApi = '\/api\/1.0\/requests?total=true&per_page=60&pmql=process_id=' . $processId . ' and data.requestCreator.id=' . $userId . ' and data.processName=\"Expense\" and status=\"ACTIVE\"';\n$guzzleApi = '\/api\/1.0\/collections\/' . $collectionId . '\/records?total=true&per_page=1000&pmql=data.requestCreator=' . $userId . ' and data.processName=\"Expense\" and data.status=\"ACTIVE\"';\n\ntry {\n $res = $guzzleClient->request('GET', $guzzleApi, $guzzleOptions);\n \/\/$dataResult = json_decode($res->getBody(), true)[\"data\"];\n $dataResult = json_decode($res->getBody(), true)[\"meta\"];\n $pagesCount = ceil($dataResult[\"total\"] \/ $per_page);\n} catch (\\Throwable $th) {\n return [\n 'errorCode' => $th->getCode(),\n 'errorMessage' => $th->getMessage()\n ];\n}\n\n\/\/$pagesCount = ceil(count($dataResult) \/ $per_page);\n\nreturn [\n \"receipts\" => $filteredExpenses,\n \"page\" => $page,\n \"text\" => $page . \" - \" . $pagesCount,\n \"prev\" => $page - 1,\n \"next\" => $page + 1,\n \"top\" => $pagesCount,\n \"total\" => true,\n \"collectionId\" => $collectionId\n];\n\nfunction getCacheCollectionId() {\n global $guzzleClient, $guzzleOptions;\n$guzzleApi = '\/api\/1.0\/collections\/1\/records?pmql=data.processName=\"Expense Report\"';\n\ntry {\n \/*\/\n $res = $guzzleClient->request('GET', $guzzleApi, $guzzleOptions);\n return json_decode($res->getBody(), true)[\"data\"][0][\"data\"][\"cacheCollectionId\"];\n \/*\/\n $res = json_decode($guzzleClient->request('GET', $guzzleApi, $guzzleOptions)->getBody(), true)[\"data\"];\n return $res[count($res) - 1][\"data\"][\"cacheCollectionId\"];\n} catch (\\Throwable $th) {\n return [\n 'errorCode' => $th->getCode(),\n 'errorMessage' => $th->getMessage()\n ];\n}\n}", + "retry_wait_time": 5, + "retry_attempts": 0, + "timeout": 60, + "run_as_user_id": 1, + "created_at": "2024-05-22T14:45:52+00:00", + "updated_at": "2024-08-19T23:32:18+00:00", + "status": "ACTIVE", + "script_category_id": "8", + "script_executor_id": 10, + "is_template": 0, + "asset_type": null, + "projects": "[]" + }, + "script_id": "458", + "script_key": null, + "output_variable": "expenses", + "uid": "17241894417302", + "byPass": true, + "order": 4 + } + ], + "translations": null, + "is_template": 0, + "asset_type": null + }, + { + "id": 7341, + "screen_id": 2008, + "screen_category_id": 1, + "draft": 0, + "title": "Expense Report - General CSS Mobile 13", + "description": "General CSS Mobile - Expenses Process", + "type": "DISPLAY", + "config": [ + { + "name": "General css - Expenses Process", + "items": [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

STYLE GENERAL MOBILE - EXPENSES PROCESS<\/strong><\/h1>", + "interactive": true, + "renderVarHtml": false, + "conditionalHide": "false", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ], + "order": 1 + } + ], + "computed": [], + "custom_css": "\/*****StyleDiego-Version-19-07-24*****\/\r\n[selector=\"check-img\"] {\r\n margin-top: 5em;\r\n text-align: center;\r\n margin-bottom: 4em;\r\n}\r\n\r\n.pm-TitleNotice { \r\n color: #556271; \r\n font-family: 'Trebuchet MS'; \r\n font-size: 20px;\r\n font-weight: 600;\r\n text-align: left;\r\n}\r\n.pm-TitleNotice2 { \r\n color: #566877 !important;\r\n font-size: 17px !important;\r\n font-weight: 600 !important;\r\n font-family: 'Trebuchet MS' !important;\r\n padding: 0px !important;\r\n text-transform: capitalize !important;\r\n margin-bottom: 0rem !important;\r\n}\r\n.pm-SubTitleNotice { \r\n color: #556271; \r\n font-family: 'Trebuchet MS'; \r\n font-size: 17px;\r\n font-weight: 400;\r\n \/*line-height: 30.13px;*\/\r\n margin-bottom: 0px;\r\n}\r\n.pm-TextNotice{ \r\n color: #556271; \r\n font-family: 'Trebuchet MS'; \r\n font-size: 12.8px;\r\n font-weight: 400;\r\n text-align: left;\r\n}\r\n\r\n.pm-TitleExpense{ \r\n color: #556271; \r\n font-family: 'Trebuchet MS'; \r\n font-size: 25px;\r\n font-weight: 600;\r\n line-height: 38.96px;\r\n margin: 0 !important;\r\n text-align: center;\r\n}\r\n.pm-MessageExpense{ \r\n background-color: #F2F9FF; \r\n color: #1572C2;\r\n border: 1px solid #eaf4ff; \r\n font-family: 'Trebuchet MS'; \r\n font-size: 16px;\r\n font-weight: 400;\r\n line-height: 38.96px;\r\n margin: 0 auto!important;\r\n text-align: center;\r\n border-radius: 5px;\r\n box-shadow: -1px 4px 5px -2px rgba(0,0,0,0.37);\r\n -webkit-box-shadow: -1px 2px 5px -4px rgba(0,0,0,0.37);\r\n -moz-box-shadow: -1px 4px 5px -2px rgba(0, 0, 0, 0.37);\r\n}\r\n.form-grid-label { \r\n color: #556271;\r\n font-style: normal;\r\n font-weight: 700;\r\n font-size: 10px !important;\r\n font-family: 'Trebuchet MS';\r\n line-height: 16.34px;\r\n text-transform: uppercase;\r\n}\r\n.form-group label { \r\n color: #556271;\r\n font-style: normal;\r\n font-weight: 700;\r\n font-size: 12px !important;\r\n font-family: 'Trebuchet MS';\r\n line-height: 16.34px;\r\n text-transform: capitalize !important;\r\n}\r\n.labelTextTitle{ \r\n color: #566877;\r\n font-weight: 600;\r\n font-size: 17px !important;\r\n font-family: 'Trebuchet MS';\r\n line-height: 16.34px;\r\n text-transform: capitalize;\r\n}\r\n.form-control {\r\n color: #556271;\r\n border: none;\r\n border-bottom: 1px solid #CDDDEE;\r\n border-radius: 0px;\r\n font-size: 12px;\r\n font-family: 'Trebuchet MS';\r\n}\r\n\r\n[selector='Btn-mobile'] .btn-primary{\r\n color: #ffffff !important;\r\n background-color: #2773F3 !important;\r\n border: 1px solid #2773F3 !important;\r\n border-radius: 8px 8px 8px 8px !important;\r\n text-align: center !important;\r\n text-transform: capitalize !important;\r\n width: 100% !important;\r\n font-size: 14px;\r\n font-family: 'Trebuchet MS';\r\n padding: 8px 5px 8px 5px !important;\r\n}\r\n\r\n[selector='positionDetails']{\r\n text-align: right !important;\r\n}\r\n[selector='positionDetails'] .btn-link {\r\n font-weight: 700;\r\n color: #1572C2;\r\n font-size: 12px !important;\r\n font-family: 'Trebuchet MS';\r\n line-height: 21.79px;\r\n text-transform: capitalize;\r\n}\r\n\r\n\/*********\/\r\n.multiselect__tags {\r\n font-size: 12px !important;\r\n}\r\n.multiselect__option--highlight{\r\n font-size: 12px !important;\r\n}\r\n.multiselect, .multiselect__input, .multiselect__single{\r\n font-size: 12px !important;\r\n}\r\n.multiselect__option--highlight {\r\n background: #F2F8FE !important;\r\n color: #2381C8 !important;\r\n}\r\n.multiselect__option--selected.multiselect__option--highlight {\r\n background: #f1f1f1 !important;\r\n color: #ff6a6a !important;\r\n}\r\n[selector='InfoReportMobile'] .multiselect__tags {\r\n font-size: 12px !important;\r\n}\r\n[selector='InfoReportMobile'] .multiselect .multiselect__tags{\r\n color: #556271;\r\n border: none;\r\n border-bottom: 1px solid #CDDDEE;\r\n border-radius: 0px;\r\n font-size: 12px;\r\n font-family: 'Trebuchet MS';\r\n font-weight: 400;\r\n}\r\n[selector='InfoReportMobile'] .multiselect__tags {\r\n font-size: 12px !important;\r\n}\r\n[selector='InfoReportMobile'] .multiselect__option--highlight{\r\n font-size: 12px !important;\r\n}\r\n[selector='InfoReportMobile'] .multiselect, .multiselect__input, .multiselect__single{\r\n font-size: 12px !important;\r\n}\r\n[selector='InfoReportMobile'] .custom-css-scope .multiselect, .custom-css-scope .multiselect__input, .custom-css-scope .multiselect__single{\r\n font-size: 12px !important;\r\n}\r\n[selector='InfoReportMobile'] .multiselect__option--highlight {\r\n background: #F2F8FE !important;\r\n color: #2381C8 !important;\r\n}\r\n[selector='InfoReportMobile'] .multiselect__option--selected.multiselect__option--highlight {\r\n background: #f1f1f1 !important;\r\n color: #ff6a6a !important;\r\n}\r\n\r\n[selector='container'] {\r\n width: 859px;\r\n margin: 0 auto; \/* center *\/\r\n}\r\n\/*** UPLOAD ***\/\r\n[selector='header']{\r\n border: 1px solid #CDDDEE !important;\r\n border-radius: 12px;\r\n padding: 10px !important;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n font-size: 17px;\r\n font-weight: 600;\r\n background-color: #F3F9FE;\r\n}\r\n[selector='UploadFile'] .form-control-file > p::before{\r\n font-family: \"Font Awesome 5 Free\";\r\n font-size: 3rem;\r\n content: \"\\f030\" !important;\r\n display: block;\r\n color: #0B71C2;\r\n}\r\n\r\n[selector='UploadFile'] .form-control-file > p {\r\n text-align: center;\r\n color: transparent !important;\r\n}\r\n\r\n[selector='UploadFile'] .form-control-file > p::after {\r\n color: #0B71C2 !important;\r\n white-space: pre;\r\n}\r\n[selector='UploadFile'] .form-control-file label {\r\n white-space: break-spaces !important;\r\n}\r\n[selector='UploadFile'] .form-control-file label.btn {\r\n background: white;\r\n border-radius: 50px;\r\n color: transparent !important;\r\n font-size: 13px !important;\r\n font-weight: 500;\r\n max-width: 55%;\r\n margin: auto;\r\n max-height: 32px;\r\n \/*text-align: center !important;*\/\r\n}\r\n\r\n[selector='FileUploads'] .btn{\r\n text-transform: none !important;\r\n}\r\n\r\n[selector='UploadFile'] .form-control-file label.btn::before {\r\n content: \"\u271a Upload an Expense\" !important;\r\n color: #556271 !important;\r\n text-align: center !important;\r\n}\r\n\r\n\/* Media container button styles *\/\r\n.media-container > div {\r\n border: 1px solid #BED4E5;\r\n background: white;\r\n color: transparent !important;\r\n border-radius: 17px;\r\n width: 60%;\r\n margin-left: 20%;\r\n max-height: 45px;\r\n padding: 10px 0;\r\n -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4);\r\n -moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.4);\r\n box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);\r\n}\r\n\r\n.media-container input[type=file] {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n opacity: 0;\r\n margin-left: 20%;\r\n width: 60%;\r\n height: 100%;\r\n}\r\n\r\n\/*************previewFile************\/\r\n[selector='previewFile'] {\r\n border: 1px solid #CDDDEE !important;\r\n border-radius: 12px;\r\n padding: 10px !important;\r\n background-color: #F3F9FE;\r\n margin: auto;\r\n}\r\n[selector='previewFile'] .uploader {\r\n display: inline-block;\r\n width: auto;\r\n}\r\n[selector='previewFile'] label {\r\n display: inline-block;\r\n width: auto;\r\n border: 1px solid #BED4E5 !important;\r\n background: white !important;\r\n color: #556271 !important;\r\n border-radius: 17px !important;\r\n text-transform: capitalize !important;\r\n -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4);\r\n -moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.4);\r\n box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1) !important;\r\n}\r\n[selector='previewFile'] .uploader-list {\r\n width: 100%;\r\n}\r\n[selector='previewFile'] .required-asterisk {\r\n display: none;\r\n}\r\n[selector='previewFile'] .form-control-file, .form-control-range {\r\n width: 65%;\r\n margin: auto;\r\n}\r\n\r\n[selector='previewFile'] .was-validated {\r\n display: block;\r\n}\r\n[selector='previewFile'] img{\r\n max-width: 80% !important;\r\n}\r\n\/*******End-previewFile*********\/\r\n\r\n\/********************************AddstyleDiego******************************\/\r\n[selector='bg-header'] {\r\n background-color: #0052D4;\r\n text-align: center;\r\n}\r\n[selector='card-container-upload-mobile'] {\r\n background-color: #F2F8FE;\r\n border-radius: 12px;\r\n border: 1px solid #CDDDEE;\r\n \/*padding: 5px 0px 20px 0px;*\/\r\n padding: 10px;\r\n text-align: center;\r\n margin-bottom: 20px;\r\n}\r\n[selector='imagePosition'] {\r\n text-align: center;\r\n padding: 10px;\r\n}\r\n[selector='TextPosition'] {\r\n text-align: center;\r\n}\r\n.media-container > div::before {\r\n content: \"Take picture\";\r\n color: #556271 !important;\r\n text-transform: none;\r\n font-size: 16px;\r\n font-family: 'Trebuchet MS'; \r\n font-weight: 400;\r\n line-height: 24px;\r\n}\r\n[selector='Btn-edit'] .btn-secondary{\r\n border: 1px solid #BED4E5 !important;\r\n background: white !important;\r\n color: #556271 !important;\r\n border-radius: 17px !important;\r\n width: 60% !important;\r\n max-height: 45px !important;\r\n padding: 10px 0 !important;\r\n text-transform: capitalize !important;\r\n -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4);\r\n -moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.4);\r\n box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1) !important;\r\n}\r\n.alert-warning {\r\n color: #855900;\r\n background-color: #ffeecc;\r\n border-color: #ffe7b8;\r\n padding: 5px 1px 5px 1px !important;\r\n border-radius: 5px;\r\n margin-bottom: -20px !important;\r\n font-size: 12px;\r\n}\r\n[selector='cancelBtn'] .btn-link {\r\n font-weight: 500;\r\n color: #1572C2;\r\n font-size: 16px;\r\n font-family: 'Trebuchet MS';\r\n border-radius: 20px !important;\r\n line-height: 24.51px;\r\n text-transform: capitalize;\r\n text-align: center;\r\n width: 100%;\r\n margin: auto;\r\n background-color: white;\r\n border: 1px solid #bddfff;\r\n margin-top: 10px !important;\r\n}\r\n[selector='AlertMessage'] .mt-5 {\r\n margin-top: 10px !important;\r\n}\r\n.AlertSucess{\r\n background-color: #ECFFF9;\r\n border-radius: 2px;\r\n border: 1px solid #CDDDEE;\r\n color: #556271;\r\n text-align: center;\r\n padding: 10px 0px;\r\n}\r\n\r\n.imgCircle{\r\n color: #4EA075;\r\n font-size: 20px;\r\n}\r\n\r\n[selector='Btn-DesActive']{\r\n background-color: #bddfff;\r\n}\r\n\r\n\/******\/\r\n[selector='BtnExpenses'] .btn-link{\r\n background-color: #D9EFFB;\r\n color: #0052D4 !important;\r\n font-size: 17px !important;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n border-radius: 4px 4px 4px 4px !important;\r\n line-height: 24.51px;\r\n text-transform: capitalize;\r\n padding: 5px 10px 5px 10px !important;\r\n margin:0px 0px 10px 0px;\r\n}\r\n[selector='BtnExpenses'] .btn-light{\r\n background-color: #FFFFFF;\r\n color: #556271 !important;\r\n font-size: 17px !important;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n border-radius: 0 !important;\r\n line-height: 24.51px;\r\n text-transform: capitalize;\r\n padding: 5px 10px 5px 10px !important;\r\n margin:0px 0px 10px 0px;\r\n}\r\n[selector='BtnReports'] .btn-link{\r\n background-color: #D9EFFB;\r\n color: #0052D4 !important;\r\n font-size: 17px !important;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n border-radius: 4px 4px 4px 4px !important;\r\n line-height: 24.51px;\r\n text-transform: capitalize;\r\n padding: 5px 10px 5px 10px !important;\r\n margin:0px 0px 10px 0px;\r\n float:right;\r\n right: 0;\r\n}\r\n[selector='BtnReports'] .btn-light{\r\n background-color: #FFFFFF;\r\n color: #556271 !important;\r\n font-size: 17px !important;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n border-radius: 0 !important;\r\n line-height: 24.51px;\r\n text-transform: capitalize;\r\n padding: 5px 10px 5px 10px !important;\r\n margin:0px 0px 10px 0px;\r\n float:right;\r\n right: 0;\r\n}\r\n\/*****\/\r\n[selector='GridExpenses'] .row{\r\n flex-wrap: nowrap !important;\r\n}\r\n[selector='GridExpenses'] .col-sm-4{\r\n padding-right: 10px !important;\r\n padding-left: 5px !important;\r\n max-width: 35%;\r\n}\r\n[selector='GridExpenses'] .col-sm-8{\r\n padding-right: 5px !important;\r\n padding-left: 15px !important;\r\n max-width: 65%;\r\n}\r\n\/***BgGridExpenses***\/\r\n[selector='BgGridExpenses'] .pm-TitleDetails { \r\n color: #566877;\r\n font-family: 'Trebuchet MS';\r\n font-size: 17px;\r\n font-weight: 600;\r\n margin: 0 !important;\r\n margin-top: 10px !important;\r\n}\r\n.pm-TextDetails{ \r\n color: #566877; \r\n font-style: normal;\r\n font-family: 'Trebuchet MS'; \r\n font-size: 14px;\r\n font-weight: 400;\r\n}\r\n[selector='BgGridExpenses'] .form-group{\r\n margin-bottom: 0 !important;\r\n padding-top: 0 !important;\r\n}\r\n[selector='BgGridExpenses'] .col-sm-1{\r\n padding-right: 0px !important;\r\n padding-left: 0px !important;\r\n max-width: 10% !important;\r\n}\r\n[selector='BgGridExpenses'] .col-sm-3{\r\n padding-right: 5px !important;\r\n padding-left: 0px !important;\r\n max-width: 30%;\r\n \/*background-color: greenyellow;*\/\r\n}\r\n[selector='BgGridExpenses'] .col-sm-4{\r\n padding-right: 5px !important;\r\n padding-left: 0px !important;\r\n max-width: 40%;\r\n \/*background-color: greenyellow;*\/\r\n}\r\n[selector='BgGridExpenses'] .col-sm-5{\r\n padding-right: 0px !important;\r\n padding-left: 0px !important;\r\n \/*background-color: greenyellow;*\/\r\n}\r\n[selector='BgGridExpenses'] .col-sm-6{\r\n padding-right: 0px !important;\r\n padding-left: 5px !important;\r\n \/*background-color: greenyellow;*\/\r\n}\r\n[selector='BgGridExpenses'] .col-sm-7{\r\n padding-right: 5px !important;\r\n padding-left: 5px !important;\r\n max-width: 60%;\r\n \/*background-color: yellow;*\/\r\n}\r\n[selector='BgGridExpenses'] .col-sm-9{\r\n padding-right: 5px !important;\r\n padding-left: 5px !important;\r\n max-width: 80%;\r\n}\r\n[selector='BgGridExpenses'] .col-sm-11{\r\n padding-right: 0px !important;\r\n padding-left: 0px !important;\r\n max-width: 90%;\r\n}\r\n[selector='BgGridExpenses'] .col-sm-2{\r\n padding-right: 5px !important;\r\n padding-left: 5px !important;\r\n max-width: 20%;\r\n}\r\n\r\n[selector='BgGridExpenses'] .row{\r\n flex-wrap: nowrap !important;\r\n background-color: #FFFFFF;\r\n margin-right: 0;\r\n margin-left: 0;\r\n padding:0px 0px 0px 0px !important;\r\n}\r\n[selector='BgGridExpenses'] .col-sm-4{\r\n flex-wrap: nowrap !important;\r\n background-color: #FFFFFF;\r\n margin-right: 0;\r\n margin-left: 0;\r\n padding:0px 0px 5px 0px;\r\n}\r\n\/*****GridReports****\/\r\n[selector='BgGridReports'] .col-sm-1{\r\n padding-right: 0px !important;\r\n padding-left: 0px !important;\r\n max-width: 18%;\r\n}\r\n[selector='BgGridReports'] .col-sm-3{\r\n padding-right: 5px !important;\r\n padding-left: 0px !important;\r\n max-width: 30%;\r\n \/*background-color: greenyellow;*\/\r\n}\r\n[selector='BgGridReports'] .col-sm-8{\r\n padding-right: 5px !important;\r\n padding-left: 15px !important;\r\n max-width: 60%;\r\n \/*background-color: yellow;*\/\r\n}\r\n\/****GridReports***\/\r\n[selector='BgGridReports'] .row{\r\n flex-wrap: nowrap !important;\r\n background-color: #FFFFFF;\r\n margin-right: 0;\r\n margin-left: 0;\r\n padding:0px 0px 5px 0px;\r\n}\r\n[selector='BgGridReports'] .col-sm-4{\r\n flex-wrap: nowrap !important;\r\n background-color: #FFFFFF;\r\n margin-right: 0;\r\n margin-left: 0;\r\n padding:0px 0px 5px 0px;\r\n}\r\n\/***ADD-inline-content**\/\r\n\r\n[selector='inline-content'] {\r\n padding: 10px 0px 10px 0px;\r\n}\r\n\r\n[selector='inline-content'] div {\r\n display: flex;\r\n}\r\n\r\n[selector='inline-content'] p {\r\n margin: auto;\r\n}\r\n\r\n[selector='inline-content'] .btn-light {\r\n background-color: white;\r\n border: 1px solid #CDDDEE;\r\n margin: 5px 10px;\r\n border-radius: 5px !important;\r\n font-size: 15px;\r\n padding: 5px 10px;\r\n}\r\n[selector='inline-content'] .Btn-PagText{\r\n background-color: white;\r\n border: 1px solid #CDDDEE;\r\n padding: 5px 10px;\r\n border-radius: 5px;\r\n color:#556271;\r\n font-size: 15px;\r\n}\r\n\r\n\/***END-inline-content***\/\r\n\r\n\/*******************UploadFile*************\/\r\n\r\n[selector='Bg-uploader']{\r\n border: 1px solid #CDDDEE !important;\r\n border-radius: 12px;\r\n padding: 10px !important;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n font-size: 12px;\r\n font-weight: 600;\r\n background-color: #F3F9FE;\r\n margin-bottom: 15px;\r\n}\r\n[selector='Bg-uploader'] .uploader {\r\n display: inline-block;\r\n width: auto;\r\n}\r\n[selector='Bg-uploader'] label {\r\n width: 100%;\r\n border: none;\r\n background: white !important;\r\n color: #556271 !important;\r\n border-radius: 17px !important;\r\n -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4);\r\n -moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.4);\r\n box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1)!important;\r\n font-size: 15px;\r\n}\r\n[selector='Bg-uploader'] .uploader-list {\r\n width: 100%;\r\n}\r\n\r\n[selector='Bg-uploader'] .uploader-list .btn-outline{\r\n display: none;\r\n}\r\n\r\n[selector='Bg-uploader'] .required-asterisk {\r\n display: none;\r\n}\r\n[selector='Bg-uploader'] .form-control-file, .form-control-range {\r\n width: 100%;\r\n margin: auto;\r\n}\r\n[selector='Bg-uploader'] .was-validated {\r\n display: block;\r\n}\r\n[selector='Bg-uploader'] .form-control-file p{\r\n display:none;\r\n}\r\n\r\n[selector='container-position']{\r\n background-color: #F2F8FE;\r\n border:1px solid #CDDDEE;\r\n height: auto !important;\r\n margin:auto !important;\r\n}\r\n.ImgContainer {\r\n vertical-align: middle;\r\n border-style: none;\r\n max-width: 40%;\r\n display: flex;\r\n margin: auto;\r\n margin-top: 15px;\r\n}\r\n[selector='selectedExpensePreview'] > div {\r\n text-align: center;\r\n}\r\n\r\n.TextValue {\r\n color:#1572C2;\r\n font-weight: 600;\r\n font-size: 17px;\r\n font-family: 'Trebuchet MS';\r\n text-align: right;\r\n margin-top: -8px;\r\n float: right;\r\n}\r\n\r\n[selector='BgReport'] .btn-light{\r\n width: 100%;\r\n border: none;\r\n background: white !important;\r\n color: #556271 !important;\r\n border-radius: 17px !important;\r\n -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4);\r\n -moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.4);\r\n box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1)!important;\r\n font-size: 14px !important;\r\n font-weight: 500;\r\n padding: 5px 5px;\r\n}\r\n[selector='borderBg']{\r\n background-color: #FFFFFF;\r\n border: 1px solid #CDDDEE;\r\n}\r\n[selector='BgContainerMobile']{\r\n text-align: center;\r\n background-color: #FFFFFF;\r\n margin: 0 auto;\r\n padding-top: 15%;\r\n padding-bottom: 30%;\r\n}\r\n.lead {\r\n text-align: center;\r\n color:#556271;\r\n font-size: 24px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n}\r\n.leadText {\r\n text-align: center;\r\n color:#556271;\r\n font-size: 16px;\r\n font-weight: 400;\r\n line-height: 31.22px;\r\n font-family: 'Trebuchet MS';\r\n}\r\n[selector='cleared'] img{\r\n text-align: center;\r\n margin: auto;\r\n vertical-align: middle;\r\n}\r\n\/**************AND status following**************\/\r\n.Inreview{\r\n background-color: #FFF0DB;\r\n color:#404040;\r\n border-radius: 4.5px 4.5px 4.5px 4.5px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n \/*max-width: 70%;*\/\r\n text-align: center;\r\n padding: 4px 8px;\r\n}\r\n.Processing{\r\n background-color: #E8F1F7;\r\n color:#404040;\r\n border-radius: 4.5px 4.5px 4.5px 4.5px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n \/*max-width: 70%;*\/\r\n text-align: center;\r\n padding: 4px 8px;\r\n}\r\n.Reported{\r\n background-color: #C8F0CF;\r\n color:#404040;\r\n border-radius: 4.5px 4.5px 4.5px 4.5px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n text-align: center;\r\n padding: 4px 8px;\r\n}\r\n.Unreported{\r\n background-color: #FEE6E5;\r\n color:#404040;\r\n border-radius: 4.5px 4.5px 4.5px 4.5px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n text-align: center;\r\n padding: 4px 8px;\r\n}\r\n.Scanning{\r\n background-color: #fbdade !important;\r\n color:#404040;\r\n border-radius: 4.5px 4.5px 4.5px 4.5px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n \/*max-width: 70%;*\/\r\n text-align: center;\r\n padding: 4px 8px;\r\n}\r\n.labelUnreported{\r\n background-color: #FEE6E5;\r\n color:#404040;\r\n border-radius: 4.5px 4.5px 4.5px 4.5px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n text-align: center;\r\n padding: 4px 8px;\r\n}\r\n\r\n.labelUnreported{\r\n background-color: #FEE6E5;\r\n color:#404040;\r\n border-radius: 4.5px 4.5px 4.5px 4.5px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n text-align: center;\r\n padding: 4px 8px;\r\n}\r\n.labelTextExpenses{\r\n background-color: #E9ECF1;\r\n color:#404040;\r\n border-radius: 4.5px 4.5px 4.5px 4.5px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n \/*max-width: 70%;*\/\r\n width: fit-content;\r\n text-align: center;\r\n padding: 4px 8px;\r\n margin-bottom: 0px !important;\r\n}\r\n.labelName{\r\n background-color: #ffeabf;\r\n color:#404040;\r\n border-radius: 4.5px 4.5px 4.5px 4.5px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n text-align: center;\r\n padding: 4px 8px;\r\n margin-bottom: 0rem !important;\r\n}\r\n.labelNameExpenses{\r\n background-color: #E9ECF1;\r\n color:#404040;\r\n border-radius: 4.5px 4.5px 4.5px 4.5px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n width: 100%;\r\n text-align: center;\r\n padding: 4px 8px;\r\n margin-bottom: 0rem !important;\r\n}\r\n\r\n\/**********End - status following**********\/\r\n\r\n[selector='textData'] .btn-link{\r\n color: #566877 !important;\r\n font-size: 17px !important;\r\n font-weight: 600 !important;\r\n font-family: 'Trebuchet MS' !important;\r\n padding: 0px !important;\r\n text-align: left !important;\r\n text-transform: capitalize !important;\r\n line-height: normal !important;\r\n}\r\n[selector='textData'] .form-group{\r\n margin-bottom:0px !important;\r\n}\r\n[selector='textData'] .col-sm-8{\r\n padding-right: 0px !important;\r\n padding-left: 0px !important;\r\n}\r\n[selector='textPaid']{\r\n margin-top: 10px;\r\n}\r\n[selector='textPaid'] p{\r\n font-family: 'Trebuchet MS' !important;\r\n padding: 0px !important;\r\n text-align: left !important;\r\n text-transform: capitalize !important;\r\n margin-bottom: 0rem !important;\r\n}\r\n[selector='textPaid'] .form-group{\r\n margin-bottom: 0px !important;\r\n}\r\n\r\n[selector='textPaid'] .col-sm-8{\r\n padding-right: 0px !important;\r\n padding-left: 0px !important;\r\n}\r\n\/***TextpaidReport**\/\r\n[selector='textPaidReport']{\r\n margin-top: 10px;\r\n}\r\n[selector='textPaidReport'] p{\r\n font-family: 'Trebuchet MS' !important;\r\n padding: 0px !important;\r\n text-align: right !important;\r\n text-transform: capitalize !important;\r\n margin-bottom: 0rem !important;\r\n}\r\n[selector='textPaidReport'] .form-group{\r\n margin-bottom: 0px !important;\r\n}\r\n\/****\/\r\n[selector='textTotal'] p{\r\n color: #8f98a1 !important;\r\n font-size: 14px !important;\r\n font-weight: 600 !important;\r\n font-family: 'Trebuchet MS' !important;\r\n padding: 0px !important;\r\n text-align: left !important;\r\n text-transform: capitalize !important;\r\n margin-top: 0;\r\n margin-bottom: 0rem !important;\r\n}\r\n[selector='textTotal'] .form-group{\r\n margin-bottom: 0px !important;\r\n}\r\n\r\n[selector='btn-bx1'] .btn-primary {\r\n background-color: #2381C8;\r\n border:1px solid #2381C8;\r\n color:#FFFFFF;\r\n width: 100%;\r\n border-radius: 30px;\r\n padding: 5px;\r\n font-size: 14px;\r\n text-transform: capitalize;\r\n font-weight: 600;\r\n line-height: 24.56px;\r\n font-family: 'Trebuchet MS';\r\n}\r\n[selector='btn-bx2'] .btn-secondary{\r\n background-color: #FFFFFF;\r\n border: 1px solid #CDDDEE;\r\n color: #556271;\r\n width: 100%;\r\n border-radius: 30px;\r\n padding: 5px;\r\n font-size: 14px;\r\n text-transform: capitalize;\r\n font-weight: 600;\r\n line-height: 24.56px;\r\n font-family: 'Trebuchet MS';\r\n -webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.4);\r\n -moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.4);\r\n box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);\r\n}\r\n[selector='text-title'] {\r\n color: #556271;\r\n font-weight: 400px;\r\n font-size: 39.81px;\r\n line-height: 50.95px;\r\n}\r\n[selector='btn-retry'] button {\r\n color: #276BB9;\r\n font-weight: 700px;\r\n font-size: 15px;\r\n line-height: 19.2px;\r\n}\r\n[selector='btn-new-scan'] button {\r\n color:#556271;\r\n text-transform: none;\r\n font-weight: 400px;\r\n font-size: 16px;\r\n line-height: 21.79px;\r\n}\r\n[selector='btn-cancel'] button {\r\n color: red;\r\n font-weight: 700px;\r\n font-size: 15px;\r\n line-height: 19.2px;\r\n}\r\n\r\n[selector='options-bar-mobile'] {\r\n width: 100%;\r\n display:inline-block;\r\n}\r\n[selector='options-bar-mobile'] > div {\r\n width: 100%;\r\n float: left;\r\n display: flex;\r\n justify-content: space-between;\r\n text-align: center;\r\n}\r\n\r\n[selector='options-bar-mobile'] div {\r\n width: auto;\r\n padding: 0px;\r\n margin: 0 auto;\r\n}\r\n\r\n\r\n\/*******************UploadFile*************\/\r\n[selector='UploadFile'] {\r\n margin-top: -20px;\r\n}\r\n[selector='UploadFile'] .uploader {\r\n display: inline-block;\r\n width: auto;\r\n}\r\n[selector='UploadFile'] .uploader-list>ul{\r\n list-style: none;\r\n padding: 0;\r\n width: 80%;\r\n margin: auto;\r\n margin-left: 5px;\r\n}\r\n[selector='UploadFile'] label {\r\n display: inline-block;\r\n}\r\n[selector='UploadFile'] .uploader-list {\r\n width: 350px;\r\n}\r\n[selector='UploadFile'] .required-asterisk {\r\n display: none;\r\n}\r\n[selector='UploadFile'] .form-control-file > p::after {\r\n content: \"Upload Expense Here\";\r\n font-family: 'Trebuchet MS';\r\n}\r\n\/*\r\n[selector='UploadFile'] .form-control-file, .form-control-range {\r\n width: 80%;\r\n margin: auto;\r\n}*\/\r\n[selector='UploadFile'] .was-validated {\r\n display: block;\r\n}\r\n\/*******End-UploadFile*********\/\r\n\r\n\/****Calendar****\/\r\n[selector='DateStyle'] .vdpHeader{\r\n background: #DEEEFA;\r\n border-bottom: 1px solid #1572C2;\r\n}\r\n\r\n[selector='DateStyle'] .vdpCell.today {\r\n color: #2381C8;\r\n font-weight: 700;\r\n font-size: 11px;\r\n}\r\n[selector='DateStyle'] .vdpInnerWrap{\r\n border: 1px solid #1572C2;\r\n -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4);\r\n -moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.4);\r\n box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1)!important;\r\n}\r\n[selector='DateStyle'] .vdpPeriodControl > button{\r\n color: #1572C2;\r\n font-size: 13px;\r\n font-weight: 700;\r\n font-family: 'Trebuchet MS';\r\n}\r\n[selector='DateStyle'] .vdpCell.selectable:hover .vdpCellContent{\r\n background-color: #6A7888;\r\n color: #FFFFFF;\r\n}\r\n[selector='DateStyle'] .vdpHeadCellContent {\r\n color: #6A7888;\r\n font-size: 10px;\r\n font-weight: 600;\r\n}\r\n[selector='DateStyle'] .vdpCell.selected .vdpCellContent{\r\n background: #1572C2;\r\n color: #fff;\r\n}\r\n[selector='DateStyle'] .vdpArrowNext:after {\r\n border-left-color: #1572C2;\r\n}\r\n[selector='DateStyle'] .vdpArrowPrev:after {\r\n border-right-color: #1572C2;\r\n}\r\n\/****End Calendar****\/\r\n\r\n\/***ADD-inline-content-rep**\/\r\n\r\n[selector='inline-content-rep'] {\r\n padding: 10px 0px 10px 0px;\r\n}\r\n\r\n[selector='inline-content-rep'] div {\r\n display: flex;\r\n}\r\n\r\n[selector='inline-content-rep'] p {\r\n margin: auto;\r\n}\r\n\r\n[selector='inline-content-rep'] .btn-light {\r\n background-color: white;\r\n border: 1px solid #CDDDEE;\r\n margin: 5px 10px;\r\n border-radius: 5px !important;\r\n font-size: 15px;\r\n padding: 5px 10px;\r\n}\r\n[selector='inline-content-rep'] .Btn-PagText{\r\n background-color: white;\r\n border: 1px solid #CDDDEE;\r\n padding: 5px 10px;\r\n border-radius: 5px;\r\n color:#556271;\r\n font-size: 15px;\r\n}\r\n\r\n\/***END-inline-content-rep***\/\r\n\r\n.imgLogoMobile{\r\n padding-top: 12px;\r\n}\r\n[selector='TextDateReport']{\r\n text-align: left;\r\n margin-top: 15px;\r\n}\r\n[selector='TextDateReport'] p{\r\n color: #556271;\r\n font-size: 12px;\r\n font-family: Trebuchet MS;\r\n margin-bottom: 0rem !important;\r\n line-height: 0px !important;\r\n}\r\n[selector='TextDate']{\r\n text-align: center;\r\n margin-top: 15px;\r\n}\r\n[selector='TextDate'] p{\r\n color: #556271;\r\n font-size: 12px;\r\n font-family: Trebuchet MS;\r\n margin-bottom: 0rem !important;\r\n}\r\n[selector='LogoIcon']{\r\n text-align: center;\r\n margin-top: 15px;\r\n}\r\n.TextPaid{\r\n color: #556271;\r\n font-size: 14px;\r\n font-family: Trebuchet MS;\r\n margin-left: 5px;\r\n}\r\n\r\n.TextInfo{\r\n color: #566877;\r\n font-size: 14px;\r\n font-family: Trebuchet MS;\r\n}\r\n[selector='FormText'] .multiselect .multiselect__tags {\r\n border-bottom: 1px solid #CDDDEE !important;\r\n}\r\n[selector='FormText'] .multiselect__tags {\r\n border: none !important;\r\n}\r\n\r\n[selector='Btn-ReportExpense'] .btn-light {\r\n color: #212529 !important;\r\n font-size: 16px;\r\n background-color: #FFFFFF !important;\r\n border: 1px solid #CDDDEE !important;\r\n width: 100%;\r\n border-radius: 8px 8px 8px 8px !important;\r\n margin-top: 20px;\r\n padding: 10px 10px 10px 10px;\r\n text-transform: capitalize !important;\r\n text-shadow: 1px 1px 0px #CDDDEE;\r\n}\r\n\r\n[selector='Btn-ReportExpense'] .btn-light::before {\r\n font-family: \"Font Awesome 5 Free\";\r\n font-weight: 900;\r\n content: \"\\f15c\";\r\n}\r\n\r\n[selector='Btn-ReportDetails'] .btn-light {\r\n color: #212529 !important;\r\n font-size: 16px;\r\n background-color: #FFFFFF !important;\r\n border: 1px solid #CDDDEE !important;\r\n width: 100%;\r\n border-radius: 8px 8px 8px 8px !important;\r\n padding: 15px 10px 15px 10px;\r\n text-transform: capitalize !important;\r\n\r\n}\r\n[selector='Btn-ReportDetails'] .btn-light:hover {\r\n color: #556271 !important;\r\n font-size: 16px;\r\n background-color: #CDDDEE !important;\r\n border: 1px solid #CDDDEE !important;\r\n width: 100%;\r\n border-radius: 8px 8px 8px 8px !important;\r\n padding: 15px 10px 15px 10px;\r\n text-transform: capitalize !important;\r\n}\r\n[selector='Btn-ReportDetails'] .btn-light::before {\r\n font-family: \"Font Awesome 5 Free\";\r\n font-weight: 900;\r\n content: \"\\f1ea\";\r\n}\r\n\r\n[selector='Btn-Send'] .btn-light {\r\n color: #556271 !important;\r\n font-size: 16px;\r\n background-color: #FFFFFF !important;\r\n border: 1px solid #CDDDEE !important;\r\n width: 100%;\r\n border-radius: 8px 8px 8px 8px !important;\r\n padding: 15px 10px 15px 10px;\r\n text-transform: capitalize !important;\r\n}\r\n[selector='Btn-Send'] .btn-light:hover {\r\n color: #556271 !important;\r\n font-size: 16px;\r\n background-color: #CDDDEE !important;\r\n border: 1px solid #CDDDEE !important;\r\n width: 100%;\r\n border-radius: 8px 8px 8px 8px !important;\r\n padding: 15px 10px 15px 10px;\r\n text-transform: capitalize !important;\r\n}\r\n[selector='Btn-Send'] .btn-light::before {\r\n font-family: \"Font Awesome 5 Free\";\r\n font-weight: 900;\r\n content: \"\\f062\";\r\n}\r\n[selector='GridName'] .col-sm-5 {\r\n padding-left: 0px !important;\r\n padding-right: 0px !important;\r\n}\r\n[selector='GridName'] .col-sm-8 {\r\n padding-right: 0px !important;\r\n padding-left: 5px !important;\r\n}\r\n[selector='BtnReturn'] .btn-primary{\r\n background-color: #FFFFFF;\r\n color: #6A7888;\r\n font-size: 14px;\r\n border: none !important;\r\n text-align: center;\r\n border-radius: 50px;\r\n margin-top: -3px !important;\r\n}\r\n[selector='BtnReturn'] .btn-primary::before {\r\n font-family: \"Font Awesome 5 Free\";\r\n font-weight: 900;\r\n content: \"\\f053\";\r\n}\r\n[selector='ReportName'] p {\r\n margin-bottom: 0rem !important;\r\n}\r\n[selector='Status'] {\r\n width: fit-content;\r\n}\r\n[selector='Status'] p {\r\n margin-bottom: 0rem !important;\r\n}\r\n[selector='Status'] .Scanning{\r\n background-color: #fbdade !important;\r\n color:#404040;\r\n border-radius: 4.5px 4.5px 4.5px 4.5px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n font-family: 'Trebuchet MS';\r\n \/*max-width: 70%;*\/\r\n text-align: center;\r\n padding: 4px 8px;\r\n}\r\n[selector='ExpensesDetailsName'] p {\r\n margin-bottom: 0rem !important;\r\n}\r\n\r\n\/***BgGridExpensesLoop***\/\r\n[selector='BgGridExpensesLoop'] .col-sm-1{\r\n padding-right: 5px !important;\r\n padding-left: 5px !important;\r\n max-width: 18%;\r\n}\r\n[selector='BgGridExpensesLoop'] .col-sm-7{\r\n padding-right: 5px !important;\r\n padding-left: 5px !important;\r\n max-width: 60%;\r\n}\r\n[selector='BgGridExpensesLoop'] .col-sm-3{\r\n padding-right: 5px !important;\r\n padding-left: 5px !important;\r\n max-width: 30%;\r\n}\r\n\r\n[selector='BgGridExpensesLoop'] .row{\r\n flex-wrap: nowrap !important;\r\n margin-right: 0;\r\n margin-left: 0;\r\n padding:0px;\r\n \/*background-color: #FFFFFF;\r\n border-bottom:1px solid #CDDDEE ;*\/\r\n}\r\n\r\n[selector='BgReportSent']{\r\n text-align: center;\r\n background-color: #FFFFFF;\r\n margin: 0 auto;\r\n padding-top: 15%;\r\n padding-bottom: 30%;\r\n}\r\n[selector='BgExpensesAdded']{\r\n text-align: center;\r\n background-color: #FFFFFF;\r\n margin: 0 auto;\r\n padding-top: 15%;\r\n padding-bottom: 30%;\r\n}\r\n\r\n[selector='BgCheck'] .form-check {\r\n padding-left: 0rem !important;\r\n margin-top: -10px;\r\n}\r\n[selector='BgCheck'] .form-check-input {\r\n margin-left: 0rem;\r\n} \r\n\r\n[selector='BorderLeft'] {\r\n border-left: 1px solid #CDDDEE;\r\n}\r\n[selector='BorderRight'] {\r\n border-right: 1px solid #CDDDEE;\r\n}\r\n[selector='BorderLeft'] .col-sm-12{\r\n padding-right: 0px !important;\r\n padding-left: 5px !important;\r\n}\r\n[selector='BorderRight'] .col-sm-12{\r\n padding-left: 0px !important;\r\n padding-right: 0px !important;\r\n}\r\n\r\n[selector='Btn-NewReport'] .btn-light {\r\n color: #20242A !important;\r\n font-size: 16px;\r\n background-color: #FFFFFF !important;\r\n border: 1px solid #D7DDE5 !important;\r\n width: 100%;\r\n border-radius: 8px 8px 8px 8px !important;\r\n padding: 10px 10px 10px 10px;\r\n text-transform: capitalize !important;\r\n}\r\n[selector='Btn-NewReport'] .btn-light:hover {\r\n color: #20242A !important;\r\n background-color: #D7DDE5 !important;\r\n border: 1px solid #D7DDE5 !important;\r\n}\r\n[selector='Btn-NewReport'] .btn-light::before {\r\n font-family: \"Font Awesome 5 Free\";\r\n font-weight: 900;\r\n content: \"\\2b\";\r\n}", + "created_at": "2024-09-12 21:09:42", + "updated_at": "2024-09-12 21:09:42", + "status": "ACTIVE", + "key": null, + "watchers": [], + "translations": null, + "is_template": 0, + "asset_type": null + }, + { + "id": 7343, + "screen_id": 2010, + "screen_category_id": 1, + "draft": 0, + "title": "Expense Report - Launcher Expense Details 13", + "description": "Expense Report - Launcher Expense Details", + "type": "FORM", + "config": [ + { + "name": "Expense Text Extract Details", + "items": [ + { + "label": "Nested Screen", + "config": { + "icon": "fas fa-file-invoice", + "name": "Nested Screen", + "label": "Nested Screen", + "value": null, + "screen": 2008, + "variant": "primary", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormNestedScreen", + "editor-control": "FormNestedScreen", + "editor-component": "FormNestedScreen" + }, + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "
\n

 <\/em><\/span> Report Created<\/p>\n

Your expense has been reported.<\/p>\n<\/div>", + "interactive": true, + "renderVarHtml": false, + "conditionalHide": "false", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "items": [ + [ + { + "label": "Submit Button", + "config": { + "icon": "fas fa-share-square", + "name": "selectedExpense", + "event": "script", + "label": null, + "loading": false, + "tooltip": [], + "variant": "primary", + "fieldValue": null, + "loadingLabel": "Loading...", + "defaultSubmit": true, + "conditionalHide": "selectedExpense", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "BtnReturn" + }, + "component": "FormButton", + "editor-control": "FormSubmit", + "editor-component": "FormButton" + } + ], + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

Report Created<\/p>", + "interactive": true, + "renderVarHtml": false, + "conditionalHide": "false" + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

Your expense has been reported.<\/p>", + "interactive": true, + "renderVarHtml": false, + "conditionalHide": "false" + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

 <\/em><\/span> Report Created<\/p>\n

Your expense has been reported.<\/p>", + "interactive": true, + "renderVarHtml": false + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "1" + }, + { + "value": "2", + "content": "11" + } + ], + "conditionalHide": "false", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "MessageFloatin" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

.<\/p>", + "interactive": true, + "renderVarHtml": false + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "items": [ + [ + { + "items": [ + [ + { + "items": [ + [ + { + "label": "Submit Button", + "config": { + "icon": "fas fa-share-square", + "name": "selectedExpense", + "event": "script", + "label": null, + "loading": false, + "tooltip": [], + "variant": "primary", + "fieldValue": null, + "loadingLabel": "Loading...", + "defaultSubmit": true, + "conditionalHide": "selectedExpense", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "BtnReturn" + }, + "component": "FormButton", + "editor-control": "FormSubmit", + "editor-component": "FormButton" + } + ], + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

Expense Details<\/p>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "ExpensesDetailsName" + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

{{selectedExpense.requestStatus}}<\/p>", + "interactive": true, + "renderVarHtml": false, + "conditionalHide": null, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "Status" + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ], + [ + { + "items": [ + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

Amount<\/p>\n

USD {{receiptAmount}}<\/p>", + "interactive": true, + "renderVarHtml": false, + "conditionalHide": null, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "textPaid" + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": 1, + "content": "12" + } + ], + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "BorderLeft" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": 1, + "content": "1" + }, + { + "value": 2, + "content": "7" + }, + { + "value": 3, + "content": "4" + } + ], + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "BgGridExpenses" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "conditionalHide": "SelectReport != \"1\"", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "ContainerTitle" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

.<\/p>", + "interactive": true, + "renderVarHtml": false, + "customCssSelector": null + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "items": [ + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

{{filePreviewTag}}<\/p>", + "interactive": true, + "renderVarHtml": true, + "conditionalHide": null, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "selectedExpensePreview" + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "conditionalHide": "action != \"expense_update\"", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "container-position" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "filePreviewTagCopy", + "type": "text", + "label": "Do Not Remove This Field", + "helper": null, + "readonly": true, + "dataFormat": "string", + "validation": [], + "placeholder": "File Preview", + "defaultValue": { + "mode": "js", + "value": "if(this.selectedExpense != null){\r\n return this.expenseDataCopy.filePreviewTag;\r\n}\r\nreturn this.filePreviewTagCopy;" + }, + "conditionalHide": "0", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormInput", + "editor-control": "FormInput", + "editor-component": "FormInput" + }, + { + "items": [ + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

{{expenseDataCopy.filePreviewTag}}<\/p>", + "interactive": true, + "renderVarHtml": true, + "conditionalHide": null, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "selectedExpensePreview" + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "conditionalHide": "action == \"expense_update\" and SelectReport != \"1\"", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "container-position" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "label": "Submit Button", + "config": { + "icon": "fas fa-share-square", + "name": "SelectReport", + "event": "script", + "label": "Report Expense", + "loading": false, + "tooltip": [], + "variant": "light", + "fieldValue": "1", + "loadingLabel": "Loading...", + "defaultSubmit": true, + "conditionalHide": "(action == \"expense_update\" or selectedExpense.requestStatus != \"In review\") and SelectReport != \"1\"", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "Btn-ReportExpense" + }, + "component": "FormButton", + "editor-control": "FormSubmit", + "editor-component": "FormButton" + }, + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "filePreviewTag", + "type": "text", + "label": "Do Not Remove This FIeld", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [], + "placeholder": null, + "defaultValue": { + "mode": "basic", + "value": "{{filePreviewTag}}" + }, + "conditionalHide": "0" + }, + "component": "FormInput", + "editor-control": "FormInput", + "editor-component": "FormInput" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "conditionalHide": "action == \"expense_update\" or ((not SelectReport or SelectReport != \"1\") and selectedExpense.visibility) and SelectReport != \"1\"", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "body-container-mobile" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [ + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "receiptMerchant", + "type": "text", + "label": "Merchant", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [], + "placeholder": "merchant", + "defaultValue": { + "mode": "basic", + "value": "{{selectedExpense.receiptMerchant}}" + }, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormInput", + "editor-control": "FormInput", + "editor-component": "FormInput" + }, + { + "label": "Date Picker", + "config": { + "icon": "far fa-calendar-alt", + "name": "receiptDate", + "type": "datetime", + "label": "Date", + "maxDate": "{{today}}", + "minDate": null, + "disabled": false, + "dataFormat": "date", + "validation": [], + "placeholder": "##\/##\/####", + "defaultValue": { + "mode": "js", + "value": "if(this.selectedExpense != null){\r\n return this.selectedExpense.receiptDate;\r\n}\r\nreturn null;" + }, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "DateStyle" + }, + "component": "FormDatePicker", + "editor-control": "FormDatePicker", + "editor-component": "FormDatePicker" + }, + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "receiptAmount", + "type": "text", + "label": "Amount", + "helper": null, + "dataMask": { + "code": "USD", + "name": "US Dollar", + "format": "#,###.##", + "symbol": "$" + }, + "readonly": false, + "dataFormat": "currency", + "validation": [], + "placeholder": "00,00", + "defaultValue": { + "mode": "basic", + "value": "{{selectedExpense.receiptAmount}}" + }, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormInput", + "editor-control": "FormInput", + "editor-component": "FormInput" + }, + { + "label": "Select List", + "config": { + "icon": "fas fa-angle-double-down", + "name": "receiptCategory", + "label": "Category", + "helper": null, + "options": { + "key": "value", + "value": "content", + "dataName": "response", + "jsonData": "[{\"value\":\"Meals and Entertainment\",\"content\":\"Meals and Entertainment\"},{\"value\":\"Transportation\",\"content\":\"Transportation\"},{\"value\":\"Communication\",\"content\":\"Communication\"},{\"value\":\"Conferences and Training\",\"content\":\"Conferences and Training\"},{\"value\":\"Office Supplies\",\"content\":\"Office Supplies\"}]", + "renderAs": "dropdown", + "editIndex": null, + "pmqlQuery": null, + "dataSource": "provideData", + "optionsList": [ + { + "value": "Meals and Entertainment", + "content": "Meals and Entertainment" + }, + { + "value": "Transportation", + "content": "Transportation" + }, + { + "value": "Communication", + "content": "Communication" + }, + { + "value": "Conferences and Training", + "content": "Conferences and Training" + }, + { + "value": "Office Supplies", + "content": "Office Supplies" + } + ], + "removeIndex": null, + "showRenderAs": true, + "showJsonEditor": false, + "showOptionCard": false, + "selectedOptions": [], + "allowMultiSelect": false, + "showRemoveWarning": false, + "valueTypeReturned": "single" + }, + "readonly": false, + "validation": [], + "placeholder": null, + "rootElement": "response", + "defaultValue": { + "mode": "basic", + "value": "{{selectedExpense.category}}" + }, + "dataSourceUrl": null, + "dataSourceEndpoint": null + }, + "component": "FormSelectList", + "editor-control": "FormSelectList", + "editor-component": "FormSelectList" + }, + { + "label": "Textarea", + "config": { + "icon": "fas fa-paragraph", + "name": "receiptComments", + "rows": 2, + "label": "Comments", + "helper": null, + "currency": { + "code": "USD", + "name": "US Dollar", + "format": "#,###.##", + "symbol": "$" + }, + "readonly": false, + "richtext": false, + "validation": [], + "placeholder": null, + "defaultValue": { + "mode": "basic", + "value": "{{selectedExpense.comments}}" + } + }, + "component": "FormTextArea", + "editor-control": "FormTextArea", + "editor-component": "FormTextArea" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "conditionalHide": "(selectedExpense.requestStatus != \"In review\" and SelectReport != \"1\")", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": null + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [ + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "receiptMerchantCopy", + "type": "text", + "label": "Merchant", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [], + "placeholder": "merchant", + "defaultValue": { + "mode": "basic", + "value": "{{expenseDataCopy.receiptMerchant}}" + }, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormInput", + "editor-control": "FormInput", + "editor-component": "FormInput" + }, + { + "label": "Date Picker", + "config": { + "icon": "far fa-calendar-alt", + "name": "receiptDateCopy", + "type": "datetime", + "label": "Date", + "maxDate": "{{today}}", + "minDate": null, + "disabled": false, + "dataFormat": "date", + "validation": [], + "placeholder": "##\/##\/####", + "defaultValue": { + "mode": "js", + "value": "if(this.expenseDataCopy != null){\r\n return this.expenseDataCopy.receiptDate;\r\n}\r\nreturn null;" + }, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "DateStyle" + }, + "component": "FormDatePicker", + "editor-control": "FormDatePicker", + "editor-component": "FormDatePicker" + }, + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "receiptAmountCopy", + "type": "text", + "label": "Amount", + "helper": null, + "dataMask": { + "code": "USD", + "name": "US Dollar", + "format": "#,###.##", + "symbol": "$" + }, + "readonly": false, + "dataFormat": "currency", + "validation": [], + "placeholder": "00,00", + "defaultValue": { + "mode": "basic", + "value": "{{expenseDataCopy.receiptAmount}}" + }, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormInput", + "editor-control": "FormInput", + "editor-component": "FormInput" + }, + { + "label": "Select List", + "config": { + "icon": "fas fa-angle-double-down", + "name": "receiptCategoryCopy", + "label": "Category", + "helper": null, + "options": { + "key": "value", + "value": "content", + "dataName": "response", + "jsonData": "[{\"value\":\"Meals and Entertainment\",\"content\":\"Meals and Entertainment\"},{\"value\":\"Transportation\",\"content\":\"Transportation\"},{\"value\":\"Communication\",\"content\":\"Communication\"},{\"value\":\"Conferences and Training\",\"content\":\"Conferences and Training\"},{\"value\":\"Office Supplies\",\"content\":\"Office Supplies\"}]", + "renderAs": "dropdown", + "editIndex": null, + "pmqlQuery": null, + "dataSource": "provideData", + "optionsList": [ + { + "value": "Meals and Entertainment", + "content": "Meals and Entertainment" + }, + { + "value": "Transportation", + "content": "Transportation" + }, + { + "value": "Communication", + "content": "Communication" + }, + { + "value": "Conferences and Training", + "content": "Conferences and Training" + }, + { + "value": "Office Supplies", + "content": "Office Supplies" + } + ], + "removeIndex": null, + "showRenderAs": true, + "showJsonEditor": false, + "showOptionCard": false, + "selectedOptions": [], + "allowMultiSelect": false, + "showRemoveWarning": false, + "valueTypeReturned": "single" + }, + "readonly": false, + "validation": [], + "placeholder": null, + "rootElement": "response", + "defaultValue": { + "mode": "basic", + "value": "{{expenseDataCopy.receiptCategory}}" + }, + "dataSourceUrl": null, + "dataSourceEndpoint": null + }, + "component": "FormSelectList", + "editor-control": "FormSelectList", + "editor-component": "FormSelectList" + }, + { + "label": "Textarea", + "config": { + "icon": "fas fa-paragraph", + "name": "receiptCommentsCopy", + "rows": 2, + "label": "Comments", + "helper": null, + "currency": { + "code": "USD", + "name": "US Dollar", + "format": "#,###.##", + "symbol": "$" + }, + "readonly": false, + "richtext": false, + "validation": [], + "placeholder": null, + "defaultValue": { + "mode": "basic", + "value": "{{expenseDataCopy.receiptComments}}" + } + }, + "component": "FormTextArea", + "editor-control": "FormTextArea", + "editor-component": "FormTextArea" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": 1, + "content": "12" + } + ], + "conditionalHide": "action == \"expense_update\" and SelectReport != \"1\"", + "customCssSelector": "copyDataSelector" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

.<\/p>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "items": [ + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

Report Selected<\/strong>:<\/p>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

{{selectedExpense.expenseReportName}}<\/p>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "FormGroupText" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

Merchant<\/strong> :<\/p>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

{{receiptMerchant}}<\/p>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "FormGroupText" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

Date<\/strong> :<\/p>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

{{receiptDate}}<\/p>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "FormGroupText" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

Amount<\/strong> : <\/p>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

{{receiptAmount}}<\/p>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "FormGroupText" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

Category<\/strong> : <\/p>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

{{receiptCategory}}<\/p>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "FormGroupText" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

Comment<\/strong> : <\/p>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

{{receiptComments}}<\/p>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "FormGroupText" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "conditionalHide": "selectedExpense.requestStatus == \"In review\" and SelectReport != \"1\"", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "FormContainer" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "label": "Nested Screen", + "config": { + "icon": "fas fa-file-invoice", + "name": "Nested Screen", + "label": "Nested Screen", + "value": null, + "screen": 2012, + "variant": "primary", + "conditionalHide": "false and SelectReport == \"1\"", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormNestedScreen", + "editor-control": "FormNestedScreen", + "editor-component": "FormNestedScreen" + }, + { + "items": [ + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

<\/p>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "cleared" + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

All Clear<\/p>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

No new expenses at this moment.<\/p>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "conditionalHide": "false", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "BgContainerMobile" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + } + ], + "order": 1 + }, + { + "name": "Report Expense", + "items": [ + { + "items": [ + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

Report Expense<\/p>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + }, + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

Lorem Ipsum is simply dummy text of the printing and typesetting industry.<\/p>", + "interactive": true, + "renderVarHtml": false, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "ContainerTitle" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [ + { + "label": "Rich Text", + "config": { + "icon": "fas fa-pencil-ruler", + "label": null, + "content": "

{{filePreviewTag}}<\/p>", + "interactive": true, + "renderVarHtml": true, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "selectedExpensePreview" + }, + "component": "FormHtmlViewer", + "editor-control": "FormHtmlEditor", + "editor-component": "FormHtmlEditor" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "container-position" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [ + { + "label": "Select List", + "config": { + "icon": "fas fa-angle-double-down", + "name": "reportSelected", + "label": "REPORT", + "helper": null, + "options": { + "key": "value", + "value": "content", + "dataName": "searchResponse.searchResults", + "jsonData": null, + "renderAs": "dropdown", + "editIndex": null, + "pmqlQuery": null, + "dataSource": "dataObject", + "optionsList": [], + "removeIndex": null, + "showRenderAs": true, + "showJsonEditor": false, + "showOptionCard": false, + "selectedOptions": [], + "allowMultiSelect": false, + "collectionOptions": null, + "showRemoveWarning": false, + "valueTypeReturned": "single", + "selectedDataSource": null + }, + "readonly": false, + "validation": [], + "placeholder": null, + "rootElement": "response", + "defaultValue": { + "mode": "basic", + "value": "{{selectedExpense.reportSelected}}" + }, + "dataSourceUrl": null, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "dataSourceEndpoint": null + }, + "component": "FormSelectList", + "editor-control": "FormSelectList", + "editor-component": "FormSelectList" + }, + { + "label": "Line Input", + "config": { + "icon": "far fa-square", + "name": "new_report", + "type": "text", + "label": "REPORT NAME", + "helper": null, + "readonly": false, + "dataFormat": "string", + "validation": [], + "placeholder": null, + "defaultValue": { + "mode": "basic", + "value": null + }, + "conditionalHide": "reportSelected", + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + } + }, + "component": "FormInput", + "editor-control": "FormInput", + "editor-component": "FormInput" + } + ] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "12" + } + ], + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "FormText" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + }, + { + "items": [ + [], + [ + { + "label": "Submit Button", + "config": { + "icon": "fas fa-share-square", + "name": "action", + "event": "script", + "label": "Save", + "loading": false, + "tooltip": [], + "variant": "primary", + "fieldValue": "expense_update", + "loadingLabel": "Loading...", + "defaultSubmit": true, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": null + }, + "component": "FormButton", + "editor-control": "FormSubmit", + "editor-component": "FormButton" + } + ], + [] + ], + "label": "Multicolumn \/ Table", + "config": { + "icon": "fas fa-table", + "label": null, + "options": [ + { + "value": "1", + "content": "4" + }, + { + "value": "2", + "content": "4" + }, + { + "value": "3", + "content": "4" + } + ], + "conditionalHide": null, + "deviceVisibility": { + "showForMobile": true, + "showForDesktop": false + }, + "customCssSelector": "Btn-mobile" + }, + "component": "FormMultiColumn", + "container": true, + "editor-control": "FormMultiColumn", + "editor-component": "MultiColumn" + } + ], + "order": 2 + } + ], + "computed": [ + { + "id": 1, + "name": "This is to set today's date for receiptDate date control (check Configuration)", + "type": "javascript", + "order": 1, + "byPass": false, + "formula": "let today = new Date();\r\nlet formattedDate = today.toISOString().split('T')[0];\r\n\r\n \/\/ e.g. 2024-04-24\r\n return formattedDate;", + "property": "today" + }, + { + "id": 2, + "name": "filePreviewTag", + "type": "javascript", + "order": 2, + "byPass": false, + "formula": "\/*\/\nif([null, \"\", undefined].indexOf(this.expFileInfo) != -1) { return \"\"; }\nif([null, \"\", undefined].indexOf(this.expFileInfo.original_url) != -1) { return \"\"; }\n\nvar url = this.expFileInfo.original_url;\n\/*\/\nif([null, \"\", undefined].indexOf(this.selectedExpense) != -1) { return \"\"; }\n\nvar url = this.selectedExpense.original_url;\n\nlet filePrev;\nlet fileExt = url.split(\".\").pop();\n\nif(fileExt === \"pdf\") {\n filePrev = '