Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into feature/TravelExtraCommunityCorrections

src/components/CreateThermographForm.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FormModelPopup from './FormModelPopup.vue';
+
+const emit = defineEmits(['onDataSaved']);
+
+const { t } = useI18n();
+
+const thermographFormData = reactive({
+    thermographId: null,
+    model: 'DISPOSABLE',
+    warehouseId: null,
+    temperatureFk: 'cool',
+});
+
+const thermographsModels = ref(null);
+const warehousesOptions = ref([]);
+const temperaturesOptions = ref([]);
+
+const onDataSaved = (dataSaved) => {
+    emit('onDataSaved', dataSaved);
+};
+</script>
+
+<template>
+    <FetchData
+        @on-fetch="(data) => (thermographsModels = data)"
+        auto-load
+        url="Thermographs/getThermographModels"
+    />
+    <FetchData
+        @on-fetch="(data) => (warehousesOptions = data)"
+        auto-load
+        url="Warehouses"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
+    />
+    <FetchData
+        @on-fetch="(data) => (temperaturesOptions = data)"
+        auto-load
+        url="Temperatures"
+    />
+    <FormModelPopup
+        url-create="Thermographs/createThermograph"
+        model="thermograph"
+        :title="t('New thermograph')"
+        :form-initial-data="thermographFormData"
+        @on-data-saved="onDataSaved($event)"
+    >
+        <template #form-inputs="{ data, validate }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        :label="t('Identifier')"
+                        v-model="data.thermographId"
+                        :required="true"
+                        :rules="validate('thermograph.id')"
+                    />
+                </div>
+
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Model')"
+                        :options="thermographsModels"
+                        hide-selected
+                        option-label="value"
+                        option-value="value"
+                        v-model="data.model"
+                        :required="true"
+                        :rules="validate('thermograph.model')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-xl">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Warehouse')"
+                        :options="warehousesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.warehouseId"
+                        :required="true"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Temperature')"
+                        :options="temperaturesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="code"
+                        v-model="data.temperatureFk"
+                        :required="true"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    Identifier: Identificador
+    Model: Modelo
+    Warehouse: Almacén
+    Temperature: Temperatura
+    New thermograph: Nuevo termógrafo
+</i18n>

src/components/CrudModel.vue

@@ -196,7 +196,6 @@ function getChanges() {
     const creates = [];
 
     const pk = $props.primaryKey;
-
     for (const [i, row] of formData.value.entries()) {
         if (!row[pk]) {
             creates.push(row);

src/components/EditPictureForm.vue

@@ -276,13 +276,9 @@ const makeRequest = async () => {
                                     </QIcon>
                                     <QIcon name="info" class="cursor-pointer">
                                         <QTooltip>{{
-                                            t(
+                                            t('globals.allowedFilesText', {
-                                                'components.editPictureForm.allowedFilesText',
+                                                allowedContentTypes: allowedContentTypes,
-                                                {
+                                            })
-                                                    allowedContentTypes:
-                                                        allowedContentTypes,
-                                                }
-                                            )
                                         }}</QTooltip>
                                     </QIcon>
                                 </template>

src/components/LeftMenu.vue

@@ -206,6 +206,17 @@ async function togglePinned(item, event) {
         <template v-if="$props.source === 'card'">
             <template v-for="item in items" :key="item.name">
                 <LeftMenuItem v-if="!item.children" :item="item" />
+                <QList v-else>
+                    <QExpansionItem
+                        v-ripple
+                        clickable
+                        :icon="item.icon"
+                        :label="t(item.title)"
+                        :content-inset-level="0.5"
+                    >
+                        <LeftMenuItemGroup :item="item" />
+                    </QExpansionItem>
+                </QList>
             </template>
         </template>
     </QList>

src/components/common/VnInput.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 const emit = defineEmits(['update:modelValue', 'update:options', 'keyup.enter']);
 
@@ -14,6 +15,9 @@ const $props = defineProps({
     },
 });
 
+const { t } = useI18n();
+const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
+
 const value = computed({
     get() {
         return $props.modelValue;
@@ -46,6 +50,7 @@ const onEnterPress = () => {
         type="text"
         :class="{ required: $attrs.required }"
         @keyup.enter="onEnterPress()"
+        :rules="$attrs.required ? [requiredFieldRule] : null"
     >
         <template v-if="$slots.prepend" #prepend>
             <slot name="prepend" />

src/components/common/VnLog.vue

@@ -7,7 +7,7 @@ import { date } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { toRelativeDate } from 'src/filters';
 import { useColor } from 'src/composables/useColor';
-import { useFirstUpper } from 'src/composables/useFirstUpper';
+import { useCapitalize } from 'src/composables/useCapitalize';
 import { useValidator } from 'src/composables/useValidator';
 import VnAvatar from '../ui/VnAvatar.vue';
 import VnJsonValue from '../common/VnJsonValue.vue';
@@ -140,7 +140,7 @@ function parseProps(propNames, locale, vals, olds) {
         if (prop.endsWith('$')) continue;
         props.push({
             name: prop,
-            nameI18n: useFirstUpper(locale.columns?.[prop]) || prop,
+            nameI18n: useCapitalize(locale.columns?.[prop]) || prop,
             val: getVal(vals, prop),
             old: olds && getVal(olds, prop),
         });
@@ -202,7 +202,7 @@ function getLogTree(data) {
             userLog.logs.push(
                 (modelLog = {
                     model: log.changedModel,
-                    modelI18n: useFirstUpper(locale.name) || log.changedModel,
+                    modelI18n: useCapitalize(locale.name) || log.changedModel,
                     id: log.changedModelId,
                     showValue: log.changedModelValue,
                     logs: [],
@@ -395,7 +395,7 @@ setLogTree();
             (data) =>
                 (actions = data.map((item) => {
                     return {
-                        locale: useFirstUpper(validations[item.changedModel].locale.name),
+                        locale: useCapitalize(validations[item.changedModel].locale.name),
                         value: item.changedModel,
                     };
                 }))
@@ -409,7 +409,7 @@ setLogTree();
     >
         <QItem class="origin-info items-center q-my-md" v-if="logTree.length > 1">
             <h6 class="origin-id text-grey">
-                {{ useFirstUpper(validations[props.model].locale.name) }}
+                {{ useCapitalize(validations[props.model].locale.name) }}
                 #{{ originLog.originFk }}
             </h6>
             <div class="line bg-grey"></div>

src/components/common/VnSelectDialog.vue

@@ -24,6 +24,10 @@ const $props = defineProps({
         type: String,
         default: 'add',
     },
+    tooltip: {
+        type: String,
+        default: '',
+    },
 });
 
 const role = useRole();
@@ -55,7 +59,9 @@ const toggleForm = () => {
                 :name="actionIcon"
                 :size="actionIcon === 'add' ? 'xs' : 'sm'"
                 :class="['default-icon', { '--add-icon': actionIcon === 'add' }]"
-            />
+            >
+                <QTooltip v-if="tooltip">{{ tooltip }}</QTooltip>
+            </QIcon>
             <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
                 <slot name="form" />
             </QDialog>

src/components/common/VnSelectFilter.vue

@@ -1,7 +1,8 @@
 <script setup>
-import FetchData from 'src/components/FetchData.vue';
-import { onMounted } from 'vue';
 import { ref, toRefs, computed, watch } from 'vue';
+import { onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import FetchData from 'src/components/FetchData.vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 
 const $props = defineProps({
@@ -55,6 +56,9 @@ const $props = defineProps({
     },
 });
 
+const { t } = useI18n();
+const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
+
 const { optionLabel, optionValue, options, modelValue } = toRefs($props);
 const myOptions = ref([]);
 const myOptionsOriginal = ref([]);
@@ -79,7 +83,7 @@ onMounted(() => {
     if ($props.url && $props.modelValue) fetchFilter($props.modelValue);
 });
 
-async function filter(val, options) {
+function filter(val, options) {
     const search = val.toString().toLowerCase();
 
     if (!search) return options;
@@ -119,7 +123,7 @@ async function filterHandler(val, update) {
                 myOptions.value = await fetchFilter(val);
                 return;
             }
-            myOptions.value = await filter(val, myOptionsOriginal.value);
+            myOptions.value = filter(val, myOptionsOriginal.value);
         },
         (ref) => {
             if (val !== '' && ref.options.length > 0) {
@@ -164,6 +168,7 @@ watch(modelValue, (newValue) => {
         fill-input
         ref="vnSelectRef"
         :class="{ required: $attrs.required }"
+        :rules="$attrs.required ? [requiredFieldRule] : null"
     >
         <template v-if="isClearable" #append>
             <QIcon

src/components/common/VnSummaryDialog.vue

@@ -1,21 +1,23 @@
 <script setup>
 import { useDialogPluginComponent } from 'quasar';
-import WorkerSummary from './WorkerSummary.vue';
 
-const $props = defineProps({
+defineProps({
     id: {
         type: Number,
         required: true,
     },
+    summary: {
+        type: Object,
+        required: true,
+    },
 });
 
 defineEmits([...useDialogPluginComponent.emits]);
 
 const { dialogRef, onDialogHide } = useDialogPluginComponent();
 </script>
-
 <template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
+    <QDialog ref="dialogRef" @hide="onDialogHide" full-width>
-        <WorkerSummary v-if="$props.id" :id="$props.id" />
+        <component :is="summary" :id="id" />
     </QDialog>
 </template>

src/components/ui/CardDescriptor.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { onMounted, useSlots, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const $props = defineProps({
     url: {
@@ -35,9 +35,9 @@ const $props = defineProps({
         default: null,
     },
 });
-const quasar = useQuasar();
 const slots = useSlots();
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 const entity = computed(() => useArrayData($props.dataKey).store.data);
 
 defineExpose({
@@ -64,15 +64,6 @@ async function getData() {
     emit('onFetch', data);
 }
 const emit = defineEmits(['onFetch']);
-
-function viewSummary(id) {
-    quasar.dialog({
-        component: $props.summary,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
@@ -81,7 +72,7 @@ function viewSummary(id) {
             <div class="header bg-primary q-pa-sm justify-between">
                 <slot name="header-extra-action" />
                 <QBtn
-                    @click.stop="viewSummary(entity.id)"
+                    @click.stop="viewSummary(entity.id, $props.summary)"
                     round
                     flat
                     dense

src/composables/useCapitalize.js

@@ -1,3 +1,3 @@
-export function useFirstUpper(str) {
+export function useCapitalize(str) {
     return str && str.charAt(0).toUpperCase() + str.substr(1);
 }

src/composables/useSummaryDialog.js

@@ -0,0 +1,15 @@
+import VnSummaryDialog from 'src/components/common/VnSummaryDialog.vue';
+import { useQuasar } from 'quasar';
+
+export function useSummaryDialog() {
+    const quasar = useQuasar();
+
+    function viewSummary(id, summary) {
+        quasar.dialog({
+            component: VnSummaryDialog,
+            componentProps: { id, summary },
+        });
+    }
+
+    return { viewSummary };
+}

src/composables/useValidator.js

@@ -30,6 +30,15 @@ export function useValidator() {
     const { t } = useI18n();
     const validations = function (validation) {
         return {
+            format: (value) => {
+                const { allowNull, with: format, allowBlank } = validation;
+                const message = t(validation.message) || validation.message;
+                if (!allowBlank && value === '') return message;
+                if (!allowNull && value === null) return message;
+
+                const isValid = new RegExp(format).test(value);
+                if (!isValid) return message;
+            },
             presence: (value) => {
                 let message = `Value can't be empty`;
                 if (validation.message)

src/css/icons.scss

@@ -1,412 +1,387 @@
 @font-face {
-    font-family: 'icomoon';
+  font-family: 'icon';
-    src: url('fonts/icomoon.eot?g6kvgn');
+  src:  url('fonts/icon.eot?7zbcv0');
-    src: url('fonts/icomoon.eot?g6kvgn#iefix') format('embedded-opentype'),
+  src:  url('fonts/icon.eot?7zbcv0#iefix') format('embedded-opentype'),
-        url('fonts/icomoon.ttf?g6kvgn') format('truetype'),
+    url('fonts/icon.ttf?7zbcv0') format('truetype'),
-        url('fonts/icomoon.woff?g6kvgn') format('woff'),
+    url('fonts/icon.woff?7zbcv0') format('woff'),
-        url('fonts/icomoon.svg?g6kvgn#icomoon') format('svg');
+    url('fonts/icon.svg?7zbcv0#icon') format('svg');
-    font-weight: normal;
+  font-weight: normal;
-    font-style: normal;
+  font-style: normal;
-    font-display: block;
+  font-display: block;
 }
 
-[class^='icon-'],
+[class^="icon-"], [class*=" icon-"] {
-[class*=' icon-'] {
+  /* use !important to prevent issues with browser extensions that change fonts */
-    /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icon' !important;
-    font-family: 'icomoon' !important;
+  speak: never;
-    speak: never;
+  font-style: normal;
-    font-style: normal;
+  font-weight: normal;
-    font-weight: normal;
+  font-variant: normal;
-    font-variant: normal;
+  text-transform: none;
-    text-transform: none;
+  line-height: 1;
-    line-height: 1;
 
-    /* Better Font Rendering =========== */
+  /* Better Font Rendering =========== */
-    -webkit-font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-frozen:before {
-    content: '\e900';
-}
-.icon-Person:before {
-    content: '\e901';
-}
-.icon-handmadeArtificial:before {
-    content: '\e902';
-}
-.icon-fruit:before {
-    content: '\e903';
-}
-.icon-funeral:before {
-    content: '\e904';
-}
-.icon-noPayMethod:before {
-    content: '\e905';
-}
-.icon-preserved:before {
-    content: '\e906';
-}
-.icon-greenery:before {
-    content: '\e907';
-}
-.icon-plant:before {
-    content: '\e908';
-}
-.icon-handmade:before {
-    content: '\e909';
-}
-.icon-accessory:before {
-    content: '\e90a';
-}
-.icon-artificial:before {
-    content: '\e90b';
-}
-.icon-flower:before {
-    content: '\e90c';
-}
-.icon-fixedPrice:before {
-    content: '\e90d';
-}
-.icon-addperson:before {
-    content: '\e90e';
-}
-.icon-supplierfalse:before {
-    content: '\e90f';
-}
-.icon-invoice-out:before {
-    content: '\e910';
-}
-.icon-invoice-in:before {
-    content: '\e911';
-}
-.icon-invoice-in-create:before {
-    content: '\e912';
-}
-.icon-basketadd:before {
-    content: '\e913';
-}
-.icon-basket:before {
-    content: '\e914';
-}
-.icon-uniE915:before {
-    content: '\e915';
-}
-.icon-uniE916:before {
-    content: '\e916';
-}
-.icon-uniE917:before {
-    content: '\e917';
-}
-.icon-uniE918:before {
-    content: '\e918';
-}
-.icon-uniE919:before {
-    content: '\e919';
-}
-.icon-uniE91A:before {
-    content: '\e91a';
-}
-.icon-isTooLittle:before {
-    content: '\e91b';
-}
-.icon-deliveryprices:before {
-    content: '\e91c';
-}
-.icon-onlinepayment:before {
-    content: '\e91d';
-}
-.icon-risk:before {
-    content: '\e91e';
-}
-.icon-noweb:before {
-    content: '\e91f';
-}
-.icon-no036:before {
-    content: '\e920';
-}
-.icon-disabled:before {
-    content: '\e921';
-}
-.icon-treatments:before {
-    content: '\e922';
-}
-.icon-invoice:before {
-    content: '\e923';
-}
-.icon-photo:before {
-    content: '\e924';
-}
-.icon-supplier:before {
-    content: '\e925';
-}
-.icon-languaje:before {
-    content: '\e926';
-}
-.icon-credit:before {
-    content: '\e927';
-}
-.icon-client:before {
-    content: '\e928';
-}
-.icon-shipment-01:before {
-    content: '\e929';
-}
-.icon-account:before {
-    content: '\e92a';
-}
-.icon-inventory:before {
-    content: '\e92b';
-}
-.icon-unavailable:before {
-    content: '\e92c';
-}
-.icon-wiki:before {
-    content: '\e92d';
-}
-.icon-attach:before {
-    content: '\e92e';
-}
-.icon-exit:before {
-    content: '\e92f';
-}
-.icon-anonymous:before {
-    content: '\e930';
-}
-.icon-net:before {
-    content: '\e931';
-}
-.icon-buyrequest:before {
-    content: '\e932';
-}
-.icon-thermometer:before {
-    content: '\e933';
-}
-.icon-entry:before {
-    content: '\e934';
-}
-.icon-deletedTicket:before {
-    content: '\e935';
-}
-.icon-logout:before {
-    content: '\e936';
-}
-.icon-catalog:before {
-    content: '\e937';
-}
-.icon-agency:before {
-    content: '\e938';
-}
-.icon-delivery:before {
-    content: '\e939';
-}
-.icon-wand:before {
-    content: '\e93a';
-}
-.icon-buscaman:before {
-    content: '\e93b';
-}
-.icon-pbx:before {
-    content: '\e93c';
-}
-.icon-calendar:before {
-    content: '\e93d';
-}
-.icon-splitline:before {
-    content: '\e93e';
-}
-.icon-consignatarios:before {
-    content: '\e93f';
-}
-.icon-tax:before {
-    content: '\e940';
-}
-.icon-notes:before {
-    content: '\e941';
-}
-.icon-lines:before {
-    content: '\e942';
-}
-.icon-zone:before {
-    content: '\e943';
-}
-.icon-greuge:before {
-    content: '\e944';
-}
-.icon-ticketAdd:before {
-    content: '\e945';
-}
-.icon-components:before {
-    content: '\e946';
-}
-.icon-pets:before {
-    content: '\e947';
-}
-.icon-linesprepaired:before {
-    content: '\e948';
-}
-.icon-control:before {
-    content: '\e949';
-}
-.icon-revision:before {
-    content: '\e94a';
-}
-.icon-deaulter:before {
-    content: '\e94b';
-}
-.icon-services:before {
-    content: '\e94c';
-}
-.icon-albaran:before {
-    content: '\e94d';
-}
-.icon-solunion:before {
-    content: '\e94e';
-}
-.icon-stowaway:before {
-    content: '\e94f';
-}
-.icon-apps:before {
-    content: '\e951';
-}
-.icon-info:before {
-    content: '\e952';
-}
-.icon-columndelete:before {
-    content: '\e953';
-}
-.icon-columnadd:before {
-    content: '\e954';
-}
-.icon-deleteline:before {
-    content: '\e955';
-}
-.icon-item:before {
-    content: '\e956';
-}
-.icon-worker:before {
-    content: '\e957';
-}
-.icon-headercol:before {
-    content: '\e958';
-}
-.icon-reserva:before {
-    content: '\e959';
-}
 .icon-100:before {
-    content: '\e95a';
+  content: "\e926";
-}
-.icon-sign:before {
-    content: '\e95d';
-}
-.icon-polizon:before {
-    content: '\e95e';
-}
-.icon-solclaim:before {
-    content: '\e95f';
-}
-.icon-actions:before {
-    content: '\e960';
-}
-.icon-details:before {
-    content: '\e961';
-}
-.icon-traceability:before {
-    content: '\e962';
-}
-.icon-claims:before {
-    content: '\e963';
-}
-.icon-regentry:before {
-    content: '\e964';
-}
-.icon-transaction:before {
-    content: '\e966';
 }
 .icon-History:before {
-    content: '\e968';
+  content: "\e964";
 }
-.icon-mana:before {
+.icon-Person:before {
-    content: '\e96a';
+  content: "\e984";
 }
-.icon-ticket:before {
+.icon-accessory:before {
-    content: '\e96b';
+  content: "\e948";
 }
-.icon-niche:before {
+.icon-account:before {
-    content: '\e96c';
+  content: "\e927";
 }
-.icon-tags:before {
+.icon-actions:before {
-    content: '\e96d';
+  content: "\e928";
 }
-.icon-volume:before {
+.icon-addperson:before {
-    content: '\e96e';
+  content: "\e929";
-}
-.icon-bin:before {
-    content: '\e96f';
-}
-.icon-splur:before {
-    content: '\e970';
-}
-.icon-barcode:before {
-    content: '\e971';
-}
-.icon-botanical:before {
-    content: '\e972';
-}
-.icon-clone:before {
-    content: '\e973';
-}
-.icon-sms:before {
-    content: '\e975';
-}
-.icon-eye:before {
-    content: '\e976';
-}
-.icon-doc:before {
-    content: '\e977';
-}
-.icon-package:before {
-    content: '\e978';
-}
-.icon-settings:before {
-    content: '\e979';
-}
-.icon-bucket:before {
-    content: '\e97a';
-}
-.icon-mandatory:before {
-    content: '\e97b';
-}
-.icon-recovery:before {
-    content: '\e97c';
-}
-.icon-payment:before {
-    content: '\e97e';
-}
-.icon-grid:before {
-    content: '\e980';
-}
-.icon-web:before {
-    content: '\e982';
-}
-.icon-dfiscales:before {
-    content: '\e984';
-}
-.icon-trolley:before {
-    content: '\e95c';
 }
 .icon-agency-term:before {
-    content: '\e950';
+  content: "\e92b";
 }
-.icon-client-unpaid:before {
+.icon-anonymous:before {
-    content: '\e95b';
+  content: "\e92d";
+}
+.icon-apps:before {
+  content: "\e92e";
+}
+.icon-artificial:before {
+  content: "\e92f";
+}
+.icon-attach:before {
+  content: "\e930";
+}
+.icon-barcode:before {
+  content: "\e932";
+}
+.icon-basket:before {
+  content: "\e933";
+}
+.icon-basketadd:before {
+  content: "\e934";
+}
+.icon-bin:before {
+  content: "\e935";
+}
+.icon-botanical:before {
+  content: "\e936";
+}
+.icon-bucket:before {
+  content: "\e937";
+}
+.icon-buscaman:before {
+  content: "\e938";
+}
+.icon-buyrequest:before {
+  content: "\e939";
+}
+.icon-calc_volum:before {
+  content: "\e93a";
+}
+.icon-calendar:before {
+  content: "\e940";
+}
+.icon-catalog:before {
+  content: "\e941";
+}
+.icon-claims:before {
+  content: "\e942";
+}
+.icon-client:before {
+  content: "\e943";
+}
+.icon-clone:before {
+  content: "\e945";
+}
+.icon-columnadd:before {
+  content: "\e946";
+}
+.icon-columndelete:before {
+  content: "\e947";
+}
+.icon-components:before {
+  content: "\e949";
+}
+.icon-consignatarios:before {
+  content: "\e94b";
+}
+.icon-control:before {
+  content: "\e94c";
+}
+.icon-credit:before {
+  content: "\e94d";
+}
+.icon-deaulter:before {
+  content: "\e94e";
+}
+.icon-deletedTicket:before {
+  content: "\e94f";
+}
+.icon-deleteline:before {
+  content: "\e950";
+}
+.icon-delivery:before {
+  content: "\e951";
+}
+.icon-deliveryprices:before {
+  content: "\e952";
+}
+.icon-details:before {
+  content: "\e954";
+}
+.icon-dfiscales:before {
+  content: "\e955";
+}
+.icon-disabled:before {
+  content: "\e965";
+}
+.icon-doc:before {
+  content: "\e956";
+}
+.icon-entry:before {
+  content: "\e958";
+}
+.icon-exit:before {
+  content: "\e959";
+}
+.icon-eye:before {
+  content: "\e95a";
+}
+.icon-fixedPrice:before {
+  content: "\e95b";
+}
+.icon-flower:before {
+  content: "\e95c";
+}
+.icon-frozen:before {
+  content: "\e95d";
+}
+.icon-fruit:before {
+  content: "\e95e";
+}
+.icon-funeral:before {
+  content: "\e95f";
+}
+.icon-greenery:before {
+  content: "\e91e";
+}
+.icon-greuge:before {
+  content: "\e960";
+}
+.icon-grid:before {
+  content: "\e961";
+}
+.icon-handmade:before {
+  content: "\e94a";
+}
+.icon-handmadeArtificial:before {
+  content: "\e962";
+}
+.icon-headercol:before {
+  content: "\e963";
+}
+.icon-info:before {
+  content: "\e966";
+}
+.icon-inventory:before {
+  content: "\e967";
+}
+.icon-invoice:before {
+  content: "\e969";
+}
+.icon-invoice-in:before {
+  content: "\e96a";
+}
+.icon-invoice-in-create:before {
+  content: "\e96b";
+}
+.icon-invoice-out:before {
+  content: "\e96c";
+}
+.icon-isTooLittle:before {
+  content: "\e96e";
+}
+.icon-item:before {
+  content: "\e96f";
+}
+.icon-languaje:before {
+  content: "\e912";
+}
+.icon-lines:before {
+  content: "\e971";
+}
+.icon-linesprepaired:before {
+  content: "\e972";
+}
+.icon-link-to-corrected:before {
+  content: "\e900";
+}
+.icon-link-to-correcting:before {
+  content: "\e906";
+}
+.icon-logout:before {
+  content: "\e90a";
+}
+.icon-mana:before {
+  content: "\e974";
+}
+.icon-mandatory:before {
+  content: "\e975";
+}
+.icon-net:before {
+  content: "\e976";
+}
+.icon-newalbaran:before {
+  content: "\e977";
+}
+.icon-niche:before {
+  content: "\e979";
+}
+.icon-no036:before {
+  content: "\e97a";
+}
+.icon-noPayMethod:before {
+  content: "\e97b";
+}
+.icon-notes:before {
+  content: "\e97c";
+}
+.icon-noweb:before {
+  content: "\e97e";
+}
+.icon-onlinepayment:before {
+  content: "\e97f";
+}
+.icon-package:before {
+  content: "\e980";
+}
+.icon-payment:before {
+  content: "\e982";
+}
+.icon-pbx:before {
+  content: "\e983";
+}
+.icon-pets:before {
+  content: "\e985";
+}
+.icon-photo:before {
+  content: "\e986";
+}
+.icon-plant:before {
+  content: "\e987";
+}
+.icon-polizon:before {
+  content: "\e989";
+}
+.icon-preserved:before {
+  content: "\e98a";
+}
+.icon-recovery:before {
+  content: "\e98b";
+}
+.icon-regentry:before {
+  content: "\e901";
+}
+.icon-reserva:before {
+  content: "\e902";
+}
+.icon-revision:before {
+  content: "\e903";
+}
+.icon-risk:before {
+  content: "\e904";
+}
+.icon-services:before {
+  content: "\e905";
+}
+.icon-settings:before {
+  content: "\e907";
+}
+.icon-shipment:before {
+  content: "\e908";
+}
+.icon-sign:before {
+  content: "\e909";
+}
+.icon-sms:before {
+  content: "\e90b";
+}
+.icon-solclaim:before {
+  content: "\e90c";
+}
+.icon-solunion:before {
+  content: "\e90d";
+}
+.icon-splitline:before {
+  content: "\e90e";
+}
+.icon-splur:before {
+  content: "\e90f";
+}
+.icon-stowaway:before {
+  content: "\e910";
+}
+.icon-supplier:before {
+  content: "\e911";
+}
+.icon-supplierfalse:before {
+  content: "\e913";
+}
+.icon-tags:before {
+  content: "\e914";
+}
+.icon-tax:before {
+  content: "\e915";
+}
+.icon-thermometer:before {
+  content: "\e916";
+}
+.icon-ticket:before {
+  content: "\e917";
+}
+.icon-ticketAdd:before {
+  content: "\e918";
+}
+.icon-traceability:before {
+  content: "\e919";
+}
+.icon-treatments:before {
+  content: "\e91c";
 }
 .icon-trolley:before {
-    content: '\e95c';
+  content: "\e91a";
-}
-.icon-grafana:before {
-    content: '\e965';
 }
 .icon-troncales:before {
-    content: '\e967';
+  content: "\e91b";
+}
+.icon-unavailable:before {
+  content: "\e91d";
+}
+.icon-volume:before {
+  content: "\e91f";
+}
+.icon-wand:before {
+  content: "\e920";
+}
+.icon-web:before {
+  content: "\e921";
+}
+.icon-wiki:before {
+  content: "\e922";
+}
+.icon-worker:before {
+  content: "\e923";
+}
+.icon-zone:before {
+  content: "\e924";
 }

src/i18n/en/index.js

@@ -62,8 +62,14 @@ export default {
         selectRows: 'Select all { numberRows } row(s)',
         allRows: 'All { numberRows } row(s)',
         markAll: 'Mark all',
+        requiredField: 'Required field',
+        class: 'clase',
+        type: 'type',
+        reason: 'reason',
         noResults: 'No results',
         system: 'System',
+        fieldRequired: 'Field required',
+        allowedFilesText: 'Allowed file types: { allowedContentTypes }',
     },
     errors: {
         statusUnauthorized: 'Access denied',
@@ -131,6 +137,8 @@ export default {
             log: 'Log',
             sms: 'Sms',
             creditManagement: 'Credit management',
+            creditContracts: 'Credit contracts',
+            creditOpinion: 'Credit opinion',
             others: 'Others',
         },
         list: {
@@ -677,6 +685,7 @@ export default {
             vat: 'VAT',
             dueDay: 'Due day',
             intrastat: 'Intrastat',
+            corrective: 'Corrective',
             log: 'Logs',
         },
         list: {
@@ -1173,9 +1182,6 @@ export default {
             addToPinned: 'Add to pinned',
             removeFromPinned: 'Remove from pinned',
         },
-        editPictureForm: {
-            allowedFilesText: 'Allowed file types: { allowedContentTypes }',
-        },
         VnLv: {
             copyText: '{copyValue} has been copied to the clipboard',
         },

src/i18n/es/index.js

@@ -62,8 +62,14 @@ export default {
         selectRows: 'Seleccionar las { numberRows } filas(s)',
         allRows: 'Todo { numberRows } filas(s)',
         markAll: 'Marcar todo',
+        requiredField: 'Campo obligatorio',
+        class: 'clase',
+        type: 'tipo',
+        reason: 'motivo',
         noResults: 'Sin resultados',
         system: 'Sistema',
+        fieldRequired: 'Campo requerido',
+        allowedFilesText: 'Tipos de archivo permitidos: { allowedContentTypes }',
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',
@@ -131,6 +137,8 @@ export default {
             log: 'Historial',
             sms: 'Sms',
             creditManagement: 'Gestión de crédito',
+            creditContracts: 'Contratos de crédito',
+            creditOpinion: 'Opinión de crédito',
             others: 'Otros',
         },
         list: {
@@ -736,6 +744,7 @@ export default {
             vat: 'IVA',
             dueDay: 'Vencimiento',
             intrastat: 'Intrastat',
+            corrective: 'Rectificativa',
             log: 'Registros de auditoría',
         },
         list: {
@@ -1173,9 +1182,6 @@ export default {
             addToPinned: 'Añadir a fijados',
             removeFromPinned: 'Eliminar de fijados',
         },
-        editPictureForm: {
-            allowedFilesText: 'Tipos de archivo permitidos: { allowedContentTypes }',
-        },
         VnLv: {
             copyText: '{copyValue} se ha copiado al portapepeles',
         },

src/pages/Claim/Card/ClaimSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import ClaimSummary from './ClaimSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <ClaimSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

src/pages/Claim/ClaimList.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'filters/index';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
@@ -9,14 +8,15 @@ import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import ClaimFilter from './ClaimFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
-import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import ClaimSummary from './Card/ClaimSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
 const router = useRouter();
-const quasar = useQuasar();
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 
 const STATE_COLOR = {
     pending: 'positive',
@@ -29,15 +29,6 @@ function stateColor(code) {
 function navigate(id) {
     router.push({ path: `/claim/${id}` });
 }
-
-function viewSummary(id) {
-    quasar.dialog({
-        component: ClaimSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
@@ -135,7 +126,7 @@ function viewSummary(id) {
                             </QBtn>
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, ClaimSummary)"
                                 color="primary"
                                 style="margin-top: 15px"
                             />

src/pages/Customer/Card/CustomerBalance.vue

@@ -1,3 +1,282 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import { date, QCheckbox, QBtn, useQuasar } from 'quasar';
+
+import { toCurrency } from 'src/filters';
+import { useStateStore } from 'stores/useStateStore';
+
+import FetchData from 'components/FetchData.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import CustomerNewPayment from 'src/pages/Customer/components/CustomerNewPayment.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const quasar = useQuasar();
+const stateStore = useStateStore();
+
+const clientRisks = ref(null);
+const companiesOptions = ref([]);
+const companyId = ref(442);
+const rows = ref(null);
+const workerId = ref(0);
+const receiptsRef = ref(null);
+const clientRisksRef = ref(null);
+
+const filterCompanies = { order: ['code'] };
+const params = {
+    clientId: `${route.params.id}`,
+    companyId: companyId.value,
+    filter: { limit: 20 },
+};
+const filter = {
+    include: { relation: 'company', scope: { fields: ['code'] } },
+    where: { clientFk: `${route.params.id}`, companyFk: companyId.value },
+};
+
+const tableColumnComponents = {
+    payed: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    created: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    userName: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: (prop) => {
+            workerId.value = prop.row.clientFk;
+        },
+    },
+    description: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    bankFk: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    debit: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    credit: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    balance: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    isConciliate: {
+        component: QCheckbox,
+        props: (prop) => ({
+            disable: true,
+            'model-value': Boolean(prop.value),
+        }),
+        event: () => {},
+    },
+};
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        field: 'payed',
+        format: (value) => date.formatDate(value, 'DD/MM/YYYY'),
+        label: t('Date'),
+        name: 'payed',
+    },
+    {
+        align: 'left',
+        field: 'created',
+        format: (value) => date.formatDate(value, 'DD/MM/YYYY hh:mm'),
+        label: t('Creation date'),
+        name: 'created',
+    },
+    {
+        align: 'left',
+        field: 'userName',
+        label: t('Employee'),
+        name: 'userName',
+    },
+    {
+        align: 'left',
+        field: 'description',
+        label: t('Reference'),
+        name: 'description',
+    },
+    {
+        align: 'left',
+        field: 'bankFk',
+        label: t('Bank'),
+        name: 'bankFk',
+    },
+    {
+        align: 'left',
+        field: 'debit',
+        label: t('Debit'),
+        name: 'debit',
+    },
+    {
+        align: 'left',
+        field: 'credit',
+        format: (value) => toCurrency(value),
+        label: t('Havings'),
+        name: 'credit',
+    },
+    {
+        align: 'left',
+        field: (value) => value.debit - value.credit,
+        format: (value) => toCurrency(value),
+        label: t('Balance'),
+        name: 'balance',
+    },
+    {
+        align: 'left',
+        field: 'isConciliate',
+        label: t('Conciliated'),
+        name: 'isConciliate',
+    },
+]);
+
+const getData = () => {
+    stateStore.rightDrawer = true;
+    receiptsRef.value?.fetch();
+    clientRisksRef.value?.fetch();
+};
+
+const showNewPaymentDialog = () => {
+    quasar.dialog({
+        component: CustomerNewPayment,
+        componentProps: {
+            companyId: companyId.value,
+            totalCredit: clientRisks.value[0]?.amount,
+            promise: getData,
+        },
+    });
+};
+
+const updateCompanyId = (id) => {
+    if (id) companyId.value = id;
+    getData();
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Balance</div>
+    <FetchData
+        :filter="filterCompanies"
+        @on-fetch="(data) => (companiesOptions = data)"
+        auto-load
+        url="Companies"
+    />
+    <FetchData
+        :params="params"
+        @on-fetch="(data) => (rows = data)"
+        auto-load
+        ref="receiptsRef"
+        url="Receipts/filter"
+    />
+    <FetchData
+        :filter="filter"
+        @on-fetch="(data) => (clientRisks = data)"
+        auto-load
+        ref="clientRisksRef"
+        url="ClientRisks"
+    />
+
+    <QTable
+        :columns="columns"
+        :pagination="{ rowsPerPage: 12 }"
+        :rows="rows"
+        class="full-width q-mt-md"
+        row-key="id"
+        v-if="rows?.length"
+    >
+        <template #body-cell="props">
+            <QTd :props="props">
+                <QTr :props="props" class="cursor-pointer">
+                    <component
+                        :is="tableColumnComponents[props.col.name].component"
+                        class="col-content"
+                        v-bind="tableColumnComponents[props.col.name].props(props)"
+                        @click="tableColumnComponents[props.col.name].event(props)"
+                    >
+                        <template v-if="props.col.name !== 'isConciliate'">
+                            {{ props.value }}
+                        </template>
+                        <WorkerDescriptorProxy :id="workerId" />
+                    </component>
+                </QTr>
+            </QTd>
+        </template>
+    </QTable>
+
+    <h5 class="flex justify-center label-color" v-else>
+        {{ t('globals.noResults') }}
+    </h5>
+
+    <QDrawer :width="256" show-if-above side="right" v-model="stateStore.rightDrawer">
+        <div class="q-mt-xl q-px-md">
+            <VnSelectFilter
+                :label="t('Company')"
+                :options="companiesOptions"
+                @update:model-value="updateCompanyId($event)"
+                hide-selected
+                option-label="code"
+                option-value="id"
+                v-model="companyId"
+            />
+        </div>
+
+        <QCard class="q-ma-md q-pa-md q-mt-lg" v-if="rows?.length">
+            <QCardSection>
+                <div class="flex justify-center text-subtitle1 text-bold">
+                    {{ t('Total by company') }}
+                </div>
+                <div class="flex justify-center">
+                    <div class="q-mr-sm" v-if="clientRisks?.length">
+                        {{ clientRisks[0].company.code }}:
+                    </div>
+                    <div v-if="clientRisks?.length">
+                        {{ toCurrency(clientRisks[0].amount) }}
+                    </div>
+                </div>
+            </QCardSection>
+        </QCard>
+    </QDrawer>
+
+    <QPageSticky :offset="[18, 18]">
+        <QBtn @click.stop="showNewPaymentDialog()" color="primary" fab icon="add" />
+        <QTooltip>
+            {{ t('New payment') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
+
+<i18n>
+es:
+    Company: Empresa
+    Total by company: Total por empresa
+    New payment: Añadir pago
+    Date: Fecha
+    Creation date: Fecha de creación
+    Employee: Empleado
+    Reference: Referencia
+    Bank: Caja
+    Debit: Debe
+    Havings: Haber
+    Balance: Balance
+    Conciliated: Conciliado
+</i18n>

src/pages/Customer/Card/CustomerConsignees.vue

@@ -137,21 +137,15 @@ const toCustomerConsigneeEdit = (consigneeId) => {
                         </div>
                     </div>
                 </QCard>
-
-                <QPageSticky :offset="[18, 18]">
-                    <QBtn
-                        @click.stop="toCustomerConsigneeCreate()"
-                        color="primary"
-                        fab
-                        icon="add"
-                    />
-                    <QTooltip>
-                        {{ t('New consignee') }}
-                    </QTooltip>
-                </QPageSticky>
             </template>
         </VnPaginate>
     </QCard>
+    <QPageSticky :offset="[18, 18]">
+        <QBtn @click.stop="toCustomerConsigneeCreate()" color="primary" fab icon="add" />
+        <QTooltip>
+            {{ t('New consignee') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
 
 <style lang="scss" scoped>

src/pages/Customer/Card/CustomerCreditContracts.vue

@@ -0,0 +1,3 @@
+<template>
+    <div class="flex justify-center">Customer credit contracts</div>
+</template>

src/pages/Customer/Card/CustomerCreditOpinion.vue

@@ -0,0 +1,3 @@
+<template>
+    <div class="flex justify-center">Customer credit opinion</div>
+</template>

src/pages/Customer/Card/CustomerCredits.vue

@@ -1,11 +1,11 @@
 <script setup>
-import { ref, computed, onBeforeMount, onMounted } from 'vue';
+import { ref, computed, onBeforeMount } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
 import { date, QBtn } from 'quasar';
 
-import { toCurrency, toDate } from 'src/filters';
+import { toCurrency } from 'src/filters';
 import { useArrayData } from 'composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
 
@@ -18,6 +18,7 @@ const stateStore = useStateStore();
 
 const arrayData = ref(null);
 const workerId = ref(0);
+const rows = computed(() => arrayData.value.store.data);
 
 onBeforeMount(async () => {
     const filter = {
@@ -42,16 +43,6 @@ onBeforeMount(async () => {
     stateStore.rightDrawer = true;
 });
 
-onMounted(() => {
-    const filteredColumns = columns.value.filter(
-        (col) => col.name !== 'actions' && col.name !== 'customerStatus'
-    );
-    allColumnNames.value = filteredColumns.map((col) => col.name);
-});
-
-const rows = computed(() => arrayData.value.store.data);
-const allColumnNames = ref([]);
-
 const tableColumnComponents = {
     created: {
         component: 'span',

src/pages/Customer/Card/CustomerDescriptorProxy.vue

@@ -1,6 +1,6 @@
 <script setup>
 import CustomerDescriptor from './CustomerDescriptor.vue';
-import CustomerSummaryDialog from './CustomerSummaryDialog.vue';
+import CustomerSummary from './CustomerSummary.vue';
 
 const $props = defineProps({
     id: {
@@ -12,10 +12,6 @@ const $props = defineProps({
 
 <template>
     <QPopupProxy>
-        <CustomerDescriptor
+        <CustomerDescriptor v-if="$props.id" :id="$props.id" :summary="CustomerSummary" />
-            v-if="$props.id"
-            :id="$props.id"
-            :summary="CustomerSummaryDialog"
-        />
     </QPopupProxy>
 </template>

src/pages/Customer/Card/CustomerGreuges.vue

@@ -1,3 +1,202 @@
+<script setup>
+import { ref, computed, onBeforeMount } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { date, QBtn } from 'quasar';
+
+import { useArrayData } from 'composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
+import { toCurrency } from 'src/filters';
+
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const stateStore = useStateStore();
+
+const arrayData = ref(null);
+const totalAmount = ref(0);
+const workerId = ref(0);
+const rows = computed(() => arrayData.value.store.data);
+
+onBeforeMount(async () => {
+    const filter = {
+        include: [
+            {
+                relation: 'greugeType',
+                scope: {
+                    fields: ['id', 'name'],
+                },
+            },
+            {
+                relation: 'user',
+                scope: {
+                    fields: ['id', 'name'],
+                },
+            },
+        ],
+        order: 'shipped DESC, amount',
+        where: {
+            clientFk: `${route.params.id}`,
+        },
+        limit: 20,
+    };
+
+    arrayData.value = useArrayData('CustomerGreugesCard', {
+        url: 'greuges',
+        filter,
+    });
+    await arrayData.value.fetch({ append: false });
+    totalAmount.value = arrayData.value.store.data.reduce((accumulator, currentValue) => {
+        return accumulator + currentValue.amount;
+    }, 0);
+    stateStore.rightDrawer = true;
+});
+
+const tableColumnComponents = {
+    date: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    createdBy: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: (prop) => {
+            selectWorkerId(prop.row.clientFk);
+        },
+    },
+    comment: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    type: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    amount: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+};
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        field: 'shipped',
+        label: t('Date'),
+        name: 'date',
+        format: (value) => date.formatDate(value, 'DD/MM/YYYY hh:mm:ss'),
+    },
+    {
+        align: 'left',
+        field: (value) => value.user.name,
+        label: t('Created by'),
+        name: 'createdBy',
+    },
+    {
+        align: 'left',
+        field: 'description',
+        label: t('Comment'),
+        name: 'comment',
+    },
+    {
+        align: 'left',
+        field: (value) => value.greugeType.name,
+        label: t('Type'),
+        name: 'type',
+    },
+    {
+        align: 'left',
+        field: 'amount',
+        label: t('Amount'),
+        name: 'amount',
+        format: (value) => toCurrency(value),
+    },
+]);
+
+const selectWorkerId = (id) => {
+    workerId.value = id;
+};
+
+const toCustomerGreugeCreate = () => {
+    router.push({ name: 'CustomerGreugeCreate' });
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Greuges</div>
+    <QPage class="column items-center q-pa-md">
+        <QCard class="full-width" v-if="totalAmount">
+            <h6 class="flex justify-end q-my-lg q-pr-lg">
+                <span class="label-color q-mr-md">{{ t('Total') }}:</span>
+                {{ toCurrency(totalAmount) }}
+            </h6>
+        </QCard>
+
+        <QTable
+            :columns="columns"
+            :pagination="{ rowsPerPage: 12 }"
+            :rows="rows"
+            class="full-width q-mt-md"
+            row-key="id"
+            v-if="rows?.length"
+        >
+            <template #body-cell="props">
+                <QTd :props="props">
+                    <QTr :props="props" class="cursor-pointer">
+                        <component
+                            :is="tableColumnComponents[props.col.name].component"
+                            class="col-content"
+                            v-bind="tableColumnComponents[props.col.name].props(props)"
+                            @click="tableColumnComponents[props.col.name].event(props)"
+                        >
+                            {{ props.value }}
+                            <WorkerDescriptorProxy :id="workerId" />
+                        </component>
+                    </QTr>
+                </QTd>
+            </template>
+        </QTable>
+
+        <QCard class="full-width" v-else>
+            <h5 class="flex justify-center label-color">
+                {{ t('globals.noResults') }}
+            </h5>
+        </QCard>
+    </QPage>
+
+    <QPageSticky :offset="[18, 18]">
+        <QBtn @click.stop="toCustomerGreugeCreate()" color="primary" fab icon="add" />
+        <QTooltip>
+            {{ t('New greuge') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
+
+<style lang="scss">
+.consignees-card {
+    border: 2px solid var(--vn-light-gray);
+    border-radius: 10px;
+    padding: 10px;
+}
+
+.label-color {
+    color: var(--vn-label);
+}
+</style>
+
+<i18n>
+es:
+    Total: Total
+    Date: Fecha
+    Created by: Creado por
+    Comment: Comentario
+    Type: Tipo
+    Amount: Importe
+    New greuge: Nuevo greuge
+</i18n>

src/pages/Customer/Card/CustomerLog.vue

@@ -1,3 +1,262 @@
+<script setup>
+import { onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import { useStateStore } from 'stores/useStateStore';
+
+import FetchData from 'components/FetchData.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const stateStore = useStateStore();
+
+const clientLogs = ref(null);
+const urlClientLogsEditors = ref(null);
+const urlClientLogsModels = ref(null);
+const clientLogsModelsOptions = ref([]);
+const clientLogsOptions = ref([]);
+const clientLogsEditorsOptions = ref([]);
+const radioButtonValue = ref('all');
+const insert = ref(false);
+const update = ref(false);
+const deletes = ref(false);
+const select = ref(false);
+const neq = ref(null);
+const inq = ref([]);
+
+const filterClientLogs = {
+    fields: [
+        'id',
+        'originFk',
+        'userFk',
+        'action',
+        'changedModel',
+        'oldInstance',
+        'newInstance',
+        'creationDate',
+        'changedModel',
+        'changedModelId',
+        'changedModelValue',
+        'description',
+    ],
+    include: [
+        {
+            relation: 'user',
+            scope: {
+                fields: ['nickname', 'name', 'image'],
+                include: { relation: 'worker', scope: { fields: ['id'] } },
+            },
+        },
+    ],
+    order: ['creationDate DESC', 'id DESC'],
+    limit: 20,
+};
+const filterClientLogsEditors = {
+    fields: ['id', 'nickname', 'name', 'image'],
+    order: 'nickname',
+    limit: 30,
+};
+const filterClientLogsModels = { order: ['changedModel'] };
+const urlBase = `ClientLogs/${route.params.id}`;
+
+onBeforeMount(() => {
+    stateStore.rightDrawer = true;
+    filterClientLogs.where = {
+        and: [
+            { originFk: `${route.params.id}` },
+            { userFk: { neq: radioButtonValue.value } },
+            { action: { inq: inq.value } },
+        ],
+    };
+    urlClientLogsEditors.value = `${urlBase}/editors`;
+    urlClientLogsModels.value = `${urlBase}/models`;
+});
+
+const getClientLogs = async (value, status) => {
+    if (status === 'neq') {
+        neq.value = value;
+    } else {
+        setInq(value, status);
+    }
+    filterClientLogs.where = {
+        and: [
+            { originFk: `${route.params.id}` },
+            { userFk: { neq: neq.value } },
+            { action: { inq: inq.value } },
+        ],
+    };
+    clientLogs.value?.fetch();
+};
+
+const setInq = (value, status) => {
+    if (status) {
+        if (!inq.value.includes(value)) {
+            inq.value.push(value);
+        }
+    } else {
+        inq.value = inq.value.filter((item) => item !== value);
+    }
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Log</div>
+    <FetchData
+        :filter="filterClientLogs"
+        @on-fetch="(data) => (clientLogsOptions = data)"
+        auto-load
+        url="ClientLogs"
+        ref="clientLogs"
+    />
+    <FetchData
+        :filter="filterClientLogsEditors"
+        @on-fetch="(data) => (clientLogsEditorsOptions = data)"
+        auto-load
+        :url="urlClientLogsEditors"
+    />
+    <FetchData
+        :filter="filterClientLogsModels"
+        @on-fetch="(data) => (clientLogsModelsOptions = data)"
+        auto-load
+        :url="urlClientLogsModels"
+    />
+
+    <h5 class="flex justify-center label-color">
+        {{ t('globals.noResults') }}
+    </h5>
+
+    <QDrawer :width="256" show-if-above side="right" v-model="stateStore.rightDrawer">
+        <div class="q-mt-sm q-px-md">
+            <VnInput :label="t('Search')">
+                <template #append>
+                    <QIcon name="info" class="cursor-pointer">
+                        <QTooltip>
+                            {{ t('Search by id or concept') }}
+                        </QTooltip>
+                    </QIcon>
+                </template>
+            </VnInput>
+            <VnSelectFilter
+                :label="t('Entity')"
+                :options="[]"
+                class="q-mt-md"
+                hide-selected
+                option-label="name"
+                option-value="id"
+            />
+
+            <div class="q-mt-lg">
+                <QRadio
+                    :dark="true"
+                    :label="t('All')"
+                    @update:model-value="getClientLogs($event, 'neq')"
+                    dense
+                    v-model="radioButtonValue"
+                    val="all"
+                />
+            </div>
+            <div class="q-mt-md">
+                <QRadio
+                    :dark="true"
+                    :label="t('User')"
+                    @update:model-value="getClientLogs($event, 'neq')"
+                    dense
+                    v-model="radioButtonValue"
+                    val="user"
+                />
+            </div>
+            <div class="q-mt-md">
+                <QRadio
+                    :dark="true"
+                    :label="t('System')"
+                    @update:model-value="getClientLogs($event, 'neq')"
+                    dense
+                    v-model="radioButtonValue"
+                    val="system"
+                />
+            </div>
+
+            <VnSelectFilter
+                :label="t('User')"
+                :options="[]"
+                class="q-mt-sm"
+                hide-selected
+                option-label="name"
+                option-value="id"
+            />
+            <VnInput :label="t('Changes')" class="q-mt-sm">
+                <template #append>
+                    <QIcon name="info" class="cursor-pointer">
+                        <QTooltip>
+                            {{ t('Search by changes') }}
+                        </QTooltip>
+                    </QIcon>
+                </template>
+            </VnInput>
+
+            <div class="q-mt-md">
+                <QCheckbox
+                    :label="t('Creates')"
+                    @update:model-value="getClientLogs('insert', $event)"
+                    v-model="insert"
+                />
+            </div>
+            <div>
+                <QCheckbox
+                    :label="t('Edits')"
+                    @update:model-value="getClientLogs('update', $event)"
+                    v-model="update"
+                />
+            </div>
+            <div>
+                <QCheckbox
+                    :label="t('Deletes')"
+                    @update:model-value="getClientLogs('delete', $event)"
+                    v-model="deletes"
+                />
+            </div>
+            <div>
+                <QCheckbox
+                    :label="t('Accesses')"
+                    @update:model-value="getClientLogs('select', $event)"
+                    v-model="select"
+                />
+            </div>
+
+            <VnInputDate :label="t('Date')" class="q-mt-sm" />
+            <VnInput :label="t('To')" class="q-mt-md" />
+        </div>
+    </QDrawer>
+
+    <QPageSticky
+        :offset="[18, 18]"
+        v-if="radioButtonValue !== 'all' || insert || update || deletes || select"
+    >
+        <QBtn color="primary" fab icon="filter_alt_off" />
+        <QTooltip>
+            {{ t('Quit filter') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
+
+<i18n>
+es:
+    Search: Buscar
+    Search by id or concept: xxx
+    Entity: Entidad
+    All: Todo
+    User: Usuario
+    System: Sistema
+    Changes: Cambios
+    Search by changes: xxx
+    Creates: Crea
+    Edits: Modifica
+    Deletes: Elimina
+    Accesses: Accede
+    Date: Fecha
+    To: Hasta
+    Quit filter: Quitar filtro
+</i18n>

src/pages/Customer/Card/CustomerNotes.vue

@@ -62,7 +62,7 @@ const toCustomerNoteCreate = () => {
 
                 <QPageSticky :offset="[18, 18]">
                     <QBtn
-                        @click.stop="toCustomerConsigneeCreate()"
+                        @click.stop="toCustomerNoteCreate()"
                         color="primary"
                         fab
                         icon="add"

src/pages/Customer/Card/CustomerRecoveries.vue

@@ -1,3 +1,157 @@
+<script setup>
+import { ref, computed, onBeforeMount } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { date, QBtn } from 'quasar';
+
+import { useArrayData } from 'composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
+import { toCurrency } from 'src/filters';
+
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const stateStore = useStateStore();
+
+const arrayData = ref(null);
+const workerId = ref(0);
+const rows = computed(() => arrayData.value.store.data);
+
+onBeforeMount(async () => {
+    const filter = {
+        where: { clientFk: `${route.params.id}` },
+        order: ['started DESC'],
+        limit: 20,
+    };
+
+    arrayData.value = useArrayData('CustomerRecoveriesCard', {
+        url: 'Recoveries',
+        filter,
+    });
+    await arrayData.value.fetch({ append: false });
+    stateStore.rightDrawer = true;
+});
+
+const tableColumnComponents = {
+    since: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    to: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    amount: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    period: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+};
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        field: 'started',
+        label: t('Since'),
+        name: 'since',
+        format: (value) => date.formatDate(value, 'DD/MM/YYYY'),
+    },
+    {
+        align: 'left',
+        field: 'finished',
+        label: t('To'),
+        name: 'to',
+        format: (value) => date.formatDate(value, 'DD/MM/YYYY'),
+    },
+    {
+        align: 'left',
+        field: 'amount',
+        label: t('Amount'),
+        name: 'amount',
+        format: (value) => toCurrency(value),
+    },
+    {
+        align: 'left',
+        field: 'period',
+        label: t('Period'),
+        name: 'period',
+    },
+]);
+
+const toCustomerRecoverieCreate = () => {
+    router.push({ name: 'CustomerRecoverieCreate' });
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Recoveries</div>
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :columns="columns"
+            :pagination="{ rowsPerPage: 12 }"
+            :rows="rows"
+            class="full-width q-mt-md"
+            row-key="id"
+            v-if="rows?.length"
+        >
+            <template #body-cell="props">
+                <QTd :props="props">
+                    <QTr :props="props" class="cursor-pointer">
+                        <component
+                            :is="tableColumnComponents[props.col.name].component"
+                            class="col-content"
+                            v-bind="tableColumnComponents[props.col.name].props(props)"
+                            @click="tableColumnComponents[props.col.name].event(props)"
+                        >
+                            {{ props.value }}
+                            <WorkerDescriptorProxy :id="workerId" />
+                        </component>
+                    </QTr>
+                </QTd>
+            </template>
+        </QTable>
+
+        <QCard class="full-width" v-else>
+            <h5 class="flex justify-center label-color">
+                {{ t('globals.noResults') }}
+            </h5>
+        </QCard>
+    </QPage>
+
+    <QPageSticky :offset="[18, 18]">
+        <QBtn @click.stop="toCustomerRecoverieCreate()" color="primary" fab icon="add" />
+        <QTooltip>
+            {{ t('New recoverie') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
+
+<style lang="scss">
+.consignees-card {
+    border: 2px solid var(--vn-light-gray);
+    border-radius: 10px;
+    padding: 10px;
+}
+
+.label-color {
+    color: var(--vn-label);
+}
+</style>
+
+<i18n>
+es:
+    Since: Desde
+    To: Hasta
+    Amount: Importe
+    Period: Periodo
+    New recoverie: Nuevo recobro
+</i18n>

src/pages/Customer/Card/CustomerSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import CustomerSummary from './CustomerSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <CustomerSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

src/pages/Customer/Card/CustomerWebAccess.vue

@@ -1,3 +1,69 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const filter = { where: { id: `${route.params.id}` } };
+</script>
+
 <template>
-    <div class="flex justify-center">Web access</div>
+    <FormModel
+        :filter="filter"
+        :observe-form-changes="false"
+        :url-update="`Clients/${route.params.id}/updateUser`"
+        :url="'VnUsers/preview'"
+        model="client"
+    >
+        <template #form="{ data }">
+            <div
+                v-for="(item, index) in data"
+                :key="index"
+                :class="{
+                    'q-mb-md': index < data.length - 1,
+                }"
+            >
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QCheckbox
+                            :label="t('Enable web access')"
+                            v-model="item.active"
+                        />
+                    </div>
+                </VnRow>
+
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput :label="t('User')" v-model="item.name" />
+                    </div>
+                    <div class="col">
+                        <VnInput :label="t('Recovery email')" v-model="item.email">
+                            <template #append>
+                                <QIcon name="info" class="cursor-pointer">
+                                    <QTooltip>{{
+                                        t(
+                                            'This email is used for user to regain access their account'
+                                        )
+                                    }}</QTooltip>
+                                </QIcon>
+                            </template>
+                        </VnInput>
+                    </div>
+                </VnRow>
+            </div>
+        </template>
+    </FormModel>
 </template>
+
+<i18n>
+es:
+    Enable web access: Habilitar acceso web
+    User: Usuario
+    Recovery email: Correo de recuperacion
+    This email is used for user to regain access their account: Este correo electrónico se usa para que el usuario recupere el acceso a su cuenta
+</i18n>

src/pages/Customer/CustomerList.vue

@@ -1,34 +1,25 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import CustomerFilter from './CustomerFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import CustomerSummary from './Card/CustomerSummary.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
-const quasar = useQuasar();
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 
 function navigate(id) {
     router.push({ path: `/customer/${id}` });
 }
 
-function viewSummary(id) {
-    quasar.dialog({
-        component: CustomerSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
-
 const redirectToCreateView = () => {
     router.push({ name: 'CustomerCreate' });
 };
@@ -98,7 +89,7 @@ const redirectToCreateView = () => {
                             />
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, CustomerSummary)"
                                 color="primary"
                                 style="margin-top: 15px"
                             />

src/pages/Customer/ExtendedList/CustomerExtendedListActions.vue

@@ -1,14 +1,12 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-
+import CustomerSummary from '../Card/CustomerSummary.vue';
-import { useQuasar } from 'quasar';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-
-import CustomerSummaryDialog from '../Card/CustomerSummaryDialog.vue';
 
 const { t } = useI18n();
-const quasar = useQuasar();
 const router = useRouter();
+const { viewSummary } = useSummaryDialog();
 
 const $props = defineProps({
     id: {
@@ -27,15 +25,6 @@ const redirectToCreateView = () => {
         },
     });
 };
-
-const viewSummary = () => {
-    quasar.dialog({
-        component: CustomerSummaryDialog,
-        componentProps: {
-            id: $props.id,
-        },
-    });
-};
 </script>
 
 <template>
@@ -51,7 +40,7 @@ const viewSummary = () => {
             </QTooltip>
         </QIcon>
         <QIcon
-            @click.stop="viewSummary"
+            @click.stop="viewSummary($props.id, CustomerSummary)"
             class="q-ml-md"
             color="primary"
             name="preview"

src/pages/Customer/components/CustomerConsigneeCreate.vue

@@ -12,7 +12,7 @@ import VnInput from 'src/components/common/VnInput.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
-import CustomsNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
+import CustomerNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -232,7 +232,7 @@ const toCustomerConsignees = () => {
                         v-model="data.customsAgentFk"
                     >
                         <template #form>
-                            <CustomsNewCustomsAgent @on-data-saved="refreshData()" />
+                            <CustomerNewCustomsAgent @on-data-saved="refreshData()" />
                         </template>
                     </VnSelectDialog>
                 </div>

src/pages/Customer/components/CustomerGreugeCreate.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { onMounted, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const initialData = reactive({
+    amount: null,
+    description: null,
+    greugeTypeFk: null,
+    shipped: '2001-01-01T11:00:00.000Z',
+});
+
+const greugeTypes = ref([]);
+
+onMounted(() => {
+    initialData.clientFk = `${route.params.id}`;
+});
+
+const toCustomerGreuges = () => {
+    router.push({
+        name: 'CustomerGreuges',
+        params: {
+            id: route.params.id,
+        },
+    });
+};
+</script>
+
+<template>
+    <fetch-data @on-fetch="(data) => (greugeTypes = data)" auto-load url="greugeTypes" />
+
+    <FormModel
+        :form-initial-data="initialData"
+        :observe-form-changes="false"
+        @on-data-saved="toCustomerGreuges()"
+        model="client"
+        url-create="Greuges"
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput :label="t('Amount')" type="number" v-model="data.amount" />
+                </div>
+                <div class="col">
+                    <VnInputDate :label="t('Date')" v-model="data.shipped" />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput :label="t('Comment')" v-model="data.description" />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Type')"
+                        :options="greugeTypes"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.greugeTypeFk"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
+
+<style lang="scss" scoped>
+.add-icon {
+    cursor: pointer;
+    background-color: $primary;
+    border-radius: 50px;
+}
+</style>
+
+<i18n>
+es:
+    Amount: Importe
+    Date: Fecha
+    Comment: Comentario
+    Type: Tipo
+</i18n>

src/pages/Customer/components/CustomerNewPayment.vue

@@ -0,0 +1,286 @@
+<script setup>
+import { onBeforeMount, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const $props = defineProps({
+    companyId: {
+        type: Number,
+        required: true,
+    },
+    totalCredit: {
+        type: Number,
+        required: true,
+    },
+    promise: {
+        type: Function,
+        required: true,
+    },
+});
+
+const closeButton = ref(null);
+const urlCreate = ref([]);
+const companyOptions = ref([]);
+const bankOptions = ref([]);
+const clientFindOne = ref([]);
+const deliveredAmount = ref(null);
+const amountToReturn = ref(null);
+const viewRecipt = ref(true);
+const sendEmail = ref(false);
+const isLoading = ref(false);
+
+const filterBanks = {
+    fields: ['id', 'bank', 'accountingTypeFk'],
+    include: { relation: 'accountingType' },
+    order: 'id',
+    limit: 30,
+};
+
+const filterClientFindOne = {
+    fields: ['email'],
+    where: {
+        id: `${route.params.id}`,
+    },
+};
+
+const initialData = reactive({
+    amountPaid: $props.totalCredit,
+    bankFk: null,
+    clientFk: `${route.params.id}`,
+    companyFk: $props.companyId,
+    compensationAccount: null,
+    description: null,
+    email: clientFindOne.value.email,
+    payed: null,
+});
+
+onBeforeMount(() => {
+    urlCreate.value = `Clients/${route.params.id}/createReceipt`;
+});
+
+const setPaymentType = (id) => {
+    initialData.payed = '2001-01-01T11:00:00.000Z';
+    if (id === 1) initialData.description = 'Credit card';
+    if (id === 2) initialData.description = 'Cash';
+    if (id === 3 || id === 3117) initialData.description = '';
+    if (id === 4) initialData.description = 'Transfer';
+};
+
+const calculateFromAmount = (event) => {
+    amountToReturn.value = parseFloat(event) * -1 + parseFloat(deliveredAmount.value);
+};
+
+const calculateFromDeliveredAmount = (event) => {
+    amountToReturn.value = parseFloat($props.totalCredit) * -1 + parseFloat(event);
+};
+
+const setClientEmail = (data) => {
+    initialData.email = data.email;
+};
+
+const onDataSaved = async () => {
+    isLoading.value = true;
+    if ($props.promise) {
+        try {
+            await $props.promise();
+        } finally {
+            isLoading.value = false;
+            if (closeButton.value) closeButton.value.click();
+        }
+    }
+};
+</script>
+
+<template>
+    <QDialog ref="dialogRef">
+        <fetch-data
+            @on-fetch="(data) => (companyOptions = data)"
+            auto-load
+            url="Companies"
+        />
+        <fetch-data
+            :filter="filterBanks"
+            @on-fetch="(data) => (bankOptions = data)"
+            auto-load
+            url="Banks"
+        />
+        <fetch-data
+            :filter="filterClientFindOne"
+            @on-fetch="setClientEmail"
+            auto-load
+            url="Clients/findOne"
+        />
+
+        <FormModel
+            :default-actions="false"
+            :form-initial-data="initialData"
+            :observe-form-changes="false"
+            :url-create="urlCreate"
+            @on-data-saved="onDataSaved()"
+        >
+            <template #form="{ data }">
+                <span ref="closeButton" class="row justify-end close-icon" v-close-popup>
+                    <QIcon name="close" size="sm" />
+                </span>
+
+                <h5 class="flex justify-center q-mt-xs">
+                    {{ t('New payment') }}
+                </h5>
+
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInputDate
+                            :label="t('Date')"
+                            :required="true"
+                            v-model="data.payed"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('Company')"
+                            :options="companyOptions"
+                            :required="true"
+                            hide-selected
+                            option-label="code"
+                            option-value="id"
+                            v-model="data.companyFk"
+                        />
+                    </div>
+                </VnRow>
+
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('Bank')"
+                            :options="bankOptions"
+                            :required="true"
+                            @update:model-value="setPaymentType($event)"
+                            hide-selected
+                            option-label="bank"
+                            option-value="id"
+                            v-model="data.bankFk"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>
+                                            {{ scope.opt.id }}:&ensp;{{ scope.opt.bank }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelectFilter>
+                    </div>
+                    <div class="col">
+                        <VnInput
+                            :label="t('Amount')"
+                            :required="true"
+                            @update:model-value="calculateFromAmount($event)"
+                            type="number"
+                            v-model.number="data.amountPaid"
+                        />
+                    </div>
+                </VnRow>
+
+                <div class="text-h6" v-if="data.bankFk === 3 || data.bankFk === 3117">
+                    {{ t('Compensation') }}
+                </div>
+
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col" v-if="data.bankFk === 3 || data.bankFk === 3117">
+                        <VnInput
+                            :label="t('Compensation account')"
+                            v-model="data.compensationAccount"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnInput
+                            :label="t('Reference')"
+                            :required="true"
+                            v-model="data.description"
+                        />
+                    </div>
+                </VnRow>
+
+                <div class="q-mt-lg" v-if="data.bankFk === 2">
+                    <div class="text-h6">{{ t('Cash') }}</div>
+
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <VnInput
+                                :label="t('Delivered amount')"
+                                @update:model-value="calculateFromDeliveredAmount($event)"
+                                type="number"
+                                v-model="deliveredAmount"
+                            />
+                        </div>
+                        <div class="col">
+                            <VnInput
+                                :label="t('Amount to return')"
+                                disable
+                                type="number"
+                                v-model="amountToReturn"
+                            />
+                        </div>
+                    </VnRow>
+
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <QCheckbox v-model="viewRecipt" />
+                        </div>
+                        <div class="col">
+                            <QCheckbox v-model="sendEmail" />
+                        </div>
+                    </VnRow>
+                </div>
+
+                <div class="q-mt-lg row justify-end">
+                    <QBtn
+                        :disabled="isLoading"
+                        :label="t('globals.cancel')"
+                        :loading="isLoading"
+                        class="q-ml-sm"
+                        color="primary"
+                        flat
+                        type="reset"
+                        v-close-popup
+                    />
+                    <QBtn
+                        :disabled="isLoading"
+                        :label="t('globals.save')"
+                        :loading="isLoading"
+                        color="primary"
+                        type="submit"
+                    />
+                </div>
+            </template>
+        </FormModel>
+    </QDialog>
+</template>
+
+<i18n>
+es:
+    New payment: Añadir pago
+    Date: Fecha
+    Company: Empresa
+    Bank: Caja
+    Amount: Importe
+    Reference: Referencia
+    Cash: Efectivo
+    Delivered amount: Cantidad entregada
+    Amount to return: Cantidad a devolver
+    View recipt: Ver recibido
+    Send email: Enviar correo
+    Compensation: Compensación
+    Compensation account: Cuenta para compensar
+</i18n>

src/pages/Customer/components/CustomerNoteCreate.vue

@@ -32,8 +32,8 @@ const toCustomerNotes = () => {
     <FormModel
         :form-initial-data="initialData"
         :observe-form-changes="false"
-        url-create="ClientObservations"
         @on-data-saved="toCustomerNotes()"
+        url-create="ClientObservations"
     >
         <template #form="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">

src/pages/Customer/components/CustomerRecoverieCreate.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { onMounted, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const initialData = reactive({
+    started: '2001-01-01T11:00:00.000Z',
+    finished: null,
+    amount: null,
+    period: null,
+});
+
+onMounted(() => {
+    initialData.clientFk = `${route.params.id}`;
+});
+
+const toCustomerRecoveries = () => {
+    router.push({
+        name: 'CustomerRecoveries',
+        params: {
+            id: route.params.id,
+        },
+    });
+};
+</script>
+
+<template>
+    <FormModel
+        :form-initial-data="initialData"
+        :observe-form-changes="false"
+        @on-data-saved="toCustomerRecoveries()"
+        model="client"
+        url-create="Recoveries"
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInputDate :label="t('Since')" v-model="data.started" />
+                </div>
+                <div class="col">
+                    <VnInputDate :label="t('To')" v-model="data.finished" />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput :label="t('Amount')" type="number" v-model="data.amount" />
+                </div>
+                <div class="col">
+                    <VnInput :label="t('Period')" type="number" v-model="data.period" />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
+
+<i18n>
+es:
+    Since: Desde
+    To: Hasta
+    Amount: Importe
+    Period: Periodo
+</i18n>

src/pages/Entry/Card/EntrySummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import EntrySummary from './EntrySummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <EntrySummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

src/pages/Entry/EntryList.vue

@@ -2,22 +2,20 @@
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
-
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
-import EntrySummaryDialog from './Card/EntrySummaryDialog.vue';
+import EntrySummary from './Card/EntrySummary.vue';
 import EntryFilter from './EntryFilter.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters/index';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
 const router = useRouter();
-const quasar = useQuasar();
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 
 function navigate(id) {
     router.push({ path: `/entry/${id}` });
@@ -27,15 +25,6 @@ const redirectToCreateView = () => {
     router.push({ name: 'EntryCreate' });
 };
 
-function viewSummary(id) {
-    quasar.dialog({
-        component: EntrySummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
-
 onMounted(async () => {
     stateStore.rightDrawer = true;
 });
@@ -121,7 +110,7 @@ onMounted(async () => {
                         <template #actions>
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, EntrySummary)"
                                 color="primary"
                                 type="submit"
                             />

src/pages/InvoiceIn/Card/InvoiceInBasicData.vue

@@ -36,7 +36,7 @@ const inputFileRef = ref();
 const editDmsRef = ref();
 const createDmsRef = ref();
 
-const requiredFieldRule = (val) => val || t('Required field');
+const requiredFieldRule = (val) => val || t('globals.requiredField');
 const dateMask = '####-##-##';
 const fillMask = '_';
 
@@ -684,7 +684,6 @@ async function upsert() {
         Type: Tipo
         Description: Descripción
         Generate identifier for original file: Generar identificador para archivo original
-        Required field: Campo obligatorio
         File: Fichero
         Create document: Crear documento
         Select a file: Seleccione un fichero

src/pages/InvoiceIn/Card/InvoiceInCard.vue

@@ -44,18 +44,16 @@ const arrayData = useArrayData('InvoiceIn', {
     filter,
 });
 
-onMounted(async () => {
+onMounted(async () => await arrayData.fetch({ append: false }));
-    await arrayData.fetch({ append: false });
+watch(
-    watch(
+    () => route.params.id,
-        () => route.params.id,
+    async (newId, oldId) => {
-        async (newId, oldId) => {
+        if (newId) {
-            if (newId) {
+            arrayData.store.url = `InvoiceIns/${newId}`;
-                arrayData.store.url = `InvoiceIns/${newId}`;
+            await arrayData.fetch({ append: false });
-                await arrayData.fetch({ append: false });
-            }
         }
-    );
+    }
-});
+);
 </script>
 <template>
     <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
@@ -83,6 +81,6 @@ onMounted(async () => {
 
 <i18n>
     es:
-        Search invoice: Buscar factura emitida
+        Search invoice: Buscar factura recibida
         You can search by invoice reference: Puedes buscar por referencia de la factura
     </i18n>

src/pages/InvoiceIn/Card/InvoiceInCorrective.vue

@@ -0,0 +1,164 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useArrayData } from 'src/composables/useArrayData';
+import { useCapitalize } from 'src/composables/useCapitalize';
+import CrudModel from 'src/components/CrudModel.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+const router = useRouter();
+const route = useRoute();
+const { t } = useI18n();
+
+const invoiceId = route.params.id;
+const arrayData = useArrayData('InvoiceIn');
+const invoiceIn = computed(() => arrayData.store.data);
+const invoiceInCorrectionRef = ref();
+const filter = {
+    include: { relation: 'invoiceIn' },
+    where: { correctingFk: invoiceId },
+};
+const columns = computed(() => [
+    {
+        name: 'origin',
+        label: t('Original invoice'),
+        field: (row) => row.correctedFk,
+        sortable: true,
+        tabIndex: 1,
+        align: 'left',
+        style: 'padding-bottom: 20px',
+    },
+    {
+        name: 'type',
+        label: useCapitalize(t('globals.type')),
+        field: (row) => row.cplusRectificationTypeFk,
+        options: cplusRectificationTypes.value,
+        model: 'cplusRectificationTypeFk',
+        optionValue: 'id',
+        optionLabel: 'description',
+        sortable: true,
+        tabIndex: 1,
+        align: 'left',
+    },
+    {
+        name: 'class',
+        label: useCapitalize(t('globals.class')),
+        field: (row) => row.siiTypeInvoiceOutFk,
+        options: siiTypeInvoiceOuts.value,
+        model: 'siiTypeInvoiceOutFk',
+        optionValue: 'id',
+        optionLabel: 'code',
+        sortable: true,
+        tabIndex: 1,
+        align: 'left',
+    },
+    {
+        name: 'reason',
+        label: useCapitalize(t('globals.reason')),
+        field: (row) => row.invoiceCorrectionTypeFk,
+        options: invoiceCorrectionTypes.value,
+        model: 'invoiceCorrectionTypeFk',
+        optionValue: 'id',
+        optionLabel: 'description',
+        sortable: true,
+        tabIndex: 1,
+        align: 'left',
+    },
+]);
+const cplusRectificationTypes = ref([]);
+const siiTypeInvoiceOuts = ref([]);
+const invoiceCorrectionTypes = ref([]);
+const rowsSelected = ref([]);
+
+const requiredFieldRule = (val) => val || t('globals.requiredField');
+
+const onSave = (data) => data.deletes && router.push(`/invoice-in/${invoiceId}/summary`);
+</script>
+<template>
+    <FetchData
+        url="CplusRectificationTypes"
+        @on-fetch="(data) => (cplusRectificationTypes = data)"
+        auto-load
+    />
+    <FetchData
+        url="SiiTypeInvoiceOuts"
+        :where="{ code: { like: 'R%' } }"
+        @on-fetch="(data) => (siiTypeInvoiceOuts = data)"
+        auto-load
+    />
+    <FetchData
+        url="InvoiceCorrectionTypes"
+        @on-fetch="(data) => (invoiceCorrectionTypes = data)"
+        auto-load
+    />
+    <CrudModel
+        ref="invoiceInCorrectionRef"
+        v-if="invoiceIn"
+        data-key="InvoiceInCorrection"
+        url="InvoiceInCorrections"
+        :filter="filter"
+        auto-load
+        v-model:selected="rowsSelected"
+        primary-key="correctingFk"
+        @save-changes="onSave"
+    >
+        <template #body="{ rows }">
+            <QTable
+                v-model:selected="rowsSelected"
+                :columns="columns"
+                :rows="rows"
+                row-key="$index"
+                selection="single"
+                hide-pagination
+                :grid="$q.screen.lt.sm"
+                :pagination="{ rowsPerPage: 0 }"
+            >
+                <template #body-cell-type="{ row, col }">
+                    <QTd>
+                        <VnSelectFilter
+                            class="q-pb-md"
+                            v-model="row[col.model]"
+                            :options="col.options"
+                            :option-value="col.optionValue"
+                            :option-label="col.optionLabel"
+                            :readonly="row.invoiceIn.isBooked"
+                        />
+                    </QTd>
+                </template>
+                <template #body-cell-class="{ row, col }">
+                    <QTd>
+                        <VnSelectFilter
+                            class="q-pb-md"
+                            v-model="row[col.model]"
+                            :options="col.options"
+                            :option-value="col.optionValue"
+                            :option-label="col.optionLabel"
+                            :rules="[requiredFieldRule]"
+                            :readonly="row.invoiceIn.isBooked"
+                        />
+                    </QTd>
+                </template>
+                <template #body-cell-reason="{ row, col }">
+                    <QTd>
+                        <VnSelectFilter
+                            class="q-pb-md"
+                            v-model="row[col.model]"
+                            :options="col.options"
+                            :option-value="col.optionValue"
+                            :option-label="col.optionLabel"
+                            :rules="[requiredFieldRule]"
+                            :readonly="row.invoiceIn.isBooked"
+                        />
+                    </QTd>
+                </template>
+            </QTable>
+        </template>
+    </CrudModel>
+</template>
+<style lang="scss" scoped></style>
+<i18n>
+es:
+    Original invoice: Factura origen
+</i18n>

src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, reactive, computed, onBeforeMount, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
@@ -15,6 +15,8 @@ import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import FetchData from 'src/components/FetchData.vue';
 import SendEmailDialog from 'components/common/SendEmailDialog.vue';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import { useCapitalize } from 'src/composables/useCapitalize';
 
 const $props = defineProps({
     id: {
@@ -34,11 +36,14 @@ const arrayData = useArrayData('InvoiceIn');
 
 const invoiceIn = computed(() => arrayData.store.data);
 const cardDescriptorRef = ref();
-const entityId = computed(() => $props.id || route.params.id);
+const correctionDialogRef = ref();
+const entityId = computed(() => $props.id || +route.params.id);
 const totalAmount = ref();
 const currentAction = ref();
 const config = ref();
-
+const cplusRectificationTypes = ref([]);
+const siiTypeInvoiceOuts = ref([]);
+const invoiceCorrectionTypes = ref([]);
 const actions = {
     book: {
         title: 'Are you sure you want to book this invoice?',
@@ -59,6 +64,9 @@ const actions = {
     sendPdf: {
         cb: sendPdfInvoiceConfirmation,
     },
+    correct: {
+        cb: () => correctionDialogRef.value.show(),
+    },
 };
 const filter = {
     include: [
@@ -86,8 +94,90 @@ const filter = {
         },
     ],
 };
-
 const data = ref(useCardDescription());
+const invoiceInCorrection = reactive({
+    correcting: [],
+    corrected: null,
+});
+const routes = reactive({
+    getSupplier: (id) => {
+        return { name: 'SupplierCard', params: { id } };
+    },
+    getTickets: (id) => {
+        return {
+            name: 'InvoiceInList',
+            query: {
+                params: JSON.stringify({ supplierFk: id }),
+            },
+        };
+    },
+    getCorrection: (invoiceInCorrection) => {
+        if (invoiceInCorrection.correcting.length > 1) {
+            return {
+                name: 'InvoiceInList',
+                query: {
+                    params: JSON.stringify({ correctedFk: entityId.value }),
+                },
+            };
+        }
+
+        return {
+            name: 'InvoiceInCard',
+            params: {
+                id: invoiceInCorrection.corrected ?? invoiceInCorrection.correcting[0],
+            },
+        };
+    },
+    getEntry: (id) => {
+        return { name: 'EntryCard', params: { id } };
+    },
+});
+const correctionFormData = reactive({
+    invoiceReason: 2,
+    invoiceType: 2,
+    invoiceClass: 6,
+});
+const isNotFilled = computed(() => Object.values(correctionFormData).includes(null));
+
+onBeforeMount(async () => await setInvoiceCorrection(entityId.value));
+
+watch(
+    () => route.params.id,
+    async (newId) => {
+        invoiceInCorrection.correcting.length = 0;
+        invoiceInCorrection.corrected = null;
+        if (newId) await setInvoiceCorrection(entityId.value);
+    }
+);
+
+async function setInvoiceCorrection(id) {
+    const [{ data: correctingData }, { data: correctedData }] = await Promise.all([
+        axios.get('InvoiceInCorrections', {
+            params: {
+                filter: {
+                    where: {
+                        correctingFk: id,
+                    },
+                },
+            },
+        }),
+        axios.get('InvoiceInCorrections', {
+            params: {
+                filter: {
+                    where: {
+                        correctedFk: id,
+                    },
+                },
+            },
+        }),
+    ]);
+
+    if (correctingData[0]) invoiceInCorrection.corrected = correctingData[0].correctedFk;
+
+    invoiceInCorrection.correcting = correctedData.map(
+        (corrected) => corrected.correctingFk
+    );
+}
 
 async function setData(entity) {
     data.value = useCardDescription(entity.supplierRef, entity.id);
@@ -104,7 +194,7 @@ function openDialog() {
     quasar.dialog({
         component: VnConfirm,
         componentProps: {
-            title: currentAction.value.title,
+            title: t(currentAction.value.title),
             promise: currentAction.value.action,
         },
     });
@@ -135,7 +225,6 @@ async function checkToBook() {
 async function toBook() {
     await axios.post(`InvoiceIns/${entityId.value}/toBook`);
 
-    // Pendiente de sincronizar todo con arrayData
     quasar.notify({
         type: 'positive',
         message: t('globals.dataSaved'),
@@ -163,6 +252,8 @@ async function cloneInvoice() {
     router.push({ path: `/invoice-in/${data.id}/summary` });
 }
 
+const requiredFieldRule = (val) => val || t('globals.requiredField');
+
 const isAdministrative = () => hasAny(['administrative']);
 
 const isAgricultural = () =>
@@ -202,6 +293,14 @@ function triggerMenu(type) {
     if (currentAction.value.cb) currentAction.value.cb();
     else openDialog(type);
 }
+
+const createInvoiceInCorrection = async () => {
+    const { data: correctingId } = await axios.post(
+        'InvoiceIns/corrective',
+        Object.assign(correctionFormData, { id: entityId.value })
+    );
+    router.push({ path: `/invoice-in/${correctingId}/summary` });
+};
 </script>
 
 <template>
@@ -211,7 +310,22 @@ function triggerMenu(type) {
         auto-load
         @on-fetch="(data) => (config = data)"
     />
-    <!--Refactor para añadir en el arrayData-->
+    <FetchData
+        url="CplusRectificationTypes"
+        @on-fetch="(data) => (cplusRectificationTypes = data)"
+        auto-load
+    />
+    <FetchData
+        url="SiiTypeInvoiceOuts"
+        :where="{ code: { like: 'R%' } }"
+        @on-fetch="(data) => (siiTypeInvoiceOuts = data)"
+        auto-load
+    />
+    <FetchData
+        url="InvoiceCorrectionTypes"
+        @on-fetch="(data) => (invoiceCorrectionTypes = data)"
+        auto-load
+    />
     <CardDescriptor
         ref="cardDescriptorRef"
         module="InvoiceIn"
@@ -265,6 +379,22 @@ function triggerMenu(type) {
                     >{{ t('Send agricultural receipt as PDF') }}...</QItemSection
                 >
             </QItem>
+            <QItem
+                v-if="!invoiceInCorrection.corrected"
+                v-ripple
+                clickable
+                @click="triggerMenu('correct')"
+            >
+                <QItemSection>{{ t('Create rectificative invoice') }}...</QItemSection>
+            </QItem>
+            <QItem
+                v-if="entity.dmsFk"
+                v-ripple
+                clickable
+                @click="downloadFile(entity.dmsFk)"
+            >
+                <QItemSection>{{ t('components.smartCard.downloadFile') }}</QItemSection>
+            </QItem>
             <QItem
                 v-if="entity.dmsFk"
                 v-ripple
@@ -285,29 +415,131 @@ function triggerMenu(type) {
         </template>
         <template #actions="{ entity }">
             <QCardActions>
-                <!--Sección proveedores no disponible-->
+                <QBtn
-                <!--Sección entradas no disponible-->
+                    size="md"
+                    icon="vn:supplier"
+                    color="primary"
+                    :to="routes.getSupplier(entity.supplierFk)"
+                >
+                    <QTooltip>{{ t('invoiceIn.list.supplier') }}</QTooltip>
+                </QBtn>
+                <QBtn
+                    size="md"
+                    icon="vn:entry"
+                    color="primary"
+                    :to="routes.getEntry(entity.entryFk)"
+                >
+                    <QTooltip>{{ t('Entry') }}</QTooltip>
+                </QBtn>
                 <QBtn
                     size="md"
                     icon="vn:ticket"
                     color="primary"
-                    :to="{
+                    :to="routes.getTickets(entity.supplierFk)"
-                        name: 'InvoiceInList',
-                        query: {
-                            params: JSON.stringify({ supplierFk: entity.supplierFk }),
-                        },
-                    }"
                 >
                     <QTooltip>{{ t('invoiceOut.card.ticketList') }}</QTooltip>
                 </QBtn>
+                <QBtn
+                    v-if="
+                        invoiceInCorrection.corrected ||
+                        invoiceInCorrection.correcting.length
+                    "
+                    size="md"
+                    :icon="
+                        invoiceInCorrection.corrected
+                            ? 'vn:link-to-corrected'
+                            : 'vn:link-to-correcting'
+                    "
+                    color="primary"
+                    :to="routes.getCorrection(invoiceInCorrection)"
+                >
+                    <QTooltip>{{
+                        invoiceInCorrection.corrected
+                            ? t('Original invoice')
+                            : t('Rectificative invoice')
+                    }}</QTooltip>
+                </QBtn>
             </QCardActions>
         </template>
     </CardDescriptor>
+    <QDialog ref="correctionDialogRef">
+        <QCard>
+            <QCardSection>
+                <QItem class="q-px-none">
+                    <span class="text-primary text-h6 full-width">
+                        {{ t('Create rectificative invoice') }}
+                    </span>
+                    <QBtn icon="close" flat round dense v-close-popup />
+                </QItem>
+            </QCardSection>
+            <QCardSection>
+                <QItem>
+                    <QItemSection>
+                        <QInput
+                            :label="t('Original invoice')"
+                            v-model="entityId"
+                            readonly
+                        />
+                        <VnSelectFilter
+                            :label="`${useCapitalize(t('globals.class'))}*`"
+                            v-model="correctionFormData.invoiceClass"
+                            :options="siiTypeInvoiceOuts"
+                            option-value="id"
+                            option-label="code"
+                            :rules="[requiredFieldRule]"
+                        />
+                    </QItemSection>
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="`${useCapitalize(t('globals.type'))}*`"
+                            v-model="correctionFormData.invoiceType"
+                            :options="cplusRectificationTypes"
+                            option-value="id"
+                            option-label="description"
+                            :rules="[requiredFieldRule]"
+                        />
+                        <VnSelectFilter
+                            :label="`${useCapitalize(t('globals.reason'))}*`"
+                            v-model="correctionFormData.invoiceReason"
+                            :options="invoiceCorrectionTypes"
+                            option-value="id"
+                            option-label="description"
+                            :rules="[requiredFieldRule]"
+                        />
+                    </QItemSection>
+                </QItem>
+            </QCardSection>
+            <QCardActions class="justify-end q-mr-sm">
+                <QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
+                <QBtn
+                    :label="t('globals.save')"
+                    color="primary"
+                    v-close-popup
+                    @click="createInvoiceInCorrection"
+                    :disable="isNotFilled"
+                />
+            </QCardActions>
+        </QCard>
+    </QDialog>
 </template>
 <style lang="scss" scoped>
 .q-dialog {
     .q-card {
-        width: 35em;
+        max-width: 45em;
+        .q-item__section > .q-input {
+            padding-bottom: 1.4em;
+        }
+    }
+}
+
+@media (max-width: $breakpoint-xs) {
+    .q-dialog {
+        .q-card__section:nth-child(2) {
+            .q-item,
+            .q-item__section {
+                flex-direction: column;
+            }
+        }
     }
 }
 </style>
@@ -324,4 +556,8 @@ es:
     Send agricultural receipt as PDF: Enviar recibo agrícola como PDF
     Are you sure you want to send it?: Estás seguro que quieres enviarlo?
     Send PDF invoice: Enviar factura a PDF
+    Create rectificative invoice: Crear factura rectificativa
+    Rectificative invoice: Factura rectificativa
+    Original invoice: Factura origen
+    Entry: entrada
 </i18n>

src/pages/InvoiceIn/Card/InvoiceInSummary.vue

@@ -423,6 +423,6 @@ function getLink(param) {
 </style>
 <i18n>
     es:
-        Search invoice: Buscar factura emitida
+        Search invoice: Buscar factura recibida
         You can search by invoice reference: Puedes buscar por referencia de la factura
 </i18n>

src/pages/InvoiceIn/Card/InvoiceInSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import InvoiceInSummary from './InvoiceInSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <InvoiceInSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

src/pages/InvoiceIn/InvoiceInFilter.vue

@@ -7,6 +7,7 @@ import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
+import { useCapitalize } from 'src/composables/useCapitalize';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -49,6 +50,19 @@ const suppliersRef = ref();
                     </VnInput>
                 </QItemSection>
             </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="useCapitalize(t('params.correctedFk'))"
+                        v-model="params.correctedFk"
+                        is-outlined
+                    >
+                        <template #prepend>
+                            <QIcon name="attachment" size="sm" />
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
             <QItem>
                 <QItemSection>
                     <VnInput
@@ -218,6 +232,7 @@ en:
         serial: Serial
         account: Account
         isBooked: is booked
+        correctedFk: Rectificatives
 es:
     params:
         search: Contiene
@@ -234,6 +249,7 @@ es:
         account: Cuenta
         created: Creada
         dued: Vencida
+        correctedFk: Rectificativas
     From: Desde
     To: Hasta
     Amount: Importe

src/pages/InvoiceIn/InvoiceInList.vue

@@ -2,7 +2,6 @@
 import { ref, onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { downloadFile } from 'src/composables/downloadFile';
 import { toDate, toCurrency } from 'src/filters/index';
@@ -11,12 +10,13 @@ import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import InvoiceInFilter from './InvoiceInFilter.vue';
-import InvoiceInSummaryDialog from './Card/InvoiceInSummaryDialog.vue';
 import { getUrl } from 'src/composables/getUrl';
+import InvoiceInSummary from './Card/InvoiceInSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
 const router = useRouter();
-const quasar = useQuasar();
+const { viewSummary } = useSummaryDialog();
 let url = ref();
 const { t } = useI18n();
 
@@ -29,15 +29,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 function navigate(id) {
     router.push({ path: `/invoice-in/${id}` });
 }
-
-function viewSummary(id) {
-    quasar.dialog({
-        component: InvoiceInSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
@@ -76,6 +67,7 @@ function viewSummary(id) {
                 data-key="InvoiceInList"
                 url="InvoiceIns/filter"
                 order="issued DESC, id DESC"
+                auto-load
             >
                 <template #body="{ rows }">
                     <CardList
@@ -127,7 +119,7 @@ function viewSummary(id) {
 
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, InvoiceInSummary)"
                                 color="primary"
                                 type="submit"
                                 class="q-mt-sm"
@@ -158,7 +150,7 @@ function viewSummary(id) {
 
 <i18n>
 es:
-    Search invoice: Buscar factura emitida
+    Search invoice: Buscar factura recibida
     You can search by invoice reference: Puedes buscar por referencia de la factura
     Download: Descargar
 </i18n>

src/pages/InvoiceOut/Card/InvoiceOutSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import InvoiceOutSummary from './InvoiceOutSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <InvoiceOutSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -1,23 +1,25 @@
 <script setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { exportFile, useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import InvoiceOutSummaryDialog from './Card/InvoiceOutSummaryDialog.vue';
+import InvoiceOutSummary from './Card/InvoiceOutSummary.vue';
 import { toDate, toCurrency } from 'src/filters/index';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import InvoiceOutFilter from './InvoiceOutFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const { t } = useI18n();
 const selectedCards = ref(new Map());
 const quasar = useQuasar();
 const router = useRouter();
 const stateStore = useStateStore();
+const { viewSummary } = useSummaryDialog();
 
 onMounted(() => (stateStore.rightDrawer = true));
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -26,15 +28,6 @@ function navigate(id) {
     router.push({ path: `/invoice-out/${id}` });
 }
 
-function viewSummary(id) {
-    quasar.dialog({
-        component: InvoiceOutSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
-
 const toggleIndividualCard = (cardData) => {
     if (selectedCards.value.has(cardData.id)) {
         selectedCards.value.delete(cardData.id);
@@ -233,7 +226,7 @@ const downloadCsv = () => {
                                 />
                                 <QBtn
                                     :label="t('components.smartCard.openSummary')"
-                                    @click.stop="viewSummary(row.id)"
+                                    @click.stop="viewSummary(row.id, InvoiceOutSummary)"
                                     color="primary"
                                     style="margin-top: 15px"
                                     type="submit"

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -181,7 +181,7 @@ const columns = computed(() => [
     },
     {
         label: t('invoiceOut.negativeBases.comercial'),
-        field: 'comercialName',
+        field: 'workerSocialName',
         name: 'comercial',
         align: 'left',
     },

src/pages/Item/Card/ItemDescriptorProxy.vue

@@ -1,6 +1,6 @@
 <script setup>
 import ItemDescriptor from './ItemDescriptor.vue';
-import ItemSummaryDialog from './ItemSummaryDialog.vue';
+import ItemSummary from './ItemSummary.vue';
 
 const $props = defineProps({
     id: {
@@ -19,7 +19,7 @@ const $props = defineProps({
         <ItemDescriptor
             v-if="$props.id"
             :id="$props.id"
-            :summary="ItemSummaryDialog"
+            :summary="ItemSummary"
             :dated="dated"
         />
     </QPopupProxy>

src/pages/Item/Card/ItemSummaryDialog.vue

@@ -1,5 +0,0 @@
-<template>
-    <QDialog
-        >Item summary dialog (A DESARROLLAR CUANDO SE CREE EL MODULO DE ITEMS)</QDialog
-    >
-</template>

src/pages/Order/Card/OrderSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import OrderSummary from "pages/Order/Card/OrderSummary.vue";
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <OrderSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

src/pages/Order/OrderList.vue

@@ -4,7 +4,6 @@ import { onMounted, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import { toCurrency, toDate } from 'src/filters';
-import { useQuasar } from 'quasar';
 import CardList from 'components/ui/CardList.vue';
 import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
@@ -12,12 +11,13 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
 import OrderFilter from 'pages/Order/Card/OrderFilter.vue';
-import OrderSummaryDialog from 'pages/Order/Card/OrderSummaryDialog.vue';
+import OrderSummary from 'pages/Order/Card/OrderSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
-const quasar = useQuasar();
 const router = useRouter();
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 
 onMounted(() => (stateStore.rightDrawer = true));
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -25,15 +25,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 function navigate(id) {
     router.push({ path: `/order/${id}` });
 }
-
-function viewSummary(id) {
-    quasar.dialog({
-        component: OrderSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
@@ -134,7 +125,7 @@ function viewSummary(id) {
                         <template #actions>
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, OrderSummary)"
                                 color="primary"
                                 style="margin-top: 15px"
                             />

src/pages/Route/Card/RouteSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <RouteSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .route .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

src/pages/Route/RouteList.vue

@@ -2,6 +2,7 @@
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { dashIfEmpty, toDate, toHour } from 'src/filters';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
@@ -13,24 +14,16 @@ import VnInputTime from 'components/common/VnInputTime.vue';
 import axios from 'axios';
 import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
 import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
-import { useQuasar } from 'quasar';
+import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
-import RouteSummaryDialog from 'pages/Route/Card/RouteSummaryDialog.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import {useSession} from "composables/useSession";
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { validate } = useValidator();
-const quasar = useQuasar();
+const session = useSession();
-
+const { viewSummary } = useSummaryDialog();
-const to = Date.vnNew();
-to.setDate(to.getDate() + 1);
-to.setHours(0, 0, 0, 0);
-
-const from = Date.vnNew();
-from.setDate(from.getDate());
-from.setHours(0, 0, 0, 0);
-
-const params = ref({ from, to });
 
 onMounted(() => (stateStore.rightDrawer = true));
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -150,6 +143,23 @@ const cloneRoutes = () => {
     startingDate.value = null;
 };
 
+const showRouteReport = () => {
+    const ids = selectedRows.value.map(row => row?.id)
+    const idString = ids.join(',')
+    let url;
+
+    if (selectedRows.value.length <= 1) {
+        url = `api/Routes/${idString}/driver-route-pdf?access_token=${session.getToken()}`;
+    } else {
+        const params = new URLSearchParams({
+            access_token: session.getToken(),
+            id: idString
+        })
+        url = `api/Routes/downloadZip?${params.toString()}`;
+    }
+    window.open(url, '_blank');
+}
+
 const markAsServed = () => {
     selectedRows.value.forEach((row) => {
         if (row?.id) {
@@ -159,18 +169,6 @@ const markAsServed = () => {
     refreshKey.value++;
     startingDate.value = null;
 };
-
-function previewRoute(id) {
-    if (!id) {
-        return;
-    }
-    quasar.dialog({
-        component: RouteSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
@@ -207,7 +205,6 @@ function previewRoute(id) {
                     autofocus
                 />
             </QCardSection>
-            <!-- TODO: Add report -->
             <QCardActions align="right">
                 <QBtn flat :label="t('Cancel')" v-close-popup class="text-primary" />
                 <QBtn color="primary" v-close-popup @click="cloneRoutes">
@@ -240,7 +237,15 @@ function previewRoute(id) {
                 >
                     <QTooltip>{{ t('Clone Selected Routes') }}</QTooltip>
                 </QBtn>
-
+                <QBtn
+                    icon="cloud_download"
+                    color="primary"
+                    class="q-mr-sm"
+                    :disable="!selectedRows?.length"
+                    @click="showRouteReport"
+                >
+                    <QTooltip>{{ t('Download selected routes as PDF') }}</QTooltip>
+                </QBtn>
                 <QBtn
                     icon="check"
                     color="primary"
@@ -473,7 +478,9 @@ function previewRoute(id) {
                                             name="preview"
                                             size="xs"
                                             color="primary"
-                                            @click="previewRoute(props?.row?.id)"
+                                            @click="
+                                                viewSummary(props?.row?.id, RouteSummary)
+                                            "
                                             class="cursor-pointer"
                                         >
                                             <QTooltip>{{ t('Preview') }}</QTooltip>
@@ -525,6 +532,7 @@ es:
     Cancel: Cancelar
     Clone: Clonar
     Mark as served: Marcar como servidas
+    Download selected routes as PDF: Descargar rutas seleccionadas como PDF
     Add ticket: Añadir tickets
     Preview: Vista previa
 </i18n>

src/pages/Shelving/Card/ShelvingDescriptorMenu.vue

@@ -21,19 +21,19 @@ function confirmRemove() {
         .dialog({
             component: VnConfirm,
             componentProps: {
-                title: t('confirmDeletion'),
+                title: t('Confirm deletion'),
-                message: t('confirmDeletionMessage'),
+                message: t('Are you sure you want to delete this shelving?'),
-                promise: remove,
+                promise: remove
             },
         })
-        .onOk(async () => await router.push({ name: 'ShelvingList' }));
 }
 
 async function remove() {
-    if (!$props.shelving.value.id) {
+    if (!$props.shelving.id) {
         return;
     }
-    await axios.delete(`Shelvings/${$props.shelving.value.id}`);
+    await axios.delete(`Shelvings/${$props.shelving.id}`);
+    await router.push({ name: 'ShelvingList' });
     quasar.notify({
         message: t('globals.dataDeleted'),
         type: 'positive',
@@ -45,17 +45,13 @@ async function remove() {
         <QItemSection avatar>
             <QIcon name="delete" />
         </QItemSection>
-        <QItemSection>{{ t('deleteShelving') }}</QItemSection>
+        <QItemSection>{{ t('Delete Shelving') }}</QItemSection>
     </QItem>
 </template>
 
 <i18n>
-{
+es:
-    "en": {
+    Confirm deletion: Confirmar eliminación
-        "deleteShelving": "Delete Shelving"
+    Are you sure you want to delete this shelving?: ¿Seguro que quieres eliminar este carro?
-    },
+    Delete Shelving: Eliminar carro
-    "es": {
-        "deleteShelving": "Eliminar carro"
-    }
-}
 </i18n>

src/pages/Shelving/Card/ShelvingFilter.vue

@@ -114,9 +114,11 @@ en:
         parkingFk: Parking
         userFk: Worker
         isRecyclable: Recyclable
+        search: Search
 es:
     params:
         parkingFk: Parking
         userFk: Trabajador
         isRecyclable: Reciclable
+        search: Contiene
 </i18n>

src/pages/Shelving/Card/ShelvingForm.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
@@ -10,11 +10,12 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const { t } = useI18n();
 const route = useRoute();
+const router = useRouter();
 const shelvingId = route.params?.id || null;
 const isNew = Boolean(!shelvingId);
 const defaultInitialData = {
     parkingFk: null,
-    priority: 0,
+    priority: null,
     code: null,
     isRecyclable: false,
 };
@@ -58,6 +59,12 @@ const shelvingFilter = {
         { relation: 'parking' },
     ],
 };
+
+const onSave = (shelving, newShelving) => {
+    if (isNew) {
+        router.push({ name: 'ShelvingBasicData', params: { id: newShelving?.id } });
+    }
+};
 </script>
 <template>
     <VnSubToolbar />
@@ -75,6 +82,7 @@ const shelvingFilter = {
         model="shelving"
         :auto-load="!isNew"
         :form-initial-data="defaultInitialData"
+        @on-data-saved="onSave"
     >
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
@@ -107,6 +115,7 @@ const shelvingFilter = {
                 <div class="col">
                     <VnInput
                         v-model="data.priority"
+                        type="number"
                         :label="t('shelving.basicData.priority')"
                         :rules="validate('Shelving.priority')"
                     />

src/pages/Shelving/Card/ShelvingSearchbar.vue

@@ -7,12 +7,12 @@ const { t } = useI18n();
 <template>
     <VnSearchbar
         data-key="ShelvingList"
+        url="Shelvings"
         :label="t('Search shelving')"
-        :info="t('You can search by search reference')"
+        :info="t('You can search by shelving reference')"
     />
 </template>
 
-<style scoped lang="scss"></style>
 <i18n>
 es:
     Search shelving: Buscar carros

src/pages/Shelving/Card/ShelvingSummary.vue

@@ -6,6 +6,7 @@ import { useStateStore } from 'stores/useStateStore';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
+import VnUserLink from "components/ui/VnUserLink.vue";
 
 const $props = defineProps({
     id: {
@@ -24,7 +25,7 @@ const hideRightDrawer = () => {
     if (!isDialog) {
         stateStore.rightDrawer = false;
     }
-}
+};
 onMounted(hideRightDrawer);
 onUnmounted(hideRightDrawer);
 const filter = {
@@ -69,9 +70,13 @@ const filter = {
             </template>
             <template #body="{ entity }">
                 <QCard class="vn-one">
-                    <div class="header">
+                    <RouterLink
+                        class="header"
+                        :to="{ name: 'ShelvingBasicData', params: { id: entityId } }"
+                    >
                         {{ t('shelving.pageTitles.basicData') }}
-                    </div>
+                        <QIcon name="open_in_new" color="primary" />
+                    </RouterLink>
                     <VnLv :label="t('shelving.summary.code')" :value="entity.code" />
                     <VnLv
                         :label="t('shelving.summary.parking')"
@@ -81,10 +86,14 @@ const filter = {
                         :label="t('shelving.summary.priority')"
                         :value="entity.priority"
                     />
-                    <VnLv
+                    <VnLv v-if="entity.worker" :label="t('shelving.summary.worker')">
-                        :label="t('shelving.summary.worker')"
+                        <template #value>
-                        :value="entity.worker?.user?.nickname"
+                            <VnUserLink
-                    />
+                                :name="entity.worker?.user?.nickname"
+                                :worker-id="entity.worker?.id"
+                            />
+                        </template>
+                    </VnLv>
                     <VnLv
                         :label="t('shelving.summary.recyclable')"
                         :value="entity.isRecyclable"

src/pages/Shelving/Card/ShelvingSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import ShelvingSummary from "pages/Shelving/Card/ShelvingSummary.vue";
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <ShelvingSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

src/pages/Shelving/ShelvingList.vue

@@ -5,16 +5,16 @@ import { useI18n } from 'vue-i18n';
 import { onMounted, onUnmounted } from 'vue';
 import CardList from 'components/ui/CardList.vue';
 import VnLv from 'components/ui/VnLv.vue';
-import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
 import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
-import ShelvingSummaryDialog from 'pages/Shelving/Card/ShelvingSummaryDialog.vue';
+import ShelvingSummary from 'pages/Shelving/Card/ShelvingSummary.vue';
 import ShelvingSearchbar from 'pages/Shelving/Card/ShelvingSearchbar.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
 const router = useRouter();
-const quasar = useQuasar();
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 const filter = {
     include: [{ relation: 'parking' }],
 };
@@ -26,15 +26,6 @@ function navigate(id) {
     router.push({ path: `/shelving/${id}` });
 }
 
-function viewSummary(id) {
-    quasar.dialog({
-        component: ShelvingSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
-
 function exprBuilder(param, value) {
     switch (param) {
         case 'search':
@@ -80,6 +71,7 @@ function exprBuilder(param, value) {
                 url="Shelvings"
                 :filter="filter"
                 :expr-builder="exprBuilder"
+                :limit="20"
                 auto-load
             >
                 <template #body="{ rows }">
@@ -102,17 +94,10 @@ function exprBuilder(param, value) {
                             />
                         </template>
                         <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openCard')"
-                                @click.stop="navigate(row.id)"
-                                class="bg-vn-dark"
-                                outline
-                            />
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, ShelvingSummary)"
                                 color="primary"
-                                style="margin-top: 15px"
                             />
                         </template>
                     </CardList>

src/pages/Supplier/Card/SupplierSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import SupplierSummary from './SupplierSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <SupplierSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

src/pages/Supplier/SupplierList.vue

@@ -1,21 +1,19 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
-
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-import SupplierSummaryDialog from './Card/SupplierSummaryDialog.vue';
+import SupplierSummary from './Card/SupplierSummary.vue';
 import SupplierListFilter from './SupplierListFilter.vue';
-
 import { useStateStore } from 'stores/useStateStore';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
 const router = useRouter();
-const quasar = useQuasar();
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 
 function navigate(id) {
     router.push({ path: `/supplier/${id}` });
@@ -24,15 +22,6 @@ function navigate(id) {
 const redirectToCreateView = () => {
     router.push({ name: 'SupplierCreate' });
 };
-
-const viewSummary = (id) => {
-    quasar.dialog({
-        component: SupplierSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-};
 </script>
 
 <template>
@@ -86,7 +75,7 @@ const viewSummary = (id) => {
                         <template #actions>
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, SupplierSummary)"
                                 color="primary"
                             />
                         </template>

src/pages/Ticket/Card/TicketSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import TicketSummary from './TicketSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <TicketSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

src/pages/Ticket/TicketList.vue

@@ -1,21 +1,21 @@
 <script setup>
 import { onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import { toDate, toDateString, toCurrency } from 'src/filters/index';
-import TicketSummaryDialog from './Card/TicketSummaryDialog.vue';
+import TicketSummary from './Card/TicketSummary.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import TicketFilter from './TicketFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const router = useRouter();
-const quasar = useQuasar();
 const { t } = useI18n();
 const stateStore = useStateStore();
+const { viewSummary } = useSummaryDialog();
 
 onMounted(() => (stateStore.rightDrawer = true));
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -32,15 +32,6 @@ const userParams = {
 function navigate(id) {
     router.push({ path: `/ticket/${id}` });
 }
-
-function viewSummary(id) {
-    quasar.dialog({
-        component: TicketSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
@@ -123,7 +114,7 @@ function viewSummary(id) {
                         <template #actions>
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, TicketSummary)"
                                 color="primary"
                             />
                         </template>

src/pages/Travel/Card/TravelSummary.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, computed, onUpdated } from 'vue';
+import { ref, computed, onUpdated } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -10,7 +10,6 @@ import FetchData from 'src/components/FetchData.vue';
 import TravelDescriptorMenuItems from './TravelDescriptorMenuItems.vue';
 
 import { toDate, toCurrency } from 'src/filters';
-import { getUrl } from 'src/composables/getUrl';
 import axios from 'axios';
 
 onUpdated(() => summaryRef.value.fetch());
@@ -28,16 +27,11 @@ const { t } = useI18n();
 
 const entityId = computed(() => $props.id || route.params.id);
 const summaryRef = ref();
-const travelUrl = ref();
 const travel = ref();
 const entries = ref([]);
 const thermographs = ref([]);
 const warehouses = ref([]);
 
-onMounted(async () => {
-    travelUrl.value = (await getUrl('travel/')) + entityId.value;
-});
-
 const entriesTableColumns = computed(() => {
     return [
         {
@@ -243,9 +237,13 @@ async function setTravelData(travelData) {
         @on-fetch="(data) => setTravelData(data)"
     >
         <template #header-left>
-            <a class="header link" :href="travelUrl">
+            <router-link
+                class="header link"
+                :to="{ name: 'TravelSummary', params: { id: entityId } }"
+            >
                 <QIcon name="open_in_new" color="white" size="sm" />
-            </a>
+                <QTooltip>{{ t('travel.pageTitles.summary') }}</QTooltip>
+            </router-link>
         </template>
         <template #header>
             <span>{{ travel.ref }} - {{ travel.id }}</span>
@@ -383,4 +381,3 @@ async function setTravelData(travelData) {
         </template>
     </CardSummary>
 </template>
-<style lang="scss" scoped></style>

src/pages/Travel/Card/TravelSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import TravelSummary from './TravelSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <TravelSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

src/pages/Travel/Card/TravelThermographs.vue

@@ -94,7 +94,6 @@ const openRemoveDialog = async (id) => {
         .onOk(async () => {
             try {
                 await removeThermograph(id);
-                notify(t('Thermograph removed'), 'positive');
             } catch (err) {
                 console.error('Error removing thermograph');
             }
@@ -118,6 +117,7 @@ const removeThermograph = async (id) => {
     try {
         await axios.delete(`Travels/deleteThermograph?id=${id}`);
         await thermographPaginateRef.value.fetch();
+        notify(t('Thermograph removed'), 'positive');
     } catch (err) {
         console.error('Error removing termograph');
     }
@@ -169,7 +169,7 @@ const removeThermograph = async (id) => {
                             color="primary"
                             size="sm"
                             class="cursor-pointer"
-                            @click="redirectToThermographForm('edit', row)"
+                            @click="redirectToThermographForm('edit', row.id)"
                         >
                             <QTooltip>{{ t('Edit file') }}</QTooltip>
                         </QIcon>
@@ -198,7 +198,7 @@ const removeThermograph = async (id) => {
             color="primary"
             @click="redirectToThermographForm('create')"
         />
-        <QTooltip>
+        <QTooltip class="text-no-wrap">
             {{ t('Add thermograph') }}
         </QTooltip>
     </QPageSticky>

src/pages/Travel/Card/TravelThermographsForm.vue

@@ -5,8 +5,10 @@ import { useRoute, useRouter } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelectDialog from 'components/common/VnSelectDialog.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import CreateThermographForm from 'src/components/CreateThermographForm.vue';
 
 import { useState } from 'src/composables/useState';
 import { useStateStore } from 'stores/useStateStore';
@@ -34,12 +36,14 @@ const thermographFilter = {
     },
     order: 'thermographFk ASC',
 };
+const fetchTravelThermographsRef = ref(null);
+const allowedContentTypes = ref('');
 const user = state.getUser();
-const allowedFileTypes = ref(null);
 const thermographsOptions = ref([]);
 const dmsTypesOptions = ref([]);
 const companiesOptions = ref([]);
 const warehousesOptions = ref([]);
+const inputFileRef = ref(null);
 
 const thermographForm = reactive({
     thermographId: null,
@@ -53,8 +57,6 @@ const thermographForm = reactive({
 });
 
 onBeforeMount(async () => {
-    await getAllowedFileTypes();
-
     if (props.viewAction === 'create') {
         setCreateDefaultParams();
     } else {
@@ -69,16 +71,6 @@ onBeforeMount(async () => {
     }
 });
 
-const getAllowedFileTypes = async () => {
-    try {
-        const { data } = await axios.get('DmsContainers/allowedContentTypes');
-        const contentTypes = data.join(', ');
-        allowedFileTypes.value = contentTypes;
-    } catch (err) {
-        console.error('Error fetching allowed content types');
-    }
-};
-
 const fetchDmsTypes = async () => {
     try {
         const params = {
@@ -174,10 +166,21 @@ const updateThermograph = async () => {
         console.error('Error creating thermograph');
     }
 };
+
+const onThermographCreated = async (data) => {
+    await fetchTravelThermographsRef.value.fetch();
+    thermographForm.thermographId = data.thermographId;
+};
 </script>
 
 <template>
     <FetchData
+        url="DmsContainers/allowedContentTypes"
+        @on-fetch="(data) => (allowedContentTypes = data.join(', '))"
+        auto-load
+    />
+    <FetchData
+        ref="fetchTravelThermographsRef"
         url="TravelThermographs"
         @on-fetch="(data) => (thermographsOptions = data)"
         :filter="thermographFilter"
@@ -234,14 +237,21 @@ const updateThermograph = async () => {
             <QCard class="q-pa-lg">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelectDialog
                             :label="t('travel.thermographs.thermograph')"
                             v-model="thermographForm.thermographId"
                             :options="thermographsOptions"
                             option-value="thermographFk"
                             option-label="thermographFk"
                             :disable="viewAction === 'edit'"
-                        />
+                            :tooltip="t('New thermograph')"
+                        >
+                            <template #form>
+                                <CreateThermographForm
+                                    @on-data-saved="onThermographCreated($event, data)"
+                                />
+                            </template>
+                        </VnSelectDialog>
                     </div>
                     <div class="col">
                         <VnInput
@@ -300,15 +310,27 @@ const updateThermograph = async () => {
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QFile
+                            ref="inputFileRef"
                             :label="t('travel.thermographs.file')"
                             multiple
-                            :accept="allowedFileTypes"
+                            :accept="allowedContentTypes"
                             v-model="thermographForm.files"
                         >
                             <template #append>
-                                <QIcon name="vn:attach" class="cursor-pointer">
+                                <QIcon
+                                    name="vn:attach"
+                                    class="cursor-pointer q-mr-sm"
+                                    @click="inputFileRef.pickFiles()"
+                                >
                                     <QTooltip>{{ t('Select files') }}</QTooltip>
                                 </QIcon>
+                                <QIcon name="info" class="cursor-pointer">
+                                    <QTooltip>{{
+                                        t('globals.allowedFilesText', {
+                                            allowedContentTypes: allowedContentTypes,
+                                        })
+                                    }}</QTooltip>
+                                </QIcon>
                             </template>
                         </QFile>
                     </div>
@@ -322,4 +344,5 @@ const updateThermograph = async () => {
 es:
     Select files: Selecciona ficheros
     Thermograph created: Termógrafo creado
+    New thermograph: Nuevo termógrafo
 </i18n>

src/pages/Travel/TravelList.vue

@@ -2,22 +2,21 @@
 import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
-
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-import TravelSummaryDialog from './Card/TravelSummaryDialog.vue';
+import TravelSummary from './Card/TravelSummary.vue';
 import TravelFilter from './TravelFilter.vue';
 import FetchData from 'components/FetchData.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters/index';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const router = useRouter();
-const quasar = useQuasar();
 const { t } = useI18n();
 const stateStore = useStateStore();
+const { viewSummary } = useSummaryDialog();
 
 const warehouses = ref([]);
 
@@ -42,15 +41,6 @@ const getWarehouseName = (id) => {
     return warehouses.value.find((warehouse) => warehouse.id === id).name;
 };
 
-const viewSummary = (id) => {
-    quasar.dialog({
-        component: TravelSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-};
-
 const getDateQBadgeColor = (date) => {
     let today = Date.vnNew();
     today.setHours(0, 0, 0, 0);
@@ -161,7 +151,7 @@ onMounted(async () => {
                             />
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, TravelSummary)"
                                 color="primary"
                                 style="margin-top: 15px"
                             />

src/pages/Worker/Card/WorkerDescriptorProxy.vue

@@ -1,6 +1,6 @@
 <script setup>
 import WorkerDescriptor from './WorkerDescriptor.vue';
-import WorkerSummaryDialog from './WorkerSummaryDialog.vue';
+import WorkerSummary from './WorkerSummary.vue';
 
 const $props = defineProps({
     id: {
@@ -12,10 +12,6 @@ const $props = defineProps({
 
 <template>
     <QPopupProxy>
-        <WorkerDescriptor
+        <WorkerDescriptor v-if="$props.id" :id="$props.id" :summary="WorkerSummary" />
-            v-if="$props.id"
-            :id="$props.id"
-            :summary="WorkerSummaryDialog"
-        />
     </QPopupProxy>
 </template>

src/pages/Worker/WorkerList.vue

@@ -1,33 +1,24 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import WorkerSummaryDialog from './Card/WorkerSummaryDialog.vue';
+import WorkerSummary from './Card/WorkerSummary.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import WorkerFilter from './WorkerFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
-const quasar = useQuasar();
+const { viewSummary } = useSummaryDialog();
 
 function navigate(id) {
     router.push({ path: `/worker/${id}` });
 }
 
-function viewSummary(id) {
-    quasar.dialog({
-        component: WorkerSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
-
 const redirectToCreateView = () => {
     router.push({ name: 'WorkerCreate' });
 };
@@ -96,7 +87,7 @@ const redirectToCreateView = () => {
                             />
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, WorkerSummary)"
                                 color="primary"
                                 style="margin-top: 15px"
                             />

src/router/modules/customer.js

@@ -254,13 +254,31 @@ export default {
                 },
                 {
                     path: 'greuges',
-                    name: 'CustomerGreuges',
+                    name: 'GreugesCard',
-                    meta: {
+                    redirect: { name: 'CustomerGreuges' },
-                        title: 'greuges',
+                    children: [
-                        icon: 'vn:greuge',
+                        {
-                    },
+                            path: '',
-                    component: () =>
+                            name: 'CustomerGreuges',
-                        import('src/pages/Customer/Card/CustomerGreuges.vue'),
+                            meta: {
+                                title: 'greuges',
+                                icon: 'vn:greuge',
+                            },
+                            component: () =>
+                                import('src/pages/Customer/Card/CustomerGreuges.vue'),
+                        },
+                        {
+                            path: 'create',
+                            name: 'CustomerGreugeCreate',
+                            meta: {
+                                title: 'greuge-create',
+                            },
+                            component: () =>
+                                import(
+                                    'src/pages/Customer/components/CustomerGreugeCreate.vue'
+                                ),
+                        },
+                    ],
                 },
                 {
                     path: 'balance',
@@ -274,13 +292,31 @@ export default {
                 },
                 {
                     path: 'recoveries',
-                    name: 'CustomerRecoveries',
+                    name: 'RecoveriesCard',
-                    meta: {
+                    redirect: { name: 'CustomerRecoveries' },
-                        title: 'recoveries',
+                    children: [
-                        icon: 'vn:recovery',
+                        {
-                    },
+                            path: '',
-                    component: () =>
+                            name: 'CustomerRecoveries',
-                        import('src/pages/Customer/Card/CustomerRecoveries.vue'),
+                            meta: {
+                                title: 'recoveries',
+                                icon: 'vn:recovery',
+                            },
+                            component: () =>
+                                import('src/pages/Customer/Card/CustomerRecoveries.vue'),
+                        },
+                        {
+                            path: 'create',
+                            name: 'CustomerRecoverieCreate',
+                            meta: {
+                                title: 'recoverie-create',
+                            },
+                            component: () =>
+                                import(
+                                    'src/pages/Customer/components/CustomerRecoverieCreate.vue'
+                                ),
+                        },
+                    ],
                 },
                 {
                     path: 'web-access',
@@ -316,10 +352,49 @@ export default {
                     meta: {
                         title: 'creditManagement',
                         icon: 'paid',
+                        menuChildren: [
+                            {
+                                name: 'CustomerCreditContracts',
+                                title: 'creditContracts',
+                                icon: 'paid',
+                            },
+                            {
+                                name: 'CustomerCreditOpinion',
+                                title: 'creditOpinion',
+                                icon: 'paid',
+                            },
+                        ],
                     },
                     component: () =>
                         import('src/pages/Customer/Card/CustomerCreditManagement.vue'),
+                    children: [
+                        {
+                            path: 'credit-contracts',
+                            name: 'CustomerCreditContracts',
+                            meta: {
+                                title: 'creditContracts',
+                                icon: 'paid',
+                            },
+                            component: () =>
+                                import(
+                                    'src/pages/Customer/Card/CustomerCreditContracts.vue'
+                                ),
+                        },
+                        {
+                            path: 'credit-opinion',
+                            name: 'CustomerCreditOpinion',
+                            meta: {
+                                title: 'creditOpinion',
+                                icon: 'paid',
+                            },
+                            component: () =>
+                                import(
+                                    'src/pages/Customer/Card/CustomerCreditOpinion.vue'
+                                ),
+                        },
+                    ],
                 },
+
                 {
                     path: 'others',
                     name: 'CustomerOthers',

src/router/modules/invoiceIn.js

@@ -16,6 +16,7 @@ export default {
             'InvoiceInVat',
             'InvoiceInDueDay',
             'InvoiceInIntrastat',
+            'InvoiceInCorrective',
             'InvoiceInLog',
         ],
     },
@@ -102,6 +103,16 @@ export default {
                     },
                     component: () => import('src/pages/InvoiceIn/Card/InvoiceInLog.vue'),
                 },
+                {
+                    name: 'InvoiceInCorrective',
+                    path: 'corrective',
+                    meta: {
+                        title: 'corrective',
+                        icon: 'attachment',
+                    },
+                    component: () =>
+                        import('src/pages/InvoiceIn/Card/InvoiceInCorrective.vue'),
+                },
             ],
         },
     ],

src/stores/useNavigationStore.js

@@ -52,13 +52,20 @@ export const useNavigationStore = defineStore('navigationStore', () => {
 
     function addMenuItem(module, route, parent) {
         const { meta } = route;
+        let { menuChildren = null } = meta;
+        if (menuChildren)
+            menuChildren = menuChildren.map(({ name, title, icon }) => ({
+                name,
+                icon,
+                title: `${module}.pageTitles.${title}`,
+            }));
 
         if (meta && meta.roles && role.hasAny(meta.roles) === false) return;
 
         const item = {
             name: route.name,
+            children: menuChildren,
         };
-
         if (meta) {
             item.title = `${module}.pageTitles.${meta.title}`;
             item.icon = meta.icon;

test/cypress/integration/invoiceIn/invoiceInCorrective.spec.js

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+
+describe('InvoiceInCorrective', () => {
+    const createRectificative = '.q-menu > .q-list > :nth-child(4) > .q-item__section';
+    const rectificativeSection = '.q-drawer-container .q-list > a:nth-child(6)';
+    const saveDialog = '.q-card > .q-card__actions > .q-btn--standard ';
+
+    it('should create a correcting invoice', () => {
+        cy.login('developer');
+        cy.visit(`/#/invoice-in/1/summary?limit=10`);
+
+        cy.openLeftMenu();
+        cy.openActionsDescriptor();
+
+        cy.get(createRectificative).click();
+        cy.get(saveDialog).click();
+        cy.openLeftMenu();
+        cy.get(rectificativeSection).click();
+        cy.get('tbody > tr:visible').should('have.length', 1);
+    });
+});

test/cypress/integration/invoiceIn/invoiceInList.spec.js

@@ -8,8 +8,7 @@ describe('InvoiceInList', () => {
 
     beforeEach(() => {
         cy.login('developer');
-        cy.visit(`/#/invoice-in`);
+        cy.visit(`/#/invoice-in/list`);
-        cy.clickFilterSearchBtn();
     });
 
     it('should redirect on clicking a invoice', () => {

test/cypress/integration/vnLog.spec.js

@@ -7,7 +7,7 @@ describe('VnLog', () => {
     beforeEach(() => {
         cy.login('developer');
         cy.visit(`/#/claim/${1}/log`);
-        cy.openRightMenu('.timeline');
+        cy.openRightMenu();
     });
 
     it('should filter by insert actions', () => {

test/cypress/support/commands.js

@@ -184,7 +184,7 @@ Cypress.Commands.add('validateContent', (selector, expectedValue) => {
     cy.get(selector).should('have.text', expectedValue);
 });
 
-Cypress.Commands.add('clickFilterSearchBtn', () => {
+Cypress.Commands.add('openActionsDescriptor', () => {
-    cy.get('.q-item__section > .q-btn > .q-btn__content > .q-icon').click();
+    cy.get('.descriptor > .header > .q-btn').click();
 });
 // registerCommands();

test/vitest/__tests__/components/Leftmenu.spec.js

@@ -76,11 +76,13 @@ describe('Leftmenu', () => {
     it('should return a proper formated object with two child items', async () => {
         const expectedMenuItem = [
             {
+                children: null,
                 name: 'CustomerList',
                 title: 'customer.pageTitles.list',
                 icon: 'view_list',
             },
             {
+                children: null,
                 name: 'CustomerCreate',
                 title: 'customer.pageTitles.createCustomer',
                 icon: 'vn:addperson',