From 3a3ae14dc54153a8a0c3b9836456f323eacd6bf3 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 31 Aug 2023 09:05:21 +0200
Subject: [PATCH 01/81] ref #6175 VnLinkPhone and MicroSIP icon created

---
 src/components/ui/VnLinkPhone.vue           | 36 +++++++++++++++
 src/i18n/en/index.js                        |  1 +
 src/i18n/es/index.js                        |  1 +
 src/pages/Customer/Card/CustomerSummary.vue | 23 +++++++++-
 src/pages/Customer/CustomerList.vue         | 10 ++++-
 src/pages/Ticket/Card/TicketDescriptor.vue  |  1 +
 src/pages/Ticket/Card/TicketSummary.vue     | 49 ++++++++++++++-------
 src/pages/Worker/Card/WorkerDescriptor.vue  | 25 ++++++++++-
 src/pages/Worker/Card/WorkerSummary.vue     | 40 +++++++++++------
 9 files changed, 152 insertions(+), 34 deletions(-)
 create mode 100644 src/components/ui/VnLinkPhone.vue

diff --git a/src/components/ui/VnLinkPhone.vue b/src/components/ui/VnLinkPhone.vue
new file mode 100644
index 000000000..e17ffb158
--- /dev/null
+++ b/src/components/ui/VnLinkPhone.vue
@@ -0,0 +1,36 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+const props = defineProps({
+    phoneNumber: { type: [String, Number], default: null },
+    icon: { type: Boolean, default: true },
+    showNumber: { type: Boolean, default: true },
+    schemeUrl: { type: String, default: 'tel' },
+});
+const { t } = useI18n();
+</script>
+<template>
+    <div v-if="props.phoneNumber">
+        <span v-if="props.icon">
+            <span v-if="props.showNumber">
+                {{ props.phoneNumber }}
+            </span>
+            <QBtn
+                flat
+                round
+                :icon="'phone'"
+                size="sm"
+                class="q-ml-xs"
+                color="primary"
+                padding="none"
+                :href="`${props.schemeUrl}:${props.phoneNumber}`"
+                :title="t('globals.microsip')"
+                @click.stop
+            />
+        </span>
+        <a v-else :href="`tel:${props.phoneNumber}`" class="link">
+            {{ props.phoneNumber }}
+        </a>
+    </div>
+    <span v-else>-</span>
+</template>
+<style scoped></style>
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index d7519ba53..022c2eed1 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -36,6 +36,7 @@ export default {
         summary: {
             basicData: 'Basic data',
         },
+        microsip: 'Open in MicroSIP',
     },
     errors: {
         statusUnauthorized: 'Access denied',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index fc2c80f55..3e9dc5177 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -36,6 +36,7 @@ export default {
         summary: {
             basicData: 'Datos básicos',
         },
+        microsip: 'Abrir en MicroSIP',
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index 081bdd157..e1b8fe4be 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -6,6 +6,7 @@ import { toCurrency, toPercentage, toDate } from 'src/filters';
 import CardSummary from 'components/ui/CardSummary.vue';
 import { getUrl } from 'src/composables/getUrl';
 import VnLv from 'src/components/ui/VnLv.vue';
+import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -68,8 +69,26 @@ const creditWarning = computed(() => {
                 <VnLv :label="t('customer.summary.customerId')" :value="entity.id" />
                 <VnLv :label="t('customer.summary.name')" :value="entity.name" />
                 <VnLv :label="t('customer.summary.contact')" :value="entity.contact" />
-                <VnLv :label="t('customer.summary.phone')" :value="entity.phone" />
-                <VnLv :label="t('customer.summary.mobile')" :value="entity.mobile" />
+                <VnLv :value="entity.phone">
+                    <template #label>
+                        {{ t('customer.summary.phone') }}
+                        <VnLinkPhone
+                            :phone-number="entity.phone"
+                            scheme-url="sip"
+                            :show-number="false"
+                        />
+                    </template>
+                </VnLv>
+                <VnLv :value="entity.mobile">
+                    <template #label>
+                        {{ t('customer.summary.mobile') }}
+                        <VnLinkPhone
+                            :phone-number="entity.mobile"
+                            scheme-url="sip"
+                            :show-number="false"
+                        />
+                    </template>
+                </VnLv>
                 <VnLv :label="t('customer.summary.email')" :value="entity.email" />
                 <VnLv
                     :label="t('customer.summary.salesPerson')"
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 219ef0be3..83f11f184 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -9,6 +9,7 @@ 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';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -77,7 +78,14 @@ function viewSummary(id) {
                         <template #list-items>
                             <VnLv label="ID" :value="row.id" />
                             <VnLv :label="t('customer.list.email')" :value="row.email" />
-                            <VnLv :label="t('customer.list.phone')" :value="row.phone" />
+                            <VnLv :label="t('customer.list.phone')">
+                                <template #value>
+                                    <VnLinkPhone
+                                        :phone-number="row.phone"
+                                        scheme-url="sip"
+                                    />
+                                </template>
+                            </VnLv>
                         </template>
                         <template #actions>
                             <QBtn
diff --git a/src/pages/Ticket/Card/TicketDescriptor.vue b/src/pages/Ticket/Card/TicketDescriptor.vue
index 25c9dfb1c..641ffee0c 100644
--- a/src/pages/Ticket/Card/TicketDescriptor.vue
+++ b/src/pages/Ticket/Card/TicketDescriptor.vue
@@ -8,6 +8,7 @@ import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import TicketDescriptorMenu from './TicketDescriptorMenu.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 
 const $props = defineProps({
     id: {
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index ce46d1d47..7e322d7a2 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -10,6 +10,7 @@ import FetchedTags from 'components/ui/FetchedTags.vue';
 import InvoiceOutDescriptorProxy from 'pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import { getUrl } from 'src/composables/getUrl';
 
 onUpdated(() => summaryRef.value.fetch());
@@ -208,22 +209,38 @@ async function changeState(value) {
                     :value="toDate(ticket.landed)"
                 />
                 <VnLv :label="t('ticket.summary.packages')" :value="ticket.packages" />
-                <VnLv
-                    :label="t('ticket.summary.consigneePhone')"
-                    :value="ticket.address.phone"
-                />
-                <VnLv
-                    :label="t('ticket.summary.consigneeMobile')"
-                    :value="ticket.address.mobile"
-                />
-                <VnLv
-                    :label="t('ticket.summary.clientPhone')"
-                    :value="ticket.client.phone"
-                />
-                <VnLv
-                    :label="t('ticket.summary.clientMobile')"
-                    :value="ticket.client.mobile"
-                />
+                <VnLv :label="t('ticket.summary.consigneePhone')">
+                    <template #value>
+                        <VnLinkPhone
+                            :phone-number="ticket.address.phone"
+                            scheme-url="sip"
+                        />
+                    </template>
+                </VnLv>
+                <VnLv :label="t('ticket.summary.consigneeMobile')">
+                    <template #value>
+                        <VnLinkPhone
+                            :phone-number="ticket.address.mobile"
+                            scheme-url="sip"
+                        />
+                    </template>
+                </VnLv>
+                <VnLv :label="t('ticket.summary.clientPhone')">
+                    <template #value>
+                        <VnLinkPhone
+                            :phone-number="ticket.client.phone"
+                            scheme-url="sip"
+                        />
+                    </template>
+                </VnLv>
+                <VnLv :label="t('ticket.summary.clientMobile')">
+                    <template #value>
+                        <VnLinkPhone
+                            :phone-number="ticket.client.mobile"
+                            scheme-url="sip"
+                        />
+                    </template>
+                </VnLv>
                 <VnLv
                     :label="t('ticket.summary.consignee')"
                     :value="formattedAddress()"
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index ba64a5abb..912d2f6fc 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -5,7 +5,9 @@ import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
 import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import useCardDescription from 'src/composables/useCardDescription';
+
 const $props = defineProps({
     id: {
         type: Number,
@@ -96,8 +98,27 @@ const setData = (entity) =>
                 :label="t('worker.list.department')"
                 :value="entity.department ? entity.department.department.name : null"
             />
-            <VnLv :label="t('worker.card.phone')" :value="entity.phone" />
-            <VnLv :label="t('worker.summary.sipExtension')" :value="sip" />
+            <VnLv :value="entity.phone">
+                <template #label>
+                    {{ t('worker.card.phone') }}
+                    <VnLinkPhone
+                        :phone-number="entity.phone"
+                        scheme-url="sip"
+                        :show-number="false"
+                    />
+                </template>
+            </VnLv>
+            <VnLv :value="sip">
+                <template #label>
+                    {{ t('worker.summary.sipExtension') }}
+                    <VnLinkPhone
+                        v-if="sip"
+                        :phone-number="sip"
+                        scheme-url="sip"
+                        :show-number="false"
+                    />
+                </template>
+            </VnLv>
         </template>
     </CardDescriptor>
 </template>
diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
index 05ccdc373..3badfcd35 100644
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -8,6 +8,7 @@ import { getUrl } from 'src/composables/getUrl';
 import VnLv from 'src/components/ui/VnLv.vue';
 import WorkerDescriptorProxy from './WorkerDescriptorProxy.vue';
 import { dashIfEmpty } from 'src/filters';
+import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -92,15 +93,27 @@ const filter = {
                         </span>
                     </template>
                 </VnLv>
-                <VnLv
-                    :label="t('worker.summary.phoneExtension')"
-                    :value="worker.mobileExtension"
-                />
-                <VnLv :label="t('worker.summary.entPhone')" :value="worker.phone" />
-                <VnLv
-                    :label="t('worker.summary.personalPhone')"
-                    :value="worker.client.phone"
-                />
+                <VnLv :label="t('worker.summary.phoneExtension')">
+                    <template #value>
+                        <VnLinkPhone
+                            :phone-number="worker.mobileExtension"
+                            scheme-url="sip"
+                        />
+                    </template>
+                </VnLv>
+                <VnLv :label="t('worker.summary.entPhone')">
+                    <template #value>
+                        <VnLinkPhone :phone-number="worker.phone" scheme-url="sip" />
+                    </template>
+                </VnLv>
+                <VnLv :label="t('worker.summary.personalPhone')">
+                    <template #value>
+                        <VnLinkPhone
+                            :phone-number="worker.client.phone"
+                            scheme-url="sip"
+                        />
+                    </template>
+                </VnLv>
                 <VnLv :label="t('worker.summary.locker')" :value="worker.locker" />
             </QCard>
             <QCard class="vn-one">
@@ -110,10 +123,11 @@ const filter = {
                 <VnLv :label="t('worker.summary.userId')" :value="worker.user.id" />
                 <VnLv :label="t('worker.card.name')" :value="worker.user.nickname" />
                 <VnLv :label="t('worker.summary.role')" :value="worker.user.role.name" />
-                <VnLv
-                    :label="t('worker.summary.sipExtension')"
-                    :value="worker?.sip?.extension"
-                />
+                <VnLv :label="t('worker.summary.sipExtension')">
+                    <template #value>
+                        <VnLinkPhone :phone-number="worker?.sip?.extension" />
+                    </template>
+                </VnLv>
             </QCard>
         </template>
     </CardSummary>

From 48b4fd96e5c2f8a9f0f0f92bab1888770a58cb09 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 6 Sep 2023 14:40:26 +0200
Subject: [PATCH 02/81] ref #6175 scheme url removed

---
 src/components/ui/VnLinkPhone.vue           |  3 +--
 src/pages/Customer/Card/CustomerSummary.vue | 12 ++----------
 src/pages/Customer/CustomerList.vue         |  5 +----
 src/pages/Ticket/Card/TicketSummary.vue     | 20 ++++----------------
 src/pages/Worker/Card/WorkerDescriptor.vue  | 13 ++-----------
 src/pages/Worker/Card/WorkerSummary.vue     | 12 +++---------
 6 files changed, 13 insertions(+), 52 deletions(-)

diff --git a/src/components/ui/VnLinkPhone.vue b/src/components/ui/VnLinkPhone.vue
index e17ffb158..712aaafc5 100644
--- a/src/components/ui/VnLinkPhone.vue
+++ b/src/components/ui/VnLinkPhone.vue
@@ -4,7 +4,6 @@ const props = defineProps({
     phoneNumber: { type: [String, Number], default: null },
     icon: { type: Boolean, default: true },
     showNumber: { type: Boolean, default: true },
-    schemeUrl: { type: String, default: 'tel' },
 });
 const { t } = useI18n();
 </script>
@@ -22,7 +21,7 @@ const { t } = useI18n();
                 class="q-ml-xs"
                 color="primary"
                 padding="none"
-                :href="`${props.schemeUrl}:${props.phoneNumber}`"
+                :href="`sip:${props.phoneNumber}`"
                 :title="t('globals.microsip')"
                 @click.stop
             />
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index e1b8fe4be..6b718932f 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -72,21 +72,13 @@ const creditWarning = computed(() => {
                 <VnLv :value="entity.phone">
                     <template #label>
                         {{ t('customer.summary.phone') }}
-                        <VnLinkPhone
-                            :phone-number="entity.phone"
-                            scheme-url="sip"
-                            :show-number="false"
-                        />
+                        <VnLinkPhone :phone-number="entity.phone" :show-number="false" />
                     </template>
                 </VnLv>
                 <VnLv :value="entity.mobile">
                     <template #label>
                         {{ t('customer.summary.mobile') }}
-                        <VnLinkPhone
-                            :phone-number="entity.mobile"
-                            scheme-url="sip"
-                            :show-number="false"
-                        />
+                        <VnLinkPhone :phone-number="entity.mobile" :show-number="false" />
                     </template>
                 </VnLv>
                 <VnLv :label="t('customer.summary.email')" :value="entity.email" />
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 83f11f184..35734b5da 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -80,10 +80,7 @@ function viewSummary(id) {
                             <VnLv :label="t('customer.list.email')" :value="row.email" />
                             <VnLv :label="t('customer.list.phone')">
                                 <template #value>
-                                    <VnLinkPhone
-                                        :phone-number="row.phone"
-                                        scheme-url="sip"
-                                    />
+                                    <VnLinkPhone :phone-number="row.phone" />
                                 </template>
                             </VnLv>
                         </template>
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index 7e322d7a2..997a26343 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -211,34 +211,22 @@ async function changeState(value) {
                 <VnLv :label="t('ticket.summary.packages')" :value="ticket.packages" />
                 <VnLv :label="t('ticket.summary.consigneePhone')">
                     <template #value>
-                        <VnLinkPhone
-                            :phone-number="ticket.address.phone"
-                            scheme-url="sip"
-                        />
+                        <VnLinkPhone :phone-number="ticket.address.phone" />
                     </template>
                 </VnLv>
                 <VnLv :label="t('ticket.summary.consigneeMobile')">
                     <template #value>
-                        <VnLinkPhone
-                            :phone-number="ticket.address.mobile"
-                            scheme-url="sip"
-                        />
+                        <VnLinkPhone :phone-number="ticket.address.mobile" />
                     </template>
                 </VnLv>
                 <VnLv :label="t('ticket.summary.clientPhone')">
                     <template #value>
-                        <VnLinkPhone
-                            :phone-number="ticket.client.phone"
-                            scheme-url="sip"
-                        />
+                        <VnLinkPhone :phone-number="ticket.client.phone" />
                     </template>
                 </VnLv>
                 <VnLv :label="t('ticket.summary.clientMobile')">
                     <template #value>
-                        <VnLinkPhone
-                            :phone-number="ticket.client.mobile"
-                            scheme-url="sip"
-                        />
+                        <VnLinkPhone :phone-number="ticket.client.mobile" />
                     </template>
                 </VnLv>
                 <VnLv
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index 912d2f6fc..e7ae4607d 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -101,22 +101,13 @@ const setData = (entity) =>
             <VnLv :value="entity.phone">
                 <template #label>
                     {{ t('worker.card.phone') }}
-                    <VnLinkPhone
-                        :phone-number="entity.phone"
-                        scheme-url="sip"
-                        :show-number="false"
-                    />
+                    <VnLinkPhone :phone-number="entity.phone" :show-number="false" />
                 </template>
             </VnLv>
             <VnLv :value="sip">
                 <template #label>
                     {{ t('worker.summary.sipExtension') }}
-                    <VnLinkPhone
-                        v-if="sip"
-                        :phone-number="sip"
-                        scheme-url="sip"
-                        :show-number="false"
-                    />
+                    <VnLinkPhone v-if="sip" :phone-number="sip" :show-number="false" />
                 </template>
             </VnLv>
         </template>
diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
index 3badfcd35..95bbe2f6e 100644
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -95,23 +95,17 @@ const filter = {
                 </VnLv>
                 <VnLv :label="t('worker.summary.phoneExtension')">
                     <template #value>
-                        <VnLinkPhone
-                            :phone-number="worker.mobileExtension"
-                            scheme-url="sip"
-                        />
+                        <VnLinkPhone :phone-number="worker.mobileExtension" />
                     </template>
                 </VnLv>
                 <VnLv :label="t('worker.summary.entPhone')">
                     <template #value>
-                        <VnLinkPhone :phone-number="worker.phone" scheme-url="sip" />
+                        <VnLinkPhone :phone-number="worker.phone" />
                     </template>
                 </VnLv>
                 <VnLv :label="t('worker.summary.personalPhone')">
                     <template #value>
-                        <VnLinkPhone
-                            :phone-number="worker.client.phone"
-                            scheme-url="sip"
-                        />
+                        <VnLinkPhone :phone-number="worker.client.phone" />
                     </template>
                 </VnLv>
                 <VnLv :label="t('worker.summary.locker')" :value="worker.locker" />

From e4efffb33686e18b6112dac7ac11aaedecbcd943 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 7 Sep 2023 08:23:55 +0200
Subject: [PATCH 03/81] ref #6175 simplify the component

---
 src/components/ui/VnLinkPhone.vue           | 37 +++++++--------------
 src/pages/Customer/Card/CustomerSummary.vue |  4 +--
 src/pages/Customer/CustomerList.vue         |  2 ++
 src/pages/Ticket/Card/TicketSummary.vue     |  6 +++-
 src/pages/Worker/Card/WorkerDescriptor.vue  |  4 +--
 src/pages/Worker/Card/WorkerSummary.vue     |  4 +++
 6 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/src/components/ui/VnLinkPhone.vue b/src/components/ui/VnLinkPhone.vue
index 712aaafc5..ca005107b 100644
--- a/src/components/ui/VnLinkPhone.vue
+++ b/src/components/ui/VnLinkPhone.vue
@@ -2,34 +2,21 @@
 import { useI18n } from 'vue-i18n';
 const props = defineProps({
     phoneNumber: { type: [String, Number], default: null },
-    icon: { type: Boolean, default: true },
-    showNumber: { type: Boolean, default: true },
 });
 const { t } = useI18n();
 </script>
 <template>
-    <div v-if="props.phoneNumber">
-        <span v-if="props.icon">
-            <span v-if="props.showNumber">
-                {{ props.phoneNumber }}
-            </span>
-            <QBtn
-                flat
-                round
-                :icon="'phone'"
-                size="sm"
-                class="q-ml-xs"
-                color="primary"
-                padding="none"
-                :href="`sip:${props.phoneNumber}`"
-                :title="t('globals.microsip')"
-                @click.stop
-            />
-        </span>
-        <a v-else :href="`tel:${props.phoneNumber}`" class="link">
-            {{ props.phoneNumber }}
-        </a>
-    </div>
-    <span v-else>-</span>
+    <QBtn
+        v-if="props.phoneNumber"
+        flat
+        round
+        icon="phone"
+        size="sm"
+        color="primary"
+        padding="xs"
+        :href="`sip:${props.phoneNumber}`"
+        :title="t('globals.microsip')"
+        @click.stop
+    />
 </template>
 <style scoped></style>
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index 6b718932f..6693274ac 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -72,13 +72,13 @@ const creditWarning = computed(() => {
                 <VnLv :value="entity.phone">
                     <template #label>
                         {{ t('customer.summary.phone') }}
-                        <VnLinkPhone :phone-number="entity.phone" :show-number="false" />
+                        <VnLinkPhone :phone-number="entity.phone" />
                     </template>
                 </VnLv>
                 <VnLv :value="entity.mobile">
                     <template #label>
                         {{ t('customer.summary.mobile') }}
-                        <VnLinkPhone :phone-number="entity.mobile" :show-number="false" />
+                        <VnLinkPhone :phone-number="entity.mobile" />
                     </template>
                 </VnLv>
                 <VnLv :label="t('customer.summary.email')" :value="entity.email" />
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 35734b5da..286b659c5 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -10,6 +10,7 @@ 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 { dashIfEmpty } from 'src/filters';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -80,6 +81,7 @@ function viewSummary(id) {
                             <VnLv :label="t('customer.list.email')" :value="row.email" />
                             <VnLv :label="t('customer.list.phone')">
                                 <template #value>
+                                    {{ dashIfEmpty(row.phone) }}
                                     <VnLinkPhone :phone-number="row.phone" />
                                 </template>
                             </VnLv>
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index 997a26343..4d1fa4318 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -181,7 +181,7 @@ async function changeState(value) {
                 <VnLv :label="t('ticket.summary.route')" :value="ticket.routeFk" />
                 <VnLv :label="t('ticket.summary.invoice')">
                     <template #value>
-                        <span class="link">
+                        <span :class="{ link: ticket.refFk }">
                             {{ dashIfEmpty(ticket.refFk) }}
                             <InvoiceOutDescriptorProxy
                                 :id="ticket.id"
@@ -211,21 +211,25 @@ async function changeState(value) {
                 <VnLv :label="t('ticket.summary.packages')" :value="ticket.packages" />
                 <VnLv :label="t('ticket.summary.consigneePhone')">
                     <template #value>
+                        {{ dashIfEmpty(ticket.address.phone) }}
                         <VnLinkPhone :phone-number="ticket.address.phone" />
                     </template>
                 </VnLv>
                 <VnLv :label="t('ticket.summary.consigneeMobile')">
                     <template #value>
+                        {{ dashIfEmpty(ticket.address.mobile) }}
                         <VnLinkPhone :phone-number="ticket.address.mobile" />
                     </template>
                 </VnLv>
                 <VnLv :label="t('ticket.summary.clientPhone')">
                     <template #value>
+                        {{ dashIfEmpty(ticket.client.phone) }}
                         <VnLinkPhone :phone-number="ticket.client.phone" />
                     </template>
                 </VnLv>
                 <VnLv :label="t('ticket.summary.clientMobile')">
                     <template #value>
+                        {{ dashIfEmpty(ticket.client.mobile) }}
                         <VnLinkPhone :phone-number="ticket.client.mobile" />
                     </template>
                 </VnLv>
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index e7ae4607d..ea88b1b8f 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -101,13 +101,13 @@ const setData = (entity) =>
             <VnLv :value="entity.phone">
                 <template #label>
                     {{ t('worker.card.phone') }}
-                    <VnLinkPhone :phone-number="entity.phone" :show-number="false" />
+                    <VnLinkPhone :phone-number="entity.phone" />
                 </template>
             </VnLv>
             <VnLv :value="sip">
                 <template #label>
                     {{ t('worker.summary.sipExtension') }}
-                    <VnLinkPhone v-if="sip" :phone-number="sip" :show-number="false" />
+                    <VnLinkPhone v-if="sip" :phone-number="sip" />
                 </template>
             </VnLv>
         </template>
diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
index 95bbe2f6e..f16835636 100644
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -95,16 +95,19 @@ const filter = {
                 </VnLv>
                 <VnLv :label="t('worker.summary.phoneExtension')">
                     <template #value>
+                        {{ dashIfEmpty(worker.mobileExtension) }}
                         <VnLinkPhone :phone-number="worker.mobileExtension" />
                     </template>
                 </VnLv>
                 <VnLv :label="t('worker.summary.entPhone')">
                     <template #value>
+                        {{ dashIfEmpty(worker.phone) }}
                         <VnLinkPhone :phone-number="worker.phone" />
                     </template>
                 </VnLv>
                 <VnLv :label="t('worker.summary.personalPhone')">
                     <template #value>
+                        {{ dashIfEmpty(worker.client.phone) }}
                         <VnLinkPhone :phone-number="worker.client.phone" />
                     </template>
                 </VnLv>
@@ -119,6 +122,7 @@ const filter = {
                 <VnLv :label="t('worker.summary.role')" :value="worker.user.role.name" />
                 <VnLv :label="t('worker.summary.sipExtension')">
                     <template #value>
+                        {{ dashIfEmpty(worker?.sip?.extension) }}
                         <VnLinkPhone :phone-number="worker?.sip?.extension" />
                     </template>
                 </VnLv>

From 71d3f0c4c6c3f1c7d68758c8c4ca33309b39d875 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 7 Sep 2023 08:42:39 +0200
Subject: [PATCH 04/81] ref #6175 tests fixed

---
 test/cypress/integration/ClaimNotes.spec.js |  2 +-
 test/cypress/integration/workerList.spec.js | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/test/cypress/integration/ClaimNotes.spec.js b/test/cypress/integration/ClaimNotes.spec.js
index 5b52dd339..0a0f28fe7 100644
--- a/test/cypress/integration/ClaimNotes.spec.js
+++ b/test/cypress/integration/ClaimNotes.spec.js
@@ -7,7 +7,7 @@ describe('ClaimNotes', () => {
 
     it('should add a new note', () => {
         const message = 'This is a new message.';
-        cy.get('.q-page-sticky button').click();
+        cy.get('.q-page-sticky > div > button').click();
         cy.get('.q-dialog .q-card__section:nth-child(2)').type(message);
         cy.get('.q-card__actions button:nth-child(2)').click();
         cy.get('.q-card .q-card__section:nth-child(2)')
diff --git a/test/cypress/integration/workerList.spec.js b/test/cypress/integration/workerList.spec.js
index d76958367..219633263 100644
--- a/test/cypress/integration/workerList.spec.js
+++ b/test/cypress/integration/workerList.spec.js
@@ -8,18 +8,18 @@ describe('WorkerList', () => {
     it('should load workers', () => {
         cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
             .eq(0)
-            .should('have.text', 'victorvd');
-        cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
-            .eq(1)
             .should('have.text', 'JessicaJones');
         cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
-            .eq(2)
+            .eq(1)
             .should('have.text', 'BruceBanner');
+        cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
+            .eq(2)
+            .should('have.text', 'CharlesXavier');
     });
 
     it('should open the worker summary', () => {
         cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(1).click();
-        cy.get('.summaryHeader div').should('have.text', '1110 - Jessica Jones');
+        cy.get('.summaryHeader div').should('have.text', '1109 - Bruce Banner');
         cy.get('.summary .header').eq(0).invoke('text').should('include', 'Basic data');
         cy.get('.summary .header').eq(1).should('have.text', 'User data');
     });

From a4a62c8e3b0c80d59a7bb4bb464c37219247c65d Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 7 Sep 2023 09:27:23 +0200
Subject: [PATCH 05/81] ref #6175 match linkPhone

---
 src/components/ui/CardList.vue          |  2 +-
 src/components/ui/VnLinkPhone.vue       |  2 +-
 src/pages/Customer/CustomerList.vue     |  7 +++----
 src/pages/Ticket/Card/TicketSummary.vue | 24 ++++++++++++------------
 src/pages/Worker/Card/WorkerSummary.vue | 24 ++++++++++++------------
 5 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/src/components/ui/CardList.vue b/src/components/ui/CardList.vue
index ed1df7668..af2398ebd 100644
--- a/src/components/ui/CardList.vue
+++ b/src/components/ui/CardList.vue
@@ -32,7 +32,7 @@ const $props = defineProps({
         gap: 2%;
         width: 50%;
         .label {
-            width: 30%;
+            width: 35%;
             color: var(--vn-label);
             overflow: hidden;
             text-overflow: ellipsis;
diff --git a/src/components/ui/VnLinkPhone.vue b/src/components/ui/VnLinkPhone.vue
index ca005107b..4445b99c9 100644
--- a/src/components/ui/VnLinkPhone.vue
+++ b/src/components/ui/VnLinkPhone.vue
@@ -13,7 +13,7 @@ const { t } = useI18n();
         icon="phone"
         size="sm"
         color="primary"
-        padding="xs"
+        padding="none"
         :href="`sip:${props.phoneNumber}`"
         :title="t('globals.microsip')"
         @click.stop
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 286b659c5..41512d12f 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -10,7 +10,6 @@ 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 { dashIfEmpty } from 'src/filters';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -79,9 +78,9 @@ function viewSummary(id) {
                         <template #list-items>
                             <VnLv label="ID" :value="row.id" />
                             <VnLv :label="t('customer.list.email')" :value="row.email" />
-                            <VnLv :label="t('customer.list.phone')">
-                                <template #value>
-                                    {{ dashIfEmpty(row.phone) }}
+                            <VnLv :value="row.phone">
+                                <template #label>
+                                    {{ t('customer.list.phone') }}
                                     <VnLinkPhone :phone-number="row.phone" />
                                 </template>
                             </VnLv>
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index 4d1fa4318..578cd9439 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -209,27 +209,27 @@ async function changeState(value) {
                     :value="toDate(ticket.landed)"
                 />
                 <VnLv :label="t('ticket.summary.packages')" :value="ticket.packages" />
-                <VnLv :label="t('ticket.summary.consigneePhone')">
-                    <template #value>
-                        {{ dashIfEmpty(ticket.address.phone) }}
+                <VnLv :value="ticket.address.phone">
+                    <template #label>
+                        {{ t('ticket.summary.consigneePhone') }}
                         <VnLinkPhone :phone-number="ticket.address.phone" />
                     </template>
                 </VnLv>
-                <VnLv :label="t('ticket.summary.consigneeMobile')">
-                    <template #value>
-                        {{ dashIfEmpty(ticket.address.mobile) }}
+                <VnLv :value="ticket.address.mobile">
+                    <template #label>
+                        {{ t('ticket.summary.consigneeMobile') }}
                         <VnLinkPhone :phone-number="ticket.address.mobile" />
                     </template>
                 </VnLv>
-                <VnLv :label="t('ticket.summary.clientPhone')">
-                    <template #value>
-                        {{ dashIfEmpty(ticket.client.phone) }}
+                <VnLv :value="ticket.client.phone">
+                    <template #label>
+                        {{ t('ticket.summary.clientPhone') }}
                         <VnLinkPhone :phone-number="ticket.client.phone" />
                     </template>
                 </VnLv>
-                <VnLv :label="t('ticket.summary.clientMobile')">
-                    <template #value>
-                        {{ dashIfEmpty(ticket.client.mobile) }}
+                <VnLv :value="ticket.client.mobile">
+                    <template #label>
+                        {{ t('ticket.summary.clientMobile') }}
                         <VnLinkPhone :phone-number="ticket.client.mobile" />
                     </template>
                 </VnLv>
diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
index f16835636..c4378d07a 100644
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -93,21 +93,21 @@ const filter = {
                         </span>
                     </template>
                 </VnLv>
-                <VnLv :label="t('worker.summary.phoneExtension')">
-                    <template #value>
-                        {{ dashIfEmpty(worker.mobileExtension) }}
+                <VnLv :value="worker.mobileExtension">
+                    <template #label>
+                        {{ t('worker.summary.phoneExtension') }}
                         <VnLinkPhone :phone-number="worker.mobileExtension" />
                     </template>
                 </VnLv>
-                <VnLv :label="t('worker.summary.entPhone')">
-                    <template #value>
-                        {{ dashIfEmpty(worker.phone) }}
+                <VnLv :value="worker.phone">
+                    <template #label>
+                        {{ t('worker.summary.entPhone') }}
                         <VnLinkPhone :phone-number="worker.phone" />
                     </template>
                 </VnLv>
-                <VnLv :label="t('worker.summary.personalPhone')">
-                    <template #value>
-                        {{ dashIfEmpty(worker.client.phone) }}
+                <VnLv :value="worker.client.phone">
+                    <template #label>
+                        {{ t('worker.summary.personalPhone') }}
                         <VnLinkPhone :phone-number="worker.client.phone" />
                     </template>
                 </VnLv>
@@ -120,9 +120,9 @@ const filter = {
                 <VnLv :label="t('worker.summary.userId')" :value="worker.user.id" />
                 <VnLv :label="t('worker.card.name')" :value="worker.user.nickname" />
                 <VnLv :label="t('worker.summary.role')" :value="worker.user.role.name" />
-                <VnLv :label="t('worker.summary.sipExtension')">
-                    <template #value>
-                        {{ dashIfEmpty(worker?.sip?.extension) }}
+                <VnLv :value="worker?.sip?.extension">
+                    <template #label>
+                        {{ t('worker.summary.sipExtension') }}
                         <VnLinkPhone :phone-number="worker?.sip?.extension" />
                     </template>
                 </VnLv>

From 79fc503a0184a48fb7bb5e2efc10cea07ffa6cb7 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 18 Sep 2023 14:35:21 +0200
Subject: [PATCH 06/81] ref #6104 recreate vnlog

---
 package.json                                |    2 +-
 src/components/FetchData.vue                |    2 +-
 src/components/common/VnJsonValue.vue       |   88 ++
 src/components/common/VnLog.vue             | 1133 +++++++++++++++++--
 src/composables/useColor.js                 |   35 +
 src/composables/useFirstUpper.js            |    3 +
 src/composables/useIso8601.js               |   18 +
 src/css/app.scss                            |    6 +
 src/filters/index.js                        |    2 +
 src/filters/toRelativeDate.js               |   32 +
 src/i18n/en/index.js                        |    9 +
 src/i18n/es/index.js                        |    9 +
 src/stores/useValidationsStore.js           |   19 +
 test/cypress/integration/ClaimNotes.spec.js |    1 +
 test/cypress/integration/vnLog.spec.js      |   31 +
 test/cypress/integration/workerList.spec.js |   10 +-
 16 files changed, 1279 insertions(+), 121 deletions(-)
 create mode 100644 src/components/common/VnJsonValue.vue
 create mode 100644 src/composables/useColor.js
 create mode 100644 src/composables/useFirstUpper.js
 create mode 100644 src/composables/useIso8601.js
 create mode 100644 src/filters/toRelativeDate.js
 create mode 100644 src/stores/useValidationsStore.js
 create mode 100644 test/cypress/integration/vnLog.spec.js

diff --git a/package.json b/package.json
index b713c906a..8568d507d 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
         "lint": "eslint --ext .js,.vue ./",
         "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
         "test:e2e": "cypress open",
-        "test:e2e:ci": "cypress run --browser chromium",
+        "test:e2e:ci": "cypress run --browser chrome",
         "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
         "test:unit": "vitest",
         "test:unit:ci": "vitest run"
diff --git a/src/components/FetchData.vue b/src/components/FetchData.vue
index 251d7502a..f0d908972 100644
--- a/src/components/FetchData.vue
+++ b/src/components/FetchData.vue
@@ -46,7 +46,7 @@ async function fetch() {
         if ($props.limit) filter.limit = $props.limit;
 
         const { data } = await axios.get($props.url, {
-            params: { filter },
+            params: { filter: JSON.stringify(filter) },
         });
 
         emit('onFetch', data);
diff --git a/src/components/common/VnJsonValue.vue b/src/components/common/VnJsonValue.vue
new file mode 100644
index 000000000..a2e858d0d
--- /dev/null
+++ b/src/components/common/VnJsonValue.vue
@@ -0,0 +1,88 @@
+<script setup>
+import { watch } from 'vue';
+import { toDateString } from 'src/filters';
+
+const props = defineProps({
+    value: { type: [String, Number, Boolean, Object], default: undefined },
+});
+
+const maxStrLen = 512;
+let t = '';
+let cssClass = '';
+let type;
+const updateValue = () => {
+    type = typeof props.value;
+
+    if (props.value == null) {
+        t = '∅';
+        cssClass = 'json-null';
+    } else {
+        cssClass = `json-${type}`;
+        switch (type) {
+            case 'number':
+                if (Number.isInteger(props.value)) {
+                    t = props.value.toString();
+                } else {
+                    t = (
+                        Math.round((props.value + Number.EPSILON) * 1000) / 1000
+                    ).toString();
+                }
+                break;
+            case 'boolean':
+                t = props.value ? '✓' : '✗';
+                cssClass = `json-${props.value ? 'true' : 'false'}`;
+                break;
+            case 'string':
+                t =
+                    props.value.length <= maxStrLen
+                        ? props.value
+                        : props.value.substring(0, maxStrLen) + '...';
+                break;
+            case 'object':
+                if (props.value instanceof Date) {
+                    t = toDateString(props.value);
+                } else {
+                    t = props.value.toString();
+                }
+                break;
+            default:
+                t = props.value.toString();
+        }
+    }
+};
+
+watch(() => props.value, updateValue);
+
+updateValue();
+</script>
+
+<template>
+    <span
+        :title="type === 'string' && props.value.length > maxStrLen ? props.value : ''"
+        :class="{ [cssClass]: t !== '' }"
+    >
+        {{ t }}
+    </span>
+</template>
+
+<style scoped>
+.json-string {
+    color: #d172cc;
+}
+.json-object {
+    color: #d1a572;
+}
+.json-number {
+    color: #85d0ff;
+}
+.json-true {
+    color: #7dc489;
+}
+.json-false {
+    color: #c74949;
+}
+.json-null {
+    color: #cd7c7c;
+    font-style: italic;
+}
+</style>
diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 1213c8bbc..7e3cfc408 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -1,128 +1,641 @@
 <script setup>
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-import { useSession } from 'src/composables/useSession';
+import axios from 'axios';
 import { useStateStore } from 'stores/useStateStore';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import VnLogFilter from 'src/components/common/VnLogFilter.vue';
-
-import { toDate } from 'src/filters';
+import { useValidationsStore } from 'src/stores/useValidationsStore';
+import { toRelativeDate, toDateString, toDateHour } from 'src/filters';
+import { useColor } from 'src/composables/useColor';
+import { useFirstUpper } from 'src/composables/useFirstUpper';
+import { useIso8601 } from 'src/composables/useIso8601';
+import VnAvatar from '../ui/VnAvatar.vue';
+import VnJsonValue from '../common/VnJsonValue.vue';
+import FetchData from '../FetchData.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 
 const stateStore = useStateStore();
 const route = useRoute();
-const session = useSession();
-const token = session.getToken();
 const { t } = useI18n();
-
+const validationsStore = useValidationsStore();
 const props = defineProps({
     model: {
         type: String,
         default: null,
     },
 });
+const filter = {
+    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'],
+                    },
+                },
+            },
+        },
+    ],
+};
 
-const columns = [
-    {
-        name: 'property',
-        label: 'Property',
-        field: (row) => t(`properties.${row.property}`),
-        align: 'left',
-    },
-    {
-        name: 'before',
-        label: 'Before',
-        field: (row) => formatValue(row.before),
-    },
-    {
-        name: 'after',
-        label: 'After',
-        field: (row) => formatValue(row.after),
-    },
+const workers = ref();
+const actions = ref();
+const changeInput = ref();
+const searchInput = ref();
+const userRadio = ref();
+const userSelect = ref();
+const date = ref();
+const dateDialog = ref(false);
+const dateTo = ref();
+const dateToDialog = ref(false);
+const selectedFilters = ref({});
+const userTypes = [
+    { label: 'All', value: undefined },
+    { label: 'User', value: { neq: null } },
+    { label: 'System', value: null },
 ];
+const checkboxOptions = ref({
+    insert: {
+        label: 'Creates',
+        selected: false,
+    },
+    update: {
+        label: 'Edits',
+        selected: false,
+    },
+    delete: {
+        label: 'Deletes',
+        selected: false,
+    },
+    select: {
+        label: 'Accesses',
+        selected: false,
+    },
+});
 
-function formatValue(value) {
-    if (typeof value === 'boolean') {
-        return value ? t('Yes') : t('No');
-    }
+let validations;
+let pointRecord = ref(null);
+let byRecord = ref(false);
+const logTree = ref([]);
 
-    if (isNaN(value) && !isNaN(Date.parse(value))) {
-        return toDate(value);
-    }
+const actionsText = {
+    insert: 'Creates',
+    update: 'Edits',
+    delete: 'Deletes',
+    select: 'Accesses',
+};
+const actionsClass = {
+    insert: 'success',
+    update: 'warning',
+    delete: 'alert',
+    select: 'notice',
+};
+const actionsIcon = {
+    insert: 'add',
+    update: 'edit',
+    delete: 'remove',
+    select: 'visibility',
+};
+const validDate = new RegExp(
+    /^(-?(?:[1-9][0-9]*)?[0-9]{4})-(1[0-2]|0[1-9])-(3[01]|0[1-9]|[12][0-9])/.source +
+        /T(2[0-3]|[01][0-9]):([0-5][0-9]):([0-5][0-9])(.[0-9]+)?(Z)?$/.source
+);
 
-    if (value === undefined) {
-        return t('Nothing');
-    }
+const filteredActions = ref([]);
+const filteredWorkers = ref([]);
 
-    return `"${value}"`;
+function castJsonValue(value) {
+    return typeof value === 'string' && validDate.test(value) ? new Date(value) : value;
 }
 
-function actionColor(action) {
-    if (action === 'insert') return 'positive';
-    if (action === 'update') return 'positive';
-    if (action === 'delete') return 'negative';
+function parseProps(propNames, locale, vals, olds) {
+    const props = [];
+
+    for (const prop of propNames) {
+        if (prop.endsWith('$')) continue;
+        props.push({
+            name: prop,
+            nameI18n: useFirstUpper(locale.columns?.[prop]) || prop,
+            val: getVal(vals, prop),
+            old: olds && getVal(olds, prop),
+        });
+    }
+    props.sort((a, b) => a.nameI18n.localeCompare(b.nameI18n));
+
+    function getVal(vals, prop) {
+        let val;
+        let id;
+        const showProp = `${prop}$`;
+
+        if (vals[showProp] != null) {
+            val = vals[showProp];
+            id = vals[prop];
+        } else val = vals[prop];
+
+        return { val: castJsonValue(val), id };
+    }
+
+    return props;
 }
+
+function getLogs(data) {
+    const logs = [];
+    let originLog = null;
+    let userLog = null;
+    let modelLog = null;
+    let prevLog, prevUser, prevModel;
+    let nLogs;
+
+    data.forEach((log) => {
+        const locale = validationsStore.validations[log.changedModel]?.locale || {};
+
+        // Origin
+        if (!prevLog || prevLog.originFk != log.originFk) {
+            logs.push((originLog = { originFk: log.originFk, logs: [] }));
+            prevLog = log;
+        }
+        // User
+        if (prevUser != log.userFk) {
+            originLog.logs.push(
+                (userLog = {
+                    user: log.user,
+                    userFk: log.userFk,
+                    logs: [],
+                })
+            );
+            prevUser = log.userFk;
+        }
+        // Model
+        if (
+            !prevModel ||
+            prevModel.changedModelId != log.changedModelId ||
+            prevModel.changedModel != log.changedModel ||
+            nLogs >= 6
+        ) {
+            userLog.logs.push(
+                (modelLog = {
+                    model: log.changedModel,
+                    modelI18n: useFirstUpper(locale.name) || log.changedModel,
+                    id: log.changedModelId,
+                    showValue: log.changedModelValue,
+                    logs: [],
+                })
+            );
+            prevModel = {
+                changedModelId: log.changedModelId,
+                changedModel: log.changedModel,
+            };
+            nLogs = 0;
+        }
+        nLogs++;
+        modelLog.logs.push(log);
+
+        // Changes
+        const notDelete = log.action != 'delete';
+        const olds = (notDelete ? log.oldInstance : null) || {};
+        const vals = (notDelete ? log.newInstance : log.oldInstance) || {};
+
+        let propNames = Object.keys(olds).concat(Object.keys(vals));
+        propNames = [...new Set(propNames)];
+
+        log.props = parseProps(propNames, locale, vals, olds);
+    });
+    return logs;
+}
+
+async function openPointRecord(id, modelLog) {
+    pointRecord.value = null;
+    const { data } = await axios.get(`${props.model}Logs/${id}/pitInstance`);
+    const propNames = Object.keys(data);
+    const locale = validationsStore.validations[modelLog.model]?.locale || {};
+    pointRecord.value = parseProps(propNames, locale, data);
+}
+async function setLogTree() {
+    if (!validations) {
+        validations = await validationsStore.fetchModels();
+    }
+    filter.where = { and: [{ originFk: route.params.id }] };
+    const { data } = await axios.get(`${props.model}Logs`, {
+        params: { filter: JSON.stringify(filter) },
+    });
+    logTree.value = getLogs(data);
+}
+
+function filterByRecord(modelLog) {
+    byRecord.value = true;
+    const { id, model } = modelLog;
+
+    searchInput.value = id;
+    selectedFilters.value.changedModelId = id;
+    selectedFilters.value.changedModel = model;
+    applyFilter();
+}
+
+async function applyFilter() {
+    filter.where = { and: [] };
+    if (
+        !selectedFilters.value.changedModel ||
+        (!selectedFilters.value.changedModelValue &&
+            !selectedFilters.value.changedModelId)
+    )
+        byRecord.value = false;
+
+    if (!byRecord.value) filter.where.and.push({ originFk: route.params.id });
+
+    if (Object.keys(selectedFilters.value).length) {
+        filter.where.and.push(selectedFilters.value);
+    }
+
+    const { data } = await axios.get(`${props.model}Logs`, {
+        params: { filter: JSON.stringify(filter) },
+    });
+
+    logTree.value = getLogs(data);
+}
+
+function setDate(type) {
+    const from = date.value
+        ? useIso8601(date.value.split('-').reverse().join('-'))
+        : undefined;
+    const to = dateTo.value
+        ? useIso8601(`${dateTo.value.split('-').reverse().join('-')} 21:59:59.999`)
+        : useIso8601(`${date.value.split('-').reverse().join('-')} 21:59:59.999`);
+
+    switch (type) {
+        case 'from':
+            return { between: [from, to] };
+        case 'to': {
+            if (date.value) {
+                return {
+                    between: [from, to],
+                };
+            } else {
+                return { lte: to };
+            }
+        }
+    }
+}
+
+function selectFilter(type, dateType) {
+    const filter = {};
+    const actions = { inq: [] };
+    let reload = true;
+
+    if (type === 'search') {
+        if (/^\s*[0-9]+\s*$/.test(searchInput.value) || props.byRecord) {
+            selectedFilters.value.changedModelId = searchInput.value.trim();
+        } else if (!searchInput.value) {
+            selectedFilters.value.changedModelId = undefined;
+            selectedFilters.value.changedModelValue = undefined;
+        } else {
+            selectedFilters.value.changedModelValue = { like: `%${searchInput.value}%` };
+        }
+    }
+    if (type === 'action' && selectedFilters.value.changedModel === null) {
+        selectedFilters.value.changedModel = undefined;
+        reload = false;
+    }
+    if (type === 'userRadio') {
+        selectedFilters.value.userFk = userRadio.value;
+    }
+    if (type === 'change') {
+        if (changeInput.value)
+            selectedFilters.value.or = [
+                { oldJson: { like: `%${changeInput.value}%` } },
+                { newJson: { like: `%${changeInput.value}%` } },
+                { description: { like: `%${changeInput.value}%` } },
+            ];
+        else selectedFilters.value.or = undefined;
+    }
+    if (type === 'userSelect') {
+        selectedFilters.value.userFk =
+            userSelect.value !== null ? userSelect.value : undefined;
+    }
+    if (type === 'date') {
+        if (!date.value && !dateTo.value) {
+            selectedFilters.value.creationDate = undefined;
+        } else if (dateType === 'to') {
+            selectedFilters.value.creationDate = setDate('to');
+        } else if (dateType === 'from') {
+            selectedFilters.value.creationDate = setDate('from');
+        }
+    }
+
+    Object.keys(checkboxOptions.value).forEach((key) => {
+        if (checkboxOptions.value[key].selected) actions.inq.push(key);
+    });
+    selectedFilters.value.action = actions.inq.length ? actions : undefined;
+
+    Object.keys(selectedFilters.value).forEach((key) => {
+        if (selectedFilters.value[key]) filter[key] = selectedFilters.value[key];
+    });
+
+    if (reload) applyFilter(filter);
+}
+
+async function clearFilter() {
+    selectedFilters.value = {};
+    byRecord.value = false;
+    userSelect.value = undefined;
+    searchInput.value = undefined;
+    changeInput.value = undefined;
+    date.value = undefined;
+    dateTo.value = undefined;
+    Object.keys(checkboxOptions.value).forEach(
+        (opt) => (checkboxOptions.value[opt].selected = false)
+    );
+    await applyFilter();
+}
+
+function filterFn(val, update, abortFn, type) {
+    if (!val) {
+        update(() => {
+            if (type === 'actions') filteredActions.value = actions.value;
+            if (type === 'workers') filteredWorkers.value = workers.value;
+        });
+        return;
+    }
+
+    update(() => {
+        const needle = val.toLowerCase();
+        if (type === 'actions')
+            filteredActions.value = actions.value.filter((item) =>
+                item.toLowerCase().includes(needle)
+            );
+        if (type === 'workers') {
+            if (isNaN(needle))
+                filteredWorkers.value = workers.value.filter(
+                    (item) =>
+                        item.name.toLowerCase().includes(needle) ||
+                        item.nickname.toLowerCase().includes(needle)
+                );
+            else
+                filteredWorkers.value = workers.value.filter((item) => item.id == needle);
+        }
+    });
+}
+
+setLogTree();
 </script>
 <template>
-    <div class="column items-center">
-        <QTimeline class="q-pa-md">
-            <QTimelineEntry heading tag="h4"> {{ t('Audit logs') }} </QTimelineEntry>
-            <VnPaginate
-                :data-key="`${props.model}Logs`"
-                :url="`${props.model}s/${route.params.id}/logs`"
-                order="id DESC"
-                :offset="100"
-                :limit="5"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <template v-for="log of rows" :key="log.id">
-                        <QTimelineEntry
-                            :avatar="`/api/Images/user/160x160/${log.userFk}/download?access_token=${token}`"
-                        >
-                            <template #subtitle>
-                                {{ log.userName }} -
-                                {{
-                                    toDate(log.created, {
-                                        dateStyle: 'medium',
-                                        timeStyle: 'short',
-                                    })
-                                }}
-                            </template>
-                            <template #title>
-                                <QChip :color="actionColor(log.action)">
-                                    {{ t(`actions.${log.action}`) }}
-                                </QChip>
-                                {{ t(`models.${log.model}`) }}
-                            </template>
-                            <QTable
-                                :rows="log.changes"
-                                :columns="columns"
-                                row-key="property"
-                                hide-pagination
+    <FetchData
+        :url="`${props.model}Logs/${route.params.id}/editors`"
+        :filter="{
+            fields: ['id', 'nickname', 'name', 'image'],
+            order: 'nickname',
+            limit: 30,
+        }"
+        @on-fetch="(data) => (workers = data)"
+        auto-load
+    />
+    <FetchData
+        :url="`${props.model}Logs/${route.params.id}/models`"
+        :filter="{ order: ['changedModel'] }"
+        @on-fetch="(data) => (actions = data.map((item) => item.changedModel))"
+        auto-load
+    />
+    <div
+        class="column items-center logs origin-log"
+        v-for="(originLog, originLogIndex) in logTree"
+        :key="originLogIndex"
+    >
+        <QItem class="origin-info items-center q-my-md" v-if="logTree.length > 1">
+            <h6 class="origin-id">
+                {{ originLog.modelI18n }}
+                #{{ originLog.originFk }}
+            </h6>
+            <div class="line"></div>
+        </QItem>
+        <div
+            class="user-log q-mb-sm row"
+            v-for="(userLog, userIndex) in originLog.logs"
+            :key="userIndex"
+        >
+            <div class="timeline">
+                <div class="user-avatar">
+                    <VnAvatar
+                        class="cursor-pointer"
+                        :worker="userLog.user.id"
+                        :title="userLog.user.nickname"
+                    />
+                    <WorkerDescriptorProxy
+                        v-if="userLog.user.image"
+                        :id="userLog.user.id"
+                    />
+                </div>
+                <div class="arrow bg-panel" v-if="byRecord"></div>
+                <div class="line"></div>
+            </div>
+            <QList class="user-changes" v-if="userLog">
+                <QItem
+                    class="model-log column q-px-none q-py-xs"
+                    v-for="(modelLog, modelLogIndex) in userLog.logs"
+                    :key="modelLogIndex"
+                >
+                    <QItemSection>
+                        <QItemLabel class="model-info q-mb-xs" v-if="!byRecord">
+                            <QChip
                                 dense
-                                flat
+                                size="md"
+                                class="model-name q-mr-xs text-white"
+                                v-if="
+                                    !(modelLog.changedModel && modelLog.changedModelId) &&
+                                    modelLog.model
+                                "
+                                :style="{
+                                    backgroundColor: useColor(modelLog.model),
+                                }"
+                                :title="modelLog.model"
                             >
-                                <template #header="propsLabel">
-                                    <QTr :props="propsLabel">
-                                        <QTh
-                                            v-for="col in propsLabel.cols"
-                                            :key="col.name"
-                                            :props="propsLabel"
+                                {{ t(modelLog.modelI18n) }}
+                            </QChip>
+                            <span class="model-id" v-if="modelLog.id"
+                                >#{{ modelLog.id }}</span
+                            >
+                            <span class="model-value" :title="modelLog.showValue">
+                                {{ modelLog.showValue }}
+                            </span>
+                            <QBtn
+                                flat
+                                round
+                                color="grey"
+                                class="q-mr-xs q-ml-auto"
+                                size="sm"
+                                icon="filter_alt"
+                                :title="t('recordChanges')"
+                                @click.stop="filterByRecord(modelLog)"
+                            />
+                        </QItemLabel>
+                    </QItemSection>
+                    <QItemSection>
+                        <QCard
+                            class="changes-log q-py-none"
+                            v-for="(log, logIndex) in modelLog.logs"
+                            :key="logIndex"
+                        >
+                            <QCardSection class="change-info q-pa-none">
+                                <QItem
+                                    class="q-px-sm q-py-xs justify-between items-center"
+                                >
+                                    <div
+                                        class="date text-grey text-caption q-mr-sm"
+                                        :title="
+                                            toDateHour(log.creationDate) ??
+                                            `date:'dd/MM/yyyy HH:mm:ss'`
+                                        "
+                                    >
+                                        {{ toRelativeDate(log.creationDate) }}
+                                    </div>
+                                    <div>
+                                        <QBtn
+                                            color="grey"
+                                            class="pit"
+                                            icon="preview"
+                                            flat
+                                            round
+                                            :title="t('pointRecord')"
+                                            padding="xs"
+                                            v-if="log.action != 'insert'"
+                                            @click.stop="
+                                                openPointRecord(log.id, modelLog)
+                                            "
                                         >
-                                            {{ t(col.label) }}
-                                        </QTh>
-                                    </QTr>
-                                </template>
-                            </QTable>
-                        </QTimelineEntry>
-                    </template>
-                </template>
-            </VnPaginate>
-        </QTimeline>
+                                            <QPopupProxy>
+                                                <QCard v-if="pointRecord">
+                                                    <div
+                                                        class="header q-px-sm q-py-xs q-ma-none text-white text-bold bg-primary"
+                                                    >
+                                                        {{ modelLog.modelI18n }}
+                                                        <span v-if="modelLog.id"
+                                                            >#{{ modelLog.id }}</span
+                                                        >
+                                                    </div>
+                                                    <QCardSection
+                                                        class="change-detail q-pa-sm"
+                                                    >
+                                                        <QItem
+                                                            v-for="(
+                                                                value, index
+                                                            ) in pointRecord"
+                                                            :key="index"
+                                                            class="q-pa-none"
+                                                        >
+                                                            <span
+                                                                class="json-field q-mr-xs text-grey"
+                                                                :title="value.name"
+                                                            >
+                                                                {{ value.nameI18n }}:
+                                                            </span>
+                                                            <VnJsonValue
+                                                                :value="value.val.val"
+                                                            />
+                                                        </QItem>
+                                                    </QCardSection>
+                                                </QCard>
+                                            </QPopupProxy>
+                                        </QBtn>
+                                        <QIcon
+                                            class="action q-ml-xs"
+                                            :class="actionsClass[log.action]"
+                                            :name="actionsIcon[log.action]"
+                                            :title="
+                                                t(`actions.${actionsText[log.action]}`)
+                                            "
+                                        />
+                                    </div>
+                                </QItem>
+                            </QCardSection>
+                            <QCardSection
+                                class="change-detail q-px-sm q-py-xs"
+                                :class="{ expanded: log.expand }"
+                                v-if="log.props.length || log.description"
+                            >
+                                <QIcon
+                                    class="cursor-pointer q-mr-md"
+                                    color="grey"
+                                    name="expand_more"
+                                    :title="t('globals.details')"
+                                    size="sm"
+                                    @click="log.expand = !log.expand"
+                                />
+                                <QList v-if="log.props.length" class="attributes">
+                                    <QItem v-if="!log.expand" class="q-pa-none text-grey">
+                                        <span
+                                            v-for="(prop, propIndex) in log.props"
+                                            :key="propIndex"
+                                            class="basic-json"
+                                        >
+                                            <span class="json-field" :title="prop.name">
+                                                {{ prop.nameI18n }}:
+                                            </span>
+                                            <VnJsonValue :value="prop.val.val" />
+                                            <span v-if="propIndex < log.props.length - 1">
+                                                ,
+                                            </span>
+                                        </span>
+                                    </QItem>
+                                    <QItem
+                                        v-if="log.expand"
+                                        class="expanded-json column q-pa-none"
+                                    >
+                                        <div
+                                            v-for="(prop, prop2Index) in log.props"
+                                            :key="prop2Index"
+                                            class="q-pa-none text-grey"
+                                        >
+                                            <span class="json-field" :title="prop.name">
+                                                {{ prop.nameI18n }}:
+                                            </span>
+                                            <VnJsonValue :value="prop.val.val" />
+                                            <span v-if="prop.val.id" class="id-value">
+                                                #{{ prop.val.id }}
+                                            </span>
+                                            <span v-if="log.action == 'update'">
+                                                ←
+                                                <VnJsonValue :value="prop.old.val" />
+                                                <span v-if="prop.old.id" class="id-value">
+                                                    #{{ prop.old.id }}
+                                                </span>
+                                            </span>
+                                        </div>
+                                    </QItem>
+                                </QList>
+                                <span v-if="!log.props.length" class="description">
+                                    {{ log.description }}
+                                </span>
+                            </QCardSection>
+                        </QCard>
+                    </QItemSection>
+                </QItem>
+            </QList>
+        </div>
     </div>
     <Teleport v-if="stateStore.isHeaderMounted()" to="#actions-append">
         <div class="row q-gutter-x-sm">
-            <QBtn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu">
+            <QBtn
+                flat
+                @click.stop="stateStore.toggleRightDrawer()"
+                round
+                dense
+                icon="menu"
+            >
                 <QTooltip bottom anchor="bottom right">
                     {{ t('globals.collapseMenu') }}
                 </QTooltip>
@@ -131,28 +644,414 @@ function actionColor(action) {
     </Teleport>
     <QDrawer v-model="stateStore.rightDrawer" show-if-above side="right" :width="300">
         <QScrollArea class="fit text-grey-8">
-            <VnLogFilter :data-key="`${props.model}Logs`" />
+            <QList dense>
+                <QSeparator />
+                <QItem class="q-mt-sm">
+                    <QInput
+                        :label="t('globals.search')"
+                        v-model="searchInput"
+                        class="full-width"
+                        clearable
+                        clear-icon="close"
+                        @keyup.enter="() => selectFilter('search')"
+                        @focusout="() => selectFilter('search')"
+                        @clear="() => selectFilter('search')"
+                    >
+                        <template #append>
+                            <QIcon name="info" class="cursor-pointer">
+                                <QTooltip>{{ t('tooltips.search') }}</QTooltip>
+                            </QIcon>
+                        </template>
+                    </QInput>
+                </QItem>
+                <QItem class="q-mt-sm">
+                    <QSelect
+                        class="full-width"
+                        v-model="selectedFilters.changedModel"
+                        @update:model-value="selectFilter('action')"
+                        :options="filteredActions"
+                        :label="t('globals.entity')"
+                        use-input
+                        clearable
+                        clear-icon="close"
+                        @filter="
+                            (val, update, abortFn) =>
+                                filterFn(val, update, abortFn, 'actions')
+                        "
+                        @clear="() => selectFilter('action')"
+                    >
+                        <template #option="{ opt, index, itemProps }">
+                            <QItem :index="index" v-bind="itemProps">
+                                {{ t(`models.${opt}`) }}
+                            </QItem>
+                        </template>
+                        <template #selected-item="{ opt }">
+                            {{ t(opt) }}
+                        </template>
+                    </QSelect>
+                </QItem>
+                <QItem class="q-mt-sm">
+                    <QOptionGroup
+                        size="sm"
+                        v-model="userRadio"
+                        :options="userTypes"
+                        color="primary"
+                        @update:model-value="selectFilter('userRadio')"
+                        right-label
+                    >
+                        <template #label="{ label }">
+                            {{ t(`Users.${label}`) }}
+                        </template>
+                    </QOptionGroup>
+                </QItem>
+                <QItem class="q-mt-sm">
+                    <QItemSection v-if="!workers">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="workers">
+                        <QSelect
+                            :label="t('globals.user')"
+                            v-model="userSelect"
+                            @update:model-value="selectFilter('userSelect')"
+                            :options="filteredWorkers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            use-input
+                            clearable
+                            clear-icon="close"
+                            @filter="
+                                (val, update, abortFn) =>
+                                    filterFn(val, update, abortFn, 'workers')
+                            "
+                        >
+                            <template #option="{ opt, itemProps }">
+                                <QItem
+                                    v-bind="itemProps"
+                                    class="q-pa-xs row items-center"
+                                >
+                                    <QItemSection class="col-3 items-center">
+                                        <VnAvatar :worker="opt.id" />
+                                    </QItemSection>
+                                    <QItemSection class="col-9 justify-center">
+                                        <span>{{ opt.name }}</span>
+                                        <span class="text-grey">{{ opt.nickname }}</span>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </QSelect>
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mt-sm">
+                    <QInput
+                        :label="t('globals.changes')"
+                        v-model="changeInput"
+                        class="full-width"
+                        clearable
+                        clear-icon="close"
+                        @keyup.enter="selectFilter('change')"
+                        @focusout="selectFilter('change')"
+                        @clear="selectFilter('change')"
+                    >
+                        <template #append>
+                            <QIcon name="info" class="cursor-pointer">
+                                <QTooltip max-width="250px">{{
+                                    t('tooltips.changes')
+                                }}</QTooltip>
+                            </QIcon>
+                        </template>
+                    </QInput>
+                </QItem>
+                <QItem
+                    :class="index == 'create' ? 'q-mt-md' : 'q-mt-xs'"
+                    v-for="(checkboxOption, index) in checkboxOptions"
+                    :key="index"
+                >
+                    <QCheckbox
+                        size="sm"
+                        v-model="checkboxOption.selected"
+                        :label="t(`actions.${checkboxOption.label}`)"
+                        @update:model-value="selectFilter"
+                    />
+                </QItem>
+                <QItem class="q-mt-sm">
+                    <QInput
+                        class="full-width"
+                        :label="t('globals.date')"
+                        @click="dateDialog = true"
+                        @focus="(evt) => evt.target.blur()"
+                        @clear="selectFilter('date', 'to')"
+                        v-model="date"
+                        clearable
+                        clear-icon="close"
+                    />
+                </QItem>
+                <QItem class="q-mt-sm">
+                    <QInput
+                        class="full-width"
+                        :label="t('to')"
+                        @click="dateToDialog = true"
+                        @focus="(evt) => evt.target.blur()"
+                        @clear="selectFilter('date', 'from')"
+                        v-model="dateTo"
+                        clearable
+                        clear-icon="close"
+                    />
+                </QItem>
+            </QList>
         </QScrollArea>
     </QDrawer>
+    <QDialog v-model="dateDialog">
+        <QDate
+            :years-in-month-view="false"
+            v-model="date"
+            dense
+            flat
+            minimal
+            @update:model-value="
+                (value) => {
+                    dateDialog = false;
+                    const formatDate = toDateString(new Date(value));
+                    date = formatDate.split('-').reverse().join('-');
+                    selectFilter('date', 'from');
+                }
+            "
+        />
+    </QDialog>
+    <QDialog v-model="dateToDialog">
+        <QDate
+            v-model="dateTo"
+            dense
+            flat
+            minimal
+            @update:model-value="
+                (value) => {
+                    dateToDialog = false;
+                    const formatDate = toDateString(new Date(value));
+                    dateTo = formatDate.split('-').reverse().join('-');
+                    selectFilter('date', 'to');
+                }
+            "
+        />
+    </QDialog>
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <QBtn
+            v-if="Object.values(selectedFilters).some((filter) => filter !== undefined)"
+            color="primary"
+            icon="filter_alt_off"
+            size="md"
+            round
+            @click="clearFilter"
+        />
+    </QPageSticky>
 </template>
-
+<style lang="scss">
+.q-timeline__subtitle {
+    opacity: 1 !important;
+}
+.logs {
+    .vn-label-value {
+        .label {
+            margin-right: 5px;
+            color: var(--vn-label);
+        }
+    }
+    .q-avatar {
+        font-size: 38px;
+    }
+}
+</style>
 <style lang="scss" scoped>
-.q-timeline {
-    width: 100%;
-    max-width: 80em;
+.q-card {
+    background-color: var(--vn-gray);
+}
+.q-item {
+    min-height: 0px;
+}
+
+.origin-log {
+    &:first-child > .origin-info {
+        margin-top: 0;
+    }
+    & > .origin-info {
+        gap: 6px;
+
+        & > .origin-id {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            margin: 0;
+        }
+        & > .line {
+            flex-grow: 1;
+            background-color: $primary;
+            height: 2px;
+        }
+    }
+}
+.user-log {
+    width: 40em;
+
+    & > .timeline {
+        position: relative;
+        padding-right: 5px;
+        width: 50px;
+        min-width: 38px;
+        & > .arrow {
+            height: 8px;
+            width: 8px;
+            position: absolute;
+            transform: rotateY(0deg) rotate(45deg);
+            top: 15px;
+            right: -4px;
+            z-index: 1;
+        }
+        & > .user-avatar {
+            padding: 8px 0;
+            margin-top: -8px;
+            position: sticky;
+            top: 64px;
+        }
+        & > .line {
+            position: absolute;
+            background-color: $primary;
+            width: 2px;
+            left: 23px;
+            z-index: -1;
+            top: 0;
+            bottom: -8px;
+        }
+    }
+    &:last-child > .timeline > .line {
+        display: none;
+    }
+    & > .user-changes {
+        flex-grow: 1;
+        overflow: hidden;
+    }
+}
+.model-log {
+    .model-info {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        .model-value {
+            font-style: italic;
+        }
+        .model-id {
+            color: var(--vn-label);
+            font-size: 0.9rem;
+        }
+        .q-btn {
+            float: right;
+        }
+    }
+}
+.changes-log {
+    overflow: hidden;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+    .change-info {
+        overflow: hidden;
+        background-color: var(--vn-header);
+        & > .date {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+        & > div {
+            white-space: nowrap;
+            .action {
+                color: black;
+                border-radius: 50%;
+                padding: 3px;
+                font-size: 18px;
+
+                &.notice {
+                    background-color: $info;
+                }
+                &.success {
+                    background-color: $positive;
+                }
+                &.warning {
+                    background-color: $warning;
+                }
+                &.alert {
+                    background-color: $negative;
+                }
+            }
+        }
+    }
+    & > .change-detail {
+        background-color: var(--vn-gray);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        box-sizing: border-box;
+        & > .q-icon {
+            float: right;
+            transition-property: transform, background-color;
+            transition-duration: 150ms;
+            margin: 0;
+        }
+        &.expanded {
+            text-overflow: initial;
+            white-space: initial;
+
+            & > .q-icon {
+                transform: rotate(180deg);
+            }
+        }
+        & > .no-changes {
+            font-style: italic;
+        }
+    }
+}
+.q-menu {
+    display: block;
+
+    & > .loading {
+        display: flex;
+        justify-content: center;
+    }
+    & > .q-card {
+        min-width: 180px;
+        max-width: 400px;
+
+        & > .header {
+            color: $dark;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+    }
 }
 </style>
 <i18n>
 en:
+    to: To
+    pointRecord: View record at this point in time
+    recordChanges: show all record changes
+    tooltips:
+        search: Search by id or concept
+        changes: Search by changes
     actions:
-        insert: Creates
-        update: Updates
-        delete: Deletes
+        Creates: Creates
+        Edits: Edits
+        Deletes: Deletes
+        Accesses: Accesses
     models:
-        Claim: Claim
-        ClaimDms: Document
-        ClaimBeginning: Claimed Sales
-        ClaimObservation: Observation
+        Claim: Reclamación
+        ClaimDms: Documento
+        ClaimBeginning: Comienzo
+        ClaimObservation: Observación
+    Users:
+        User: Usuario
+        All: Todo
+        System: Sistema
     properties:
         id: ID
         claimFk: Claim ID
@@ -172,6 +1071,12 @@ en:
         responsibility: Responsibility
         packages: Packages
 es:
+    to: Hasta
+    pointRecord: Ver el registro en este punto
+    recordChanges: Mostrar todos los cambios realizados en el registro
+    tooltips:
+        search: Buscar por identificador o concepto
+        changes: Buscar por cambios. Los atributos deben buscarse por su nombre interno, para obtenerlo situar el cursor sobre el atributo.
     Audit logs: Registros de auditoría
     Property: Propiedad
     Before: Antes
@@ -179,14 +1084,14 @@ es:
     Yes: Si
     Nothing: Nada
     actions:
-        insert: Crea
-        update: Actualiza
-        delete: Elimina
-    models:
-        Claim: Reclamación
-        ClaimDms: Documento
-        ClaimBeginning: Línea reclamada
-        ClaimObservation: Observación
+        Creates: Crea
+        Edits: Modifica
+        Deletes: Elimina
+        Accesses: Accede
+    Users:
+        User: Usuario
+        All: Todo
+        System: Sistema
     properties:
         id: ID
         claimFk: ID reclamación
diff --git a/src/composables/useColor.js b/src/composables/useColor.js
new file mode 100644
index 000000000..b325e985f
--- /dev/null
+++ b/src/composables/useColor.js
@@ -0,0 +1,35 @@
+export function djb2a(string) {
+    let hash = 5381;
+    for (let i = 0; i < string.length; i++)
+        hash = ((hash << 5) + hash) ^ string.charCodeAt(i);
+    return hash >>> 0;
+}
+
+export function useColor(value) {
+    return '#' + colors[djb2a(value || '') % colors.length];
+}
+
+const colors = [
+    'b5b941', // Yellow
+    'ae9681', // Peach
+    'd78767', // Salmon
+    'cc7000', // Orange bright
+    'e2553d', // Coral
+    '8B0000', // Red dark
+    'de4362', // Red crimson
+    'FF1493', // Ping intense
+    'be39a2', // Pink light
+    'b754cf', // Purple middle
+    'a87ba8', // Pink
+    '8a69cd', // Blue lavender
+    'ab20ab', // Purple dark
+    '00b5b8', // Turquoise
+    '1fa8a1', // Green ocean
+    '5681cf', // Blue steel
+    '3399fe', // Blue sky
+    '6d9c3e', // Green chartreuse
+    '51bb51', // Green lime
+    '518b8b', // Gray board
+    '7e7e7e', // Gray
+    '5d5d5d', // Gray dark
+];
diff --git a/src/composables/useFirstUpper.js b/src/composables/useFirstUpper.js
new file mode 100644
index 000000000..36378c05f
--- /dev/null
+++ b/src/composables/useFirstUpper.js
@@ -0,0 +1,3 @@
+export function useFirstUpper(str) {
+    return str && str.charAt(0).toUpperCase() + str.substr(1);
+}
diff --git a/src/composables/useIso8601.js b/src/composables/useIso8601.js
new file mode 100644
index 000000000..848e60de8
--- /dev/null
+++ b/src/composables/useIso8601.js
@@ -0,0 +1,18 @@
+export function useIso8601(dateString) {
+    // Crear un objeto Date a partir de la cadena de texto
+    const date = new Date(dateString);
+
+    // Obtener los componentes de fecha y hora
+    const year = date.getUTCFullYear();
+    const month = String(date.getUTCMonth() + 1).padStart(2, '0');
+    const day = String(date.getUTCDate()).padStart(2, '0');
+    const hours = String(date.getUTCHours()).padStart(2, '0');
+    const minutes = String(date.getUTCMinutes()).padStart(2, '0');
+    const seconds = String(date.getUTCSeconds()).padStart(2, '0');
+    const milliseconds = String(date.getUTCMilliseconds()).padStart(3, '0');
+
+    // Formatear la cadena en el formato ISO 8601
+    const formattedDate = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}.${milliseconds}Z`;
+
+    return formattedDate;
+}
diff --git a/src/css/app.scss b/src/css/app.scss
index 3c8cc50b6..9ed51c1c7 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -14,6 +14,10 @@ a {
     color: $orange-4;
 }
 
+.rounded--full {
+    border-radius: 50%;
+}
+
 // Removes chrome autofill background
 input:-webkit-autofill,
 select:-webkit-autofill {
@@ -32,10 +36,12 @@ body.body--light {
     --vn-text: #000000;
     --vn-gray: #f5f5f5;
     --vn-label: #5f5f5f;
+    --vn-header: #e9e9e9;
 }
 
 body.body--dark {
     --vn-text: #ffffff;
     --vn-gray: #313131;
     --vn-label: #a8a8a8;
+    --vn-header: #212121;
 }
diff --git a/src/filters/index.js b/src/filters/index.js
index 158ce1009..b0c441641 100644
--- a/src/filters/index.js
+++ b/src/filters/index.js
@@ -2,6 +2,7 @@ import toLowerCase from './toLowerCase';
 import toDate from './toDate';
 import toDateString from './toDateString';
 import toDateHour from './toDateHour';
+import toRelativeDate from './toRelativeDate';
 import toCurrency from './toCurrency';
 import toPercentage from './toPercentage';
 import toLowerCamel from './toLowerCamel';
@@ -13,6 +14,7 @@ export {
     toDate,
     toDateString,
     toDateHour,
+    toRelativeDate,
     toCurrency,
     toPercentage,
     dashIfEmpty,
diff --git a/src/filters/toRelativeDate.js b/src/filters/toRelativeDate.js
new file mode 100644
index 000000000..76e67dbea
--- /dev/null
+++ b/src/filters/toRelativeDate.js
@@ -0,0 +1,32 @@
+import { useI18n } from 'vue-i18n';
+
+export default function formatDate(dateVal) {
+    const { t } = useI18n();
+    const today = new Date();
+    if (dateVal == null) return '';
+
+    const date = new Date(dateVal);
+    const dateZeroTime = new Date(dateVal);
+    dateZeroTime.setHours(0, 0, 0, 0);
+    const diff = Math.trunc(
+        (today.getTime() - dateZeroTime.getTime()) / (1000 * 3600 * 24)
+    );
+    let format;
+    if (diff === 0) format = t('globals.today');
+    else if (diff === 1) format = t('globals.yesterday');
+    else if (diff > 1 && diff < 7) {
+        const options = { weekday: 'short' };
+        format = date.toLocaleDateString(t('globals.dateFormat'), options);
+    } else if (today.getFullYear() === date.getFullYear()) {
+        const options = { day: 'numeric', month: 'short' };
+        format = date.toLocaleDateString(t('globals.dateFormat'), options);
+    } else {
+        const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
+        format = date.toLocaleDateString(t('globals.dateFormat'), options);
+    }
+
+    // Formatear la hora en HH:mm
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    return `${format} ${hours}:${minutes}`;
+}
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index d7519ba53..285fb778f 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -5,6 +5,9 @@ export default {
             en: 'English',
         },
         language: 'Language',
+        entity: 'Entity',
+        user: 'User',
+        details: 'Details',
         collapseMenu: 'Collapse left menu',
         backToDashboard: 'Return to dashboard',
         notifications: 'Notifications',
@@ -13,8 +16,11 @@ export default {
         pinnedModules: 'Pinned modules',
         darkMode: 'Dark mode',
         logOut: 'Log out',
+        date: 'Date',
         dataSaved: 'Data saved',
         dataDeleted: 'Data deleted',
+        search: 'Search',
+        changes: 'Changes',
         add: 'Add',
         create: 'Create',
         save: 'Save',
@@ -36,6 +42,9 @@ export default {
         summary: {
             basicData: 'Basic data',
         },
+        today: 'Today',
+        yesterday: 'Yesterday',
+        dateFormat: 'en-GB',
     },
     errors: {
         statusUnauthorized: 'Access denied',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index fc2c80f55..97001eab8 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -5,6 +5,9 @@ export default {
             en: 'Inglés',
         },
         language: 'Idioma',
+        entity: 'Entidad',
+        user: 'Usuario',
+        details: 'Detalles',
         collapseMenu: 'Contraer menú lateral',
         backToDashboard: 'Volver al tablón',
         notifications: 'Notificaciones',
@@ -13,8 +16,11 @@ export default {
         pinnedModules: 'Módulos fijados',
         darkMode: 'Modo oscuro',
         logOut: 'Cerrar sesión',
+        date: 'Fecha',
         dataSaved: 'Datos guardados',
         dataDeleted: 'Datos eliminados',
+        search: 'Buscar',
+        changes: 'Cambios',
         add: 'Añadir',
         create: 'Crear',
         save: 'Guardar',
@@ -36,6 +42,9 @@ export default {
         summary: {
             basicData: 'Datos básicos',
         },
+        today: 'Hoy',
+        yesterday: 'Ayer',
+        dateFormat: 'es-ES',
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',
diff --git a/src/stores/useValidationsStore.js b/src/stores/useValidationsStore.js
new file mode 100644
index 000000000..c658a90af
--- /dev/null
+++ b/src/stores/useValidationsStore.js
@@ -0,0 +1,19 @@
+import axios from 'axios';
+import { defineStore } from 'pinia';
+
+export const useValidationsStore = defineStore('validationsStore', {
+    state: () => ({
+        validations: null,
+    }),
+    actions: {
+        async fetchModels() {
+            if (this.validations) return;
+            try {
+                const { data } = await axios.get('Schemas/modelinfo');
+                this.validations = data;
+            } catch (error) {
+                console.error('Error al obtener las validaciones:', error);
+            }
+        },
+    },
+});
diff --git a/test/cypress/integration/ClaimNotes.spec.js b/test/cypress/integration/ClaimNotes.spec.js
index 5b52dd339..9f52c29e4 100644
--- a/test/cypress/integration/ClaimNotes.spec.js
+++ b/test/cypress/integration/ClaimNotes.spec.js
@@ -8,6 +8,7 @@ describe('ClaimNotes', () => {
     it('should add a new note', () => {
         const message = 'This is a new message.';
         cy.get('.q-page-sticky button').click();
+        cy.get('.q-page-sticky > div > button').click();
         cy.get('.q-dialog .q-card__section:nth-child(2)').type(message);
         cy.get('.q-card__actions button:nth-child(2)').click();
         cy.get('.q-card .q-card__section:nth-child(2)')
diff --git a/test/cypress/integration/vnLog.spec.js b/test/cypress/integration/vnLog.spec.js
new file mode 100644
index 000000000..3d6d9b95d
--- /dev/null
+++ b/test/cypress/integration/vnLog.spec.js
@@ -0,0 +1,31 @@
+/// <reference types="cypress" />
+describe('ClaimNotes', () => {
+    beforeEach(() => {
+        cy.login('developer');
+        cy.visit(`/#/claim/${1}/log`);
+    });
+
+    it('should have just one record', () => {
+        cy.get('.model-info .q-btn').eq(1).click();
+        cy.get('.user-log .model-log').its('length').should('eq', 1);
+        cy.get('.q-page-sticky .q-btn').click();
+        cy.get('.user-log .model-log').its('length').should('eq', 4);
+    });
+
+    it('should filter by insert actions', () => {
+        cy.get('.q-gutter-x-sm > .q-btn > .q-btn__content > .q-icon').click();
+        cy.get('.q-checkbox__inner').eq(0).click();
+        cy.get('.q-page > .q-drawer-container > .fullscreen').click();
+        cy.get('.model-info .q-chip__content').eq(0).should('have.text', 'Document');
+        cy.get('.model-info .q-chip__content').eq(1).should('have.text', 'Beginning');
+    });
+
+    it('should show the point record', () => {
+        cy.get('.pit').eq(0).click();
+        cy.get('.q-menu .q-card .header').should('have.text', 'Observation #1');
+        cy.get('.q-menu .q-card .json-string').should(
+            'have.text',
+            'Waiting for customer'
+        );
+    });
+});
diff --git a/test/cypress/integration/workerList.spec.js b/test/cypress/integration/workerList.spec.js
index d76958367..8d4dd770d 100644
--- a/test/cypress/integration/workerList.spec.js
+++ b/test/cypress/integration/workerList.spec.js
@@ -8,17 +8,17 @@ describe('WorkerList', () => {
     it('should load workers', () => {
         cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
             .eq(0)
-            .should('have.text', 'victorvd');
-        cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
-            .eq(1)
             .should('have.text', 'JessicaJones');
         cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
-            .eq(2)
+            .eq(1)
             .should('have.text', 'BruceBanner');
+        cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
+            .eq(2)
+            .should('have.text', 'CharlesXavier');
     });
 
     it('should open the worker summary', () => {
-        cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(1).click();
+        cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(0).click();
         cy.get('.summaryHeader div').should('have.text', '1110 - Jessica Jones');
         cy.get('.summary .header').eq(0).invoke('text').should('include', 'Basic data');
         cy.get('.summary .header').eq(1).should('have.text', 'User data');

From bdf288241b043b6192c6e96fa02aa10179b6ebf6 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 18 Sep 2023 14:38:35 +0200
Subject: [PATCH 07/81] ref #6104 fix package

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8568d507d..b713c906a 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
         "lint": "eslint --ext .js,.vue ./",
         "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
         "test:e2e": "cypress open",
-        "test:e2e:ci": "cypress run --browser chrome",
+        "test:e2e:ci": "cypress run --browser chromium",
         "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
         "test:unit": "vitest",
         "test:unit:ci": "vitest run"

From ca28ecdd8ecbfd2f1633b3ae7c8ba3f44033fc19 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 26 Sep 2023 11:49:57 +0200
Subject: [PATCH 08/81] ref #6104 tests created and searchFn fixed

---
 package.json                                  |   2 +-
 src/components/common/VnLog.vue               |  51 +++---
 src/css/app.scss                              |   4 -
 src/pages/Claim/Card/ClaimDescriptor.vue      |   2 +-
 src/stores/useValidationsStore.js             |  37 +++--
 .../__tests__/components/common/VnLog.spec.js | 150 ++++++++++++------
 test/vitest/helper.js                         |   2 +-
 7 files changed, 154 insertions(+), 94 deletions(-)

diff --git a/package.json b/package.json
index b713c906a..8568d507d 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
         "lint": "eslint --ext .js,.vue ./",
         "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
         "test:e2e": "cypress open",
-        "test:e2e:ci": "cypress run --browser chromium",
+        "test:e2e:ci": "cypress run --browser chrome",
         "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
         "test:unit": "vitest",
         "test:unit:ci": "vitest run"
diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 7e3cfc408..6ee09610a 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -15,15 +15,16 @@ import FetchData from '../FetchData.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 
 const stateStore = useStateStore();
+
 const route = useRoute();
 const { t } = useI18n();
-const validationsStore = useValidationsStore();
 const props = defineProps({
     model: {
         type: String,
         default: null,
     },
 });
+
 const filter = {
     fields: [
         'id',
@@ -160,19 +161,21 @@ function getLogs(data) {
     let originLog = null;
     let userLog = null;
     let modelLog = null;
-    let prevLog, prevUser, prevModel;
+    let prevLog;
     let nLogs;
 
     data.forEach((log) => {
-        const locale = validationsStore.validations[log.changedModel]?.locale || {};
+        const locale = validations[log.changedModel]?.locale || {};
 
         // Origin
-        if (!prevLog || prevLog.originFk != log.originFk) {
+        const originChanged = !prevLog || log.originFk != prevLog.originFk;
+        if (originChanged) {
             logs.push((originLog = { originFk: log.originFk, logs: [] }));
             prevLog = log;
         }
         // User
-        if (prevUser != log.userFk) {
+        const userChanged = originChanged || log.userFk != prevLog.userFk;
+        if (userChanged) {
             originLog.logs.push(
                 (userLog = {
                     user: log.user,
@@ -180,15 +183,14 @@ function getLogs(data) {
                     logs: [],
                 })
             );
-            prevUser = log.userFk;
         }
         // Model
-        if (
-            !prevModel ||
-            prevModel.changedModelId != log.changedModelId ||
-            prevModel.changedModel != log.changedModel ||
-            nLogs >= 6
-        ) {
+        const modelChanged =
+            userChanged ||
+            log.changedModel != prevLog.changedModel ||
+            log.changedModelId != prevLog.changedModelId ||
+            nLogs >= 6;
+        if (modelChanged) {
             userLog.logs.push(
                 (modelLog = {
                     model: log.changedModel,
@@ -198,10 +200,6 @@ function getLogs(data) {
                     logs: [],
                 })
             );
-            prevModel = {
-                changedModelId: log.changedModelId,
-                changedModel: log.changedModel,
-            };
             nLogs = 0;
         }
         nLogs++;
@@ -224,12 +222,12 @@ async function openPointRecord(id, modelLog) {
     pointRecord.value = null;
     const { data } = await axios.get(`${props.model}Logs/${id}/pitInstance`);
     const propNames = Object.keys(data);
-    const locale = validationsStore.validations[modelLog.model]?.locale || {};
+    const locale = validations[modelLog.model]?.locale || {};
     pointRecord.value = parseProps(propNames, locale, data);
 }
 async function setLogTree() {
     if (!validations) {
-        validations = await validationsStore.fetchModels();
+        validations = await useValidationsStore();
     }
     filter.where = { and: [{ originFk: route.params.id }] };
     const { data } = await axios.get(`${props.model}Logs`, {
@@ -377,7 +375,7 @@ function filterFn(val, update, abortFn, type) {
         const needle = val.toLowerCase();
         if (type === 'actions')
             filteredActions.value = actions.value.filter((item) =>
-                item.toLowerCase().includes(needle)
+                t(`models.${item}`).toLowerCase().includes(needle)
             );
         if (type === 'workers') {
             if (isNaN(needle))
@@ -417,11 +415,11 @@ setLogTree();
         :key="originLogIndex"
     >
         <QItem class="origin-info items-center q-my-md" v-if="logTree.length > 1">
-            <h6 class="origin-id">
-                {{ originLog.modelI18n }}
+            <h6 class="origin-id text-grey">
+                {{ useFirstUpper(validations[props.model].locale.name) }}
                 #{{ originLog.originFk }}
             </h6>
-            <div class="line"></div>
+            <div class="line bg-grey"></div>
         </QItem>
         <div
             class="user-log q-mb-sm row"
@@ -686,7 +684,7 @@ setLogTree();
                             </QItem>
                         </template>
                         <template #selected-item="{ opt }">
-                            {{ t(opt) }}
+                            {{ t(`models.${opt}`) }}
                         </template>
                     </QSelect>
                 </QItem>
@@ -875,6 +873,9 @@ setLogTree();
         margin-top: 0;
     }
     & > .origin-info {
+        width: 100%;
+        max-width: 42em;
+        margin-top: 28px;
         gap: 6px;
 
         & > .origin-id {
@@ -885,13 +886,13 @@ setLogTree();
         }
         & > .line {
             flex-grow: 1;
-            background-color: $primary;
             height: 2px;
         }
     }
 }
 .user-log {
-    width: 40em;
+    width: 100%;
+    max-width: 40em;
 
     & > .timeline {
         position: relative;
diff --git a/src/css/app.scss b/src/css/app.scss
index 9ed51c1c7..b9ad4742c 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -14,10 +14,6 @@ a {
     color: $orange-4;
 }
 
-.rounded--full {
-    border-radius: 50%;
-}
-
 // Removes chrome autofill background
 input:-webkit-autofill,
 select:-webkit-autofill {
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index 914de2eb2..f03a1d8a2 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -109,7 +109,7 @@ const setData = (entity) => {
                 <template #value>
                     <span class="link">
                         {{ entity.worker.user.name }}
-                        <WorkerDescriptorProxy :id="entity.worker.userFk" />
+                        <WorkerDescriptorProxy :id="entity.worker.id" />
                     </span>
                 </template>
             </VnLv>
diff --git a/src/stores/useValidationsStore.js b/src/stores/useValidationsStore.js
index c658a90af..5b196fa4c 100644
--- a/src/stores/useValidationsStore.js
+++ b/src/stores/useValidationsStore.js
@@ -1,19 +1,26 @@
 import axios from 'axios';
 import { defineStore } from 'pinia';
 
-export const useValidationsStore = defineStore('validationsStore', {
-    state: () => ({
-        validations: null,
-    }),
-    actions: {
-        async fetchModels() {
-            if (this.validations) return;
-            try {
-                const { data } = await axios.get('Schemas/modelinfo');
-                this.validations = data;
-            } catch (error) {
-                console.error('Error al obtener las validaciones:', error);
-            }
+export const useValidationsStore = async () => {
+    const validationsStore = defineStore('validationsStore', {
+        state: () => ({
+            validations: null,
+        }),
+        actions: {
+            async fetchModels() {
+                if (this.validations) return;
+                try {
+                    const { data } = await axios.get('Schemas/modelinfo');
+                    this.validations = data;
+                } catch (error) {
+                    console.error('Error al obtener las validaciones:', error);
+                }
+            },
         },
-    },
-});
+    });
+    const v = validationsStore();
+    if (!v.validations) {
+        await v.fetchModels();
+    }
+    return v.validations;
+};
diff --git a/test/vitest/__tests__/components/common/VnLog.spec.js b/test/vitest/__tests__/components/common/VnLog.spec.js
index 6787b6d51..79db1b9a5 100644
--- a/test/vitest/__tests__/components/common/VnLog.spec.js
+++ b/test/vitest/__tests__/components/common/VnLog.spec.js
@@ -2,18 +2,40 @@ import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
 import { createWrapper } from 'app/test/vitest/helper';
 import VnLog from 'src/components/common/VnLog.vue';
 
+const mockValidations = {
+    Claim: {
+        locale: {
+            name: 'reclamación',
+        },
+    },
+    ClaimObservation: {
+        locale: {
+            name: 'observación',
+        },
+    },
+    ClaimDms: {
+        locale: {
+            name: 'documento',
+        },
+    },
+    ClaimBeginning: {
+        locale: {
+            name: 'comienzo',
+        },
+    },
+};
+
 describe('VnLog', () => {
     let vm;
+
     beforeAll(() => {
         vm = createWrapper(VnLog, {
             global: {
-                stubs: ['FetchData', 'VnPaginate'],
-                mocks: {
-                    fetch: vi.fn(),
-                },
+                stubs: [],
+                mocks: {},
             },
             propsData: {
-                model: "Claim",
+                model: 'Claim',
             },
         }).vm;
     });
@@ -22,54 +44,88 @@ describe('VnLog', () => {
         vi.clearAllMocks();
     });
 
-    describe('formatValue()', () => {
-        it('should return Yes if has a true boolean', async () => {
-            const result = vm.formatValue(true);
-
-            expect(result).toEqual('Yes');
-        });
-        it('should return No if has a true boolean', async () => {
-            const result = vm.formatValue(false);
-
-            expect(result).toEqual('No');
-        });
-        it('should return Nothing if has no params', async () => {
-            const result = vm.formatValue();
-
-            expect(result).toEqual('Nothing');
-        });
-        it('should return a string from a string value', async () => {
-            const result = vm.formatValue('Something');
-
-            expect(result).toEqual(`"Something"`);
-        });
-        it('should call to format a date', async () => {
-            vi.mock('src/filters', () => ({
-                toDate: ()=>{
-                    return "Date formatted"
+    it('should correctly set logTree', async () => {
+        const fakeLogTreeData = [
+            {
+                id: 2,
+                originFk: 1,
+                userFk: 18,
+                action: 'update',
+                changedModel: 'ClaimObservation',
+                oldInstance: {},
+                newInstance: {
+                    claimFk: 1,
+                    text: 'Waiting for customer',
                 },
-            }));
-
-           const result = vm.formatValue('01-01-1970');
-           expect(result).toEqual("Date formatted");
-        });
+                creationDate: '2023-09-18T12:25:34.000Z',
+                changedModelId: '1',
+                changedModelValue: null,
+                description: null,
+                user: {
+                    id: 18,
+                    name: 'salesPerson',
+                    nickname: 'salesPersonNick',
+                    image: '4fa3ada0-3ac4-11eb-9ab8-27f6fc3b85fd',
+                    worker: {
+                        id: 18,
+                        userFk: 18,
+                    },
+                },
+            },
+            {
+                id: 1,
+                originFk: 1,
+                userFk: 18,
+                action: 'update',
+                changedModel: 'Claim',
+                oldInstance: {
+                    hasToPickUp: false,
+                },
+                newInstance: {
+                    hasToPickUp: true,
+                },
+                creationDate: '2023-09-18T12:25:34.000Z',
+                changedModelId: '1',
+                changedModelValue: null,
+                description: null,
+                user: {
+                    id: 18,
+                    name: 'salesPerson',
+                    nickname: 'salesPersonNick',
+                    image: '4fa3ada0-3ac4-11eb-9ab8-27f6fc3b85fd',
+                    worker: {
+                        id: 18,
+                        userFk: 18,
+                    },
+                },
+            },
+        ];
+        vm.validations = mockValidations;
+        vm.logTree = vm.getLogs(fakeLogTreeData);
+        expect(vm.logTree[0].originFk).toEqual(1);
+        expect(vm.logTree[0].logs[0].user.name).toEqual('salesPerson');
     });
 
-    describe('actionColor()', () => {
-        it('should return positive if insert', async () => {
-            const result = vm.actionColor('insert');
+    it('should correctly set the selectedFilters when filtering', async () => {
+        await vm.$nextTick();
+        vm.searchInput = '1';
+        vm.userSelect = '21';
+        vm.checkboxOptions.insert.selected = true;
+        vm.checkboxOptions.update.selected = true;
 
-            expect(result).toEqual('positive');
-        });
-        it('should return positive if update', async () => {
-            const result = vm.actionColor('update');
+        vm.selectFilter('search');
+        vm.selectFilter('userSelect');
 
-            expect(result).toEqual('positive');
-        });
-        it('should return negative if delete', async () => {
-            const result = vm.actionColor('delete');
+        expect(vm.selectedFilters.changedModelId).toEqual('1');
+        expect(vm.selectedFilters.userFk).toEqual('21');
+        expect(vm.selectedFilters.action).toEqual({ inq: ['insert', 'update'] });
+    });
 
-            expect(result).toEqual('negative');
+    it('should correctly set the date from', () => {
+        vm.date = '18-09-2023';
+        vm.selectFilter('date', 'from');
+        expect(vm.selectedFilters.creationDate).toEqual({
+            between: ['2023-09-18T00:00:00.000Z', '2023-09-18T19:59:59.999Z'],
         });
     });
 });
diff --git a/test/vitest/helper.js b/test/vitest/helper.js
index 8a6fb1415..67e4f960a 100644
--- a/test/vitest/helper.js
+++ b/test/vitest/helper.js
@@ -12,7 +12,7 @@ installQuasarPlugin({
         Dialog,
     },
 });
-
+axios.defaults.baseURL = 'http://localhost:9000/api/';
 const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false });
 const mockPush = vi.fn();
 

From 41eccd2885ecdc7dd1a5e00815fccc1eea2c96f3 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 27 Sep 2023 14:07:49 +0200
Subject: [PATCH 09/81] ref #6104 fix claimNotes test

---
 test/cypress/integration/ClaimNotes.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/cypress/integration/ClaimNotes.spec.js b/test/cypress/integration/ClaimNotes.spec.js
index 9f52c29e4..5b52dd339 100644
--- a/test/cypress/integration/ClaimNotes.spec.js
+++ b/test/cypress/integration/ClaimNotes.spec.js
@@ -8,7 +8,6 @@ describe('ClaimNotes', () => {
     it('should add a new note', () => {
         const message = 'This is a new message.';
         cy.get('.q-page-sticky button').click();
-        cy.get('.q-page-sticky > div > button').click();
         cy.get('.q-dialog .q-card__section:nth-child(2)').type(message);
         cy.get('.q-card__actions button:nth-child(2)').click();
         cy.get('.q-card .q-card__section:nth-child(2)')

From 4995c993bd9b64dc1352aa74d7b87d6e20cd3a01 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 28 Sep 2023 13:45:14 +0200
Subject: [PATCH 10/81] ref #6104 validations store created

---
 quasar.config.js                              |  2 +-
 src/boot/validations.js                       |  6 ++++
 src/components/common/VnLog.vue               | 10 +++---
 src/composables/useValidator.js               | 33 +++++++----------
 src/stores/useValidationsStore.js             | 36 ++++++++-----------
 .../__tests__/components/common/VnLog.spec.js |  4 +--
 6 files changed, 39 insertions(+), 52 deletions(-)
 create mode 100644 src/boot/validations.js

diff --git a/quasar.config.js b/quasar.config.js
index cbcbae4dc..2d3c71417 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -29,7 +29,7 @@ module.exports = configure(function (/* ctx */) {
         // app boot file (/src/boot)
         // --> boot files are part of "main.js"
         // https://v2.quasar.dev/quasar-cli/boot-files
-        boot: ['i18n', 'axios', 'vnDate'],
+        boot: ['i18n', 'axios', 'vnDate', 'validations'],
 
         // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
         css: ['app.scss'],
diff --git a/src/boot/validations.js b/src/boot/validations.js
new file mode 100644
index 000000000..31e232f86
--- /dev/null
+++ b/src/boot/validations.js
@@ -0,0 +1,6 @@
+import { boot } from 'quasar/wrappers';
+import { useValidationsStore } from 'src/stores/useValidationsStore';
+
+export default boot(async ({ store }) => {
+    await useValidationsStore(store).fetchModels();
+});
diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 6ee09610a..2c9451641 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -4,18 +4,19 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
 import { useStateStore } from 'stores/useStateStore';
-import { useValidationsStore } from 'src/stores/useValidationsStore';
 import { toRelativeDate, toDateString, toDateHour } from 'src/filters';
 import { useColor } from 'src/composables/useColor';
 import { useFirstUpper } from 'src/composables/useFirstUpper';
 import { useIso8601 } from 'src/composables/useIso8601';
+import { useValidator } from 'src/composables/useValidator';
 import VnAvatar from '../ui/VnAvatar.vue';
 import VnJsonValue from '../common/VnJsonValue.vue';
 import FetchData from '../FetchData.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 
 const stateStore = useStateStore();
-
+const validationsStore = useValidator();
+const { models } = validationsStore;
 const route = useRoute();
 const { t } = useI18n();
 const props = defineProps({
@@ -91,7 +92,7 @@ const checkboxOptions = ref({
     },
 });
 
-let validations;
+let validations = models;
 let pointRecord = ref(null);
 let byRecord = ref(false);
 const logTree = ref([]);
@@ -226,9 +227,6 @@ async function openPointRecord(id, modelLog) {
     pointRecord.value = parseProps(propNames, locale, data);
 }
 async function setLogTree() {
-    if (!validations) {
-        validations = await useValidationsStore();
-    }
     filter.where = { and: [{ originFk: route.params.id }] };
     const { data } = await axios.get(`${props.model}Logs`, {
         params: { filter: JSON.stringify(filter) },
diff --git a/src/composables/useValidator.js b/src/composables/useValidator.js
index ef2dcbd90..3f9f00367 100644
--- a/src/composables/useValidator.js
+++ b/src/composables/useValidator.js
@@ -1,21 +1,12 @@
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import axios from 'axios';
 import validator from 'validator';
-
-
-const models = ref(null);
+import { useValidationsStore } from 'src/stores/useValidationsStore';
 
 export function useValidator() {
-    if (!models.value) fetch();
-
-    function fetch() {
-        axios.get('Schemas/ModelInfo')
-            .then(response => models.value = response.data)
-    }
+    const models = useValidationsStore().validations;
 
     function validate(propertyRule) {
-        const modelInfo = models.value;
+        const modelInfo = models;
         if (!modelInfo || !propertyRule) return;
 
         const rule = propertyRule.split('.');
@@ -38,19 +29,18 @@ export function useValidator() {
 
     const { t } = useI18n();
     const validations = function (validation) {
-
         return {
             presence: (value) => {
                 let message = `Value can't be empty`;
                 if (validation.message)
-                    message = t(validation.message) || validation.message
+                    message = t(validation.message) || validation.message;
 
-                return !validator.isEmpty(value ? String(value) : '') || message
+                return !validator.isEmpty(value ? String(value) : '') || message;
             },
             length: (value) => {
                 const options = {
                     min: validation.min || validation.is,
-                    max: validation.max || validation.is
+                    max: validation.max || validation.is,
                 };
 
                 value = String(value);
@@ -69,14 +59,15 @@ export function useValidator() {
             },
             numericality: (value) => {
                 if (validation.int)
-                    return validator.isInt(value) || 'Value should be integer'
-                return validator.isNumeric(value) || 'Value should be a number'
+                    return validator.isInt(value) || 'Value should be integer';
+                return validator.isNumeric(value) || 'Value should be a number';
             },
-            custom: (value) => validation.bindedFunction(value) || 'Invalid value'
+            custom: (value) => validation.bindedFunction(value) || 'Invalid value',
         };
     };
 
     return {
-        validate
+        validate,
+        models,
     };
-}
\ No newline at end of file
+}
diff --git a/src/stores/useValidationsStore.js b/src/stores/useValidationsStore.js
index 5b196fa4c..e00812379 100644
--- a/src/stores/useValidationsStore.js
+++ b/src/stores/useValidationsStore.js
@@ -1,26 +1,18 @@
 import axios from 'axios';
 import { defineStore } from 'pinia';
 
-export const useValidationsStore = async () => {
-    const validationsStore = defineStore('validationsStore', {
-        state: () => ({
-            validations: null,
-        }),
-        actions: {
-            async fetchModels() {
-                if (this.validations) return;
-                try {
-                    const { data } = await axios.get('Schemas/modelinfo');
-                    this.validations = data;
-                } catch (error) {
-                    console.error('Error al obtener las validaciones:', error);
-                }
-            },
+export const useValidationsStore = defineStore('validationsStore', {
+    state: () => ({
+        validations: null,
+    }),
+    actions: {
+        async fetchModels() {
+            try {
+                const { data } = await axios.get('Schemas/modelinfo');
+                this.validations = data;
+            } catch (error) {
+                console.error('Error al obtener las validaciones:', error);
+            }
         },
-    });
-    const v = validationsStore();
-    if (!v.validations) {
-        await v.fetchModels();
-    }
-    return v.validations;
-};
+    },
+});
diff --git a/test/vitest/__tests__/components/common/VnLog.spec.js b/test/vitest/__tests__/components/common/VnLog.spec.js
index 79db1b9a5..c818b3398 100644
--- a/test/vitest/__tests__/components/common/VnLog.spec.js
+++ b/test/vitest/__tests__/components/common/VnLog.spec.js
@@ -121,11 +121,11 @@ describe('VnLog', () => {
         expect(vm.selectedFilters.action).toEqual({ inq: ['insert', 'update'] });
     });
 
-    it('should correctly set the date from', () => {
+    /*it('should correctly set the date from', () => {
         vm.date = '18-09-2023';
         vm.selectFilter('date', 'from');
         expect(vm.selectedFilters.creationDate).toEqual({
             between: ['2023-09-18T00:00:00.000Z', '2023-09-18T19:59:59.999Z'],
         });
-    });
+    }); */
 });

From 30791acba648d3b63cb97fcea99ae761d6550cc0 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 28 Sep 2023 13:56:21 +0200
Subject: [PATCH 11/81] ref #6104 replace color vars

---
 src/components/common/VnLog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 2c9451641..27b7c3622 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -955,7 +955,7 @@ setLogTree();
     }
     .change-info {
         overflow: hidden;
-        background-color: var(--vn-header);
+        background-color: var(--vn-dark);
         & > .date {
             overflow: hidden;
             white-space: nowrap;

From 9a06a1296c7d499cf863293b4ffc38d39aeaa75e Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 28 Sep 2023 13:57:39 +0200
Subject: [PATCH 12/81] ref #6104 conflicts fixed

---
 src/composables/useValidator.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/composables/useValidator.js b/src/composables/useValidator.js
index 577cfa0bf..3f9f00367 100644
--- a/src/composables/useValidator.js
+++ b/src/composables/useValidator.js
@@ -68,9 +68,6 @@ export function useValidator() {
 
     return {
         validate,
-<<<<<<< HEAD
         models,
-=======
->>>>>>> 11305fc4c8efea147bc6ee9ff25e59e805b62e41
     };
 }

From 288a50b296b33910d53b81ab8865ad617bf28ba9 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 29 Sep 2023 15:03:02 +0200
Subject: [PATCH 13/81] ref #6104 fix validations,css and tests

---
 src/components/common/VnLog.vue               | 48 ++++++++++-------
 test/cypress/integration/vnLog.spec.js        | 24 +++------
 .../__tests__/components/common/VnLog.spec.js | 51 +++++++++----------
 3 files changed, 62 insertions(+), 61 deletions(-)

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 27b7c3622..09e580f29 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -373,7 +373,7 @@ function filterFn(val, update, abortFn, type) {
         const needle = val.toLowerCase();
         if (type === 'actions')
             filteredActions.value = actions.value.filter((item) =>
-                t(`models.${item}`).toLowerCase().includes(needle)
+                validations[item].locale.name.includes(needle)
             );
         if (type === 'workers') {
             if (isNaN(needle))
@@ -507,7 +507,7 @@ setLogTree();
                                             flat
                                             round
                                             :title="t('pointRecord')"
-                                            padding="xs"
+                                            padding="none"
                                             v-if="log.action != 'insert'"
                                             @click.stop="
                                                 openPointRecord(log.id, modelLog)
@@ -571,8 +571,8 @@ setLogTree();
                                     size="sm"
                                     @click="log.expand = !log.expand"
                                 />
-                                <QList v-if="log.props.length" class="attributes">
-                                    <QItem v-if="!log.expand" class="q-pa-none text-grey">
+                                <span v-if="log.props.length" class="attributes">
+                                    <span v-if="!log.expand" class="q-pa-none text-grey">
                                         <span
                                             v-for="(prop, propIndex) in log.props"
                                             :key="propIndex"
@@ -582,12 +582,12 @@ setLogTree();
                                                 {{ prop.nameI18n }}:
                                             </span>
                                             <VnJsonValue :value="prop.val.val" />
-                                            <span v-if="propIndex < log.props.length - 1">
-                                                ,
+                                            <span v-if="propIndex < log.props.length - 1"
+                                                >,&nbsp;
                                             </span>
                                         </span>
-                                    </QItem>
-                                    <QItem
+                                    </span>
+                                    <span
                                         v-if="log.expand"
                                         class="expanded-json column q-pa-none"
                                     >
@@ -611,8 +611,8 @@ setLogTree();
                                                 </span>
                                             </span>
                                         </div>
-                                    </QItem>
-                                </QList>
+                                    </span>
+                                </span>
                                 <span v-if="!log.props.length" class="description">
                                     {{ log.description }}
                                 </span>
@@ -678,11 +678,11 @@ setLogTree();
                     >
                         <template #option="{ opt, index, itemProps }">
                             <QItem :index="index" v-bind="itemProps">
-                                {{ t(`models.${opt}`) }}
+                                {{ useFirstUpper(validations[opt].locale.name) }}
                             </QItem>
                         </template>
                         <template #selected-item="{ opt }">
-                            {{ t(`models.${opt}`) }}
+                            {{ useFirstUpper(validations[opt].locale.name) }}
                         </template>
                     </QSelect>
                 </QItem>
@@ -943,11 +943,21 @@ setLogTree();
             font-size: 0.9rem;
         }
         .q-btn {
+            visibility: hidden;
             float: right;
         }
     }
+
+    &:hover {
+        .model-info {
+            .q-btn {
+                visibility: visible;
+            }
+        }
+    }
 }
 .changes-log {
+    width: 100%;
     overflow: hidden;
 
     &:last-child {
@@ -983,11 +993,18 @@ setLogTree();
                 }
             }
         }
+        .q-btn.pit {
+            visibility: hidden;
+        }
+        &:hover .q-btn.pit {
+            visibility: visible;
+        }
     }
     & > .change-detail {
-        background-color: var(--vn-gray);
+        position: relative;
         overflow: hidden;
         text-overflow: ellipsis;
+        background-color: var(--vn-gray);
         white-space: nowrap;
         box-sizing: border-box;
         & > .q-icon {
@@ -1042,11 +1059,6 @@ en:
         Edits: Edits
         Deletes: Deletes
         Accesses: Accesses
-    models:
-        Claim: Reclamación
-        ClaimDms: Documento
-        ClaimBeginning: Comienzo
-        ClaimObservation: Observación
     Users:
         User: Usuario
         All: Todo
diff --git a/test/cypress/integration/vnLog.spec.js b/test/cypress/integration/vnLog.spec.js
index 3d6d9b95d..bf9edb66c 100644
--- a/test/cypress/integration/vnLog.spec.js
+++ b/test/cypress/integration/vnLog.spec.js
@@ -1,31 +1,21 @@
 /// <reference types="cypress" />
-describe('ClaimNotes', () => {
+describe('VnLog', () => {
     beforeEach(() => {
         cy.login('developer');
         cy.visit(`/#/claim/${1}/log`);
-    });
-
-    it('should have just one record', () => {
-        cy.get('.model-info .q-btn').eq(1).click();
-        cy.get('.user-log .model-log').its('length').should('eq', 1);
-        cy.get('.q-page-sticky .q-btn').click();
-        cy.get('.user-log .model-log').its('length').should('eq', 4);
+        cy.get('.q-gutter-x-sm > .q-btn > .q-btn__content > .q-icon').click();
     });
 
     it('should filter by insert actions', () => {
-        cy.get('.q-gutter-x-sm > .q-btn > .q-btn__content > .q-icon').click();
         cy.get('.q-checkbox__inner').eq(0).click();
-        cy.get('.q-page > .q-drawer-container > .fullscreen').click();
+        cy.get('.q-page').click();
         cy.get('.model-info .q-chip__content').eq(0).should('have.text', 'Document');
         cy.get('.model-info .q-chip__content').eq(1).should('have.text', 'Beginning');
     });
 
-    it('should show the point record', () => {
-        cy.get('.pit').eq(0).click();
-        cy.get('.q-menu .q-card .header').should('have.text', 'Observation #1');
-        cy.get('.q-menu .q-card .json-string').should(
-            'have.text',
-            'Waiting for customer'
-        );
+    it('should filter by entity', () => {
+        cy.get('.q-scrollarea .q-list .q-item .q-select').eq(0).click();
+        cy.get('.q-scrollarea .q-list .q-item .q-select').eq(0).type('mien');
+        cy.get('[role="listbox"] .q-item').should('have.text', 'Comienzo');
     });
 });
diff --git a/test/vitest/__tests__/components/common/VnLog.spec.js b/test/vitest/__tests__/components/common/VnLog.spec.js
index c818b3398..1fd5b3990 100644
--- a/test/vitest/__tests__/components/common/VnLog.spec.js
+++ b/test/vitest/__tests__/components/common/VnLog.spec.js
@@ -2,31 +2,30 @@ import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
 import { createWrapper } from 'app/test/vitest/helper';
 import VnLog from 'src/components/common/VnLog.vue';
 
-const mockValidations = {
-    Claim: {
-        locale: {
-            name: 'reclamación',
-        },
-    },
-    ClaimObservation: {
-        locale: {
-            name: 'observación',
-        },
-    },
-    ClaimDms: {
-        locale: {
-            name: 'documento',
-        },
-    },
-    ClaimBeginning: {
-        locale: {
-            name: 'comienzo',
-        },
-    },
-};
-
 describe('VnLog', () => {
     let vm;
+    const mockValidations = {
+        Claim: {
+            locale: {
+                name: 'reclamación',
+            },
+        },
+        ClaimObservation: {
+            locale: {
+                name: 'observación',
+            },
+        },
+        ClaimDms: {
+            locale: {
+                name: 'documento',
+            },
+        },
+        ClaimBeginning: {
+            locale: {
+                name: 'comienzo',
+            },
+        },
+    };
 
     beforeAll(() => {
         vm = createWrapper(VnLog, {
@@ -38,6 +37,7 @@ describe('VnLog', () => {
                 model: 'Claim',
             },
         }).vm;
+        vm.validations = mockValidations;
     });
 
     afterEach(() => {
@@ -100,7 +100,6 @@ describe('VnLog', () => {
                 },
             },
         ];
-        vm.validations = mockValidations;
         vm.logTree = vm.getLogs(fakeLogTreeData);
         expect(vm.logTree[0].originFk).toEqual(1);
         expect(vm.logTree[0].logs[0].user.name).toEqual('salesPerson');
@@ -121,11 +120,11 @@ describe('VnLog', () => {
         expect(vm.selectedFilters.action).toEqual({ inq: ['insert', 'update'] });
     });
 
-    /*it('should correctly set the date from', () => {
+    it('should correctly set the date from', () => {
         vm.date = '18-09-2023';
         vm.selectFilter('date', 'from');
         expect(vm.selectedFilters.creationDate).toEqual({
             between: ['2023-09-18T00:00:00.000Z', '2023-09-18T19:59:59.999Z'],
         });
-    }); */
+    });
 });

From 970226f012da3f24810b5513160cb268ee831df2 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 29 Sep 2023 15:13:19 +0200
Subject: [PATCH 14/81] ref #6104 test e2e fixed

---
 test/cypress/integration/vnLog.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/cypress/integration/vnLog.spec.js b/test/cypress/integration/vnLog.spec.js
index bf9edb66c..97c9e7a33 100644
--- a/test/cypress/integration/vnLog.spec.js
+++ b/test/cypress/integration/vnLog.spec.js
@@ -15,7 +15,7 @@ describe('VnLog', () => {
 
     it('should filter by entity', () => {
         cy.get('.q-scrollarea .q-list .q-item .q-select').eq(0).click();
-        cy.get('.q-scrollarea .q-list .q-item .q-select').eq(0).type('mien');
-        cy.get('[role="listbox"] .q-item').should('have.text', 'Comienzo');
+        cy.get('.q-scrollarea .q-list .q-item .q-select').eq(0).type('cla');
+        cy.get('[role="listbox"] .q-item').should('have.text', 'Claim');
     });
 });

From 801ed8ab50081917f5043fb889ce5f16ae84cefa Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 2 Oct 2023 09:19:08 +0200
Subject: [PATCH 15/81] ref #6104 remove css

---
 src/components/common/VnLog.vue | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 09e580f29..ba9d74ec5 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -842,22 +842,6 @@ setLogTree();
         />
     </QPageSticky>
 </template>
-<style lang="scss">
-.q-timeline__subtitle {
-    opacity: 1 !important;
-}
-.logs {
-    .vn-label-value {
-        .label {
-            margin-right: 5px;
-            color: var(--vn-label);
-        }
-    }
-    .q-avatar {
-        font-size: 38px;
-    }
-}
-</style>
 <style lang="scss" scoped>
 .q-card {
     background-color: var(--vn-gray);

From 868ecdf6803984e3959a7e3110e7590c6ae0486c Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 4 Oct 2023 15:46:15 +0200
Subject: [PATCH 16/81] ref #6104 mock axios test call and refactor e2e

---
 src/components/common/VnLog.vue               |  56 ++++----
 src/composables/useIso8601.js                 |  18 ---
 test/cypress/integration/workerList.spec.js   |  16 +--
 test/cypress/support/commands.js              |   4 +
 .../__tests__/components/common/VnLog.spec.js | 130 +++++++++---------
 test/vitest/helper.js                         |   5 +-
 6 files changed, 112 insertions(+), 117 deletions(-)
 delete mode 100644 src/composables/useIso8601.js

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index ba9d74ec5..eb0d1e345 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -3,11 +3,11 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
+import { date } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
-import { toRelativeDate, toDateString, toDateHour } from 'src/filters';
+import { toRelativeDate } from 'src/filters';
 import { useColor } from 'src/composables/useColor';
 import { useFirstUpper } from 'src/composables/useFirstUpper';
-import { useIso8601 } from 'src/composables/useIso8601';
 import { useValidator } from 'src/composables/useValidator';
 import VnAvatar from '../ui/VnAvatar.vue';
 import VnJsonValue from '../common/VnJsonValue.vue';
@@ -63,8 +63,8 @@ const changeInput = ref();
 const searchInput = ref();
 const userRadio = ref();
 const userSelect = ref();
-const date = ref();
-const dateDialog = ref(false);
+const dateFrom = ref();
+const dateFromDialog = ref(false);
 const dateTo = ref();
 const dateToDialog = ref(false);
 const selectedFilters = ref({});
@@ -164,7 +164,8 @@ function getLogs(data) {
     let modelLog = null;
     let prevLog;
     let nLogs;
-
+    console.log('EEEEEEE', data);
+    console.log('validations', validations);
     data.forEach((log) => {
         const locale = validations[log.changedModel]?.locale || {};
 
@@ -267,18 +268,25 @@ async function applyFilter() {
 }
 
 function setDate(type) {
-    const from = date.value
-        ? useIso8601(date.value.split('-').reverse().join('-'))
+    let from = dateFrom.value
+        ? date.formatDate(dateFrom.value.split('-').reverse().join('-'), 'YYYY-MM-DD')
         : undefined;
-    const to = dateTo.value
-        ? useIso8601(`${dateTo.value.split('-').reverse().join('-')} 21:59:59.999`)
-        : useIso8601(`${date.value.split('-').reverse().join('-')} 21:59:59.999`);
+    from = date.adjustDate(from, { hour: 0, minute: 0, second: 0, millisecond: 0 }, true);
+
+    let to = dateTo.value
+        ? date.formatDate(dateTo.value.split('-').reverse().join('-'), 'YYYY-MM-DD')
+        : date.formatDate(dateFrom.value.split('-').reverse().join('-'), 'YYYY-MM-DD');
+    to = date.adjustDate(
+        to,
+        { hour: 21, minute: 59, second: 59, millisecond: 999 },
+        true
+    );
 
     switch (type) {
         case 'from':
             return { between: [from, to] };
         case 'to': {
-            if (date.value) {
+            if (dateFrom.value) {
                 return {
                     between: [from, to],
                 };
@@ -325,7 +333,7 @@ function selectFilter(type, dateType) {
             userSelect.value !== null ? userSelect.value : undefined;
     }
     if (type === 'date') {
-        if (!date.value && !dateTo.value) {
+        if (!dateFrom.value && !dateTo.value) {
             selectedFilters.value.creationDate = undefined;
         } else if (dateType === 'to') {
             selectedFilters.value.creationDate = setDate('to');
@@ -352,7 +360,7 @@ async function clearFilter() {
     userSelect.value = undefined;
     searchInput.value = undefined;
     changeInput.value = undefined;
-    date.value = undefined;
+    dateFrom.value = undefined;
     dateTo.value = undefined;
     Object.keys(checkboxOptions.value).forEach(
         (opt) => (checkboxOptions.value[opt].selected = false)
@@ -493,8 +501,10 @@ setLogTree();
                                     <div
                                         class="date text-grey text-caption q-mr-sm"
                                         :title="
-                                            toDateHour(log.creationDate) ??
-                                            `date:'dd/MM/yyyy HH:mm:ss'`
+                                            date.formatDate(
+                                                log.creationDate,
+                                                'DD/MM/YYYY hh:mm:ss'
+                                            ) ?? `date:'dd/MM/yyyy HH:mm:ss'`
                                         "
                                     >
                                         {{ toRelativeDate(log.creationDate) }}
@@ -775,10 +785,10 @@ setLogTree();
                     <QInput
                         class="full-width"
                         :label="t('globals.date')"
-                        @click="dateDialog = true"
+                        @click="dateFromDialog = true"
                         @focus="(evt) => evt.target.blur()"
                         @clear="selectFilter('date', 'to')"
-                        v-model="date"
+                        v-model="dateFrom"
                         clearable
                         clear-icon="close"
                     />
@@ -798,18 +808,17 @@ setLogTree();
             </QList>
         </QScrollArea>
     </QDrawer>
-    <QDialog v-model="dateDialog">
+    <QDialog v-model="dateFromDialog">
         <QDate
             :years-in-month-view="false"
-            v-model="date"
+            v-model="dateFrom"
             dense
             flat
             minimal
             @update:model-value="
                 (value) => {
-                    dateDialog = false;
-                    const formatDate = toDateString(new Date(value));
-                    date = formatDate.split('-').reverse().join('-');
+                    dateFromDialog = false;
+                    dateFrom = date.formatDate(value, 'DD-MM-YYYY');
                     selectFilter('date', 'from');
                 }
             "
@@ -824,8 +833,7 @@ setLogTree();
             @update:model-value="
                 (value) => {
                     dateToDialog = false;
-                    const formatDate = toDateString(new Date(value));
-                    dateTo = formatDate.split('-').reverse().join('-');
+                    dateTo = date.formatDate(value, 'DD-MM-YYYY');
                     selectFilter('date', 'to');
                 }
             "
diff --git a/src/composables/useIso8601.js b/src/composables/useIso8601.js
deleted file mode 100644
index 848e60de8..000000000
--- a/src/composables/useIso8601.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export function useIso8601(dateString) {
-    // Crear un objeto Date a partir de la cadena de texto
-    const date = new Date(dateString);
-
-    // Obtener los componentes de fecha y hora
-    const year = date.getUTCFullYear();
-    const month = String(date.getUTCMonth() + 1).padStart(2, '0');
-    const day = String(date.getUTCDate()).padStart(2, '0');
-    const hours = String(date.getUTCHours()).padStart(2, '0');
-    const minutes = String(date.getUTCMinutes()).padStart(2, '0');
-    const seconds = String(date.getUTCSeconds()).padStart(2, '0');
-    const milliseconds = String(date.getUTCMilliseconds()).padStart(3, '0');
-
-    // Formatear la cadena en el formato ISO 8601
-    const formattedDate = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}.${milliseconds}Z`;
-
-    return formattedDate;
-}
diff --git a/test/cypress/integration/workerList.spec.js b/test/cypress/integration/workerList.spec.js
index 8d4dd770d..2ab84c623 100644
--- a/test/cypress/integration/workerList.spec.js
+++ b/test/cypress/integration/workerList.spec.js
@@ -1,4 +1,6 @@
 describe('WorkerList', () => {
+    const workerFieldNames =
+        '.card-list-body > .list-items > :nth-child(2) > .value > span';
     beforeEach(() => {
         cy.viewport(1280, 720);
         cy.login('developer');
@@ -6,19 +8,13 @@ describe('WorkerList', () => {
     });
 
     it('should load workers', () => {
-        cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
-            .eq(0)
-            .should('have.text', 'JessicaJones');
-        cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
-            .eq(1)
-            .should('have.text', 'BruceBanner');
-        cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
-            .eq(2)
-            .should('have.text', 'CharlesXavier');
+        cy.get(workerFieldNames).eq(0).should('have.text', 'JessicaJones');
+        cy.get(workerFieldNames).eq(1).should('have.text', 'BruceBanner');
+        cy.get(workerFieldNames).eq(2).should('have.text', 'CharlesXavier');
     });
 
     it('should open the worker summary', () => {
-        cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(0).click();
+        cy.openListSummary(0);
         cy.get('.summaryHeader div').should('have.text', '1110 - Jessica Jones');
         cy.get('.summary .header').eq(0).invoke('text').should('include', 'Basic data');
         cy.get('.summary .header').eq(1).should('have.text', 'User data');
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index 2eb14e463..0c930f9d8 100755
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -127,4 +127,8 @@ Cypress.Commands.add('validateRow', (rowSelector, expectedValues) => {
         }
     });
 });
+
+Cypress.Commands.add('openListSummary', (row) => {
+    cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(row).click();
+});
 // registerCommands();
diff --git a/test/vitest/__tests__/components/common/VnLog.spec.js b/test/vitest/__tests__/components/common/VnLog.spec.js
index 1fd5b3990..dbcb30272 100644
--- a/test/vitest/__tests__/components/common/VnLog.spec.js
+++ b/test/vitest/__tests__/components/common/VnLog.spec.js
@@ -1,9 +1,64 @@
 import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
-import { createWrapper } from 'app/test/vitest/helper';
+import { createWrapper, axios } from 'app/test/vitest/helper';
 import VnLog from 'src/components/common/VnLog.vue';
 
 describe('VnLog', () => {
     let vm;
+    const fakeLogTreeData = [
+        {
+            id: 2,
+            originFk: 1,
+            userFk: 18,
+            action: 'update',
+            changedModel: 'ClaimObservation',
+            oldInstance: {},
+            newInstance: {
+                claimFk: 1,
+                text: 'Waiting for customer',
+            },
+            creationDate: '2023-09-18T12:25:34.000Z',
+            changedModelId: '1',
+            changedModelValue: null,
+            description: null,
+            user: {
+                id: 18,
+                name: 'salesPerson',
+                nickname: 'salesPersonNick',
+                image: '4fa3ada0-3ac4-11eb-9ab8-27f6fc3b85fd',
+                worker: {
+                    id: 18,
+                    userFk: 18,
+                },
+            },
+        },
+        {
+            id: 1,
+            originFk: 1,
+            userFk: 18,
+            action: 'update',
+            changedModel: 'Claim',
+            oldInstance: {
+                hasToPickUp: false,
+            },
+            newInstance: {
+                hasToPickUp: true,
+            },
+            creationDate: '2023-09-18T12:25:34.000Z',
+            changedModelId: '1',
+            changedModelValue: null,
+            description: null,
+            user: {
+                id: 18,
+                name: 'salesPerson',
+                nickname: 'salesPersonNick',
+                image: '4fa3ada0-3ac4-11eb-9ab8-27f6fc3b85fd',
+                worker: {
+                    id: 18,
+                    userFk: 18,
+                },
+            },
+        },
+    ];
     const mockValidations = {
         Claim: {
             locale: {
@@ -27,7 +82,11 @@ describe('VnLog', () => {
         },
     };
 
-    beforeAll(() => {
+    beforeAll(async () => {
+        axios.get.mockImplementation(() => {
+            return { data: fakeLogTreeData };
+        });
+
         vm = createWrapper(VnLog, {
             global: {
                 stubs: [],
@@ -45,68 +104,12 @@ describe('VnLog', () => {
     });
 
     it('should correctly set logTree', async () => {
-        const fakeLogTreeData = [
-            {
-                id: 2,
-                originFk: 1,
-                userFk: 18,
-                action: 'update',
-                changedModel: 'ClaimObservation',
-                oldInstance: {},
-                newInstance: {
-                    claimFk: 1,
-                    text: 'Waiting for customer',
-                },
-                creationDate: '2023-09-18T12:25:34.000Z',
-                changedModelId: '1',
-                changedModelValue: null,
-                description: null,
-                user: {
-                    id: 18,
-                    name: 'salesPerson',
-                    nickname: 'salesPersonNick',
-                    image: '4fa3ada0-3ac4-11eb-9ab8-27f6fc3b85fd',
-                    worker: {
-                        id: 18,
-                        userFk: 18,
-                    },
-                },
-            },
-            {
-                id: 1,
-                originFk: 1,
-                userFk: 18,
-                action: 'update',
-                changedModel: 'Claim',
-                oldInstance: {
-                    hasToPickUp: false,
-                },
-                newInstance: {
-                    hasToPickUp: true,
-                },
-                creationDate: '2023-09-18T12:25:34.000Z',
-                changedModelId: '1',
-                changedModelValue: null,
-                description: null,
-                user: {
-                    id: 18,
-                    name: 'salesPerson',
-                    nickname: 'salesPersonNick',
-                    image: '4fa3ada0-3ac4-11eb-9ab8-27f6fc3b85fd',
-                    worker: {
-                        id: 18,
-                        userFk: 18,
-                    },
-                },
-            },
-        ];
         vm.logTree = vm.getLogs(fakeLogTreeData);
         expect(vm.logTree[0].originFk).toEqual(1);
         expect(vm.logTree[0].logs[0].user.name).toEqual('salesPerson');
     });
 
-    it('should correctly set the selectedFilters when filtering', async () => {
-        await vm.$nextTick();
+    it('should correctly set the selectedFilters when filtering', () => {
         vm.searchInput = '1';
         vm.userSelect = '21';
         vm.checkboxOptions.insert.selected = true;
@@ -121,10 +124,11 @@ describe('VnLog', () => {
     });
 
     it('should correctly set the date from', () => {
-        vm.date = '18-09-2023';
+        vm.dateFrom = '18-09-2023';
         vm.selectFilter('date', 'from');
-        expect(vm.selectedFilters.creationDate).toEqual({
-            between: ['2023-09-18T00:00:00.000Z', '2023-09-18T19:59:59.999Z'],
-        });
+        expect(vm.selectedFilters.creationDate.between).toEqual([
+            new Date('2023-09-18T00:00:00.000Z'),
+            new Date('2023-09-18T21:59:59.999Z'),
+        ]);
     });
 });
diff --git a/test/vitest/helper.js b/test/vitest/helper.js
index dea335803..4bbdc337a 100644
--- a/test/vitest/helper.js
+++ b/test/vitest/helper.js
@@ -13,7 +13,6 @@ installQuasarPlugin({
         Dialog,
     },
 });
-axios.defaults.baseURL = 'http://localhost:9000/api/';
 const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false });
 const mockPush = vi.fn();
 
@@ -35,8 +34,10 @@ vi.mock('vue-router', () => ({
     }),
 }));
 
+vi.mock('axios');
+
 vi.spyOn(useValidator, 'useValidator').mockImplementation(() => {
-    return { validate: vi.fn(), fetch: vi.fn() };
+    return { validate: vi.fn() };
 });
 
 class FormDataMock {

From 128d7ab10d7a0337b816b6b325cc4cc919483ea5 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 4 Oct 2023 15:52:40 +0200
Subject: [PATCH 17/81] ref #6104 console logs removed

---
 src/components/common/VnLog.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index eb0d1e345..049613670 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -164,8 +164,7 @@ function getLogs(data) {
     let modelLog = null;
     let prevLog;
     let nLogs;
-    console.log('EEEEEEE', data);
-    console.log('validations', validations);
+
     data.forEach((log) => {
         const locale = validations[log.changedModel]?.locale || {};
 

From b29d32679748f410e6e61a65d59fae34a2d5a2d8 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 13 Oct 2023 12:26:37 +0200
Subject: [PATCH 18/81] ref #6104 vnSelectFilter added

---
 src/components/common/VnLog.vue          | 92 +++++++-----------------
 src/components/common/VnSelectFilter.vue |  5 +-
 test/cypress/integration/vnLog.spec.js   |  4 +-
 3 files changed, 30 insertions(+), 71 deletions(-)

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 049613670..b0583b884 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -13,6 +13,7 @@ import VnAvatar from '../ui/VnAvatar.vue';
 import VnJsonValue from '../common/VnJsonValue.vue';
 import FetchData from '../FetchData.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnSelectFilter from './VnSelectFilter.vue';
 
 const stateStore = useStateStore();
 const validationsStore = useValidator();
@@ -120,7 +121,6 @@ const validDate = new RegExp(
         /T(2[0-3]|[01][0-9]):([0-5][0-9]):([0-5][0-9])(.[0-9]+)?(Z)?$/.source
 );
 
-const filteredActions = ref([]);
 const filteredWorkers = ref([]);
 
 function castJsonValue(value) {
@@ -361,40 +361,13 @@ async function clearFilter() {
     changeInput.value = undefined;
     dateFrom.value = undefined;
     dateTo.value = undefined;
+    userRadio.value = undefined;
     Object.keys(checkboxOptions.value).forEach(
         (opt) => (checkboxOptions.value[opt].selected = false)
     );
     await applyFilter();
 }
 
-function filterFn(val, update, abortFn, type) {
-    if (!val) {
-        update(() => {
-            if (type === 'actions') filteredActions.value = actions.value;
-            if (type === 'workers') filteredWorkers.value = workers.value;
-        });
-        return;
-    }
-
-    update(() => {
-        const needle = val.toLowerCase();
-        if (type === 'actions')
-            filteredActions.value = actions.value.filter((item) =>
-                validations[item].locale.name.includes(needle)
-            );
-        if (type === 'workers') {
-            if (isNaN(needle))
-                filteredWorkers.value = workers.value.filter(
-                    (item) =>
-                        item.name.toLowerCase().includes(needle) ||
-                        item.nickname.toLowerCase().includes(needle)
-                );
-            else
-                filteredWorkers.value = workers.value.filter((item) => item.id == needle);
-        }
-    });
-}
-
 setLogTree();
 </script>
 <template>
@@ -411,7 +384,15 @@ setLogTree();
     <FetchData
         :url="`${props.model}Logs/${route.params.id}/models`"
         :filter="{ order: ['changedModel'] }"
-        @on-fetch="(data) => (actions = data.map((item) => item.changedModel))"
+        @on-fetch="
+            (data) =>
+                (actions = data.map((item) => {
+                    return {
+                        locale: useFirstUpper(validations[item.changedModel].locale.name),
+                        value: item.changedModel,
+                    };
+                }))
+        "
         auto-load
     />
     <div
@@ -669,31 +650,16 @@ setLogTree();
                         </template>
                     </QInput>
                 </QItem>
-                <QItem class="q-mt-sm">
-                    <QSelect
+                <QItem>
+                    <VnSelectFilter
                         class="full-width"
-                        v-model="selectedFilters.changedModel"
-                        @update:model-value="selectFilter('action')"
-                        :options="filteredActions"
                         :label="t('globals.entity')"
-                        use-input
-                        clearable
-                        clear-icon="close"
-                        @filter="
-                            (val, update, abortFn) =>
-                                filterFn(val, update, abortFn, 'actions')
-                        "
+                        v-model="selectedFilters.changedModel"
+                        option-label="locale"
+                        :options="actions"
+                        @update:model-value="selectFilter('action')"
                         @clear="() => selectFilter('action')"
-                    >
-                        <template #option="{ opt, index, itemProps }">
-                            <QItem :index="index" v-bind="itemProps">
-                                {{ useFirstUpper(validations[opt].locale.name) }}
-                            </QItem>
-                        </template>
-                        <template #selected-item="{ opt }">
-                            {{ useFirstUpper(validations[opt].locale.name) }}
-                        </template>
-                    </QSelect>
+                    />
                 </QItem>
                 <QItem class="q-mt-sm">
                     <QOptionGroup
@@ -713,23 +679,15 @@ setLogTree();
                     <QItemSection v-if="!workers">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
-                    <QItemSection v-if="workers">
-                        <QSelect
+                    <QItemSection v-if="workers && userRadio !== null">
+                        <VnSelectFilter
+                            class="full-width"
                             :label="t('globals.user')"
                             v-model="userSelect"
-                            @update:model-value="selectFilter('userSelect')"
-                            :options="filteredWorkers"
-                            option-value="id"
                             option-label="name"
-                            emit-value
-                            map-options
-                            use-input
-                            clearable
-                            clear-icon="close"
-                            @filter="
-                                (val, update, abortFn) =>
-                                    filterFn(val, update, abortFn, 'workers')
-                            "
+                            option-value="id"
+                            :options="workers"
+                            @update:model-value="selectFilter('userSelect')"
                         >
                             <template #option="{ opt, itemProps }">
                                 <QItem
@@ -745,7 +703,7 @@ setLogTree();
                                     </QItemSection>
                                 </QItem>
                             </template>
-                        </QSelect>
+                        </VnSelectFilter>
                     </QItemSection>
                 </QItem>
                 <QItem class="q-mt-sm">
diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 55395f260..fc8d5809e 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -83,11 +83,10 @@ const value = computed({
         @filter="filterHandler"
         hide-selected
         fill-input
+        clearable
+        clear-icon="close"
         ref="vnSelectRef"
     >
-        <template #append>
-            <QIcon name="close" @click.stop="value = null" class="cursor-pointer" />
-        </template>
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData">
             <slot :name="slotName" v-bind="slotData" />
         </template>
diff --git a/test/cypress/integration/vnLog.spec.js b/test/cypress/integration/vnLog.spec.js
index 97c9e7a33..784780c68 100644
--- a/test/cypress/integration/vnLog.spec.js
+++ b/test/cypress/integration/vnLog.spec.js
@@ -16,6 +16,8 @@ describe('VnLog', () => {
     it('should filter by entity', () => {
         cy.get('.q-scrollarea .q-list .q-item .q-select').eq(0).click();
         cy.get('.q-scrollarea .q-list .q-item .q-select').eq(0).type('cla');
-        cy.get('[role="listbox"] .q-item').should('have.text', 'Claim');
+        cy.get('.q-virtual-scroll__content .q-item').eq(0).click();
+        cy.get('.q-page').click();
+        cy.get('.model-info .q-chip__content').eq(0).should('have.text', 'Claim');
     });
 });

From 562fe18b6558f6843a93d251371e0ddb562bc384 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 17 Oct 2023 11:28:58 +0200
Subject: [PATCH 19/81] ref #5876

---
 src/pages/Claim/Card/ClaimPhoto.vue | 32 ++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/pages/Claim/Card/ClaimPhoto.vue b/src/pages/Claim/Card/ClaimPhoto.vue
index 483dbffc1..dbcaeb80b 100644
--- a/src/pages/Claim/Card/ClaimPhoto.vue
+++ b/src/pages/Claim/Card/ClaimPhoto.vue
@@ -25,7 +25,8 @@ const client = ref({});
 
 const inputFile = ref();
 const files = ref({});
-
+const spinnerRef = ref();
+const progress = ref(0);
 const claimDmsRef = ref();
 const dmsType = ref({});
 const config = ref({});
@@ -98,13 +99,8 @@ function setClaimDms(data) {
 }
 
 async function create() {
-    const formData = new FormData();
     const inputFiles = files.value;
-    for (let i = 0; i < inputFiles.length; i++)
-        formData.append(inputFiles[i].name, inputFiles[i]);
-
     const query = `claims/${claimId.value}/uploadFile`;
-
     const dms = {
         hasFile: false,
         hasFileAttached: false,
@@ -119,9 +115,16 @@ async function create() {
         }).toUpperCase(),
     };
 
-    await axios.post(query, formData, {
-        params: dms,
-    });
+    spinnerRef.value.show();
+    for (let i = 0; i < inputFiles.length; i++) {
+        const formData = new FormData();
+        formData.append(inputFiles[i].name, inputFiles[i]);
+        await axios.post(query, formData, {
+            params: dms,
+        });
+        progress.value = i;
+    }
+    spinnerRef.value.hide();
 
     quasar.notify({
         message: t('globals.dataSaved'),
@@ -234,7 +237,16 @@ function onDrag() {
             </div>
         </div>
     </div>
-
+    <QDialog ref="spinnerRef">
+        <QCard>
+            <QCardSection class="row justify-center">
+                <QSpinner color="orange" size="xl" />
+            </QCardSection>
+            <QCardSection>
+                <p>{{ `${progress} de ${files.length} archivos subidos` }}</p>
+            </QCardSection>
+        </QCard>
+    </QDialog>
     <QPageSticky position="bottom-right" :offset="[25, 25]">
         <label for="fileInput">
             <QBtn fab @click="inputFile.nativeEl.click()" icon="add" color="primary">

From 98de713341c48069e0d691bef30e2482e52bb90c Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 17 Oct 2023 12:30:37 +0200
Subject: [PATCH 20/81] ref #5876 spinner wihout counter

---
 src/pages/Claim/Card/ClaimPhoto.vue | 29 ++++++++++-------------------
 1 file changed, 10 insertions(+), 19 deletions(-)

diff --git a/src/pages/Claim/Card/ClaimPhoto.vue b/src/pages/Claim/Card/ClaimPhoto.vue
index dbcaeb80b..0b4fb0a0b 100644
--- a/src/pages/Claim/Card/ClaimPhoto.vue
+++ b/src/pages/Claim/Card/ClaimPhoto.vue
@@ -25,8 +25,8 @@ const client = ref({});
 
 const inputFile = ref();
 const files = ref({});
+
 const spinnerRef = ref();
-const progress = ref(0);
 const claimDmsRef = ref();
 const dmsType = ref({});
 const config = ref({});
@@ -99,8 +99,13 @@ function setClaimDms(data) {
 }
 
 async function create() {
+    const formData = new FormData();
     const inputFiles = files.value;
+    for (let i = 0; i < inputFiles.length; i++)
+        formData.append(inputFiles[i].name, inputFiles[i]);
+
     const query = `claims/${claimId.value}/uploadFile`;
+
     const dms = {
         hasFile: false,
         hasFileAttached: false,
@@ -114,18 +119,11 @@ async function create() {
             clientId: client.value.id,
         }).toUpperCase(),
     };
-
     spinnerRef.value.show();
-    for (let i = 0; i < inputFiles.length; i++) {
-        const formData = new FormData();
-        formData.append(inputFiles[i].name, inputFiles[i]);
-        await axios.post(query, formData, {
-            params: dms,
-        });
-        progress.value = i;
-    }
+    await axios.post(query, formData, {
+        params: dms,
+    });
     spinnerRef.value.hide();
-
     quasar.notify({
         message: t('globals.dataSaved'),
         type: 'positive',
@@ -238,14 +236,7 @@ function onDrag() {
         </div>
     </div>
     <QDialog ref="spinnerRef">
-        <QCard>
-            <QCardSection class="row justify-center">
-                <QSpinner color="orange" size="xl" />
-            </QCardSection>
-            <QCardSection>
-                <p>{{ `${progress} de ${files.length} archivos subidos` }}</p>
-            </QCardSection>
-        </QCard>
+        <QSpinner color="orange" size="xl" />
     </QDialog>
     <QPageSticky position="bottom-right" :offset="[25, 25]">
         <label for="fileInput">

From e977467eff0a2363fd90aa4c34d430689eab434a Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 18 Oct 2023 10:18:25 +0200
Subject: [PATCH 21/81] ref #6104 refactor e2e tests

---
 src/components/common/VnSelectFilter.vue |  2 --
 test/cypress/integration/vnLog.spec.js   | 18 ++++++++++--------
 test/cypress/support/commands.js         | 10 +++++++++-
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index fc8d5809e..ba06e3dfe 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -83,8 +83,6 @@ const value = computed({
         @filter="filterHandler"
         hide-selected
         fill-input
-        clearable
-        clear-icon="close"
         ref="vnSelectRef"
     >
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData">
diff --git a/test/cypress/integration/vnLog.spec.js b/test/cypress/integration/vnLog.spec.js
index 784780c68..80b9d07df 100644
--- a/test/cypress/integration/vnLog.spec.js
+++ b/test/cypress/integration/vnLog.spec.js
@@ -1,23 +1,25 @@
 /// <reference types="cypress" />
 describe('VnLog', () => {
+    const chips = [
+        ':nth-child(1) > :nth-child(1) > .q-item__label > .q-chip > .q-chip__content',
+        ':nth-child(2) > :nth-child(1) > .q-item__label > .q-chip > .q-chip__content',
+    ];
     beforeEach(() => {
         cy.login('developer');
         cy.visit(`/#/claim/${1}/log`);
-        cy.get('.q-gutter-x-sm > .q-btn > .q-btn__content > .q-icon').click();
+        cy.openRightMenu();
     });
 
     it('should filter by insert actions', () => {
-        cy.get('.q-checkbox__inner').eq(0).click();
+        cy.checkOption(':nth-child(7) > .q-checkbox');
         cy.get('.q-page').click();
-        cy.get('.model-info .q-chip__content').eq(0).should('have.text', 'Document');
-        cy.get('.model-info .q-chip__content').eq(1).should('have.text', 'Beginning');
+        cy.validateContent(chips[0], 'Document');
+        cy.validateContent(chips[1], 'Beginning');
     });
 
     it('should filter by entity', () => {
-        cy.get('.q-scrollarea .q-list .q-item .q-select').eq(0).click();
-        cy.get('.q-scrollarea .q-list .q-item .q-select').eq(0).type('cla');
-        cy.get('.q-virtual-scroll__content .q-item').eq(0).click();
+        cy.selectOption('.q-drawer--right .q-item > .q-select', 'Claim');
         cy.get('.q-page').click();
-        cy.get('.model-info .q-chip__content').eq(0).should('have.text', 'Claim');
+        cy.validateContent(chips[0], 'Claim');
     });
 });
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index 0f7fa0991..04282f5f8 100755
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -70,7 +70,7 @@ Cypress.Commands.add('selectOption', (selector, option) => {
 });
 
 Cypress.Commands.add('checkOption', (selector) => {
-    cy.wrap(selector).find('.q-checkbox__inner').click();
+    cy.get(selector).find('.q-checkbox__inner').click();
 });
 
 // Global buttons
@@ -130,4 +130,12 @@ Cypress.Commands.add('validateRow', (rowSelector, expectedValues) => {
 Cypress.Commands.add('openListSummary', (row) => {
     cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(row).click();
 });
+
+Cypress.Commands.add('openRightMenu', () => {
+    cy.get('.q-gutter-x-sm > .q-btn > .q-btn__content > .q-icon').click();
+});
+
+Cypress.Commands.add('validateContent', (selector, expectedValue) => {
+    cy.get(selector).should('have.text', expectedValue);
+});
 // registerCommands();

From cf404f5dfa29a94ac4ef9f1059b344111333954c Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 19 Oct 2023 09:57:34 +0200
Subject: [PATCH 22/81] ref #6104 refactor

---
 src/components/common/VnLog.vue          | 2 --
 src/components/common/VnSelectFilter.vue | 3 +++
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index b0583b884..bbc8d5cde 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -121,8 +121,6 @@ const validDate = new RegExp(
         /T(2[0-3]|[01][0-9]):([0-5][0-9]):([0-5][0-9])(.[0-9]+)?(Z)?$/.source
 );
 
-const filteredWorkers = ref([]);
-
 function castJsonValue(value) {
     return typeof value === 'string' && validDate.test(value) ? new Date(value) : value;
 }
diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index ba06e3dfe..55395f260 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -85,6 +85,9 @@ const value = computed({
         fill-input
         ref="vnSelectRef"
     >
+        <template #append>
+            <QIcon name="close" @click.stop="value = null" class="cursor-pointer" />
+        </template>
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData">
             <slot :name="slotName" v-bind="slotData" />
         </template>

From 112e057cfa0ddec2f9bff572482bf8820d3b2ace Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 31 Oct 2023 08:56:51 +0100
Subject: [PATCH 23/81] ref #5835 invoiceIn created

---
 src/components/common/VnSelectFilter.vue      |  24 +-
 src/components/ui/VnSearchbar.vue             |   4 +-
 src/composables/downloadFile.js               |  11 +
 src/composables/getUrl.js                     |  13 +-
 src/i18n/en/index.js                          |  66 ++
 src/i18n/es/index.js                          |  64 ++
 .../InvoiceIn/Card/InvoiceInBasicData.vue     | 742 ++++++++++++++++++
 src/pages/InvoiceIn/Card/InvoiceInCard.vue    |  91 +++
 .../InvoiceIn/Card/InvoiceInDescriptor.vue    | 108 +++
 src/pages/InvoiceIn/Card/InvoiceInDueDay.vue  | 290 +++++++
 .../InvoiceIn/Card/InvoiceInIntrastat.vue     | 280 +++++++
 src/pages/InvoiceIn/Card/InvoiceInSummary.vue | 409 ++++++++++
 .../InvoiceIn/Card/InvoiceInSummaryDialog.vue |  29 +
 src/pages/InvoiceIn/Card/InvoiceInVat.vue     | 500 ++++++++++++
 src/pages/InvoiceIn/InvoiceInFilter.vue       | 307 ++++++++
 src/pages/InvoiceIn/InvoiceInList.vue         | 179 +++++
 src/pages/InvoiceIn/InvoiceInMain.vue         |  17 +
 src/router/modules/index.js                   |  11 +-
 src/router/modules/invoiceIn.js               |  98 +++
 src/router/routes.js                          |   2 +
 src/stores/useNavigationStore.js              |  11 +-
 ...{ClaimNotes.spec.js => claimNotes.spec.js} |   0
 .../cypress/integration/invoiceInList.spec.js |  27 +
 .../composables/downloadFile.spec.js          |  25 +
 24 files changed, 3281 insertions(+), 27 deletions(-)
 create mode 100644 src/composables/downloadFile.js
 create mode 100644 src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
 create mode 100644 src/pages/InvoiceIn/Card/InvoiceInCard.vue
 create mode 100644 src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
 create mode 100644 src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
 create mode 100644 src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue
 create mode 100644 src/pages/InvoiceIn/Card/InvoiceInSummary.vue
 create mode 100644 src/pages/InvoiceIn/Card/InvoiceInSummaryDialog.vue
 create mode 100644 src/pages/InvoiceIn/Card/InvoiceInVat.vue
 create mode 100644 src/pages/InvoiceIn/InvoiceInFilter.vue
 create mode 100644 src/pages/InvoiceIn/InvoiceInList.vue
 create mode 100644 src/pages/InvoiceIn/InvoiceInMain.vue
 create mode 100644 src/router/modules/invoiceIn.js
 rename test/cypress/integration/{ClaimNotes.spec.js => claimNotes.spec.js} (100%)
 create mode 100644 test/cypress/integration/invoiceInList.spec.js
 create mode 100644 test/vitest/__tests__/composables/downloadFile.spec.js

diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 55395f260..43827b831 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -15,6 +15,10 @@ const $props = defineProps({
         type: String,
         default: '',
     },
+    filterOptions: {
+        type: Array,
+        default: () => [],
+    },
 });
 const { optionLabel, options } = toRefs($props);
 const myOptions = ref([]);
@@ -28,18 +32,22 @@ function setOptions(data) {
 setOptions(options.value);
 
 const filter = (val, options) => {
-    const search = val.toLowerCase();
+    const search = val.toString().toLowerCase();
 
-    if (val === '') return options;
+    if (!search) return options;
 
     return options.filter((row) => {
+        if ($props.filterOptions.length) {
+            return $props.filterOptions.some((prop) => {
+                const propValue = String(row[prop]).toLowerCase();
+                return propValue.includes(search);
+            });
+        }
+
         const id = row.id;
-        const name = row[$props.optionLabel].toLowerCase();
+        const optionLabel = String(row[$props.optionLabel]).toLowerCase();
 
-        const idMatches = id == search;
-        const nameMatches = name.indexOf(search) > -1;
-
-        return idMatches || nameMatches;
+        return id == search || optionLabel.includes(search);
     });
 };
 
@@ -89,7 +97,7 @@ const value = computed({
             <QIcon name="close" @click.stop="value = null" class="cursor-pointer" />
         </template>
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData">
-            <slot :name="slotName" v-bind="slotData" />
+            <slot :name="slotName" v-bind="slotData ?? {}" />
         </template>
     </QSelect>
 </template>
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 693d6fce2..35f6c1548 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -76,9 +76,9 @@ async function search() {
     const module = route.matched[1];
     if (rows.length === 1) {
         const [firstRow] = rows;
-        await router.push({ path: `/${module.name}/${firstRow.id}` });
+        await router.push({ path: `${module.path}/${firstRow.id}` });
     } else if (route.matched.length > 3) {
-        await router.push({ path: `/${module.name}` });
+        await router.push({ path: `/${module.path}` });
         arrayData.updateStateParams();
     }
 }
diff --git a/src/composables/downloadFile.js b/src/composables/downloadFile.js
new file mode 100644
index 000000000..877d2a254
--- /dev/null
+++ b/src/composables/downloadFile.js
@@ -0,0 +1,11 @@
+import { useSession } from 'src/composables/useSession';
+import { getUrl } from './getUrl';
+
+const session = useSession();
+const token = session.getToken();
+
+export async function downloadFile(dmsId) {
+    let appUrl = await getUrl('', 'lilium');
+    appUrl = appUrl.replace('/#/', '');
+    window.open(`${appUrl}/api/dms/${dmsId}/downloadFile?access_token=${token}`);
+}
diff --git a/src/composables/getUrl.js b/src/composables/getUrl.js
index f2bd9ddb9..1e6aec4c6 100644
--- a/src/composables/getUrl.js
+++ b/src/composables/getUrl.js
@@ -1,11 +1,10 @@
 import axios from 'axios';
 
-export async function getUrl(route, appName = 'salix') {
-    const filter = {
-        where: { and: [{ appName: appName }, { environment: process.env.NODE_ENV }] },
-    };
+export async function getUrl(route, app = 'salix') {
+    let url;
 
-    const { data } = await axios.get('Urls/findOne', { params: { filter } });
-    const url = data.url;
-    return route ? url + route : url;
+    await axios.get('Urls/getUrl', { params: { app } }).then((res) => {
+        url = res.data + route;
+    });
+    return url;
 }
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 948332d46..b3fb32d9b 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -390,6 +390,71 @@ export default {
             totalWithVat: 'Amount',
         },
     },
+    invoiceIn: {
+        pageTitles: {
+            invoiceIns: 'Invoices In',
+            list: 'List',
+            createInvoiceIn: 'Create invoice in',
+            summary: 'Summary',
+            basicData: 'Basic Data',
+            vat: 'VAT',
+            dueDay: 'Due day',
+            intrastat: 'Intrastat',
+            log: 'Logs',
+        },
+        list: {
+            ref: 'Reference',
+            supplier: 'Supplier',
+            supplierRef: 'Supplier ref.',
+            serialNumber: 'Serial number',
+            serial: 'Serial',
+            file: 'File',
+            issued: 'Issued',
+            isBooked: 'Is booked',
+            awb: 'AWB',
+            amount: 'Amount',
+        },
+        card: {
+            issued: 'Issued',
+            amount: 'Amount',
+            client: 'Client',
+            company: 'Company',
+            customerCard: 'Customer card',
+            ticketList: 'Ticket List',
+            vat: 'Vat',
+            dueDay: 'Due day',
+            intrastat: 'Intrastat',
+        },
+        summary: {
+            supplier: 'Supplier',
+            supplierRef: 'Supplier ref.',
+            currency: 'Currency',
+            docNumber: 'Doc number',
+            issued: 'Expedition date',
+            operated: 'Operation date',
+            bookEntried: 'Entry date',
+            bookedDate: 'Booked date',
+            sage: 'Sage withholding',
+            vat: 'Undeductible VAT',
+            company: 'Company',
+            booked: 'Booked',
+            expense: 'Expense',
+            taxableBase: 'Taxable base',
+            rate: 'Rate',
+            sageVat: 'Sage vat',
+            sageTransaction: 'Sage transaction',
+            dueDay: 'Date',
+            bank: 'Bank',
+            amount: 'Amount',
+            foreignValue: 'Foreign value',
+            dueTotal: 'Due day',
+            noMatch: 'Do not match',
+            code: 'Code',
+            net: 'Net',
+            stems: 'Stems',
+            country: 'Country',
+        },
+    },
     worker: {
         pageTitles: {
             workers: 'Workers',
@@ -514,6 +579,7 @@ export default {
             openCard: 'View card',
             openSummary: 'Open summary',
             viewDescription: 'View description',
+            downloadFile: 'Download file',
         },
         cardDescriptor: {
             mainList: 'Main list',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 9b452ab22..b7dc1c132 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -390,6 +390,69 @@ export default {
             totalWithVat: 'Importe',
         },
     },
+    invoiceIn: {
+        pageTitles: {
+            invoiceIns: 'Fact. recibidas',
+            list: 'Listado',
+            createInvoiceOut: 'Crear fact. recibida',
+            summary: 'Resumen',
+            basicData: 'Datos básicos',
+            vat: 'IVA',
+            dueDay: 'Vencimiento',
+            intrastat: 'Intrastat',
+            log: 'Registros de auditoría',
+        },
+        list: {
+            ref: 'Referencia',
+            supplier: 'Proveedor',
+            supplierRef: 'Ref. proveedor',
+            serialNumber: 'Num. serie',
+            shortIssued: 'F. emisión',
+            serial: 'Serie',
+            file: 'Fichero',
+            issued: 'Fecha emisión',
+            isBooked: 'Conciliada',
+            awb: 'AWB',
+            amount: 'Importe',
+        },
+        card: {
+            issued: 'Fecha emisión',
+            amount: 'Importe',
+            client: 'Cliente',
+            company: 'Empresa',
+            customerCard: 'Ficha del cliente',
+            ticketList: 'Listado de tickets',
+            vat: 'Vat',
+            dueDay: 'Fecha de vencimiento',
+        },
+        summary: {
+            supplier: 'Supplier',
+            supplierRef: 'Supplier ref.',
+            currency: 'Divisa',
+            docNumber: 'Número documento',
+            issued: 'Fecha de expedición',
+            operated: 'Fecha operación',
+            bookEntried: 'Fecha asiento',
+            bookedDate: 'Fecha contable',
+            sage: 'Retención sage',
+            vat: 'Iva no deducible',
+            company: 'Empresa',
+            booked: 'Contabilizada',
+            expense: 'Gasto',
+            taxableBase: 'Base imp.',
+            rate: 'Tasa',
+            sageTransaction: 'Sage transación',
+            dueDay: 'Fecha',
+            bank: 'Caja',
+            amount: 'Importe',
+            foreignValue: 'Divisa',
+            dueTotal: 'Vencimiento',
+            code: 'Código',
+            net: 'Neto',
+            stems: 'Tallos',
+            country: 'País',
+        },
+    },
     worker: {
         pageTitles: {
             workers: 'Trabajadores',
@@ -514,6 +577,7 @@ export default {
             openCard: 'Ver ficha',
             openSummary: 'Abrir detalles',
             viewDescription: 'Ver descripción',
+            downloadFile: 'Descargar archivo',
         },
         cardDescriptor: {
             mainList: 'Listado principal',
diff --git a/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
new file mode 100644
index 000000000..3edfab0d6
--- /dev/null
+++ b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
@@ -0,0 +1,742 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import { useArrayData } from 'src/composables/useArrayData';
+
+import { downloadFile } from 'src/composables/downloadFile';
+import FetchData from 'src/components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import axios from 'axios';
+
+const quasar = useQuasar();
+const route = useRoute();
+const { t } = useI18n();
+
+const dms = ref({});
+const editDownloadDisabled = ref(false);
+const arrayData = useArrayData('InvoiceIn');
+const invoiceIn = computed(() => arrayData.store.data);
+const userConfig = ref(null);
+
+const suppliers = ref([]);
+const suppliersRef = ref();
+const currencies = ref([]);
+const currenciesRef = ref();
+const companies = ref([]);
+const companiesRef = ref();
+const dmsTypes = ref([]);
+const dmsTypesRef = ref();
+const warehouses = ref([]);
+const warehousesRef = ref();
+const allowTypesRef = ref();
+const allowedContentTypes = ref([]);
+const inputFileRef = ref();
+const editDmsRef = ref();
+const createDmsRef = ref();
+
+async function checkFileExists(dmsId) {
+    if (!dmsId) return;
+    try {
+        await axios.get(`Dms/${dmsId}`, { fields: ['id'] });
+        editDownloadDisabled.value = false;
+    } catch (e) {
+        editDownloadDisabled.value = true;
+    }
+}
+
+async function setEditDms(dmsId) {
+    const { data } = await axios.get(`Dms/${dmsId}`);
+    dms.value = {
+        id: data.id,
+        warehouseId: data.warehouseFk,
+        companyId: data.companyFk,
+        dmsTypeId: data.dmsTypeFk,
+        reference: data.reference,
+        description: data.description,
+        hasFile: data.hasFile,
+        hasFileAttached: data.hasFileAttached,
+    };
+
+    if (!allowedContentTypes.value.length) await allowTypesRef.value.fetch();
+
+    editDmsRef.value.show();
+}
+
+async function setCreateDms() {
+    const { data } = await axios.get('DmsTypes/findOne', {
+        where: { code: 'invoiceIn' },
+    });
+    dms.value = {
+        reference: invoiceIn.value.supplierRef,
+        warehouseId: userConfig.value.warehouseFk,
+        companyId: userConfig.value.companyFk,
+        dmsTypeId: data.id,
+        description: invoiceIn.value.supplier.name,
+        hasFile: true,
+        hasFileAttached: true,
+        files: null,
+    };
+
+    createDmsRef.value.show();
+}
+
+async function edit() {
+    try {
+        if (!dms.value.companyId) throw new Error(t(`The company can't be empty`));
+        if (!dms.value.warehouseId) throw new Error(t(`The warehouse can't be empty`));
+        if (!dms.value.dmsTypeId) throw new Error(t(`The DMS Type can't be empty`));
+        if (!dms.value.description) throw new Error(t(`The description can't be empty`));
+
+        const formData = new FormData();
+
+        if (dms.value.files) {
+            for (let i = 0; i < dms.value.files.length; i++)
+                formData.append(dms.value.files[i].name, dms.value.files[i]);
+            dms.value.hasFileAttached = true;
+        }
+
+        const { data } = await axios.post(`dms/${dms.value.id}/updateFile`, formData, {
+            params: dms.value,
+        });
+
+        if (data.length) invoiceIn.value.dmsFk = data[0].id;
+        editDmsRef.value.hide();
+
+        quasar.notify({
+            message: t('globals.dataSaved'),
+            type: 'positive',
+        });
+    } catch (error) {
+        quasar.notify({
+            message: t(`${error}`),
+            type: 'negative',
+        });
+    }
+}
+
+async function create() {
+    try {
+        if (!dms.value.companyId) throw new Error(t(`The company can't be empty`));
+        if (!dms.value.warehouseId) throw new Error(t(`The warehouse can't be empty`));
+        if (!dms.value.dmsTypeId) throw new Error(t(`The DMS Type can't be empty`));
+        if (!dms.value.description) throw new Error(t(`The description can't be empty`));
+        if (!dms.value.files) throw new Error(t(`The files can't be empty`));
+
+        const formData = new FormData();
+
+        if (dms.value.files) {
+            for (let i = 0; i < dms.value.files.length; i++)
+                formData.append(dms.value.files[i].name, dms.value.files[i]);
+            dms.value.hasFileAttached = true;
+        }
+
+        const { data } = await axios.post('Dms/uploadFile', formData, {
+            params: dms.value,
+        });
+        if (data.length) invoiceIn.value.dmsFk = data[0].id;
+        editDmsRef.value.hide();
+
+        quasar.notify({
+            message: t('globals.dataSaved'),
+            type: 'positive',
+        });
+    } catch (error) {
+        quasar.notify({
+            message: t(`${error}`),
+            type: 'negative',
+        });
+    }
+}
+</script>
+<template>
+    <FetchData
+        ref="suppliersRef"
+        url="Suppliers"
+        :filter="{ fields: ['id', 'nickname'] }"
+        limit="30"
+        @on-fetch="(data) => (suppliers = data)"
+    />
+    <FetchData
+        ref="currenciesRef"
+        url="Currencies"
+        :filter="{ fields: ['id', 'code'] }"
+        order="code"
+        @on-fetch="(data) => (currencies = data)"
+    />
+    <FetchData
+        ref="companiesRef"
+        url="Companies"
+        :filter="{ fields: ['id', 'code'] }"
+        order="code"
+        @on-fetch="(data) => (companies = data)"
+    />
+    <FetchData
+        ref="dmsTypesRef"
+        url="DmsTypes"
+        :filter="{ fields: ['id', 'name'] }"
+        order="name"
+        @on-fetch="(data) => (dmsTypes = data)"
+    />
+    <FetchData
+        ref="warehousesRef"
+        url="Warehouses"
+        :filter="{ fields: ['id', 'name'] }"
+        order="name"
+        @on-fetch="(data) => (warehouses = data)"
+    />
+    <FetchData
+        ref="allowTypesRef"
+        url="DmsContainers/allowedContentTypes"
+        @on-fetch="(data) => (allowedContentTypes = data)"
+    />
+    <FetchData
+        url="UserConfigs/getUserConfig"
+        @on-fetch="(data) => (userConfig = data)"
+        auto-load
+    />
+    <div class="column items-center">
+        <QCard>
+            <FormModel
+                v-if="invoiceIn"
+                :url="`InvoiceIns/${route.params.id}`"
+                model="invoiceIn"
+            >
+                <template #form="{ data }">
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <VnSelectFilter
+                                v-if="suppliersRef"
+                                :label="t('supplierFk')"
+                                v-model="data.supplierFk"
+                                :options="suppliers"
+                                option-value="id"
+                                option-label="nickname"
+                                @input-value="suppliersRef.fetch()"
+                            >
+                                <template #option="scope">
+                                    <QItem v-bind="scope.itemProps">
+                                        <QItemSection>
+                                            <QItemLabel>{{
+                                                `${scope.opt.id} - ${scope.opt.nickname}`
+                                            }}</QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                </template>
+                            </VnSelectFilter>
+                        </div>
+                        <div class="col">
+                            <QInput
+                                clearable
+                                clear-icon="close"
+                                :label="t('Supplier ref')"
+                                v-model="data.supplierRef"
+                            />
+                        </div>
+                    </div>
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <QInput :label="t('Expedition date')" v-model="data.issued">
+                                <template #append>
+                                    <QIcon
+                                        name="event"
+                                        class="cursor-pointer"
+                                        mask="####-##-##"
+                                        fill-mask="_"
+                                    >
+                                        <QPopupProxy
+                                            cover
+                                            transition-show="scale"
+                                            transition-hide="scale"
+                                        >
+                                            <QDate v-model="data.issued">
+                                                <div class="row items-center justify-end">
+                                                    <QBtn
+                                                        v-close-popup
+                                                        label="Close"
+                                                        color="primary"
+                                                        flat
+                                                    />
+                                                </div>
+                                            </QDate>
+                                        </QPopupProxy>
+                                    </QIcon>
+                                </template>
+                            </QInput>
+                        </div>
+                        <div class="col">
+                            <QInput
+                                :label="t('Operation date')"
+                                v-model="data.operated"
+                                mask="####-##-##"
+                                fill-mask="_"
+                                autofocus
+                            >
+                                <template #append>
+                                    <QIcon name="event" class="cursor-pointer">
+                                        <QPopupProxy
+                                            cover
+                                            transition-show="scale"
+                                            transition-hide="scale"
+                                        >
+                                            <QDate
+                                                v-model="data.operated"
+                                                mask="YYYY-MM-DD"
+                                            >
+                                                <div class="row items-center justify-end">
+                                                    <QBtn
+                                                        v-close-popup
+                                                        label="Close"
+                                                        color="primary"
+                                                        flat
+                                                    />
+                                                </div>
+                                            </QDate>
+                                        </QPopupProxy>
+                                    </QIcon>
+                                </template>
+                            </QInput>
+                        </div>
+                    </div>
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <QInput
+                                :label="t('Undeductible VAT')"
+                                v-model="data.deductibleExpenseFk"
+                                clearable
+                                clear-icon="close"
+                            />
+                        </div>
+                        <div class="col">
+                            <QInput
+                                :label="t('Document')"
+                                v-model="data.dmsFk"
+                                clearable
+                                clear-icon="close"
+                                @update:model-value="checkFileExists(data.dmsFk)"
+                            >
+                                <template #prepend>
+                                    <QBtn
+                                        v-if="data.dmsFk"
+                                        :class="{
+                                            'no-pointer-events': editDownloadDisabled,
+                                        }"
+                                        :disable="editDownloadDisabled"
+                                        icon="cloud_download"
+                                        :title="t('Download file')"
+                                        padding="xs"
+                                        round
+                                        @click="downloadFile(data.dmsFk)"
+                                    />
+                                </template>
+                                <template #append>
+                                    <QBtn
+                                        :class="{
+                                            'no-pointer-events': editDownloadDisabled,
+                                        }"
+                                        :disable="editDownloadDisabled"
+                                        v-if="data.dmsFk"
+                                        icon="edit"
+                                        round
+                                        padding="xs"
+                                        @click="setEditDms(data.dmsFk)"
+                                    >
+                                        <QTooltip>{{ t('Edit document') }}</QTooltip>
+                                    </QBtn>
+                                    <QBtn
+                                        v-else
+                                        icon="add_circle"
+                                        round
+                                        padding="xs"
+                                        @click="setCreateDms()"
+                                    >
+                                        <QTooltip>{{ t('Create document') }}</QTooltip>
+                                    </QBtn>
+                                </template>
+                            </QInput>
+                        </div>
+                    </div>
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <QInput
+                                :label="t('Entry date')"
+                                v-model="data.bookEntried"
+                                clearable
+                                clear-icon="close"
+                                mask="####-##-##"
+                                fill-mask="_"
+                            >
+                                <template #append>
+                                    <QIcon name="event" class="cursor-pointer">
+                                        <QPopupProxy
+                                            cover
+                                            transition-show="scale"
+                                            transition-hide="scale"
+                                        >
+                                            <QDate
+                                                v-model="data.bookEntried"
+                                                mask="YYYY-MM-DD"
+                                            >
+                                                <div class="row items-center justify-end">
+                                                    <QBtn
+                                                        v-close-popup
+                                                        label="Close"
+                                                        color="primary"
+                                                        flat
+                                                    />
+                                                </div>
+                                            </QDate>
+                                        </QPopupProxy>
+                                    </QIcon>
+                                </template>
+                            </QInput>
+                        </div>
+                        <div class="col">
+                            <QInput
+                                :label="t('Accounted date')"
+                                v-model="data.booked"
+                                clearable
+                                clear-icon="close"
+                                mask="####-##-##"
+                                fill-mask="_"
+                            >
+                                <template #append>
+                                    <QIcon name="event" class="cursor-pointer">
+                                        <QPopupProxy
+                                            cover
+                                            transition-show="scale"
+                                            transition-hide="scale"
+                                        >
+                                            <QDate
+                                                v-model="data.booked"
+                                                mask="YYYY-MM-DD"
+                                            >
+                                                <div class="row items-center justify-end">
+                                                    <QBtn
+                                                        v-close-popup
+                                                        label="Close"
+                                                        color="primary"
+                                                        flat
+                                                    />
+                                                </div>
+                                            </QDate>
+                                        </QPopupProxy>
+                                    </QIcon>
+                                </template>
+                            </QInput>
+                        </div>
+                    </div>
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <VnSelectFilter
+                                v-if="currenciesRef"
+                                :label="t('Currency')"
+                                v-model="data.currencyFk"
+                                :options="currencies"
+                                option-value="id"
+                                option-label="code"
+                                @input-value="currenciesRef.fetch()"
+                            />
+                        </div>
+                        <div class="col">
+                            <VnSelectFilter
+                                v-if="companiesRef"
+                                :label="t('Company')"
+                                v-model="data.companyFk"
+                                :options="companies"
+                                option-value="id"
+                                option-label="code"
+                                @input-value="companiesRef.fetch()"
+                            />
+                        </div>
+                    </div>
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <QCheckbox
+                                :label="t('invoiceIn.summary.booked')"
+                                v-model="data.isBooked"
+                            />
+                        </div>
+                        <div class="col"></div>
+                    </div>
+                </template>
+            </FormModel>
+        </QCard>
+    </div>
+    <QDialog ref="editDmsRef">
+        <QCard>
+            <QCardSection class="q-pb-none">
+                <QItem class="q-px-none">
+                    <span class="text-primary text-h6 full-width">
+                        <QIcon name="edit" class="q-mr-xs" />
+                        {{ t('Edit document') }}
+                    </span>
+                    <QBtn icon="close" flat round dense v-close-popup />
+                </QItem>
+            </QCardSection>
+            <QCardSection class="q-py-none">
+                <QItem>
+                    <QInput
+                        class="full-width q-pa-xs"
+                        :label="t('Reference')"
+                        v-model="dms.reference"
+                    />
+                    <VnSelectFilter
+                        class="full-width q-pa-xs"
+                        :label="`${t('Company')}*`"
+                        v-model="dms.companyId"
+                        :options="companies"
+                        option-value="id"
+                        option-label="code"
+                        @input-value="companiesRef.fetch()"
+                        :rules="[(val) => val || t('Required field')]"
+                    />
+                </QItem>
+                <QItem>
+                    <VnSelectFilter
+                        class="full-width q-pa-xs"
+                        :label="`${t('Warehouse')}*`"
+                        v-model="dms.warehouseId"
+                        :options="warehouses"
+                        option-value="id"
+                        option-label="name"
+                        @input-value="warehousesRef.fetch()"
+                        :rules="[(val) => val || t('Required field')]"
+                    />
+                    <VnSelectFilter
+                        class="full-width q-pa-xs"
+                        :label="`${t('Type')}*`"
+                        v-model="dms.dmsTypeId"
+                        :options="dmsTypes"
+                        option-value="id"
+                        option-label="name"
+                        @input-value="dmsTypesRef.fetch()"
+                        :rules="[(val) => val || t('Required field')]"
+                    />
+                </QItem>
+                <QItem>
+                    <QInput
+                        class="full-width q-pa-xs"
+                        type="textarea"
+                        size="lg"
+                        autogrow
+                        :label="`${t('Description')}*`"
+                        v-model="dms.description"
+                        clearable
+                        clear-icon="close"
+                        :rules="[(val) => val.length || t('Required field')]"
+                    />
+                </QItem>
+                <QItem>
+                    <QFile
+                        ref="inputFileRef"
+                        class="full-width q-pa-xs"
+                        :label="t('File')"
+                        v-model="dms.files"
+                        multiple
+                        :accept="allowedContentTypes.join(',')"
+                        clearable
+                        clear-icon="close"
+                    >
+                        <template #append>
+                            <QBtn
+                                icon="attach_file_add"
+                                flat
+                                round
+                                padding="xs"
+                                @click="inputFileRef.pickFiles()"
+                            >
+                                <QTooltip>
+                                    {{ t('Select a file') }}
+                                </QTooltip>
+                            </QBtn>
+                            <QBtn icon="info" flat round padding="xs">
+                                <QTooltip max-width="30rem">
+                                    {{
+                                        `${t(
+                                            'Allowed content types'
+                                        )}: ${allowedContentTypes.join(', ')}`
+                                    }}
+                                </QTooltip>
+                            </QBtn>
+                        </template>
+                    </QFile>
+                </QItem>
+                <QItem>
+                    <QCheckbox
+                        :label="t('Generate identifier for original file')"
+                        v-model="dms.hasFile"
+                    />
+                </QItem>
+            </QCardSection>
+            <QCardActions class="justify-end">
+                <QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
+                <QBtn :label="t('globals.save')" color="primary" @click="edit" />
+            </QCardActions>
+        </QCard>
+    </QDialog>
+    <QDialog ref="createDmsRef">
+        <QCard>
+            <QCardSection class="q-pb-none">
+                <QItem>
+                    <span class="text-primary text-h6 full-width">
+                        <QIcon name="edit" class="q-mr-xs" />
+                        {{ t('Create document') }}
+                    </span>
+                    <QBtn icon="close" flat round dense v-close-popup align="right" />
+                </QItem>
+            </QCardSection>
+            <QCardSection class="q-pb-none">
+                <QItem>
+                    <QInput
+                        class="full-width q-pa-xs"
+                        :label="t('Reference')"
+                        v-model="dms.reference"
+                    />
+                    <VnSelectFilter
+                        class="full-width q-pa-xs"
+                        :label="`${t('Company')}*`"
+                        v-model="dms.companyId"
+                        :options="companies"
+                        option-value="id"
+                        option-label="code"
+                        @input-value="companiesRef.fetch()"
+                        :rules="[(val) => val || t('Required field')]"
+                    />
+                </QItem>
+                <QItem>
+                    <VnSelectFilter
+                        class="full-width q-pa-xs"
+                        :label="`${t('Warehouse')}*`"
+                        v-model="dms.warehouseId"
+                        :options="warehouses"
+                        option-value="id"
+                        option-label="name"
+                        @input-value="warehousesRef.fetch()"
+                        :rules="[(val) => val || t('Required field')]"
+                    />
+                    <VnSelectFilter
+                        class="full-width q-pa-xs"
+                        :label="`${t('Type')}*`"
+                        v-model="dms.dmsTypeId"
+                        :options="dmsTypes"
+                        option-value="id"
+                        option-label="name"
+                        @input-value="dmsTypesRef.fetch()"
+                        :rules="[(val) => val || t('Required field')]"
+                    />
+                </QItem>
+                <QItem>
+                    <QInput
+                        class="full-width q-pa-xs"
+                        type="textarea"
+                        size="lg"
+                        autogrow
+                        :label="`${t('Description')}*`"
+                        v-model="dms.description"
+                        clearable
+                        clear-icon="close"
+                        :rules="[(val) => val.length || t('Required field')]"
+                    />
+                </QItem>
+                <QItem>
+                    <QFile
+                        ref="inputFileRef"
+                        class="full-width q-pa-xs"
+                        :label="t('File')"
+                        v-model="dms.files"
+                        multiple
+                        :accept="allowedContentTypes.join(',')"
+                        clearable
+                        clear-icon="close"
+                    >
+                        <template #append>
+                            <QBtn
+                                icon="attach_file_add"
+                                flat
+                                round
+                                padding="xs"
+                                @click="inputFileRef.pickFiles()"
+                            >
+                                <QTooltip>
+                                    {{ t('Select a file') }}
+                                </QTooltip>
+                            </QBtn>
+                            <QBtn icon="info" flat round padding="xs">
+                                <QTooltip max-width="30rem">
+                                    {{
+                                        `${t(
+                                            'Allowed content types'
+                                        )}: ${allowedContentTypes.join(', ')}`
+                                    }}
+                                </QTooltip>
+                            </QBtn>
+                        </template>
+                    </QFile>
+                </QItem>
+                <QItem>
+                    <QCheckbox
+                        :label="t('Generate identifier for original file')"
+                        v-model="dms.hasFile"
+                    />
+                </QItem>
+            </QCardSection>
+            <QCardActions align="right">
+                <QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
+                <QBtn :label="t('globals.save')" color="primary" @click="create()" />
+            </QCardActions>
+        </QCard>
+    </QDialog>
+</template>
+<style lang="scss" scoped>
+.column {
+    .q-card {
+        width: 100%;
+        max-width: 60em;
+    }
+}
+@media (max-width: $breakpoint-xs) {
+    .q-dialog {
+        .q-card {
+            &__section:not(:first-child) {
+                .q-item {
+                    flex-direction: column;
+                }
+            }
+        }
+    }
+}
+</style>
+<i18n>
+    en:
+        supplierFk: Supplier
+    es:
+        supplierFk: Proveedor
+        Supplier Ref: Ref. proveedor
+        Expedition date: Fecha expedición
+        Operation date: Fecha operación
+        Undeductible VAT: Iva no deducible
+        Document: Documento
+        Download file: Descargar archivo
+        Entry date: Fecha asiento
+        Accounted date: Fecha contable
+        Currency: Moneda
+        Company: Empresa
+        Edit document: Editar documento
+        Reference: Referencia
+        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
+        Allowed content types: Tipos de archivo permitidos
+        The company can't be empty: La empresa no puede estar vacía
+        The warehouse can't be empty: El almacén no puede estar vacío
+        The DMS Type can't be empty: El dms no puede estar vacío
+        The description can't be empty: La descripción no puede estar vacía
+        The files can't be empty: Los archivos no pueden estar vacíos
+</i18n>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInCard.vue b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
new file mode 100644
index 000000000..4d06cb41e
--- /dev/null
+++ b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
@@ -0,0 +1,91 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import InvoiceInDescriptor from './InvoiceInDescriptor.vue';
+import LeftMenu from 'components/LeftMenu.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import { useArrayData } from 'src/composables/useArrayData';
+import { onMounted, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+const stateStore = useStateStore();
+const { t } = useI18n();
+const route = useRoute();
+
+const filter = {
+    include: [
+        {
+            relation: 'supplier',
+            scope: {
+                include: {
+                    relation: 'contacts',
+                    scope: {
+                        where: {
+                            email: { neq: null },
+                        },
+                    },
+                },
+            },
+        },
+        {
+            relation: 'invoiceInDueDay',
+        },
+        {
+            relation: 'company',
+        },
+        {
+            relation: 'currency',
+        },
+    ],
+};
+const arrayData = useArrayData('InvoiceIn', {
+    url: `InvoiceIns/${route.params.id}`,
+    filter,
+});
+
+onMounted(async () => {
+    await arrayData.fetch({ append: false });
+    watch(
+        () => route.params.id,
+        async (newId, oldId) => {
+            if (newId) {
+                arrayData.store.url = `InvoiceIns/${newId}`;
+                await arrayData.fetch({ append: false });
+            }
+        }
+    );
+});
+</script>
+<template>
+    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
+        <VnSearchbar
+            data-key="InvoiceInList"
+            url="InvoiceIns/filter"
+            :label="t('Search invoice')"
+            :info="t('You can search by invoice reference')"
+        />
+    </Teleport>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
+            <InvoiceInDescriptor />
+            <QSeparator />
+            <LeftMenu source="card" />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage>
+            <QToolbar class="bg-vn-dark justify-end">
+                <div id="st-data"></div>
+                <QSpace />
+                <div id="st-actions"></div>
+            </QToolbar>
+            <div class="q-pa-md"><RouterView></RouterView></div>
+        </QPage>
+    </QPageContainer>
+</template>
+
+<i18n>
+    es:
+        Search invoice: Buscar factura emitida
+        You can search by invoice reference: Puedes buscar por referencia de la factura
+    </i18n>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
new file mode 100644
index 000000000..f37852fbd
--- /dev/null
+++ b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
@@ -0,0 +1,108 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { toCurrency, toDate } from 'src/filters';
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import useCardDescription from 'src/composables/useCardDescription';
+import FetchData from 'src/components/FetchData.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const { t } = useI18n();
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+const totalAmount = ref([]);
+// Cuando Carlossa acabe de crear la lógica de card, usar store arrayData en lugar de hacer el fetch en el descriptor
+const filter = {
+    include: [
+        {
+            relation: 'supplier',
+            scope: {
+                include: {
+                    relation: 'contacts',
+                    scope: {
+                        where: {
+                            email: { neq: null },
+                        },
+                    },
+                },
+            },
+        },
+        {
+            relation: 'invoiceInDueDay',
+        },
+        {
+            relation: 'company',
+        },
+        {
+            relation: 'currency',
+        },
+    ],
+};
+
+const data = ref(useCardDescription());
+function setData(entity) {
+    data.value = useCardDescription(entity.supplierRef, entity.id);
+}
+</script>
+
+<template>
+    <!--Refactor para añadir en el arrayData-->
+    <FetchData
+        :url="`InvoiceIns/${entityId}/getTotals`"
+        @on-fetch="
+            (data) => {
+                totalAmount = data.totalDueDay;
+            }
+        "
+        auto-load
+    />
+    <CardDescriptor
+        module="InvoiceIn"
+        :url="`InvoiceIns/${entityId}`"
+        :filter="filter"
+        :title="data.title"
+        :subtitle="data.subtitle"
+        @on-fetch="setData"
+    >
+        <template #body="{ entity }">
+            <VnLv :label="t('invoiceIn.card.issued')" :value="toDate(entity.issued)" />
+            <VnLv :label="t('invoiceIn.summary.booked')" :value="toDate(entity.booked)" />
+            <VnLv :label="t('invoiceIn.card.amount')" :value="toCurrency(totalAmount)" />
+            <VnLv
+                :label="t('invoiceIn.summary.supplier')"
+                :value="entity.supplier?.nickname"
+            />
+        </template>
+        <template #actions="{ entity }">
+            <QCardActions>
+                <!--Sección proveedores no disponible-->
+                <!--Sección entradas no disponible-->
+                <QBtn
+                    size="md"
+                    icon="vn:ticket"
+                    color="primary"
+                    :to="{
+                        name: 'InvoiceInList',
+                        query: {
+                            params: JSON.stringify({ supplierFk: entity.supplierFk }),
+                        },
+                    }"
+                >
+                    <QTooltip>{{ t('invoiceOut.card.ticketList') }}</QTooltip>
+                </QBtn>
+            </QCardActions>
+        </template>
+    </CardDescriptor>
+</template>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue b/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
new file mode 100644
index 000000000..d657b09d0
--- /dev/null
+++ b/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
@@ -0,0 +1,290 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { toDate } from 'src/filters';
+import { useArrayData } from 'src/composables/useArrayData';
+import CrudModel from 'src/components/CrudModel.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+const arrayData = useArrayData('InvoiceIn');
+const invoiceIn = computed(() => arrayData.store.data);
+
+const rowsSelected = ref([]);
+const banks = ref([]);
+const invoiceInFormRef = ref();
+
+const filter = {
+    where: {
+        invoiceInFk: route.params.id,
+    },
+};
+
+const isNotEuro = (code) => code != 'EUR';
+
+const columns = computed(() => [
+    {
+        name: 'duedate',
+        label: t('Date'),
+        field: (row) => toDate(row.dueDated),
+        sortable: true,
+        tabIndex: 1,
+        align: 'left',
+    },
+    {
+        name: 'bank',
+        label: t('Bank'),
+        field: (row) => row.bankFk,
+        options: banks.value,
+        model: 'bankFk',
+        optionValue: 'id',
+        optionLabel: 'bank',
+        sortable: true,
+        tabIndex: 2,
+        align: 'left',
+    },
+    {
+        name: 'amount',
+        label: t('Amount'),
+        field: (row) => row.amount,
+        sortable: true,
+        tabIndex: 3,
+        align: 'left',
+    },
+    {
+        name: 'foreignvalue',
+        label: t('Foreign value'),
+        field: (row) => row.foreignValue,
+        sortable: true,
+        tabIndex: 4,
+        align: 'left',
+    },
+]);
+</script>
+<template>
+    <FetchData url="Banks" auto-load limit="30" @on-fetch="(data) => (banks = data)" />
+    <CrudModel
+        v-if="invoiceIn"
+        ref="invoiceInFormRef"
+        data-key="InvoiceInDueDays"
+        url="InvoiceInDueDays"
+        :filter="filter"
+        auto-load
+        :data-required="{ invoiceInFk: route.params.id }"
+        v-model:selected="rowsSelected"
+    >
+        <template #body="{ rows }">
+            <QTable
+                v-model:selected="rowsSelected"
+                selection="multiple"
+                :columns="columns"
+                :rows="rows"
+                row-key="$index"
+                hide-pagination
+                :grid="$q.screen.lt.sm"
+            >
+                <template #body-cell-duedate="{ row }">
+                    <QTd>
+                        <QInput
+                            v-model="row.dueDated"
+                            mask="date"
+                            placeholder="yyyy/mm/dd"
+                            clearable
+                            clear-icon="close"
+                        >
+                            <template #append>
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <QDate v-model="row.dueDated" landscape>
+                                            <div
+                                                class="row items-center justify-end q-gutter-sm"
+                                            >
+                                                <QBtn
+                                                    :label="t('globals.cancel')"
+                                                    color="primary"
+                                                    flat
+                                                    v-close-popup
+                                                />
+                                                <QBtn
+                                                    :label="t('globals.confirm')"
+                                                    color="primary"
+                                                    flat
+                                                    v-close-popup
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
+                            </template>
+                        </QInput>
+                    </QTd>
+                </template>
+                <template #body-cell-bank="{ row, col }">
+                    <QTd>
+                        <VnSelectFilter
+                            v-model="row[col.model]"
+                            :options="col.options"
+                            :option-value="col.optionValue"
+                            :option-label="col.optionLabel"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{
+                                            `${scope.opt.id}: ${scope.opt.bank}`
+                                        }}</QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelectFilter>
+                    </QTd>
+                </template>
+                <template #body-cell-amount="{ row }">
+                    <QTd>
+                        <QInput v-model="row.amount" clearable clear-icon="close" />
+                    </QTd>
+                </template>
+                <template #body-cell-foreignvalue="{ row }">
+                    <QTd>
+                        <QInput
+                            :class="{
+                                'no-pointer-events': !isNotEuro(invoiceIn.currency.code),
+                            }"
+                            :disable="!isNotEuro(invoiceIn.currency.code)"
+                            v-model="row.foreignValue"
+                            clearable
+                            clear-icon="close"
+                        />
+                    </QTd>
+                </template>
+                <template #item="props">
+                    <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
+                        <QCard>
+                            <QCardSection>
+                                <QCheckbox v-model="props.selected" dense />
+                            </QCardSection>
+                            <QSeparator />
+                            <QList>
+                                <QItem>
+                                    <QInput
+                                        class="full-width"
+                                        :label="t('Date')"
+                                        v-model="props.row.dueDated"
+                                        mask="date"
+                                        placeholder="yyyy/mm/dd"
+                                        clearable
+                                        clear-icon="close"
+                                    >
+                                        <template #append>
+                                            <QIcon name="event" class="cursor-pointer">
+                                                <QPopupProxy
+                                                    cover
+                                                    transition-show="scale"
+                                                    transition-hide="scale"
+                                                >
+                                                    <QDate
+                                                        v-model="props.row.dueDated"
+                                                        landscape
+                                                    >
+                                                        <div
+                                                            class="row items-center justify-end q-gutter-sm"
+                                                        >
+                                                            <QBtn
+                                                                :label="
+                                                                    t('globals.cancel')
+                                                                "
+                                                                color="primary"
+                                                                flat
+                                                                v-close-popup
+                                                            />
+                                                            <QBtn
+                                                                :label="
+                                                                    t('globals.confirm')
+                                                                "
+                                                                color="primary"
+                                                                flat
+                                                                v-close-popup
+                                                            />
+                                                        </div>
+                                                    </QDate>
+                                                </QPopupProxy>
+                                            </QIcon>
+                                        </template>
+                                    </QInput>
+                                </QItem>
+                                <QItem>
+                                    <VnSelectFilter
+                                        :label="t('Bank')"
+                                        class="full-width"
+                                        v-model="props.row['bankFk']"
+                                        :options="banks"
+                                        option-value="id"
+                                        option-label="bank"
+                                    >
+                                        <template #option="scope">
+                                            <QItem v-bind="scope.itemProps">
+                                                <QItemSection>
+                                                    <QItemLabel>{{
+                                                        `${scope.opt.id}: ${scope.opt.bank}`
+                                                    }}</QItemLabel>
+                                                </QItemSection>
+                                            </QItem>
+                                        </template>
+                                    </VnSelectFilter>
+                                </QItem>
+                                <QItem>
+                                    <QInput
+                                        :label="t('Amount')"
+                                        class="full-width"
+                                        v-model="props.row.amount"
+                                        clearable
+                                        clear-icon="close"
+                                    />
+                                </QItem>
+                                <QItem>
+                                    <QInput
+                                        :label="t('Foreign value')"
+                                        class="full-width"
+                                        :class="{
+                                            'no-pointer-events': !isNotEuro(
+                                                invoiceIn.currency.code
+                                            ),
+                                        }"
+                                        :disable="!isNotEuro(invoiceIn.currency.code)"
+                                        v-model="props.row.foreignValue"
+                                        clearable
+                                        clear-icon="close"
+                                    />
+                                </QItem>
+                            </QList>
+                        </QCard>
+                    </div>
+                </template>
+            </QTable>
+        </template>
+    </CrudModel>
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <QBtn
+            color="primary"
+            icon="add"
+            size="lg"
+            round
+            @click="invoiceInFormRef.insert()"
+        />
+    </QPageSticky>
+</template>
+<style lang="scss" scoped></style>
+<i18n>
+    es:
+        Date: Fecha
+        Bank: Caja
+        Amount: Importe
+        Foreign value: Divisa
+</i18n>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue b/src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue
new file mode 100644
index 000000000..58f521534
--- /dev/null
+++ b/src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue
@@ -0,0 +1,280 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { toCurrency } from 'src/filters';
+import CrudModel from 'src/components/CrudModel.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const invoceInIntrastat = ref([]);
+const amountTotal = computed(() => getTotal('amount'));
+const netTotal = computed(() => getTotal('net'));
+const stemsTotal = computed(() => getTotal('stems'));
+const rowsSelected = ref([]);
+const countries = ref([]);
+const intrastats = ref([]);
+const invoiceInFormRef = ref();
+
+const filter = {
+    where: {
+        invoiceInFk: route.params.id,
+    },
+};
+
+const columns = computed(() => [
+    {
+        name: 'code',
+        label: t('Code'),
+        field: (row) => row.intrastatFk,
+        options: intrastats.value,
+        model: 'intrastatFk',
+        optionValue: 'id',
+        optionLabel: 'description',
+        sortable: true,
+        tabIndex: 1,
+        align: 'left',
+    },
+    {
+        name: 'amount',
+        label: t('amount'),
+        field: (row) => row.amount,
+        sortable: true,
+        tabIndex: 2,
+        align: 'left',
+    },
+    {
+        name: 'net',
+        label: t('net'),
+        field: (row) => row.net,
+        sortable: true,
+        tabIndex: 3,
+        align: 'left',
+    },
+    {
+        name: 'stems',
+        label: t('stems'),
+        field: (row) => row.stems,
+        sortable: true,
+        tabIndex: 4,
+        align: 'left',
+    },
+    {
+        name: 'country',
+        label: t('country'),
+        field: (row) => row.countryFk,
+        options: countries.value,
+        model: 'countryFk',
+        optionValue: 'id',
+        optionLabel: 'code',
+        sortable: true,
+        tabIndex: 5,
+        align: 'left',
+    },
+]);
+
+function getTotal(type) {
+    if (!invoceInIntrastat.value.length) return 0.0;
+    return invoceInIntrastat.value.reduce(
+        (total, intrastat) => total + intrastat[type],
+        0.0
+    );
+}
+</script>
+<template>
+    <FetchData
+        url="Countries"
+        auto-load
+        @on-fetch="(data) => (countries = data)"
+        sort-by="country"
+    />
+    <FetchData
+        url="Intrastats"
+        sort-by="id"
+        auto-load
+        @on-fetch="(data) => (intrastats = data)"
+    />
+    <div class="invoiceIn-intrastat">
+        <QCard v-if="invoceInIntrastat.length" class="full-width q-mb-md q-pa-sm">
+            <QItem class="justify-end">
+                <div>
+                    <QItemLabel>
+                        <VnLv
+                            :label="t('Total amount')"
+                            :value="toCurrency(amountTotal)"
+                        />
+                    </QItemLabel>
+                    <QItemLabel>
+                        <VnLv :label="t('Total net')" :value="netTotal" />
+                    </QItemLabel>
+                    <QItemLabel>
+                        <VnLv :label="t('Total stems')" :value="stemsTotal" />
+                    </QItemLabel>
+                </div>
+            </QItem>
+        </QCard>
+        <CrudModel
+            ref="invoiceInFormRef"
+            data-key="InvoiceInIntrastats"
+            url="InvoiceInIntrastats"
+            auto-load
+            :data-required="{ invoiceInFk: route.params.id }"
+            :filter="filter"
+            v-model:selected="rowsSelected"
+            @on-fetch="(data) => (invoceInIntrastat = data)"
+        >
+            <template #body="{ rows }">
+                <QTable
+                    v-model:selected="rowsSelected"
+                    selection="multiple"
+                    :columns="columns"
+                    :rows="rows"
+                    row-key="$index"
+                    hide-pagination
+                    :grid="$q.screen.lt.sm"
+                >
+                    <template #body-cell="{ row, col }">
+                        <QTd>
+                            <QInput
+                                v-model="row[col.name]"
+                                clearable
+                                clear-icon="close"
+                            />
+                        </QTd>
+                    </template>
+                    <template #body-cell-code="{ row, col }">
+                        <QTd>
+                            <VnSelectFilter
+                                v-model="row[col.model]"
+                                :options="col.options"
+                                option-value="id"
+                                option-label="description"
+                                :filter-options="['id', 'description']"
+                            >
+                                <template #option="scope">
+                                    <QItem v-bind="scope.itemProps">
+                                        {{ `${scope.opt.id}: ${scope.opt.description}` }}
+                                    </QItem>
+                                </template>
+                            </VnSelectFilter>
+                        </QTd>
+                    </template>
+                    <template #body-cell-country="{ row, col }">
+                        <QTd>
+                            <VnSelectFilter
+                                v-model="row[col.model]"
+                                :options="col.options"
+                                option-value="id"
+                                option-label="code"
+                            />
+                        </QTd>
+                    </template>
+                    <template #item="props">
+                        <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
+                            <QCard>
+                                <QCardSection>
+                                    <QCheckbox v-model="props.selected" dense />
+                                </QCardSection>
+                                <QSeparator />
+                                <QList>
+                                    <QItem>
+                                        <VnSelectFilter
+                                            :label="t('code')"
+                                            class="full-width"
+                                            v-model="props.row['intrastatFk']"
+                                            :options="intrastats"
+                                            option-value="id"
+                                            option-label="description"
+                                            :filter-options="['id', 'description']"
+                                        >
+                                            <template #option="scope">
+                                                <QItem v-bind="scope.itemProps">
+                                                    {{
+                                                        `${scope.opt.id}: ${scope.opt.description}`
+                                                    }}
+                                                </QItem>
+                                            </template>
+                                        </VnSelectFilter>
+                                    </QItem>
+                                    <QItem
+                                        v-for="(value, index) of [
+                                            'amount',
+                                            'net',
+                                            'stems',
+                                        ]"
+                                        :key="index"
+                                    >
+                                        <QInput
+                                            :label="t(value)"
+                                            class="full-width"
+                                            v-model="props.row[value]"
+                                            clearable
+                                            clear-icon="close"
+                                        />
+                                    </QItem>
+                                    <QItem>
+                                        <VnSelectFilter
+                                            :label="t('country')"
+                                            class="full-width"
+                                            v-model="props.row['countryFk']"
+                                            :options="countries"
+                                            option-value="id"
+                                            option-label="code"
+                                        />
+                                    </QItem>
+                                </QList>
+                            </QCard>
+                        </div>
+                    </template>
+                </QTable>
+            </template>
+        </CrudModel>
+    </div>
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <QBtn
+            color="primary"
+            icon="add"
+            size="lg"
+            round
+            @click="invoiceInFormRef.insert()"
+        />
+    </QPageSticky>
+</template>
+<style lang="scss">
+.invoiceIn-intrastat {
+    > .q-card {
+        .vn-label-value {
+            display: flex;
+            gap: 1em;
+
+            .label {
+                flex: 1;
+            }
+            .value {
+                flex: 0.5;
+            }
+        }
+    }
+}
+</style>
+<style lang="scss" scoped></style>
+<i18n>
+    en:
+        amount: Amount
+        net: Net
+        stems: Stems
+        country: Country
+    es:
+        Code: Código
+        amount: Cantidad
+        net: Neto
+        stems: Tallos
+        country: País
+        Total amount: Total importe
+        Total net: Total neto
+        Total stems: Total tallos
+</i18n>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
new file mode 100644
index 000000000..79cdab02d
--- /dev/null
+++ b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
@@ -0,0 +1,409 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { toCurrency, toDate } from 'src/filters';
+import { getUrl } from 'src/composables/getUrl';
+import { downloadFile } from 'src/composables/downloadFile';
+
+import CardSummary from 'components/ui/CardSummary.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+
+onMounted(async () => {
+    salixUrl.value = await getUrl('');
+    invoiceInUrl.value = salixUrl.value + `invoiceIn/${entityId.value}/`;
+});
+
+const route = useRoute();
+const { t } = useI18n();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const entityId = computed(() => $props.id || route.params.id);
+
+const salixUrl = ref();
+const invoiceInUrl = ref();
+const amountsNotMatch = ref(null);
+
+const vatColumns = ref([
+    {
+        name: 'expense',
+        label: 'invoiceIn.summary.expense',
+        field: (row) => row.expenseFk,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'landed',
+        label: 'invoiceIn.summary.taxableBase',
+        field: (row) => row.taxableBase,
+        format: (value) => toCurrency(value),
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'vat',
+        label: 'invoiceIn.summary.sageVat',
+        field: (row) => row.taxTypeSage?.vat,
+        format: (value) => value,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'transaction',
+        label: 'invoiceIn.summary.sageTransaction',
+        field: (row) => row.transactionTypeSage?.transaction,
+        format: (value) => value,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'rate',
+        label: 'invoiceIn.summary.rate',
+        field: (row) => row.taxRate,
+        format: (value) => value,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'currency',
+        label: 'invoiceIn.summary.currency',
+        field: (row) => row.foreignValue,
+        format: (value) => toCurrency(value),
+        sortable: true,
+        align: 'left',
+    },
+]);
+
+const dueDayColumns = ref([
+    {
+        name: 'date',
+        label: 'invoiceIn.summary.dueDay',
+        field: (row) => toDate(row.dueDated),
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'bank',
+        label: 'invoiceIn.summary.bank',
+        field: (row) => row.bank.bank,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'amount',
+        label: 'invoiceIn.summary.amount',
+        field: (row) => row.amount,
+        format: (value) => toCurrency(value),
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'landed',
+        label: 'invoiceIn.summary.foreignValue',
+        field: (row) => row.foreignValue,
+        format: (value) => value,
+        sortable: true,
+        align: 'left',
+    },
+]);
+
+const intrastatColumns = ref([
+    {
+        name: 'code',
+        label: 'invoiceIn.summary.code',
+        field: (row) => {
+            return `${row.intrastat.id}: ${row.intrastat?.description}`;
+        },
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'amount',
+        label: 'invoiceIn.summary.amount',
+        field: (row) => toCurrency(row.amount),
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'net',
+        label: 'invoiceIn.summary.net',
+        field: (row) => row.net,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'amount',
+        label: 'invoiceIn.summary.stems',
+        field: (row) => row.stems,
+        format: (value) => value,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'landed',
+        label: 'invoiceIn.summary.country',
+        field: (row) => row.country?.code,
+        format: (value) => value,
+        sortable: true,
+        align: 'left',
+    },
+]);
+
+function setAmountNotMatch(entity) {
+    if (!entity) return false;
+
+    const total = entity.totals;
+
+    amountsNotMatch.value =
+        total.totalDueDay != total.totalTaxableBase &&
+        total.totalDueDay != total.totalVat;
+}
+</script>
+
+<template>
+    <CardSummary
+        ref="summary"
+        :url="`InvoiceIns/${entityId}/summary`"
+        @on-fetch="(data) => setAmountNotMatch(data)"
+    >
+        <template #header="{ entity: invoiceIn }">
+            <div>{{ invoiceIn.id }} - {{ invoiceIn.supplier.name }}</div>
+        </template>
+        <template #body="{ entity: invoiceIn }">
+            <QCard class="vn-one">
+                <QCardSection class="q-pa-none">
+                    <a class="header" :href="`#/invoice-in/${entityId}/basic-data`">
+                        {{ t('invoiceIn.pageTitles.basicData') }}
+                        <QIcon name="open_in_new" color="primary" />
+                    </a>
+                    <QBtn
+                        class="q-ml-sm"
+                        padding="xs"
+                        flat
+                        color="primary"
+                        round
+                        icon="cloud_download"
+                        @click.stop="downloadFile(invoiceIn.dmsFk)"
+                    >
+                        <QTooltip>
+                            {{ t('components.smartCard.downloadFile') }}
+                        </QTooltip>
+                    </QBtn>
+                </QCardSection>
+                <VnLv
+                    :label="t('invoiceIn.summary.supplier')"
+                    :value="invoiceIn.supplier.name"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.supplierRef')"
+                    :value="invoiceIn.supplierRef"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.currency')"
+                    :value="invoiceIn.currency.code"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.docNumber')"
+                    :value="`${invoiceIn.serial}/${invoiceIn.serialNumber}`"
+                />
+            </QCard>
+            <QCard class="vn-one">
+                <QCardSection class="q-pa-none">
+                    <a class="header" :href="`#/invoice-in/${entityId}/basic-data`">
+                        {{ t('invoiceIn.pageTitles.basicData') }}
+                        <QIcon name="open_in_new" color="primary" />
+                    </a>
+                    <QBtn
+                        class="q-ml-sm"
+                        padding="xs"
+                        flat
+                        color="primary"
+                        round
+                        icon="cloud_download"
+                        @click.stop="downloadFile(invoiceIn.dmsFk)"
+                    >
+                        <QTooltip>
+                            {{ t('components.smartCard.downloadFile') }}
+                        </QTooltip>
+                    </QBtn>
+                </QCardSection>
+                <VnLv
+                    :label="t('invoiceIn.summary.issued')"
+                    :value="toDate(invoiceIn.issued)"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.operated')"
+                    :value="toDate(invoiceIn.operated)"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.bookEntried')"
+                    :value="toDate(invoiceIn.bookEntried)"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.bookedDate')"
+                    :value="toDate(invoiceIn.booked)"
+                />
+            </QCard>
+            <QCard class="vn-one">
+                <QCardSection class="q-pa-none">
+                    <a class="header" :href="`#/invoice-in/${entityId}/basic-data`">
+                        {{ t('invoiceIn.pageTitles.basicData') }}
+                        <QIcon name="open_in_new" color="primary" />
+                    </a>
+                    <QBtn
+                        class="q-ml-sm"
+                        padding="xs"
+                        flat
+                        color="primary"
+                        round
+                        icon="cloud_download"
+                        @click.stop="downloadFile(invoiceIn.dmsFk)"
+                    >
+                        <QTooltip>
+                            {{ t('components.smartCard.downloadFile') }}
+                        </QTooltip>
+                    </QBtn>
+                </QCardSection>
+                <QCardSection class="q-pa-none">
+                    <div class="bordered q-px-sm">
+                        <VnLv
+                            :label="t('invoiceIn.summary.taxableBase')"
+                            :value="toCurrency(invoiceIn.totals.totalTaxableBase)"
+                        />
+                        <VnLv
+                            label="Total"
+                            :value="toCurrency(invoiceIn.totals.totalVat)"
+                        />
+                        <VnLv :label="t('invoiceIn.summary.dueTotal')">
+                            <template #value>
+                                <QChip
+                                    dense
+                                    class="q-pa-xs"
+                                    :color="amountsNotMatch ? 'negative' : 'transparent'"
+                                    :title="
+                                        amountsNotMatch
+                                            ? t('invoiceIn.summary.noMatch')
+                                            : t('invoiceIn.summary.dueTotal')
+                                    "
+                                >
+                                    {{ toCurrency(invoiceIn.totals.totalDueDay) }}
+                                </QChip>
+                            </template>
+                        </VnLv>
+                    </div>
+                </QCardSection>
+            </QCard>
+            <QCard class="q-mb-md">
+                <QCardSection class="q-pa-none">
+                    <a class="header" :href="`#/invoice-in/${entityId}/basic-data`">
+                        {{ t('invoiceIn.pageTitles.basicData') }}
+                        <QIcon name="open_in_new" color="primary" />
+                    </a>
+                    <QBtn
+                        class="q-ml-sm"
+                        padding="xs"
+                        flat
+                        color="primary"
+                        round
+                        icon="cloud_download"
+                        @click.stop="downloadFile(invoiceIn.dmsFk)"
+                    >
+                        <QTooltip>
+                            {{ t('components.smartCard.downloadFile') }}
+                        </QTooltip>
+                    </QBtn>
+                </QCardSection>
+                <VnLv
+                    :label="t('invoiceIn.summary.sage')"
+                    :value="invoiceIn.sageWithholding.withholding"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.vat')"
+                    :value="invoiceIn.expenseDeductible?.name"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.company')"
+                    :value="invoiceIn.company.code"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.booked')"
+                    :value="invoiceIn.isBooked"
+                />
+            </QCard>
+            <QCard v-if="invoiceIn.invoiceInTax.length" class="vn-three">
+                <a class="header">
+                    {{ t('invoiceIn.card.vat') }}
+                </a>
+                <QTable
+                    :columns="vatColumns"
+                    :rows="invoiceIn.invoiceInTax"
+                    flat
+                    hide-pagination
+                >
+                    <template #header="props">
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
+                    </template>
+                </QTable>
+            </QCard>
+            <QCard v-if="invoiceIn.invoiceInDueDay.length" class="vn-two">
+                <div class="header">
+                    {{ t('invoiceIn.card.dueDay') }}
+                </div>
+                <QTable
+                    :columns="dueDayColumns"
+                    :rows="invoiceIn.invoiceInDueDay"
+                    flat
+                    hide-pagination
+                >
+                    <template #header="props">
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
+                    </template>
+                </QTable>
+            </QCard>
+            <QCard v-if="invoiceIn.invoiceInIntrastat.length">
+                <div class="header">
+                    {{ t('invoiceIn.card.intrastat') }}
+                </div>
+                <QTable
+                    :columns="intrastatColumns"
+                    :rows="invoiceIn.invoiceInIntrastat"
+                    flat
+                    hide-pagination
+                >
+                    <template #header="props">
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
+                    </template>
+                </QTable>
+            </QCard>
+        </template>
+    </CardSummary>
+</template>
+<style lang="scss" scoped>
+.bordered {
+    border: 1px solid var(--vn-text);
+    width: 16em;
+}
+</style>
+<i18n>
+    es:
+        Search invoice: Buscar factura emitida
+        You can search by invoice reference: Puedes buscar por referencia de la factura
+</i18n>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInSummaryDialog.vue b/src/pages/InvoiceIn/Card/InvoiceInSummaryDialog.vue
new file mode 100644
index 000000000..8657bf6ac
--- /dev/null
+++ b/src/pages/InvoiceIn/Card/InvoiceInSummaryDialog.vue
@@ -0,0 +1,29 @@
+<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>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInVat.vue b/src/pages/InvoiceIn/Card/InvoiceInVat.vue
new file mode 100644
index 000000000..8a83dfbd4
--- /dev/null
+++ b/src/pages/InvoiceIn/Card/InvoiceInVat.vue
@@ -0,0 +1,500 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import axios from 'axios';
+import { useArrayData } from 'src/composables/useArrayData';
+import { toCurrency } from 'src/filters';
+import FetchData from 'src/components/FetchData.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import CrudModel from 'src/components/CrudModel.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+const quasar = useQuasar();
+
+const arrayData = useArrayData('InvoiceIn');
+const invoiceIn = computed(() => arrayData.store.data);
+
+const expenses = ref([]);
+const sageTaxTypes = ref([]);
+const sageTransactionTypes = ref([]);
+const rowsSelected = ref([]);
+const newExpense = ref({
+    code: undefined,
+    isWithheld: false,
+    description: undefined,
+});
+
+const invoiceInFormRef = ref();
+const expensesRef = ref();
+const newExpenseRef = ref();
+
+const columns = computed(() => [
+    {
+        name: 'expense',
+        label: t('Expense'),
+        field: (row) => row.expenseFk,
+        options: expenses.value,
+        model: 'expenseFk',
+        optionValue: 'id',
+        optionLabel: 'id',
+        sortable: true,
+        tabIndex: 1,
+        align: 'left',
+    },
+    {
+        name: 'taxablebase',
+        label: t('Taxable base'),
+        field: (row) => toCurrency(row.taxableBase),
+        model: 'taxableBase',
+        sortable: true,
+        tabIndex: 2,
+        align: 'left',
+    },
+    {
+        name: 'sageiva',
+        label: t('Sage iva'),
+        field: (row) => row.taxTypeSageFk,
+        options: sageTaxTypes.value,
+        model: 'taxTypeSageFk',
+        optionValue: 'id',
+        optionLabel: 'vat',
+        sortable: true,
+        tabindex: 3,
+        align: 'left',
+    },
+    {
+        name: 'sagetransaction',
+        label: t('Sage transaction'),
+        field: (row) => row.transactionTypeSageFk,
+        options: sageTransactionTypes.value,
+        model: 'transactionTypeSageFk',
+        optionValue: 'id',
+        optionLabel: 'transaction',
+        sortable: true,
+        tabIndex: 4,
+        align: 'left',
+    },
+    {
+        name: 'rate',
+        label: t('Rate'),
+        sortable: true,
+        tabIndex: 5,
+        field: (row) => taxRate(row, row.taxTypeSageFk),
+        align: 'left',
+    },
+    {
+        name: 'foreignvalue',
+        label: t('Foreign value'),
+        sortable: true,
+        tabIndex: 6,
+        field: (row) => row.foreignValue,
+        align: 'left',
+    },
+]);
+
+const filter = {
+    fields: [
+        'id',
+        'invoiceInFk',
+        'taxableBase',
+        'expenseFk',
+        'foreignValue',
+        'taxTypeSageFk',
+        'transactionTypeSageFk',
+    ],
+    where: {
+        invoiceInFk: route.params.id,
+    },
+};
+
+const isNotEuro = (code) => code != 'EUR';
+
+function taxRate(invoiceInTax, sageTaxTypeId) {
+    const taxRateSelection = sageTaxTypes.value.find(
+        (transaction) => transaction.id == sageTaxTypeId
+    );
+    const taxTypeSage = taxRateSelection && taxRateSelection.rate;
+    const taxableBase = invoiceInTax && invoiceInTax.taxableBase;
+    if (taxTypeSage && taxableBase) {
+        return toCurrency((taxTypeSage / 100) * taxableBase);
+    }
+    return toCurrency(0);
+}
+
+async function addExpense() {
+    try {
+        if (!newExpense.value.code) throw new Error(t(`The code can't be empty`));
+        if (isNaN(newExpense.value.code))
+            throw new Error(t(`The code have to be a number`));
+        if (!newExpense.value.description)
+            throw new Error(t(`The description can't be empty`));
+
+        const data = [
+            {
+                id: newExpense.value.code,
+                isWithheld: newExpense.value.isWithheld,
+                name: newExpense.value.description,
+            },
+        ];
+
+        await axios.post(`Expenses`, data);
+        await expensesRef.value.fetch();
+        quasar.notify({
+            type: 'positive',
+            message: t('globals.dataSaved'),
+        });
+    } catch (error) {
+        quasar.notify({
+            type: 'negative',
+            message: t(`${error}`),
+        });
+    }
+}
+</script>
+<template>
+    <FetchData
+        ref="expensesRef"
+        url="Expenses"
+        auto-load
+        @on-fetch="(data) => (expenses = data)"
+    />
+    <FetchData url="SageTaxTypes" auto-load @on-fetch="(data) => (sageTaxTypes = data)" />
+    <FetchData
+        url="sageTransactionTypes"
+        auto-load
+        @on-fetch="(data) => (sageTransactionTypes = data)"
+    />
+    <CrudModel
+        ref="invoiceInFormRef"
+        v-if="invoiceIn"
+        data-key="InvoiceInTaxes"
+        url="InvoiceInTaxes"
+        :filter="filter"
+        :data-required="{ invoiceInFk: route.params.id }"
+        auto-load
+        v-model:selected="rowsSelected"
+    >
+        <template #body="{ rows }">
+            <QTable
+                v-model:selected="rowsSelected"
+                selection="multiple"
+                :columns="columns"
+                :rows="rows"
+                row-key="$index"
+                hide-pagination
+                :grid="$q.screen.lt.sm"
+                :pagination="{ rowsPerPage: 0 }"
+            >
+                <template #body-cell-expense="{ row, col }">
+                    <QTd auto-width>
+                        <VnSelectFilter
+                            v-model="row[col.model]"
+                            :options="col.options"
+                            :option-value="col.optionValue"
+                            :option-label="col.optionLabel"
+                            :filter-options="['id', 'name']"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    {{ `${scope.opt.id}: ${scope.opt.name}` }}
+                                </QItem>
+                            </template>
+                            <template #append>
+                                <QIcon
+                                    name="close"
+                                    @click.stop="value = null"
+                                    class="cursor-pointer"
+                                />
+                                <QBtn
+                                    padding="xs"
+                                    round
+                                    flat
+                                    icon="add_circle"
+                                    @click.stop="newExpenseRef.show()"
+                                >
+                                    <QTooltip>
+                                        {{ t('Create expense') }}
+                                    </QTooltip>
+                                </QBtn>
+                            </template>
+                        </VnSelectFilter>
+                    </QTd>
+                </template>
+                <template #body-cell-taxablebase="{ row }">
+                    <QTd>
+                        <QInput
+                            :class="{
+                                'no-pointer-events': isNotEuro(invoiceIn.currency.code),
+                            }"
+                            :disable="isNotEuro(invoiceIn.currency.code)"
+                            label=""
+                            clear-icon="close"
+                            v-model="row.taxableBase"
+                            clearable
+                        >
+                            <template #prepend>
+                                <QIcon name="euro" size="xs" flat />
+                            </template>
+                        </QInput>
+                    </QTd>
+                </template>
+                <template #body-cell-sageiva="{ row, col }">
+                    <QTd>
+                        <VnSelectFilter
+                            v-model="row[col.model]"
+                            :options="col.options"
+                            :option-value="col.optionValue"
+                            :option-label="col.optionLabel"
+                            :filter-options="['id', 'vat']"
+                            :autofocus="col.tabIndex == 1"
+                            input-debounce="0"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{ scope.opt.vat }}</QItemLabel>
+                                        <QItemLabel>
+                                            {{ `#${scope.opt.id}` }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelectFilter>
+                    </QTd>
+                </template>
+                <template #body-cell-sagetransaction="{ row, col }">
+                    <QTd>
+                        <VnSelectFilter
+                            v-model="row[col.model]"
+                            :options="col.options"
+                            :option-value="col.optionValue"
+                            :option-label="col.optionLabel"
+                            :filter-options="['id', 'transaction']"
+                            :autofocus="col.tabIndex == 1"
+                            input-debounce="0"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{
+                                            scope.opt.transaction
+                                        }}</QItemLabel>
+                                        <QItemLabel>
+                                            {{ `#${scope.opt.id}` }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelectFilter>
+                    </QTd>
+                </template>
+                <template #body-cell-foreignvalue="{ row }">
+                    <QTd>
+                        <QInput
+                            :class="{
+                                'no-pointer-events': !isNotEuro(invoiceIn.currency.code),
+                            }"
+                            :disable="!isNotEuro(invoiceIn.currency.code)"
+                            v-model="row.foreignValue"
+                        />
+                    </QTd>
+                </template>
+                <template #item="props">
+                    <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
+                        <QCard bordered flat class="q-my-xs">
+                            <QCardSection>
+                                <QCheckbox v-model="props.selected" dense />
+                            </QCardSection>
+                            <QSeparator />
+                            <QList>
+                                <QItem>
+                                    <VnSelectFilter
+                                        :label="t('Expense')"
+                                        class="full-width"
+                                        v-model="props.row['expenseFk']"
+                                        :options="expenses"
+                                        option-value="id"
+                                        option-label="name"
+                                        :filter-options="['id', 'name']"
+                                    >
+                                        <template #option="scope">
+                                            <QItem v-bind="scope.itemProps">
+                                                {{ `${scope.opt.id}: ${scope.opt.name}` }}
+                                            </QItem>
+                                        </template>
+                                    </VnSelectFilter>
+                                </QItem>
+                                <QItem>
+                                    <QInput
+                                        :label="t('Taxable base')"
+                                        :class="{
+                                            'no-pointer-events': isNotEuro(
+                                                invoiceIn.currency.code
+                                            ),
+                                        }"
+                                        class="full-width"
+                                        :disable="isNotEuro(invoiceIn.currency.code)"
+                                        clear-icon="close"
+                                        v-model="props.row.taxableBase"
+                                        clearable
+                                    >
+                                        <template #append>
+                                            <QIcon name="euro" size="xs" flat />
+                                        </template>
+                                    </QInput>
+                                </QItem>
+                                <QItem>
+                                    <VnSelectFilter
+                                        :label="t('Sage iva')"
+                                        class="full-width"
+                                        v-model="props.row['taxTypeSageFk']"
+                                        :options="sageTaxTypes"
+                                        option-value="id"
+                                        option-label="vat"
+                                        :filter-options="['id', 'vat']"
+                                    >
+                                        <template #option="scope">
+                                            <QItem v-bind="scope.itemProps">
+                                                <QItemSection>
+                                                    <QItemLabel>{{
+                                                        scope.opt.vat
+                                                    }}</QItemLabel>
+                                                    <QItemLabel>
+                                                        {{ `#${scope.opt.id}` }}
+                                                    </QItemLabel>
+                                                </QItemSection>
+                                            </QItem>
+                                        </template>
+                                    </VnSelectFilter>
+                                </QItem>
+                                <QItem>
+                                    <VnSelectFilter
+                                        class="full-width"
+                                        v-model="props.row['transactionTypeSageFk']"
+                                        :options="sageTransactionTypes"
+                                        option-value="id"
+                                        option-label="transaction"
+                                        :filter-options="['id', 'transaction']"
+                                    >
+                                        <template #option="scope">
+                                            <QItem v-bind="scope.itemProps">
+                                                <QItemSection>
+                                                    <QItemLabel>{{
+                                                        scope.opt.transaction
+                                                    }}</QItemLabel>
+                                                    <QItemLabel>
+                                                        {{ `#${scope.opt.id}` }}
+                                                    </QItemLabel>
+                                                </QItemSection>
+                                            </QItem>
+                                        </template>
+                                    </VnSelectFilter>
+                                </QItem>
+                                <QItem>
+                                    {{ taxRate(props.row, props.row.taxTypeSageFk) }}
+                                </QItem>
+                                <QItem>
+                                    <QInput
+                                        :label="t('Foreign value')"
+                                        class="full-width"
+                                        :class="{
+                                            'no-pointer-events': !isNotEuro(
+                                                invoiceIn.currency.code
+                                            ),
+                                        }"
+                                        :disable="!isNotEuro(invoiceIn.currency.code)"
+                                        v-model="props.row.foreignValue"
+                                    />
+                                </QItem>
+                            </QList>
+                        </QCard>
+                    </div>
+                </template>
+            </QTable>
+        </template>
+    </CrudModel>
+    <QDialog ref="newExpenseRef">
+        <QCard>
+            <QCardSection class="q-pb-none">
+                <QItem class="q-pa-none">
+                    <span class="text-primary text-h6 full-width">
+                        <QIcon name="edit" class="q-mr-xs" />
+                        {{ t('New expense') }}
+                    </span>
+                    <QBtn icon="close" flat round dense v-close-popup />
+                </QItem>
+            </QCardSection>
+            <QCardSection class="q-pt-none">
+                <QItem>
+                    <QInput :label="`${t('Code')}*`" v-model="newExpense.code" />
+                    <QCheckbox
+                        dense
+                        size="sm"
+                        :label="`${t('It\'s a withholding')}`"
+                        v-model="newExpense.isWithheld"
+                    />
+                </QItem>
+                <QItem>
+                    <QInput
+                        :label="`${t('Descripction')}*`"
+                        v-model="newExpense.description"
+                    />
+                </QItem>
+            </QCardSection>
+            <QCardActions class="justify-end">
+                <QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
+                <QBtn :label="t('globals.save')" color="primary" @click="addExpense" />
+            </QCardActions>
+        </QCard>
+    </QDialog>
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <QBtn
+            color="primary"
+            icon="add"
+            size="lg"
+            round
+            @click="invoiceInFormRef.insert()"
+        />
+    </QPageSticky>
+</template>
+<style lang="scss" scoped>
+@media (max-width: $breakpoint-xs) {
+    .q-dialog {
+        .q-card {
+            &__section:not(:first-child) {
+                .q-item {
+                    flex-direction: column;
+
+                    .q-checkbox {
+                        margin-top: 2rem;
+                    }
+                }
+            }
+        }
+    }
+}
+.q-item {
+    min-height: 0;
+}
+</style>
+<i18n>
+es:
+    Expense: Gasto
+    Create expense: Crear gasto
+    Add tax: Crear gasto
+    Taxable base: Base imp.
+    Sage tax: Sage iva
+    Sage transaction: Sage transacción
+    Rate: Tasa
+    Foreign value: Divisa
+    New expense: Nuevo gasto
+    Code: Código
+    It's a withholding: Es una retención
+    Descripction: Descripción
+    The code can't be empty: El código no puede estar vacío
+    The description can't be empty: La descripción no puede estar vacía
+    The code have to be a number: El código debe ser un número.
+</i18n>
diff --git a/src/pages/InvoiceIn/InvoiceInFilter.vue b/src/pages/InvoiceIn/InvoiceInFilter.vue
new file mode 100644
index 000000000..6348d4167
--- /dev/null
+++ b/src/pages/InvoiceIn/InvoiceInFilter.vue
@@ -0,0 +1,307 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import FetchData from 'components/FetchData.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+const suppliers = ref([]);
+const suppliersRef = ref();
+</script>
+
+<template>
+    <FetchData
+        ref="suppliersRef"
+        url="Suppliers"
+        :filter="{ fields: ['id', 'nickname'] }"
+        order="nickname"
+        limit="30"
+        @on-fetch="(data) => (suppliers = data)"
+    />
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params, searchFn }">
+            <QList dense>
+                <QItem>
+                    <QItemSection>
+                        <QInput :label="t('Id or Supplier')" v-model="params.search">
+                            <template #prepend>
+                                <QIcon name="badge" size="sm"></QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput
+                            :label="t('params.supplierRef')"
+                            v-model="params.supplierRef"
+                            @input.
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <QIcon name="vn:client" size="sm"></QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.supplierFk')"
+                            v-model="params.supplierFk"
+                            :options="suppliers"
+                            option-value="id"
+                            option-label="nickname"
+                            @input-value="suppliersRef.fetch()"
+                        >
+                        </VnSelectFilter>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput :label="t('params.fi')" v-model="params.fi" lazy-rules>
+                            <template #prepend>
+                                <QIcon name="badge" size="sm"></QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput
+                            :label="t('params.serialNumber')"
+                            v-model="params.serialNumber"
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <QIcon name="badge" size="sm"></QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput
+                            :label="t('params.serial')"
+                            v-model="params.serial"
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <QIcon name="badge" size="sm"></QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput :label="t('Amount')" v-model="params.amount" lazy-rules>
+                            <template #prepend>
+                                <QIcon name="euro" size="sm"></QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-md">
+                    <QItemSection>
+                        <QCheckbox
+                            :label="t('params.isBooked')"
+                            v-model="params.isBooked"
+                            @update:model-value="searchFn()"
+                            toggle-indeterminate
+                        />
+                    </QItemSection>
+                </QItem>
+                <QExpansionItem :label="t('More options')" expand-separator>
+                    <QItem>
+                        <QItemSection>
+                            <QInput
+                                :label="t('params.awb')"
+                                v-model="params.awbCode"
+                                lazy-rules
+                            >
+                                <template #prepend>
+                                    <QIcon name="badge" size="sm"></QIcon>
+                                </template>
+                            </QInput>
+                        </QItemSection>
+                    </QItem>
+                    <QItem>
+                        <QItemSection>
+                            <QInput
+                                :label="t('params.account')"
+                                v-model="params.account"
+                                lazy-rules
+                            >
+                                <template #prepend>
+                                    <QIcon name="person" size="sm" />
+                                </template>
+                            </QInput>
+                        </QItemSection>
+                    </QItem>
+                    <QItem>
+                        <QItemSection>
+                            <QInput :label="t('From')" v-model="params.from" mask="date">
+                                <template #append>
+                                    <QIcon name="event" class="cursor-pointer">
+                                        <QPopupProxy
+                                            cover
+                                            transition-show="scale"
+                                            transition-hide="scale"
+                                        >
+                                            <QDate v-model="params.from" landscape>
+                                                <div
+                                                    class="row items-center justify-end q-gutter-sm"
+                                                >
+                                                    <QBtn
+                                                        :label="t('globals.cancel')"
+                                                        color="primary"
+                                                        flat
+                                                        v-close-popup
+                                                    />
+                                                    <QBtn
+                                                        :label="t('globals.confirm')"
+                                                        color="primary"
+                                                        flat
+                                                        @click="save"
+                                                        v-close-popup
+                                                    />
+                                                </div>
+                                            </QDate>
+                                        </QPopupProxy>
+                                    </QIcon>
+                                </template>
+                            </QInput>
+                        </QItemSection>
+                    </QItem>
+                    <QItem>
+                        <QItemSection>
+                            <QInput :label="t('To')" v-model="params.to" mask="date">
+                                <template #append>
+                                    <QIcon name="event" class="cursor-pointer">
+                                        <QPopupProxy
+                                            cover
+                                            transition-show="scale"
+                                            transition-hide="scale"
+                                        >
+                                            <QDate v-model="params.to" landscape>
+                                                <div
+                                                    class="row items-center justify-end q-gutter-sm"
+                                                >
+                                                    <QBtn
+                                                        :label="t('globals.cancel')"
+                                                        color="primary"
+                                                        flat
+                                                        v-close-popup
+                                                    />
+                                                    <QBtn
+                                                        :label="t('globals.confirm')"
+                                                        color="primary"
+                                                        flat
+                                                        @click="save"
+                                                        v-close-popup
+                                                    />
+                                                </div>
+                                            </QDate>
+                                        </QPopupProxy>
+                                    </QIcon>
+                                </template>
+                            </QInput>
+                        </QItemSection>
+                    </QItem>
+                    <QItem>
+                        <QItemSection>
+                            <QInput
+                                :label="t('Issued')"
+                                v-model="params.issued"
+                                mask="date"
+                            >
+                                <template #append>
+                                    <QIcon name="event" class="cursor-pointer">
+                                        <QPopupProxy
+                                            cover
+                                            transition-show="scale"
+                                            transition-hide="scale"
+                                        >
+                                            <QDate v-model="params.issued" landscape>
+                                                <div
+                                                    class="row items-center justify-end q-gutter-sm"
+                                                >
+                                                    <QBtn
+                                                        :label="t('globals.cancel')"
+                                                        color="primary"
+                                                        flat
+                                                        v-close-popup
+                                                    />
+                                                    <QBtn
+                                                        :label="t('globals.confirm')"
+                                                        color="primary"
+                                                        flat
+                                                        @click="save"
+                                                        v-close-popup
+                                                    />
+                                                </div>
+                                            </QDate>
+                                        </QPopupProxy>
+                                    </QIcon>
+                                </template>
+                            </QInput>
+                        </QItemSection>
+                    </QItem>
+                </QExpansionItem>
+            </QList>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        search: ID
+        supplierRef: Supplier ref.
+        supplierFk: Supplier
+        fi: Supplier fiscal id
+        clientFk: Customer
+        amount: Amount
+        created: Created
+        awb: AWB
+        dued: Dued
+        serialNumber: Serial Number
+        serial: Serial
+        account: Account
+        isBooked: is booked
+es:
+    params:
+        search: Contiene
+        supplierRef: Ref. proveedor
+        supplierFk: Proveedor
+        clientFk: Cliente
+        fi: CIF proveedor
+        serialNumber: Num. serie
+        serial: Serie
+        awb: AWB
+        amount: Importe
+        issued: Emitida
+        isBooked: Conciliada
+        account: Cuenta
+        created: Creada
+        dued: Vencida
+    From: Desde
+    To: Hasta
+    Amount: Importe
+    Issued: Fecha factura
+    Id or supplier: Id o proveedor
+    More options: Más opciones
+</i18n>
diff --git a/src/pages/InvoiceIn/InvoiceInList.vue b/src/pages/InvoiceIn/InvoiceInList.vue
new file mode 100644
index 000000000..692251bff
--- /dev/null
+++ b/src/pages/InvoiceIn/InvoiceInList.vue
@@ -0,0 +1,179 @@
+<script setup>
+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';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+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';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const quasar = useQuasar();
+let url = ref();
+const { t } = useI18n();
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+    url.value = await getUrl('');
+});
+onUnmounted(() => (stateStore.rightDrawer = false));
+
+function navigate(id) {
+    router.push({ path: `/invoice-in/${id}` });
+}
+
+function viewSummary(id) {
+    quasar.dialog({
+        component: InvoiceInSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
+}
+</script>
+
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="InvoiceInList"
+                :label="t('Search invoice')"
+                :info="t('You can search by invoice reference')"
+            />
+        </Teleport>
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <InvoiceInFilter data-key="InvoiceInList" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <div class="card-list">
+            <VnPaginate
+                data-key="InvoiceInList"
+                url="InvoiceIns/filter"
+                order="issued DESC, id DESC"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="row.supplierRef"
+                        @click="navigate(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv label="ID" :value="row.id" />
+                            <VnLv
+                                :label="t('invoiceIn.list.supplierRef')"
+                                :value="row.supplierRef"
+                            />
+                            <VnLv
+                                :label="t('invoiceIn.list.supplier')"
+                                :value="row.supplierName"
+                            />
+                            <VnLv
+                                :label="t('invoiceIn.list.serialNumber')"
+                                :value="row.serialNumber"
+                            />
+                            <VnLv
+                                :label="t('invoiceIn.list.serial')"
+                                :value="row.serial"
+                            />
+                            <VnLv
+                                :label="t('invoiceIn.list.issued')"
+                                :value="toDate(row.issued)"
+                            />
+                            <VnLv :label="t('invoiceIn.list.awb')" :value="row.awbCode" />
+                            <VnLv
+                                :label="t('invoiceIn.list.amount')"
+                                :value="toCurrency(row.amount)"
+                            />
+                            <VnLv :label="t('invoiceIn.list.isBooked')">
+                                <template #value>
+                                    <QCheckbox
+                                        class="no-pointer-events"
+                                        v-model="row.isBooked"
+                                        size="xs"
+                                        :true-value="1"
+                                        :false-value="0"
+                                    />
+                                </template>
+                            </VnLv>
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                flat
+                                icon="arrow_circle_right"
+                                @click.stop="navigate(row.id)"
+                            >
+                                <QTooltip>
+                                    {{ t('components.smartCard.openCard') }}
+                                </QTooltip>
+                            </QBtn>
+                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
+                                <QTooltip>
+                                    {{ t('components.smartCard.openSummary') }}
+                                </QTooltip>
+                            </QBtn>
+                            <QBtn
+                                flat
+                                icon="cloud_download"
+                                @click.stop="downloadFile(row.dmsFk)"
+                            >
+                                <QTooltip>
+                                    {{ t('components.smartCard.downloadFile') }}
+                                </QTooltip>
+                            </QBtn>
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <QBtn
+            color="primary"
+            icon="add"
+            size="lg"
+            round
+            :href="`${url}invoice-in/create`"
+        />
+    </QPageSticky>
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+</style>
+
+<i18n>
+es:
+    Search invoice: Buscar factura emitida
+    You can search by invoice reference: Puedes buscar por referencia de la factura
+</i18n>
diff --git a/src/pages/InvoiceIn/InvoiceInMain.vue b/src/pages/InvoiceIn/InvoiceInMain.vue
new file mode 100644
index 000000000..66ce78f23
--- /dev/null
+++ b/src/pages/InvoiceIn/InvoiceInMain.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const stateStore = useStateStore();
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
+            <LeftMenu />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
+</template>
diff --git a/src/router/modules/index.js b/src/router/modules/index.js
index 2916b98ef..2bb28c817 100644
--- a/src/router/modules/index.js
+++ b/src/router/modules/index.js
@@ -2,16 +2,9 @@ import Customer from './customer';
 import Ticket from './ticket';
 import Claim from './claim';
 import InvoiceOut from './invoiceOut';
+import invoiceIn from './invoiceIn';
 import Worker from './worker';
 import Wagon from './wagon';
 import Route from './route';
 
-export default [
-    Customer,
-    Ticket,
-    Claim,
-    InvoiceOut,
-    Worker,
-    Wagon,
-    Route
-]
+export default [Customer, Ticket, Claim, InvoiceOut, invoiceIn, Worker, Wagon, Route];
diff --git a/src/router/modules/invoiceIn.js b/src/router/modules/invoiceIn.js
new file mode 100644
index 000000000..a5509908c
--- /dev/null
+++ b/src/router/modules/invoiceIn.js
@@ -0,0 +1,98 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/invoice-in',
+    name: 'InvoiceIn',
+    meta: {
+        title: 'invoiceIns',
+        icon: 'vn:invoice-in',
+    },
+    component: RouterView,
+    redirect: { name: 'InvoiceInMain' },
+    menus: {
+        main: ['InvoiceInList'],
+        card: [
+            'InvoiceInBasicData',
+            'InvoiceInVat',
+            'InvoiceInDueDay',
+            'InvoiceInIntrastat',
+        ],
+    },
+    children: [
+        {
+            path: '',
+            name: 'InvoiceInMain',
+            component: () => import('src/pages/InvoiceIn/InvoiceInMain.vue'),
+            redirect: { name: 'InvoiceInList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'InvoiceInList',
+                    meta: {
+                        title: 'list',
+                        icon: 'view_list',
+                    },
+                    component: () => import('src/pages/InvoiceIn/InvoiceInList.vue'),
+                },
+            ],
+        },
+        {
+            name: 'InvoiceInCard',
+            path: ':id',
+            component: () => import('src/pages/InvoiceIn/Card/InvoiceInCard.vue'),
+            redirect: { name: 'InvoiceInSummary' },
+            children: [
+                {
+                    name: 'InvoiceInSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary',
+                        icon: 'view_list',
+                    },
+                    component: () =>
+                        import('src/pages/InvoiceIn/Card/InvoiceInSummary.vue'),
+                },
+                {
+                    name: 'InvoiceInBasicData',
+                    path: 'basic-data',
+                    meta: {
+                        title: 'basicData',
+                        icon: 'vn:settings',
+                        roles: ['salesPerson'],
+                    },
+                    component: () =>
+                        import('src/pages/InvoiceIn/Card/InvoiceInBasicData.vue'),
+                },
+                {
+                    name: 'InvoiceInVat',
+                    path: 'vat',
+                    meta: {
+                        title: 'vat',
+                        icon: 'vn:tax',
+                    },
+                    component: () => import('src/pages/InvoiceIn/Card/InvoiceInVat.vue'),
+                },
+                {
+                    name: 'InvoiceInDueDay',
+                    path: 'due-day',
+                    meta: {
+                        title: 'dueDay',
+                        icon: 'vn:calendar',
+                    },
+                    component: () =>
+                        import('src/pages/InvoiceIn/Card/InvoiceInDueDay.vue'),
+                },
+                {
+                    name: 'InvoiceInIntrastat',
+                    path: 'intrastat',
+                    meta: {
+                        title: 'intrastat',
+                        icon: 'vn:lines',
+                    },
+                    component: () =>
+                        import('src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue'),
+                },
+            ],
+        },
+    ],
+};
diff --git a/src/router/routes.js b/src/router/routes.js
index e3aa22a06..6632979d3 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -3,6 +3,7 @@ import ticket from './modules/ticket';
 import claim from './modules/claim';
 import worker from './modules/worker';
 import invoiceOut from './modules/invoiceOut';
+import invoiceIn from './modules/invoiceIn';
 import wagon from './modules/wagon';
 import route from './modules/route';
 
@@ -49,6 +50,7 @@ const routes = [
             claim,
             worker,
             invoiceOut,
+            invoiceIn,
             {
                 path: '/:catchAll(.*)*',
                 name: 'NotFound',
diff --git a/src/stores/useNavigationStore.js b/src/stores/useNavigationStore.js
index 168c1f9dc..5db0049cf 100644
--- a/src/stores/useNavigationStore.js
+++ b/src/stores/useNavigationStore.js
@@ -6,7 +6,16 @@ import { useRole } from 'src/composables/useRole';
 import routes from 'src/router/modules';
 
 export const useNavigationStore = defineStore('navigationStore', () => {
-    const modules = ['customer', 'claim', 'ticket', 'invoiceOut', 'worker', 'wagon', 'route'];
+    const modules = [
+        'customer',
+        'claim',
+        'ticket',
+        'invoiceOut',
+        'invoiceIn',
+        'worker',
+        'wagon',
+        'route',
+    ];
     const pinnedModules = ref([]);
     const role = useRole();
 
diff --git a/test/cypress/integration/ClaimNotes.spec.js b/test/cypress/integration/claimNotes.spec.js
similarity index 100%
rename from test/cypress/integration/ClaimNotes.spec.js
rename to test/cypress/integration/claimNotes.spec.js
diff --git a/test/cypress/integration/invoiceInList.spec.js b/test/cypress/integration/invoiceInList.spec.js
new file mode 100644
index 000000000..20b8403a3
--- /dev/null
+++ b/test/cypress/integration/invoiceInList.spec.js
@@ -0,0 +1,27 @@
+/// <reference types="cypress" />
+describe('InvoiceInList', () => {
+    const firstCard = '.q-card:nth-child(1)';
+    const firstId =
+        '.q-card:nth-child(1) .list-items > .vn-label-value:first-child > .value > span';
+    const firstDetailBtn = '.q-card:nth-child(1) .q-btn:nth-child(2)';
+    const summaryHeaders = '.summaryBody .header';
+
+    beforeEach(() => {
+        cy.login('developer');
+        cy.visit(`/#/invoice-in`);
+    });
+
+    it('should redirect on clicking a invoice', () => {
+        cy.get(firstId)
+            .invoke('text')
+            .then((id) => {
+                cy.get(firstCard).click();
+                cy.url().should('include', `/invoice-in/${id}/summary`);
+            });
+    });
+
+    it('should open the details', () => {
+        cy.get(firstDetailBtn).click();
+        cy.get(summaryHeaders).eq(1).contains('Basic Data');
+    });
+});
diff --git a/test/vitest/__tests__/composables/downloadFile.spec.js b/test/vitest/__tests__/composables/downloadFile.spec.js
new file mode 100644
index 000000000..f611479bf
--- /dev/null
+++ b/test/vitest/__tests__/composables/downloadFile.spec.js
@@ -0,0 +1,25 @@
+import { vi, describe, expect, it } from 'vitest';
+import { axios } from 'app/test/vitest/helper';
+import { downloadFile } from 'src/composables/downloadFile';
+import { useSession } from 'src/composables/useSession';
+
+const session = useSession();
+const token = session.getToken();
+
+describe('downloadFile', () => {
+    it('should open a new window to download the file', async () => {
+        const url = 'http://localhost:9000';
+
+        vi.spyOn(axios, 'get').mockResolvedValueOnce({ data: url });
+
+        const mockWindowOpen = vi.spyOn(window, 'open');
+
+        await downloadFile(1);
+
+        expect(mockWindowOpen).toHaveBeenCalledWith(
+            `${url}/api/dms/1/downloadFile?access_token=${token}`
+        );
+
+        mockWindowOpen.mockRestore();
+    });
+});

From a9241b17f570966055aae3634b94978c2f2dd1d9 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 6 Nov 2023 16:03:36 +0100
Subject: [PATCH 24/81] ref #5835 tests basicData and list

---
 .../InvoiceIn/Card/InvoiceInBasicData.vue     | 549 +++++++++---------
 .../integration/invoiceInBasicData.spec.js    |  24 +
 .../cypress/integration/invoiceInList.spec.js |   1 +
 .../InvoiceIn/InvoiceInBasicData.spec.js      |  46 ++
 4 files changed, 337 insertions(+), 283 deletions(-)
 create mode 100644 test/cypress/integration/invoiceInBasicData.spec.js
 create mode 100644 test/vitest/__tests__/pages/InvoiceIn/InvoiceInBasicData.spec.js

diff --git a/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
index 3edfab0d6..3419492b7 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
@@ -85,10 +85,10 @@ async function setCreateDms() {
 
 async function edit() {
     try {
-        if (!dms.value.companyId) throw new Error(t(`The company can't be empty`));
-        if (!dms.value.warehouseId) throw new Error(t(`The warehouse can't be empty`));
-        if (!dms.value.dmsTypeId) throw new Error(t(`The DMS Type can't be empty`));
-        if (!dms.value.description) throw new Error(t(`The description can't be empty`));
+        if (!dms.value.companyId) throw Error(t(`The company can't be empty`));
+        if (!dms.value.warehouseId) throw Error(t(`The warehouse can't be empty`));
+        if (!dms.value.dmsTypeId) throw Error(t(`The DMS Type can't be empty`));
+        if (!dms.value.description) throw Error(t(`The description can't be empty`));
 
         const formData = new FormData();
 
@@ -111,7 +111,7 @@ async function edit() {
         });
     } catch (error) {
         quasar.notify({
-            message: t(`${error}`),
+            message: t(`${error.message}`),
             type: 'negative',
         });
     }
@@ -119,11 +119,11 @@ async function edit() {
 
 async function create() {
     try {
-        if (!dms.value.companyId) throw new Error(t(`The company can't be empty`));
-        if (!dms.value.warehouseId) throw new Error(t(`The warehouse can't be empty`));
-        if (!dms.value.dmsTypeId) throw new Error(t(`The DMS Type can't be empty`));
-        if (!dms.value.description) throw new Error(t(`The description can't be empty`));
-        if (!dms.value.files) throw new Error(t(`The files can't be empty`));
+        if (!dms.value.companyId) throw Error(t(`The company can't be empty`));
+        if (!dms.value.warehouseId) throw Error(t(`The warehouse can't be empty`));
+        if (!dms.value.dmsTypeId) throw Error(t(`The DMS Type can't be empty`));
+        if (!dms.value.description) throw Error(t(`The description can't be empty`));
+        if (!dms.value.files) throw Error(t(`The files can't be empty`));
 
         const formData = new FormData();
 
@@ -144,8 +144,9 @@ async function create() {
             type: 'positive',
         });
     } catch (error) {
+        console.log(error);
         quasar.notify({
-            message: t(`${error}`),
+            message: t(`${error.message}`),
             type: 'negative',
         });
     }
@@ -197,274 +198,257 @@ async function create() {
         @on-fetch="(data) => (userConfig = data)"
         auto-load
     />
-    <div class="column items-center">
-        <QCard>
-            <FormModel
-                v-if="invoiceIn"
-                :url="`InvoiceIns/${route.params.id}`"
-                model="invoiceIn"
-            >
-                <template #form="{ data }">
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <VnSelectFilter
-                                v-if="suppliersRef"
-                                :label="t('supplierFk')"
-                                v-model="data.supplierFk"
-                                :options="suppliers"
-                                option-value="id"
-                                option-label="nickname"
-                                @input-value="suppliersRef.fetch()"
-                            >
-                                <template #option="scope">
-                                    <QItem v-bind="scope.itemProps">
-                                        <QItemSection>
-                                            <QItemLabel>{{
-                                                `${scope.opt.id} - ${scope.opt.nickname}`
-                                            }}</QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                </template>
-                            </VnSelectFilter>
-                        </div>
-                        <div class="col">
-                            <QInput
-                                clearable
-                                clear-icon="close"
-                                :label="t('Supplier ref')"
-                                v-model="data.supplierRef"
+    <FormModel v-if="invoiceIn" :url="`InvoiceIns/${route.params.id}`" model="invoiceIn">
+        <template #form="{ data }">
+            <div class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        v-if="suppliersRef"
+                        :label="t('supplierFk')"
+                        v-model="data.supplierFk"
+                        :options="suppliers"
+                        option-value="id"
+                        option-label="nickname"
+                        :input-debounce="100"
+                        @input-value="suppliersRef.fetch()"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{
+                                        `${scope.opt.id} - ${scope.opt.nickname}`
+                                    }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+                <div class="col">
+                    <QInput
+                        clearable
+                        clear-icon="close"
+                        :label="t('Supplier ref')"
+                        v-model="data.supplierRef"
+                    />
+                </div>
+            </div>
+            <div class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        :label="t('Expedition date')"
+                        v-model="data.issued"
+                        mask="####-##-##"
+                    >
+                        <template #append>
+                            <QIcon name="event" class="cursor-pointer" fill-mask="_">
+                                <QPopupProxy
+                                    cover
+                                    transition-show="scale"
+                                    transition-hide="scale"
+                                >
+                                    <QDate v-model="data.issued">
+                                        <div class="row items-center justify-end">
+                                            <QBtn
+                                                v-close-popup
+                                                label="Close"
+                                                color="primary"
+                                                flat
+                                            />
+                                        </div>
+                                    </QDate>
+                                </QPopupProxy>
+                            </QIcon>
+                        </template>
+                    </QInput>
+                </div>
+                <div class="col">
+                    <QInput
+                        :label="t('Operation date')"
+                        v-model="data.operated"
+                        mask="####-##-##"
+                        fill-mask="_"
+                        autofocus
+                    >
+                        <template #append>
+                            <QIcon name="event" class="cursor-pointer">
+                                <QPopupProxy
+                                    cover
+                                    transition-show="scale"
+                                    transition-hide="scale"
+                                >
+                                    <QDate v-model="data.operated" mask="YYYY-MM-DD">
+                                        <div class="row items-center justify-end">
+                                            <QBtn
+                                                v-close-popup
+                                                label="Close"
+                                                color="primary"
+                                                flat
+                                            />
+                                        </div>
+                                    </QDate>
+                                </QPopupProxy>
+                            </QIcon>
+                        </template>
+                    </QInput>
+                </div>
+            </div>
+            <div class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        :label="t('Undeductible VAT')"
+                        v-model="data.deductibleExpenseFk"
+                        clearable
+                        clear-icon="close"
+                    />
+                </div>
+                <div class="col">
+                    <QInput
+                        :label="t('Document')"
+                        v-model="data.dmsFk"
+                        clearable
+                        clear-icon="close"
+                        @update:model-value="checkFileExists(data.dmsFk)"
+                    >
+                        <template #prepend>
+                            <QBtn
+                                v-if="data.dmsFk"
+                                :class="{
+                                    'no-pointer-events': editDownloadDisabled,
+                                }"
+                                :disable="editDownloadDisabled"
+                                icon="cloud_download"
+                                :title="t('Download file')"
+                                padding="xs"
+                                round
+                                @click="downloadFile(data.dmsFk)"
                             />
-                        </div>
-                    </div>
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QInput :label="t('Expedition date')" v-model="data.issued">
-                                <template #append>
-                                    <QIcon
-                                        name="event"
-                                        class="cursor-pointer"
-                                        mask="####-##-##"
-                                        fill-mask="_"
-                                    >
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate v-model="data.issued">
-                                                <div class="row items-center justify-end">
-                                                    <QBtn
-                                                        v-close-popup
-                                                        label="Close"
-                                                        color="primary"
-                                                        flat
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
-                        </div>
-                        <div class="col">
-                            <QInput
-                                :label="t('Operation date')"
-                                v-model="data.operated"
-                                mask="####-##-##"
-                                fill-mask="_"
-                                autofocus
+                        </template>
+                        <template #append>
+                            <QBtn
+                                :class="{
+                                    'no-pointer-events': editDownloadDisabled,
+                                }"
+                                :disable="editDownloadDisabled"
+                                v-if="data.dmsFk"
+                                icon="edit"
+                                round
+                                padding="xs"
+                                @click="setEditDms(data.dmsFk)"
                             >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate
-                                                v-model="data.operated"
-                                                mask="YYYY-MM-DD"
-                                            >
-                                                <div class="row items-center justify-end">
-                                                    <QBtn
-                                                        v-close-popup
-                                                        label="Close"
-                                                        color="primary"
-                                                        flat
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
-                        </div>
-                    </div>
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QInput
-                                :label="t('Undeductible VAT')"
-                                v-model="data.deductibleExpenseFk"
-                                clearable
-                                clear-icon="close"
-                            />
-                        </div>
-                        <div class="col">
-                            <QInput
-                                :label="t('Document')"
-                                v-model="data.dmsFk"
-                                clearable
-                                clear-icon="close"
-                                @update:model-value="checkFileExists(data.dmsFk)"
+                                <QTooltip>{{ t('Edit document') }}</QTooltip>
+                            </QBtn>
+                            <QBtn
+                                v-else
+                                icon="add_circle"
+                                round
+                                padding="xs"
+                                @click="setCreateDms()"
                             >
-                                <template #prepend>
-                                    <QBtn
-                                        v-if="data.dmsFk"
-                                        :class="{
-                                            'no-pointer-events': editDownloadDisabled,
-                                        }"
-                                        :disable="editDownloadDisabled"
-                                        icon="cloud_download"
-                                        :title="t('Download file')"
-                                        padding="xs"
-                                        round
-                                        @click="downloadFile(data.dmsFk)"
-                                    />
-                                </template>
-                                <template #append>
-                                    <QBtn
-                                        :class="{
-                                            'no-pointer-events': editDownloadDisabled,
-                                        }"
-                                        :disable="editDownloadDisabled"
-                                        v-if="data.dmsFk"
-                                        icon="edit"
-                                        round
-                                        padding="xs"
-                                        @click="setEditDms(data.dmsFk)"
-                                    >
-                                        <QTooltip>{{ t('Edit document') }}</QTooltip>
-                                    </QBtn>
-                                    <QBtn
-                                        v-else
-                                        icon="add_circle"
-                                        round
-                                        padding="xs"
-                                        @click="setCreateDms()"
-                                    >
-                                        <QTooltip>{{ t('Create document') }}</QTooltip>
-                                    </QBtn>
-                                </template>
-                            </QInput>
-                        </div>
-                    </div>
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QInput
-                                :label="t('Entry date')"
-                                v-model="data.bookEntried"
-                                clearable
-                                clear-icon="close"
-                                mask="####-##-##"
-                                fill-mask="_"
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate
-                                                v-model="data.bookEntried"
-                                                mask="YYYY-MM-DD"
-                                            >
-                                                <div class="row items-center justify-end">
-                                                    <QBtn
-                                                        v-close-popup
-                                                        label="Close"
-                                                        color="primary"
-                                                        flat
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
-                        </div>
-                        <div class="col">
-                            <QInput
-                                :label="t('Accounted date')"
-                                v-model="data.booked"
-                                clearable
-                                clear-icon="close"
-                                mask="####-##-##"
-                                fill-mask="_"
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate
-                                                v-model="data.booked"
-                                                mask="YYYY-MM-DD"
-                                            >
-                                                <div class="row items-center justify-end">
-                                                    <QBtn
-                                                        v-close-popup
-                                                        label="Close"
-                                                        color="primary"
-                                                        flat
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
-                        </div>
-                    </div>
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <VnSelectFilter
-                                v-if="currenciesRef"
-                                :label="t('Currency')"
-                                v-model="data.currencyFk"
-                                :options="currencies"
-                                option-value="id"
-                                option-label="code"
-                                @input-value="currenciesRef.fetch()"
-                            />
-                        </div>
-                        <div class="col">
-                            <VnSelectFilter
-                                v-if="companiesRef"
-                                :label="t('Company')"
-                                v-model="data.companyFk"
-                                :options="companies"
-                                option-value="id"
-                                option-label="code"
-                                @input-value="companiesRef.fetch()"
-                            />
-                        </div>
-                    </div>
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QCheckbox
-                                :label="t('invoiceIn.summary.booked')"
-                                v-model="data.isBooked"
-                            />
-                        </div>
-                        <div class="col"></div>
-                    </div>
-                </template>
-            </FormModel>
-        </QCard>
-    </div>
+                                <QTooltip>{{ t('Create document') }}</QTooltip>
+                            </QBtn>
+                        </template>
+                    </QInput>
+                </div>
+            </div>
+            <div class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        :label="t('Entry date')"
+                        v-model="data.bookEntried"
+                        clearable
+                        clear-icon="close"
+                        mask="####-##-##"
+                        fill-mask="_"
+                    >
+                        <template #append>
+                            <QIcon name="event" class="cursor-pointer">
+                                <QPopupProxy
+                                    cover
+                                    transition-show="scale"
+                                    transition-hide="scale"
+                                >
+                                    <QDate v-model="data.bookEntried" mask="YYYY-MM-DD">
+                                        <div class="row items-center justify-end">
+                                            <QBtn
+                                                v-close-popup
+                                                label="Close"
+                                                color="primary"
+                                                flat
+                                            />
+                                        </div>
+                                    </QDate>
+                                </QPopupProxy>
+                            </QIcon>
+                        </template>
+                    </QInput>
+                </div>
+                <div class="col">
+                    <QInput
+                        :label="t('Accounted date')"
+                        v-model="data.booked"
+                        clearable
+                        clear-icon="close"
+                        mask="####-##-##"
+                        fill-mask="_"
+                    >
+                        <template #append>
+                            <QIcon name="event" class="cursor-pointer">
+                                <QPopupProxy
+                                    cover
+                                    transition-show="scale"
+                                    transition-hide="scale"
+                                >
+                                    <QDate v-model="data.booked" mask="YYYY-MM-DD">
+                                        <div class="row items-center justify-end">
+                                            <QBtn
+                                                v-close-popup
+                                                label="Close"
+                                                color="primary"
+                                                flat
+                                            />
+                                        </div>
+                                    </QDate>
+                                </QPopupProxy>
+                            </QIcon>
+                        </template>
+                    </QInput>
+                </div>
+            </div>
+            <div class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        v-if="currenciesRef"
+                        :label="t('Currency')"
+                        v-model="data.currencyFk"
+                        :options="currencies"
+                        option-value="id"
+                        option-label="code"
+                        @input-value="currenciesRef.fetch()"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        v-if="companiesRef"
+                        :label="t('Company')"
+                        v-model="data.companyFk"
+                        :options="companies"
+                        option-value="id"
+                        option-label="code"
+                        @input-value="companiesRef.fetch()"
+                    />
+                </div>
+            </div>
+            <div class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox
+                        :label="t('invoiceIn.summary.booked')"
+                        v-model="data.isBooked"
+                    />
+                </div>
+                <div class="col"></div>
+            </div>
+        </template>
+    </FormModel>
     <QDialog ref="editDmsRef">
         <QCard>
             <QCardSection class="q-pb-none">
@@ -691,13 +675,12 @@ async function create() {
     </QDialog>
 </template>
 <style lang="scss" scoped>
-.column {
-    .q-card {
-        width: 100%;
-        max-width: 60em;
-    }
-}
 @media (max-width: $breakpoint-xs) {
+    .column {
+        .row:not(:last-child) {
+            flex-direction: column;
+        }
+    }
     .q-dialog {
         .q-card {
             &__section:not(:first-child) {
@@ -714,7 +697,7 @@ async function create() {
         supplierFk: Supplier
     es:
         supplierFk: Proveedor
-        Supplier Ref: Ref. proveedor
+        Supplier ref: Ref. proveedor
         Expedition date: Fecha expedición
         Operation date: Fecha operación
         Undeductible VAT: Iva no deducible
diff --git a/test/cypress/integration/invoiceInBasicData.spec.js b/test/cypress/integration/invoiceInBasicData.spec.js
new file mode 100644
index 000000000..e95fb0161
--- /dev/null
+++ b/test/cypress/integration/invoiceInBasicData.spec.js
@@ -0,0 +1,24 @@
+/// <reference types="cypress" />
+describe('InvoiceInBasicData', () => {
+    const selects = '.q-form .q-select';
+    const appendBtns = 'label button';
+    const saveBtn = '.q-btn-group > .q-btn--standard > .q-btn__content > .q-icon';
+
+    beforeEach(() => {
+        cy.login('developer');
+        cy.visit(`/#/invoice-in/1/basic-data`);
+    });
+
+    it('should edit the provideer and supplier ref', () => {
+        cy.get(selects).eq(0).click();
+        cy.get(selects).eq(0).type('Bros');
+        cy.get(selects).eq(0).type('{enter}');
+
+        cy.get(appendBtns).eq(0).click();
+        cy.get('input').eq(2).type(4739);
+        cy.get(saveBtn).click();
+
+        cy.get(`${selects} input`).eq(0).invoke('val').should('eq', 'Bros nick');
+        cy.get('input').eq(2).invoke('val').should('eq', 4739);
+    });
+});
diff --git a/test/cypress/integration/invoiceInList.spec.js b/test/cypress/integration/invoiceInList.spec.js
index 20b8403a3..98e5a96a1 100644
--- a/test/cypress/integration/invoiceInList.spec.js
+++ b/test/cypress/integration/invoiceInList.spec.js
@@ -23,5 +23,6 @@ describe('InvoiceInList', () => {
     it('should open the details', () => {
         cy.get(firstDetailBtn).click();
         cy.get(summaryHeaders).eq(1).contains('Basic Data');
+        cy.get(summaryHeaders).eq(5).contains('Vat');
     });
 });
diff --git a/test/vitest/__tests__/pages/InvoiceIn/InvoiceInBasicData.spec.js b/test/vitest/__tests__/pages/InvoiceIn/InvoiceInBasicData.spec.js
new file mode 100644
index 000000000..f8daa99cd
--- /dev/null
+++ b/test/vitest/__tests__/pages/InvoiceIn/InvoiceInBasicData.spec.js
@@ -0,0 +1,46 @@
+import { vi, describe, expect, it, beforeAll } from 'vitest';
+import { createWrapper, axios } from 'app/test/vitest/helper';
+import InvoiceInBasicData from 'src/pages/InvoiceIn/Card/InvoiceInBasicData.vue';
+
+describe('InvoiceInBasicData', () => {
+    let vm;
+
+    beforeAll(() => {
+        vm = createWrapper(InvoiceInBasicData, {
+            global: {
+                stubs: [],
+                mocks: {
+                    fetch: vi.fn(),
+                },
+            },
+        }).vm;
+    });
+
+    it('should throw an error when data is empty', async () => {
+        vi.spyOn(axios, 'post').mockResolvedValue({ data: [] });
+        vi.spyOn(vm.quasar, 'notify');
+
+        await vm.edit();
+
+        expect(vm.quasar.notify).toHaveBeenCalledWith(
+            expect.objectContaining({
+                message: `The company can't be empty`,
+                type: 'negative',
+            })
+        );
+    });
+
+    it('should throw an error when data is empty', async () => {
+        vi.spyOn(axios, 'post').mockResolvedValue({ data: [] });
+        vi.spyOn(vm.quasar, 'notify');
+
+        await vm.create();
+
+        expect(vm.quasar.notify).toHaveBeenCalledWith(
+            expect.objectContaining({
+                message: `The company can't be empty`,
+                type: 'negative',
+            })
+        );
+    });
+});

From c870e8b3676a21c1b8d02ff2fa55cde94b72b2cf Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 9 Nov 2023 09:28:53 +0100
Subject: [PATCH 25/81] refs #6415 fix: package version

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 7ab5883b3..454e53e53 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "23.42.01",
+    "version": "23.46.01",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",
@@ -53,4 +53,4 @@
         "vite": "^4.3.5",
         "vitest": "^0.31.1"
     }
-}
+}
\ No newline at end of file

From c31b4fa770e7cc19f778e82429178fd5c0239b01 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 9 Nov 2023 10:29:28 +0100
Subject: [PATCH 26/81] ref #5835 e2e & unit tests done

---
 cypress.config.js                             |  2 +-
 src/components/CrudModel.vue                  |  4 +
 src/css/app.scss                              |  2 +
 src/filters/toCurrency.js                     |  9 +--
 src/i18n/es/index.js                          |  2 +-
 .../InvoiceIn/Card/InvoiceInBasicData.vue     |  3 +-
 src/pages/InvoiceIn/Card/InvoiceInDueDay.vue  | 30 +++++---
 src/pages/InvoiceIn/Card/InvoiceInSummary.vue | 75 ++++++++++++++++---
 src/pages/InvoiceIn/Card/InvoiceInVat.vue     | 15 ++--
 .../{ => claim}/claimDevelopment.spec.js      |  0
 .../{ => claim}/claimNotes.spec.js            |  0
 .../{ => claim}/claimPhoto.spec.js            |  0
 .../invoiceIn/invoiceInBasicData.spec.js      | 53 +++++++++++++
 .../invoiceIn/invoiceInDueDay.spec.js         | 29 +++++++
 .../invoiceIn/invoiceInIntrastat.spec.js      | 38 ++++++++++
 .../{ => invoiceIn}/invoiceInList.spec.js     |  0
 .../invoiceIn/invoiceInVat.spec.js            | 55 ++++++++++++++
 .../integration/invoiceInBasicData.spec.js    | 24 ------
 .../{ => ticket}/ticketBoxing.spec.js         |  0
 .../{ => wagon}/wagonCreate.spec.js           |  0
 .../{ => wagonType}/wagonTypeCreate.spec.js   |  0
 .../{ => worker}/workerList.spec.js           |  0
 .../workerNotificationsManager.spec.js        |  0
 .../{ => worker}/workerSummary.spec.js        |  0
 test/cypress/support/commands.js              | 33 +++++++-
 .../InvoiceIn/InvoiceInBasicData.spec.js      | 44 ++++++-----
 .../InvoiceIn/InvoiceInIntrastat.spec.js      | 34 +++++++++
 .../pages/InvoiceIn/InvoiceInVat.spec.js      | 75 +++++++++++++++++++
 28 files changed, 443 insertions(+), 84 deletions(-)
 rename test/cypress/integration/{ => claim}/claimDevelopment.spec.js (100%)
 rename test/cypress/integration/{ => claim}/claimNotes.spec.js (100%)
 rename test/cypress/integration/{ => claim}/claimPhoto.spec.js (100%)
 create mode 100644 test/cypress/integration/invoiceIn/invoiceInBasicData.spec.js
 create mode 100644 test/cypress/integration/invoiceIn/invoiceInDueDay.spec.js
 create mode 100644 test/cypress/integration/invoiceIn/invoiceInIntrastat.spec.js
 rename test/cypress/integration/{ => invoiceIn}/invoiceInList.spec.js (100%)
 create mode 100644 test/cypress/integration/invoiceIn/invoiceInVat.spec.js
 delete mode 100644 test/cypress/integration/invoiceInBasicData.spec.js
 rename test/cypress/integration/{ => ticket}/ticketBoxing.spec.js (100%)
 rename test/cypress/integration/{ => wagon}/wagonCreate.spec.js (100%)
 rename test/cypress/integration/{ => wagonType}/wagonTypeCreate.spec.js (100%)
 rename test/cypress/integration/{ => worker}/workerList.spec.js (100%)
 rename test/cypress/integration/{ => worker}/workerNotificationsManager.spec.js (100%)
 rename test/cypress/integration/{ => worker}/workerSummary.spec.js (100%)
 create mode 100644 test/vitest/__tests__/pages/InvoiceIn/InvoiceInIntrastat.spec.js
 create mode 100644 test/vitest/__tests__/pages/InvoiceIn/InvoiceInVat.spec.js

diff --git a/cypress.config.js b/cypress.config.js
index 2b5b40d08..1934f833e 100644
--- a/cypress.config.js
+++ b/cypress.config.js
@@ -8,7 +8,7 @@ module.exports = defineConfig({
         supportFile: 'test/cypress/support/index.js',
         videosFolder: 'test/cypress/videos',
         video: false,
-        specPattern: 'test/cypress/integration/*.spec.js',
+        specPattern: 'test/cypress/integration/**/*.spec.js',
         experimentalRunAllSpecs: true,
         component: {
             componentFolder: 'src',
diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index 2a4982fce..bd3a01304 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -135,6 +135,10 @@ async function saveChanges(data) {
     hasChanges.value = false;
     isLoading.value = false;
     emit('saveChanges', data);
+    quasar.notify({
+        type: 'positive',
+        message: t('globals.dataSaved'),
+    });
 }
 
 async function insert() {
diff --git a/src/css/app.scss b/src/css/app.scss
index 0f04c9ad8..3cc6f55c2 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -33,6 +33,7 @@ body.body--light {
     --vn-gray: #f5f5f5;
     --vn-label: #5f5f5f;
     --vn-dark: white;
+    --vn-light-gray: #e7e3e3;
 }
 
 body.body--dark {
@@ -40,6 +41,7 @@ body.body--dark {
     --vn-gray: #313131;
     --vn-label: #a8a8a8;
     --vn-dark: #292929;
+    --vn-light-gray: #424242;
 }
 
 .bg-vn-dark {
diff --git a/src/filters/toCurrency.js b/src/filters/toCurrency.js
index 5005e95bc..f820c0127 100644
--- a/src/filters/toCurrency.js
+++ b/src/filters/toCurrency.js
@@ -9,13 +9,10 @@ export default function (value, symbol = 'EUR', fractionSize = 2) {
         style: 'currency',
         currency: symbol,
         minimumFractionDigits: fractionSize,
-        maximumFractionDigits: fractionSize
+        maximumFractionDigits: fractionSize,
     };
 
     const lang = locale.value == 'es' ? 'de' : locale.value;
 
-    return new Intl.NumberFormat(lang, options)
-        .format(value);
-
-
-}
\ No newline at end of file
+    return new Intl.NumberFormat(lang, options).format(value);
+}
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index b7dc1c132..91ac748ee 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -422,7 +422,7 @@ export default {
             company: 'Empresa',
             customerCard: 'Ficha del cliente',
             ticketList: 'Listado de tickets',
-            vat: 'Vat',
+            vat: 'Iva',
             dueDay: 'Fecha de vencimiento',
         },
         summary: {
diff --git a/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
index 3419492b7..0aee913a4 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
@@ -144,7 +144,6 @@ async function create() {
             type: 'positive',
         });
     } catch (error) {
-        console.log(error);
         quasar.notify({
             message: t(`${error.message}`),
             type: 'negative',
@@ -466,6 +465,8 @@ async function create() {
                         class="full-width q-pa-xs"
                         :label="t('Reference')"
                         v-model="dms.reference"
+                        clearable
+                        clear-icon="close"
                     />
                     <VnSelectFilter
                         class="full-width q-pa-xs"
diff --git a/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue b/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
index d657b09d0..ba6287c4d 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
@@ -2,6 +2,7 @@
 import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import axios from 'axios';
 import { toDate } from 'src/filters';
 import { useArrayData } from 'src/composables/useArrayData';
 import CrudModel from 'src/components/CrudModel.vue';
@@ -16,15 +17,14 @@ const invoiceIn = computed(() => arrayData.store.data);
 const rowsSelected = ref([]);
 const banks = ref([]);
 const invoiceInFormRef = ref();
+const invoiceId = route.params.id;
 
 const filter = {
     where: {
-        invoiceInFk: route.params.id,
+        invoiceInFk: invoiceId,
     },
 };
 
-const isNotEuro = (code) => code != 'EUR';
-
 const columns = computed(() => [
     {
         name: 'duedate',
@@ -63,6 +63,19 @@ const columns = computed(() => [
         align: 'left',
     },
 ]);
+
+const isNotEuro = (code) => code != 'EUR';
+const areRows = ref(null);
+
+async function insert() {
+    if (!areRows.value) {
+        await axios.post('/InvoiceInDueDays/new ', { id: Number(invoiceId) });
+        await invoiceInFormRef.value.reload();
+    }
+    if (areRows.value) {
+        invoiceInFormRef.value.insert();
+    }
+}
 </script>
 <template>
     <FetchData url="Banks" auto-load limit="30" @on-fetch="(data) => (banks = data)" />
@@ -73,8 +86,9 @@ const columns = computed(() => [
         url="InvoiceInDueDays"
         :filter="filter"
         auto-load
-        :data-required="{ invoiceInFk: route.params.id }"
+        :data-required="{ invoiceInFk: invoiceId }"
         v-model:selected="rowsSelected"
+        @on-fetch="(data) => (areRows = !!data.length)"
     >
         <template #body="{ rows }">
             <QTable
@@ -271,13 +285,7 @@ const columns = computed(() => [
         </template>
     </CrudModel>
     <QPageSticky position="bottom-right" :offset="[25, 25]">
-        <QBtn
-            color="primary"
-            icon="add"
-            size="lg"
-            round
-            @click="invoiceInFormRef.insert()"
-        />
+        <QBtn color="primary" icon="add" size="lg" round @click="insert" />
     </QPageSticky>
 </template>
 <style lang="scss" scoped></style>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
index 79cdab02d..6c3f0838c 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
@@ -29,6 +29,7 @@ const entityId = computed(() => $props.id || route.params.id);
 const salixUrl = ref();
 const invoiceInUrl = ref();
 const amountsNotMatch = ref(null);
+const intrastatTotals = ref({});
 
 const vatColumns = ref([
     {
@@ -74,7 +75,7 @@ const vatColumns = ref([
         name: 'currency',
         label: 'invoiceIn.summary.currency',
         field: (row) => row.foreignValue,
-        format: (value) => toCurrency(value),
+        format: (value) => value,
         sortable: true,
         align: 'left',
     },
@@ -138,7 +139,7 @@ const intrastatColumns = ref([
         align: 'left',
     },
     {
-        name: 'amount',
+        name: 'stems',
         label: 'invoiceIn.summary.stems',
         field: (row) => row.stems,
         format: (value) => value,
@@ -155,14 +156,29 @@ const intrastatColumns = ref([
     },
 ]);
 
-function setAmountNotMatch(entity) {
+function getAmountNotMatch(totals) {
+    return (
+        totals.totalDueDay != totals.totalTaxableBase &&
+        totals.totalDueDay != totals.totalVat
+    );
+}
+
+function getIntrastatTotals(intrastat) {
+    const totals = {};
+    totals.amount = intrastat.reduce((acc, cur) => acc + cur.amount, 0);
+    totals.net = intrastat.reduce((acc, cur) => acc + cur.net, 0);
+    totals.stems = intrastat.reduce((acc, cur) => acc + cur.stems, 0);
+
+    return totals;
+}
+
+function setData(entity) {
     if (!entity) return false;
 
-    const total = entity.totals;
+    amountsNotMatch.value = getAmountNotMatch(entity.totals);
 
-    amountsNotMatch.value =
-        total.totalDueDay != total.totalTaxableBase &&
-        total.totalDueDay != total.totalVat;
+    if (entity.invoiceInIntrastat.length)
+        intrastatTotals.value = { ...getIntrastatTotals(entity.invoiceInIntrastat) };
 }
 </script>
 
@@ -170,12 +186,13 @@ function setAmountNotMatch(entity) {
     <CardSummary
         ref="summary"
         :url="`InvoiceIns/${entityId}/summary`"
-        @on-fetch="(data) => setAmountNotMatch(data)"
+        @on-fetch="(data) => setData(data)"
     >
         <template #header="{ entity: invoiceIn }">
             <div>{{ invoiceIn.id }} - {{ invoiceIn.supplier.name }}</div>
         </template>
         <template #body="{ entity: invoiceIn }">
+            <!--Basic Data-->
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
                     <a class="header" :href="`#/invoice-in/${entityId}/basic-data`">
@@ -271,7 +288,7 @@ function setAmountNotMatch(entity) {
                     </QBtn>
                 </QCardSection>
                 <QCardSection class="q-pa-none">
-                    <div class="bordered q-px-sm">
+                    <div class="bordered q-px-sm q-mx-auto">
                         <VnLv
                             :label="t('invoiceIn.summary.taxableBase')"
                             :value="toCurrency(invoiceIn.totals.totalTaxableBase)"
@@ -336,6 +353,7 @@ function setAmountNotMatch(entity) {
                     :value="invoiceIn.isBooked"
                 />
             </QCard>
+            <!--Vat-->
             <QCard v-if="invoiceIn.invoiceInTax.length" class="vn-three">
                 <a class="header">
                     {{ t('invoiceIn.card.vat') }}
@@ -347,33 +365,54 @@ function setAmountNotMatch(entity) {
                     hide-pagination
                 >
                     <template #header="props">
-                        <QTr :props="props">
+                        <QTr :props="props" class="bg">
                             <QTh v-for="col in props.cols" :key="col.name" :props="props">
                                 {{ t(col.label) }}
                             </QTh>
                         </QTr>
                     </template>
+                    <template #bottom-row>
+                        <QTr class="bg">
+                            <QTd></QTd>
+                            <QTd>{{ toCurrency(invoiceIn.totals.totalTaxableBase) }}</QTd>
+                            <QTd></QTd>
+                            <QTd></QTd>
+                            <QTd></QTd>
+                            <QTd></QTd>
+                        </QTr>
+                    </template>
                 </QTable>
             </QCard>
+            <!--Due Day-->
             <QCard v-if="invoiceIn.invoiceInDueDay.length" class="vn-two">
                 <div class="header">
                     {{ t('invoiceIn.card.dueDay') }}
                 </div>
                 <QTable
+                    class="full-width"
                     :columns="dueDayColumns"
                     :rows="invoiceIn.invoiceInDueDay"
                     flat
                     hide-pagination
                 >
                     <template #header="props">
-                        <QTr :props="props">
+                        <QTr :props="props" class="bg">
                             <QTh v-for="col in props.cols" :key="col.name" :props="props">
                                 {{ t(col.label) }}
                             </QTh>
                         </QTr>
                     </template>
+                    <template #bottom-row>
+                        <QTr class="bg">
+                            <QTd></QTd>
+                            <QTd></QTd>
+                            <QTd>{{ toCurrency(invoiceIn.totals.totalDueDay) }}</QTd>
+                            <QTd></QTd>
+                        </QTr>
+                    </template>
                 </QTable>
             </QCard>
+            <!--Intrastat-->
             <QCard v-if="invoiceIn.invoiceInIntrastat.length">
                 <div class="header">
                     {{ t('invoiceIn.card.intrastat') }}
@@ -385,18 +424,30 @@ function setAmountNotMatch(entity) {
                     hide-pagination
                 >
                     <template #header="props">
-                        <QTr :props="props">
+                        <QTr :props="props" class="bg">
                             <QTh v-for="col in props.cols" :key="col.name" :props="props">
                                 {{ t(col.label) }}
                             </QTh>
                         </QTr>
                     </template>
+                    <template #bottom-row>
+                        <QTr class="bg">
+                            <QTd></QTd>
+                            <QTd>{{ toCurrency(intrastatTotals.amount) }}</QTd>
+                            <QTd>{{ intrastatTotals.net }}</QTd>
+                            <QTd>{{ intrastatTotals.stems }}</QTd>
+                            <QTd></QTd>
+                        </QTr>
+                    </template>
                 </QTable>
             </QCard>
         </template>
     </CardSummary>
 </template>
 <style lang="scss" scoped>
+.bg {
+    background-color: var(--vn-light-gray);
+}
 .bordered {
     border: 1px solid var(--vn-text);
     width: 16em;
diff --git a/src/pages/InvoiceIn/Card/InvoiceInVat.vue b/src/pages/InvoiceIn/Card/InvoiceInVat.vue
index 8a83dfbd4..eb613943a 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInVat.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInVat.vue
@@ -82,7 +82,7 @@ const columns = computed(() => [
         label: t('Rate'),
         sortable: true,
         tabIndex: 5,
-        field: (row) => taxRate(row, row.taxTypeSageFk),
+        field: (row) => toCurrency(taxRate(row, row.taxTypeSageFk)),
         align: 'left',
     },
     {
@@ -119,9 +119,9 @@ function taxRate(invoiceInTax, sageTaxTypeId) {
     const taxTypeSage = taxRateSelection && taxRateSelection.rate;
     const taxableBase = invoiceInTax && invoiceInTax.taxableBase;
     if (taxTypeSage && taxableBase) {
-        return toCurrency((taxTypeSage / 100) * taxableBase);
+        return (taxTypeSage / 100) * taxableBase;
     }
-    return toCurrency(0);
+    return 0;
 }
 
 async function addExpense() {
@@ -146,10 +146,11 @@ async function addExpense() {
             type: 'positive',
             message: t('globals.dataSaved'),
         });
+        newExpenseRef.value.hide();
     } catch (error) {
         quasar.notify({
             type: 'negative',
-            message: t(`${error}`),
+            message: t(`${error.message}`),
         });
     }
 }
@@ -394,7 +395,11 @@ async function addExpense() {
                                     </VnSelectFilter>
                                 </QItem>
                                 <QItem>
-                                    {{ taxRate(props.row, props.row.taxTypeSageFk) }}
+                                    {{
+                                        toCurrency(
+                                            taxRate(props.row, props.row.taxTypeSageFk)
+                                        )
+                                    }}
                                 </QItem>
                                 <QItem>
                                     <QInput
diff --git a/test/cypress/integration/claimDevelopment.spec.js b/test/cypress/integration/claim/claimDevelopment.spec.js
similarity index 100%
rename from test/cypress/integration/claimDevelopment.spec.js
rename to test/cypress/integration/claim/claimDevelopment.spec.js
diff --git a/test/cypress/integration/claimNotes.spec.js b/test/cypress/integration/claim/claimNotes.spec.js
similarity index 100%
rename from test/cypress/integration/claimNotes.spec.js
rename to test/cypress/integration/claim/claimNotes.spec.js
diff --git a/test/cypress/integration/claimPhoto.spec.js b/test/cypress/integration/claim/claimPhoto.spec.js
similarity index 100%
rename from test/cypress/integration/claimPhoto.spec.js
rename to test/cypress/integration/claim/claimPhoto.spec.js
diff --git a/test/cypress/integration/invoiceIn/invoiceInBasicData.spec.js b/test/cypress/integration/invoiceIn/invoiceInBasicData.spec.js
new file mode 100644
index 000000000..0013df343
--- /dev/null
+++ b/test/cypress/integration/invoiceIn/invoiceInBasicData.spec.js
@@ -0,0 +1,53 @@
+/// <reference types="cypress" />
+describe('InvoiceInBasicData', () => {
+    const selects = '.q-form .q-select';
+    const appendBtns = 'label button';
+    const dialogAppendBtns = '.q-dialog label button';
+    const dialogInputs = '.q-dialog input';
+    const dialogActionBtns = '.q-card__actions button';
+
+    beforeEach(() => {
+        cy.login('developer');
+        cy.visit(`/#/invoice-in/1/basic-data`);
+    });
+
+    it('should edit the provideer and supplier ref', () => {
+        cy.get(selects).eq(0).click();
+        cy.get(selects).eq(0).type('Bros');
+        cy.get(selects).eq(0).type('{enter}');
+
+        cy.get(appendBtns).eq(0).click();
+        cy.get('input').eq(2).type(4739);
+        cy.saveCard();
+
+        cy.get(`${selects} input`).eq(0).invoke('val').should('eq', 'Bros nick');
+        cy.get('input').eq(2).invoke('val').should('eq', '4739');
+    });
+
+    it('should edit the dms data', () => {
+        const firtsInput = 'Ticket:65';
+        const secondInput = "I don't know what posting here!";
+
+        cy.get(appendBtns).eq(3).click();
+        cy.get(dialogAppendBtns).eq(0).click();
+        cy.get(dialogInputs).eq(0).type(firtsInput);
+        cy.get(dialogAppendBtns).eq(1).click();
+        cy.get('textarea').type(secondInput);
+        cy.get(dialogActionBtns).eq(1).click();
+
+        cy.get(appendBtns).eq(3).click();
+
+        cy.get(dialogInputs).eq(0).invoke('val').should('eq', firtsInput);
+        cy.get('textarea').invoke('val').should('eq', secondInput);
+    });
+
+    it('should throw an error creating a new dms if a file is not attached', () => {
+        cy.get(appendBtns).eq(2).click();
+        cy.get(appendBtns).eq(1).click();
+        cy.get(dialogActionBtns).eq(1).click();
+        cy.get('.q-notification__message').should(
+            'have.text',
+            "The files can't be empty"
+        );
+    });
+});
diff --git a/test/cypress/integration/invoiceIn/invoiceInDueDay.spec.js b/test/cypress/integration/invoiceIn/invoiceInDueDay.spec.js
new file mode 100644
index 000000000..161e623c3
--- /dev/null
+++ b/test/cypress/integration/invoiceIn/invoiceInDueDay.spec.js
@@ -0,0 +1,29 @@
+/// <reference types="cypress" />
+describe('InvoiceInDueDay', () => {
+    const inputs = 'label input';
+    const inputBtns = 'label button';
+    const dialogBtns = '.q-dialog button';
+
+    beforeEach(() => {
+        cy.login('developer');
+        cy.visit(`/#/invoice-in/1/due-day`);
+    });
+
+    it('should update the amount', () => {
+        cy.get(inputBtns).eq(0).click();
+        cy.get(inputs).eq(3).type(23);
+        cy.saveCard();
+        cy.get('.q-notification__message').should('have.text', 'Data saved');
+    });
+
+    it('should add a new row ', () => {
+        cy.addRow();
+        cy.get(inputs).eq(11).type(8);
+        cy.saveCard();
+        cy.get('.q-notification__message').should('have.text', 'Data saved');
+    });
+
+    it('should remove the first line', () => {
+        cy.removeRow(1);
+    });
+});
diff --git a/test/cypress/integration/invoiceIn/invoiceInIntrastat.spec.js b/test/cypress/integration/invoiceIn/invoiceInIntrastat.spec.js
new file mode 100644
index 000000000..5024b2f1c
--- /dev/null
+++ b/test/cypress/integration/invoiceIn/invoiceInIntrastat.spec.js
@@ -0,0 +1,38 @@
+/// <reference types="cypress" />
+describe('InvoiceInIntrastat', () => {
+    const inputBtns = 'label button';
+    const thirdRow = 'tbody > :nth-child(3)';
+    const firstLineCode = 'tbody > :nth-child(1) > :nth-child(2)';
+
+    beforeEach(() => {
+        cy.login('developer');
+        cy.visit(`/#/invoice-in/1/intrastat`);
+    });
+
+    it('should edit the first line', () => {
+        cy.selectOption(firstLineCode, 'Plantas vivas: Esqueje/injerto, Vid');
+
+        cy.get(inputBtns).eq(1).click();
+
+        cy.saveCard();
+        cy.visit(`/#/invoice-in/1/intrastat`);
+
+        cy.getValue(firstLineCode).should(
+            'have.value',
+            'Plantas vivas: Esqueje/injerto, Vid'
+        );
+    });
+
+    it('should add a new row', () => {
+        const rowData = [false, 'Plantas vivas: Esqueje/injerto, Vid', 30, 10, 5, 'FR'];
+
+        cy.addRow();
+        cy.fillRow(thirdRow, rowData);
+        cy.saveCard();
+        cy.get('.q-notification__message').should('have.text', 'Data saved');
+    });
+
+    it('should remove the first line', () => {
+        cy.removeRow(1);
+    });
+});
diff --git a/test/cypress/integration/invoiceInList.spec.js b/test/cypress/integration/invoiceIn/invoiceInList.spec.js
similarity index 100%
rename from test/cypress/integration/invoiceInList.spec.js
rename to test/cypress/integration/invoiceIn/invoiceInList.spec.js
diff --git a/test/cypress/integration/invoiceIn/invoiceInVat.spec.js b/test/cypress/integration/invoiceIn/invoiceInVat.spec.js
new file mode 100644
index 000000000..26c7750ad
--- /dev/null
+++ b/test/cypress/integration/invoiceIn/invoiceInVat.spec.js
@@ -0,0 +1,55 @@
+/// <reference types="cypress" />
+describe('InvoiceInVat', () => {
+    const inputs = 'label input';
+    const inputBtns = 'label button';
+    const thirdRow = 'tbody > :nth-child(3)';
+    const firstLineVat = 'tbody > :nth-child(1) > :nth-child(4)';
+    const dialogInputs = '.q-dialog label input';
+    const dialogBtns = '.q-dialog button';
+    const randomInt = Math.floor(Math.random() * 100);
+
+    beforeEach(() => {
+        cy.login('developer');
+        cy.visit(`/#/invoice-in/1/vat`);
+    });
+
+    it('should edit the first line', () => {
+        cy.get(inputBtns).eq(1).click();
+        cy.get(inputs).eq(2).type(23);
+        cy.selectOption(firstLineVat, 'H.P. IVA 21% CEE');
+
+        cy.saveCard();
+        cy.visit(`/#/invoice-in/1/vat`);
+
+        cy.getValue(firstLineVat).should('have.value', 'H.P. IVA 21% CEE');
+    });
+
+    it('should add a new row', () => {
+        cy.addRow();
+        cy.fillRow(thirdRow, [true, 2000000001, 30, 'H.P. IVA 10']);
+        cy.saveCard();
+        cy.get('.q-notification__message').should('have.text', 'Data saved');
+    });
+
+    it('should remove the first line', () => {
+        cy.removeRow(1);
+    });
+
+    it('should throw an error if there are fields undefined', () => {
+        cy.get(inputBtns).eq(0).click();
+        cy.get(dialogBtns).eq(2).click();
+        cy.get('.q-notification__message').should('have.text', "The code can't be empty");
+    });
+
+    it('should correctly handle expense addition', () => {
+        cy.get(inputBtns).eq(0).click();
+
+        cy.get(dialogInputs).eq(0).click();
+        cy.get(dialogInputs).eq(0).type(randomInt);
+        cy.get(dialogInputs).eq(1).click();
+        cy.get(dialogInputs).eq(1).type('This is a dummy expense');
+
+        cy.get(dialogBtns).eq(2).click();
+        cy.get('.q-notification__message').should('have.text', 'Data saved');
+    });
+});
diff --git a/test/cypress/integration/invoiceInBasicData.spec.js b/test/cypress/integration/invoiceInBasicData.spec.js
deleted file mode 100644
index e95fb0161..000000000
--- a/test/cypress/integration/invoiceInBasicData.spec.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/// <reference types="cypress" />
-describe('InvoiceInBasicData', () => {
-    const selects = '.q-form .q-select';
-    const appendBtns = 'label button';
-    const saveBtn = '.q-btn-group > .q-btn--standard > .q-btn__content > .q-icon';
-
-    beforeEach(() => {
-        cy.login('developer');
-        cy.visit(`/#/invoice-in/1/basic-data`);
-    });
-
-    it('should edit the provideer and supplier ref', () => {
-        cy.get(selects).eq(0).click();
-        cy.get(selects).eq(0).type('Bros');
-        cy.get(selects).eq(0).type('{enter}');
-
-        cy.get(appendBtns).eq(0).click();
-        cy.get('input').eq(2).type(4739);
-        cy.get(saveBtn).click();
-
-        cy.get(`${selects} input`).eq(0).invoke('val').should('eq', 'Bros nick');
-        cy.get('input').eq(2).invoke('val').should('eq', 4739);
-    });
-});
diff --git a/test/cypress/integration/ticketBoxing.spec.js b/test/cypress/integration/ticket/ticketBoxing.spec.js
similarity index 100%
rename from test/cypress/integration/ticketBoxing.spec.js
rename to test/cypress/integration/ticket/ticketBoxing.spec.js
diff --git a/test/cypress/integration/wagonCreate.spec.js b/test/cypress/integration/wagon/wagonCreate.spec.js
similarity index 100%
rename from test/cypress/integration/wagonCreate.spec.js
rename to test/cypress/integration/wagon/wagonCreate.spec.js
diff --git a/test/cypress/integration/wagonTypeCreate.spec.js b/test/cypress/integration/wagonType/wagonTypeCreate.spec.js
similarity index 100%
rename from test/cypress/integration/wagonTypeCreate.spec.js
rename to test/cypress/integration/wagonType/wagonTypeCreate.spec.js
diff --git a/test/cypress/integration/workerList.spec.js b/test/cypress/integration/worker/workerList.spec.js
similarity index 100%
rename from test/cypress/integration/workerList.spec.js
rename to test/cypress/integration/worker/workerList.spec.js
diff --git a/test/cypress/integration/workerNotificationsManager.spec.js b/test/cypress/integration/worker/workerNotificationsManager.spec.js
similarity index 100%
rename from test/cypress/integration/workerNotificationsManager.spec.js
rename to test/cypress/integration/worker/workerNotificationsManager.spec.js
diff --git a/test/cypress/integration/workerSummary.spec.js b/test/cypress/integration/worker/workerSummary.spec.js
similarity index 100%
rename from test/cypress/integration/workerSummary.spec.js
rename to test/cypress/integration/worker/workerSummary.spec.js
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index a725837a1..a0718ef57 100755
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -104,14 +104,19 @@ Cypress.Commands.add('fillRow', (rowSelector, data) => {
             .then((td) => {
                 if (td.find('.q-select__dropdown-icon').length) {
                     cy.selectOption(td, value);
-                }
-                if (td.find('.q-checkbox__inner').length && value) {
+                } else if (td.find('.q-checkbox__inner').length && value) {
                     cy.checkOption(td);
-                }
+                } else if (td.find('input[type="text"]') && value)
+                    cy.get(td).find('input').type(value);
             });
     });
 });
 
+Cypress.Commands.add('addRow', () => {
+    cy.waitForElement('tbody');
+    cy.get('.q-page-sticky > div > .q-btn > .q-btn__content').click();
+});
+
 Cypress.Commands.add('validateRow', (rowSelector, expectedValues) => {
     cy.waitForElement('tbody');
     cy.get(rowSelector).within(() => {
@@ -126,4 +131,26 @@ Cypress.Commands.add('validateRow', (rowSelector, expectedValues) => {
         }
     });
 });
+
+Cypress.Commands.add('removeRow', (rowIndex) => {
+    let rowsBefore;
+    let rowsAfter;
+
+    cy.get('tr')
+        .its('length')
+        .then((length) => {
+            rowsBefore = length;
+            cy.get('.q-checkbox').eq(rowIndex).click();
+            cy.removeCard();
+            cy.get('.q-dialog button').eq(2).click();
+        })
+        .then(() => {
+            cy.get('tr')
+                .its('length')
+                .then((length) => {
+                    rowsAfter = length;
+                    expect(rowsBefore).to.eq(rowsAfter + 1);
+                });
+        });
+});
 // registerCommands();
diff --git a/test/vitest/__tests__/pages/InvoiceIn/InvoiceInBasicData.spec.js b/test/vitest/__tests__/pages/InvoiceIn/InvoiceInBasicData.spec.js
index f8daa99cd..3e6d8f892 100644
--- a/test/vitest/__tests__/pages/InvoiceIn/InvoiceInBasicData.spec.js
+++ b/test/vitest/__tests__/pages/InvoiceIn/InvoiceInBasicData.spec.js
@@ -16,31 +16,35 @@ describe('InvoiceInBasicData', () => {
         }).vm;
     });
 
-    it('should throw an error when data is empty', async () => {
-        vi.spyOn(axios, 'post').mockResolvedValue({ data: [] });
-        vi.spyOn(vm.quasar, 'notify');
+    describe('edit()', () => {
+        it('should throw an error when data is empty', async () => {
+            vi.spyOn(axios, 'post').mockResolvedValue({ data: [] });
+            vi.spyOn(vm.quasar, 'notify');
 
-        await vm.edit();
+            await vm.edit();
 
-        expect(vm.quasar.notify).toHaveBeenCalledWith(
-            expect.objectContaining({
-                message: `The company can't be empty`,
-                type: 'negative',
-            })
-        );
+            expect(vm.quasar.notify).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    message: `The company can't be empty`,
+                    type: 'negative',
+                })
+            );
+        });
     });
 
-    it('should throw an error when data is empty', async () => {
-        vi.spyOn(axios, 'post').mockResolvedValue({ data: [] });
-        vi.spyOn(vm.quasar, 'notify');
+    describe('create()', () => {
+        it('should throw an error when data is empty', async () => {
+            vi.spyOn(axios, 'post').mockResolvedValue({ data: [] });
+            vi.spyOn(vm.quasar, 'notify');
 
-        await vm.create();
+            await vm.create();
 
-        expect(vm.quasar.notify).toHaveBeenCalledWith(
-            expect.objectContaining({
-                message: `The company can't be empty`,
-                type: 'negative',
-            })
-        );
+            expect(vm.quasar.notify).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    message: `The company can't be empty`,
+                    type: 'negative',
+                })
+            );
+        });
     });
 });
diff --git a/test/vitest/__tests__/pages/InvoiceIn/InvoiceInIntrastat.spec.js b/test/vitest/__tests__/pages/InvoiceIn/InvoiceInIntrastat.spec.js
new file mode 100644
index 000000000..1622bf59e
--- /dev/null
+++ b/test/vitest/__tests__/pages/InvoiceIn/InvoiceInIntrastat.spec.js
@@ -0,0 +1,34 @@
+import { vi, describe, expect, it, beforeAll } from 'vitest';
+import { createWrapper, axios } from 'app/test/vitest/helper';
+import InvoiceInIntrastat from 'src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue';
+
+describe('InvoiceInIntrastat', () => {
+    let vm;
+
+    beforeAll(() => {
+        vi.spyOn(axios, 'get').mockResolvedValue({ data: [{}] });
+        vm = createWrapper(InvoiceInIntrastat, {
+            global: {
+                stubs: [],
+                mocks: {
+                    fetch: vi.fn(),
+                },
+            },
+        }).vm;
+    });
+
+    describe('getTotal()', () => {
+        it('should correctly handle the sum', () => {
+            vm.invoceInIntrastat = [
+                { amount: 10, stems: 162 },
+                { amount: 20, stems: 21 },
+            ];
+
+            const totalAmount = vm.getTotal('amount');
+            const totalStems = vm.getTotal('stems');
+
+            expect(totalAmount).toBe(10 + 20);
+            expect(totalStems).toBe(162 + 21);
+        });
+    });
+});
diff --git a/test/vitest/__tests__/pages/InvoiceIn/InvoiceInVat.spec.js b/test/vitest/__tests__/pages/InvoiceIn/InvoiceInVat.spec.js
new file mode 100644
index 000000000..6ea9d6a5b
--- /dev/null
+++ b/test/vitest/__tests__/pages/InvoiceIn/InvoiceInVat.spec.js
@@ -0,0 +1,75 @@
+import { vi, describe, expect, it, beforeAll } from 'vitest';
+import { createWrapper, axios } from 'app/test/vitest/helper';
+import InvoiceInVat from 'src/pages/InvoiceIn/Card/InvoiceInVat.vue';
+
+describe('InvoiceInVat', () => {
+    let vm;
+
+    beforeAll(() => {
+        vm = createWrapper(InvoiceInVat, {
+            global: {
+                stubs: [],
+                mocks: {
+                    fetch: vi.fn(),
+                },
+            },
+        }).vm;
+    });
+
+    describe('addExpense()', () => {
+        beforeAll(() => {
+            vi.spyOn(axios, 'post').mockResolvedValue({ data: [] });
+            vi.spyOn(axios, 'get').mockResolvedValue({ data: [] });
+            vi.spyOn(vm.quasar, 'notify');
+        });
+
+        it('should throw an error when the code property is undefined', async () => {
+            await vm.addExpense();
+
+            expect(vm.quasar.notify).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    message: `The code can't be empty`,
+                    type: 'negative',
+                })
+            );
+        });
+
+        it('should correctly handle expense addition', async () => {
+            vm.newExpense = {
+                code: 123,
+                isWithheld: false,
+                description: 'Descripción del gasto',
+            };
+
+            await vm.addExpense();
+            expect(vm.quasar.notify).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    message: 'Data saved',
+                    type: 'positive',
+                })
+            );
+        });
+    });
+
+    describe('taxRate()', () => {
+        it('should correctly compute the tax rate', () => {
+            const invoiceInTax = { taxableBase: 100 };
+            const sageTaxTypeId = 1;
+            vm.sageTaxTypes = [
+                { id: 1, rate: 10 },
+                { id: 2, rate: 20 },
+            ];
+            const result = vm.taxRate(invoiceInTax, sageTaxTypeId);
+            expect(result).toBe((10 / 100) * 100);
+        });
+
+        it('should return 0 if there is not tax rate', () => {
+            const invoiceInTax = { taxableBase: 100 };
+            const sageTaxTypeId = 1;
+            vm.sageTaxTypes = [];
+
+            const result = vm.taxRate(invoiceInTax, sageTaxTypeId);
+            expect(result).toBe(0);
+        });
+    });
+});

From 46ee2a00753cbc3299968f0af981922fdd3d83c9 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 9 Nov 2023 13:26:03 +0100
Subject: [PATCH 27/81] ref #5835 fix test

---
 src/i18n/en/index.js                                     | 2 +-
 test/cypress/integration/invoiceIn/invoiceInList.spec.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index b3fb32d9b..e7052c4f2 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -396,7 +396,7 @@ export default {
             list: 'List',
             createInvoiceIn: 'Create invoice in',
             summary: 'Summary',
-            basicData: 'Basic Data',
+            basicData: 'Basic data',
             vat: 'VAT',
             dueDay: 'Due day',
             intrastat: 'Intrastat',
diff --git a/test/cypress/integration/invoiceIn/invoiceInList.spec.js b/test/cypress/integration/invoiceIn/invoiceInList.spec.js
index 98e5a96a1..bd722edab 100644
--- a/test/cypress/integration/invoiceIn/invoiceInList.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInList.spec.js
@@ -22,7 +22,7 @@ describe('InvoiceInList', () => {
 
     it('should open the details', () => {
         cy.get(firstDetailBtn).click();
-        cy.get(summaryHeaders).eq(1).contains('Basic Data');
-        cy.get(summaryHeaders).eq(5).contains('Vat');
+        cy.get(summaryHeaders).eq(1).contains('Basic data');
+        cy.get(summaryHeaders).eq(4).contains('Vat');
     });
 });

From b6e8658de9a3d65fdeb5294243ab2760958eaeb9 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 9 Nov 2023 15:17:09 +0100
Subject: [PATCH 28/81] ref #5835 fix due-day

---
 src/pages/InvoiceIn/Card/InvoiceInDueDay.vue  | 10 ++-------
 .../invoiceIn/invoiceInDueDay.spec.js         | 21 ++++++++++---------
 2 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue b/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
index ba6287c4d..e047876f3 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
@@ -65,16 +65,10 @@ const columns = computed(() => [
 ]);
 
 const isNotEuro = (code) => code != 'EUR';
-const areRows = ref(null);
 
 async function insert() {
-    if (!areRows.value) {
-        await axios.post('/InvoiceInDueDays/new ', { id: Number(invoiceId) });
-        await invoiceInFormRef.value.reload();
-    }
-    if (areRows.value) {
-        invoiceInFormRef.value.insert();
-    }
+    await axios.post('/InvoiceInDueDays/new ', { id: Number(invoiceId) });
+    await invoiceInFormRef.value.reload();
 }
 </script>
 <template>
diff --git a/test/cypress/integration/invoiceIn/invoiceInDueDay.spec.js b/test/cypress/integration/invoiceIn/invoiceInDueDay.spec.js
index 161e623c3..ee5ffe08d 100644
--- a/test/cypress/integration/invoiceIn/invoiceInDueDay.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInDueDay.spec.js
@@ -2,28 +2,29 @@
 describe('InvoiceInDueDay', () => {
     const inputs = 'label input';
     const inputBtns = 'label button';
-    const dialogBtns = '.q-dialog button';
+    const addBtn = '.q-page-sticky > div > .q-btn > .q-btn__content';
 
     beforeEach(() => {
         cy.login('developer');
-        cy.visit(`/#/invoice-in/1/due-day`);
+        cy.visit(`/#/invoice-in/6/due-day`);
     });
 
     it('should update the amount', () => {
-        cy.get(inputBtns).eq(0).click();
+        cy.get(inputBtns).eq(1).click();
         cy.get(inputs).eq(3).type(23);
         cy.saveCard();
         cy.get('.q-notification__message').should('have.text', 'Data saved');
     });
 
-    it('should add a new row ', () => {
-        cy.addRow();
-        cy.get(inputs).eq(11).type(8);
-        cy.saveCard();
-        cy.get('.q-notification__message').should('have.text', 'Data saved');
-    });
-
     it('should remove the first line', () => {
         cy.removeRow(1);
     });
+
+    it('should add a new row ', () => {
+        cy.waitForElement('thead');
+        cy.get(addBtn).click();
+
+        cy.saveCard();
+        cy.get('.q-notification__message').should('have.text', 'Data saved');
+    });
 });

From 195bd4c6d7ba1715f951b78c0361d6ec538ed521 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 22 Nov 2023 09:01:55 +0100
Subject: [PATCH 29/81] refs 5835 fix bordered box

---
 src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue | 2 +-
 src/pages/InvoiceIn/Card/InvoiceInSummary.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
index f37852fbd..ca660ce36 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
@@ -23,7 +23,7 @@ const entityId = computed(() => {
     return $props.id || route.params.id;
 });
 const totalAmount = ref([]);
-// Cuando Carlossa acabe de crear la lógica de card, usar store arrayData en lugar de hacer el fetch en el descriptor
+
 const filter = {
     include: [
         {
diff --git a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
index 6c3f0838c..2bb3f3f0a 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
@@ -450,7 +450,7 @@ function setData(entity) {
 }
 .bordered {
     border: 1px solid var(--vn-text);
-    width: 16em;
+    width: 18em;
 }
 </style>
 <i18n>

From 7e7154525dc06d5062e992e592001f781536360a Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 22 Nov 2023 10:08:51 +0100
Subject: [PATCH 30/81] refs #5835 fix front test

---
 .../__tests__/pages/InvoiceIn/InvoiceInIntrastat.spec.js      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/vitest/__tests__/pages/InvoiceIn/InvoiceInIntrastat.spec.js b/test/vitest/__tests__/pages/InvoiceIn/InvoiceInIntrastat.spec.js
index 1622bf59e..55ca19d71 100644
--- a/test/vitest/__tests__/pages/InvoiceIn/InvoiceInIntrastat.spec.js
+++ b/test/vitest/__tests__/pages/InvoiceIn/InvoiceInIntrastat.spec.js
@@ -6,15 +6,15 @@ describe('InvoiceInIntrastat', () => {
     let vm;
 
     beforeAll(() => {
-        vi.spyOn(axios, 'get').mockResolvedValue({ data: [{}] });
         vm = createWrapper(InvoiceInIntrastat, {
             global: {
-                stubs: [],
+                stubs: ['vnPaginate'],
                 mocks: {
                     fetch: vi.fn(),
                 },
             },
         }).vm;
+        vi.spyOn(axios, 'get').mockResolvedValue({ data: [{}] });
     });
 
     describe('getTotal()', () => {

From 25e7c3231a1baeeb1f4f98691774f53f243a7bd7 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 22 Nov 2023 12:40:12 +0100
Subject: [PATCH 31/81] refs #5815 ci: set custom NODE_ENV in environment

---
 quasar.config.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/quasar.config.js b/quasar.config.js
index cbcbae4dc..4de730515 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -66,7 +66,9 @@ module.exports = configure(function (/* ctx */) {
             // publicPath: '/',
             // analyze: true,
             // env: {},
-            // rawDefine: {}
+            rawDefine: {
+                'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+            },
             // ignorePublicFolder: true,
             // minify: false,
             // polyfillModulePreload: true,
@@ -79,6 +81,12 @@ module.exports = configure(function (/* ctx */) {
                 viteConf.build.modulePreload = {
                     polyfill: false,
                 };
+
+                // this.env={
+                //     'process.env.NODE_ENV': 'test1',
+                //     NODE_ENV: 'test2'
+
+                // }
             },
             // viteVuePluginOptions: {},
 

From 9388b873c6ce55c20c7fc2958e845e5785bebe57 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 22 Nov 2023 15:18:18 +0100
Subject: [PATCH 32/81] refs #5835 refactor basicData

---
 .../InvoiceIn/Card/InvoiceInBasicData.vue     | 83 ++++++++-----------
 .../InvoiceIn/InvoiceInBasicData.spec.js      | 20 +----
 2 files changed, 35 insertions(+), 68 deletions(-)

diff --git a/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
index 0aee913a4..9f794b91a 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
@@ -50,14 +50,10 @@ async function checkFileExists(dmsId) {
 async function setEditDms(dmsId) {
     const { data } = await axios.get(`Dms/${dmsId}`);
     dms.value = {
-        id: data.id,
         warehouseId: data.warehouseFk,
         companyId: data.companyFk,
         dmsTypeId: data.dmsTypeFk,
-        reference: data.reference,
-        description: data.description,
-        hasFile: data.hasFile,
-        hasFileAttached: data.hasFileAttached,
+        ...data,
     };
 
     if (!allowedContentTypes.value.length) await allowTypesRef.value.fetch();
@@ -83,12 +79,21 @@ async function setCreateDms() {
     createDmsRef.value.show();
 }
 
-async function edit() {
+async function upsert() {
     try {
-        if (!dms.value.companyId) throw Error(t(`The company can't be empty`));
-        if (!dms.value.warehouseId) throw Error(t(`The warehouse can't be empty`));
-        if (!dms.value.dmsTypeId) throw Error(t(`The DMS Type can't be empty`));
-        if (!dms.value.description) throw Error(t(`The description can't be empty`));
+        const isEdit = !!dms.value.id;
+        const errors = {
+            companyId: `The company can't be empty`,
+            warehouseId: `The warehouse can't be empty`,
+            dmsTypeId: `The DMS Type can't be empty`,
+            description: `The description can't be empty`,
+        };
+
+        Object.keys(errors).forEach((key) => {
+            if (!dms.value[key]) throw Error(t(errors[key]));
+        });
+
+        if (!isEdit && !dms.value.files) throw Error(t(`The files can't be empty`));
 
         const formData = new FormData();
 
@@ -98,47 +103,25 @@ async function edit() {
             dms.value.hasFileAttached = true;
         }
 
-        const { data } = await axios.post(`dms/${dms.value.id}/updateFile`, formData, {
-            params: dms.value,
-        });
+        if (!isEdit) {
+            const { data } = await axios.post('Dms/uploadFile', formData, {
+                params: dms.value,
+            });
+            if (data.length) invoiceIn.value.dmsFk = data[0].id;
+            createDmsRef.value.hide();
+        } else if (isEdit) {
+            const { data } = await axios.post(
+                `dms/${dms.value.id}/updateFile`,
+                formData,
+                {
+                    params: dms.value,
+                }
+            );
 
-        if (data.length) invoiceIn.value.dmsFk = data[0].id;
-        editDmsRef.value.hide();
-
-        quasar.notify({
-            message: t('globals.dataSaved'),
-            type: 'positive',
-        });
-    } catch (error) {
-        quasar.notify({
-            message: t(`${error.message}`),
-            type: 'negative',
-        });
-    }
-}
-
-async function create() {
-    try {
-        if (!dms.value.companyId) throw Error(t(`The company can't be empty`));
-        if (!dms.value.warehouseId) throw Error(t(`The warehouse can't be empty`));
-        if (!dms.value.dmsTypeId) throw Error(t(`The DMS Type can't be empty`));
-        if (!dms.value.description) throw Error(t(`The description can't be empty`));
-        if (!dms.value.files) throw Error(t(`The files can't be empty`));
-
-        const formData = new FormData();
-
-        if (dms.value.files) {
-            for (let i = 0; i < dms.value.files.length; i++)
-                formData.append(dms.value.files[i].name, dms.value.files[i]);
-            dms.value.hasFileAttached = true;
+            if (data.length) invoiceIn.value.dmsFk = data[0].id;
+            editDmsRef.value.hide();
         }
 
-        const { data } = await axios.post('Dms/uploadFile', formData, {
-            params: dms.value,
-        });
-        if (data.length) invoiceIn.value.dmsFk = data[0].id;
-        editDmsRef.value.hide();
-
         quasar.notify({
             message: t('globals.dataSaved'),
             type: 'positive',
@@ -558,7 +541,7 @@ async function create() {
             </QCardSection>
             <QCardActions class="justify-end">
                 <QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
-                <QBtn :label="t('globals.save')" color="primary" @click="edit" />
+                <QBtn :label="t('globals.save')" color="primary" @click="upsert" />
             </QCardActions>
         </QCard>
     </QDialog>
@@ -670,7 +653,7 @@ async function create() {
             </QCardSection>
             <QCardActions align="right">
                 <QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
-                <QBtn :label="t('globals.save')" color="primary" @click="create()" />
+                <QBtn :label="t('globals.save')" color="primary" @click="upsert" />
             </QCardActions>
         </QCard>
     </QDialog>
diff --git a/test/vitest/__tests__/pages/InvoiceIn/InvoiceInBasicData.spec.js b/test/vitest/__tests__/pages/InvoiceIn/InvoiceInBasicData.spec.js
index 3e6d8f892..a3c383f74 100644
--- a/test/vitest/__tests__/pages/InvoiceIn/InvoiceInBasicData.spec.js
+++ b/test/vitest/__tests__/pages/InvoiceIn/InvoiceInBasicData.spec.js
@@ -16,28 +16,12 @@ describe('InvoiceInBasicData', () => {
         }).vm;
     });
 
-    describe('edit()', () => {
+    describe('upsert()', () => {
         it('should throw an error when data is empty', async () => {
             vi.spyOn(axios, 'post').mockResolvedValue({ data: [] });
             vi.spyOn(vm.quasar, 'notify');
 
-            await vm.edit();
-
-            expect(vm.quasar.notify).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    message: `The company can't be empty`,
-                    type: 'negative',
-                })
-            );
-        });
-    });
-
-    describe('create()', () => {
-        it('should throw an error when data is empty', async () => {
-            vi.spyOn(axios, 'post').mockResolvedValue({ data: [] });
-            vi.spyOn(vm.quasar, 'notify');
-
-            await vm.create();
+            await vm.upsert();
 
             expect(vm.quasar.notify).toHaveBeenCalledWith(
                 expect.objectContaining({

From dfddde1d5c6a193bd4ea7befd6b205aa580103f8 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 22 Nov 2023 15:22:25 +0100
Subject: [PATCH 33/81] refs #5835 refactor upsert

---
 .../InvoiceIn/Card/InvoiceInBasicData.vue     | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
index 9f794b91a..b169339d4 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
@@ -102,23 +102,16 @@ async function upsert() {
                 formData.append(dms.value.files[i].name, dms.value.files[i]);
             dms.value.hasFileAttached = true;
         }
+        const url = !isEdit ? 'Dms/uploadFile' : `dms/${dms.value.id}/updateFile`;
+        const { data } = await axios.post(url, formData, {
+            params: dms.value,
+        });
+
+        if (data.length) invoiceIn.value.dmsFk = data[0].id;
 
         if (!isEdit) {
-            const { data } = await axios.post('Dms/uploadFile', formData, {
-                params: dms.value,
-            });
-            if (data.length) invoiceIn.value.dmsFk = data[0].id;
             createDmsRef.value.hide();
         } else if (isEdit) {
-            const { data } = await axios.post(
-                `dms/${dms.value.id}/updateFile`,
-                formData,
-                {
-                    params: dms.value,
-                }
-            );
-
-            if (data.length) invoiceIn.value.dmsFk = data[0].id;
             editDmsRef.value.hide();
         }
 

From d97f69456327c153b0defc6e46d9277269554513 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 23 Nov 2023 08:42:09 +0100
Subject: [PATCH 34/81] refs #5835 upsert refactor

---
 src/pages/InvoiceIn/Card/InvoiceInBasicData.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
index b169339d4..20144d8ca 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
@@ -102,7 +102,7 @@ async function upsert() {
                 formData.append(dms.value.files[i].name, dms.value.files[i]);
             dms.value.hasFileAttached = true;
         }
-        const url = !isEdit ? 'Dms/uploadFile' : `dms/${dms.value.id}/updateFile`;
+        const url = isEdit ? `dms/${dms.value.id}/updateFile` : 'Dms/uploadFile';
         const { data } = await axios.post(url, formData, {
             params: dms.value,
         });
@@ -111,7 +111,7 @@ async function upsert() {
 
         if (!isEdit) {
             createDmsRef.value.hide();
-        } else if (isEdit) {
+        } else {
             editDmsRef.value.hide();
         }
 

From 0114de4db55d935d40d5a420516807bce1bed787 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Fri, 24 Nov 2023 09:41:57 +0100
Subject: [PATCH 35/81] feat(preview): refs #6475 add preview icon on
 descriptor

---
 src/components/ui/CardDescriptor.vue          | 53 +++++++++++--------
 .../Customer/Card/CustomerDescriptorProxy.vue |  2 +-
 2 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index f63b75de6..cfba0dfe1 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -1,9 +1,10 @@
 <script setup>
 import { onMounted, useSlots, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
 import axios from 'axios';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
-
+import CustomerSummaryDialog from '../../pages/Customer/Card/CustomerSummaryDialog.vue';
 const $props = defineProps({
     url: {
         type: String,
@@ -25,8 +26,12 @@ const $props = defineProps({
         type: Number,
         default: 0,
     },
+    preview: {
+        type: Boolean,
+        default: false,
+    },
 });
-
+const quasar = useQuasar();
 const slots = useSlots();
 const { t } = useI18n();
 const entity = ref();
@@ -52,27 +57,36 @@ watch($props, async () => {
     entity.value = null;
     await fetch();
 });
+
+function viewSummary(id) {
+    quasar.dialog({
+        component: CustomerSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
+}
 </script>
 
 <template>
     <div class="descriptor">
         <template v-if="entity">
-            <div class="header bg-primary q-pa-sm">
-                <RouterLink :to="{ name: `${module}List` }">
-                    <QBtn
-                        round
-                        flat
-                        dense
-                        size="md"
-                        icon="view_list"
-                        color="white"
-                        class="link"
-                    >
-                        <QTooltip>
-                            {{ t('components.cardDescriptor.mainList') }}
-                        </QTooltip>
-                    </QBtn>
-                </RouterLink>
+            <div class="header bg-primary q-pa-sm justify-between">
+                <QBtn
+                    @click.stop="viewSummary(entity.id)"
+                    round
+                    flat
+                    dense
+                    size="md"
+                    icon="preview"
+                    color="white"
+                    class="link"
+                    v-if="preview"
+                >
+                    <QTooltip>
+                        {{ t('components.smartCard.openSummary') }}
+                    </QTooltip>
+                </QBtn>
                 <RouterLink :to="{ name: `${module}Summary`, params: { id: entity.id } }">
                     <QBtn
                         round
@@ -88,7 +102,6 @@ watch($props, async () => {
                         </QTooltip>
                     </QBtn>
                 </RouterLink>
-
                 <QBtn
                     v-if="slots.menu"
                     size="md"
@@ -211,8 +224,6 @@ watch($props, async () => {
     width: 256px;
     .header {
         display: flex;
-        justify-content: space-between;
-        align-items: stretch;
     }
     .icons {
         margin: 0 10px;
diff --git a/src/pages/Customer/Card/CustomerDescriptorProxy.vue b/src/pages/Customer/Card/CustomerDescriptorProxy.vue
index 84a69c026..a78726e21 100644
--- a/src/pages/Customer/Card/CustomerDescriptorProxy.vue
+++ b/src/pages/Customer/Card/CustomerDescriptorProxy.vue
@@ -10,6 +10,6 @@ const $props = defineProps({
 </script>
 <template>
     <QPopupProxy>
-        <CustomerDescriptor v-if="$props.id" :id="$props.id" />
+        <CustomerDescriptor v-if="$props.id" :id="$props.id" :preview="true" />
     </QPopupProxy>
 </template>

From b00cff8b0b5073e796a0eada1d4393cd342d4c6c Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 24 Nov 2023 10:08:51 +0100
Subject: [PATCH 36/81] refs #5835 refactor getTotals

---
 src/pages/InvoiceIn/Card/InvoiceInSummary.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
index 2bb3f3f0a..d2855f56a 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
@@ -164,10 +164,11 @@ function getAmountNotMatch(totals) {
 }
 
 function getIntrastatTotals(intrastat) {
-    const totals = {};
-    totals.amount = intrastat.reduce((acc, cur) => acc + cur.amount, 0);
-    totals.net = intrastat.reduce((acc, cur) => acc + cur.net, 0);
-    totals.stems = intrastat.reduce((acc, cur) => acc + cur.stems, 0);
+    const totals = {
+        amount: intrastat.reduce((acc, cur) => acc + cur.amount, 0),
+        net: intrastat.reduce((acc, cur) => acc + cur.net, 0),
+        stems: intrastat.reduce((acc, cur) => acc + cur.stems, 0),
+    };
 
     return totals;
 }

From 7595c01293a52237c755bbec3c4db7e43fa9ec80 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 24 Nov 2023 11:09:12 +0100
Subject: [PATCH 37/81] refs #5835 fix InvoiceInDescriptor

---
 src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
index ca660ce36..016d2779c 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
@@ -75,6 +75,7 @@ function setData(entity) {
         :title="data.title"
         :subtitle="data.subtitle"
         @on-fetch="setData"
+        data-key="invoiceInData"
     >
         <template #body="{ entity }">
             <VnLv :label="t('invoiceIn.card.issued')" :value="toDate(entity.issued)" />

From 6ac89e7aa2e34189aed2d80cee5a14ae65a93d64 Mon Sep 17 00:00:00 2001
From: JAVIER SEGARRA MARTINEZ <jsegarra@verdnatura.es>
Date: Mon, 27 Nov 2023 11:57:09 +0000
Subject: [PATCH 38/81] Update quasar.config.js

---
 quasar.config.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/quasar.config.js b/quasar.config.js
index 4de730515..e8f746fd6 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -81,12 +81,6 @@ module.exports = configure(function (/* ctx */) {
                 viteConf.build.modulePreload = {
                     polyfill: false,
                 };
-
-                // this.env={
-                //     'process.env.NODE_ENV': 'test1',
-                //     NODE_ENV: 'test2'
-
-                // }
             },
             // viteVuePluginOptions: {},
 

From 0282f8dde81153f24e686d6df1bb06f5315ae6c6 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 28 Nov 2023 12:05:39 +0100
Subject: [PATCH 39/81] refs #5835 rate fixed & options descriptor created

---
 src/components/common/SendEmailDialog.vue     |   7 +-
 src/components/common/VnSelectFilter.vue      |   1 +
 src/components/ui/CardDescriptor.vue          |   4 +
 src/i18n/es/index.js                          |   4 +-
 src/pages/Claim/Card/ClaimDescriptorMenu.vue  |   2 +-
 .../InvoiceIn/Card/InvoiceInDescriptor.vue    | 268 +++++++++++++++++-
 src/pages/InvoiceIn/Card/InvoiceInSummary.vue |  91 ++----
 .../{ => claim}/claimAction.spec.js           |   0
 8 files changed, 293 insertions(+), 84 deletions(-)
 rename test/cypress/integration/{ => claim}/claimAction.spec.js (100%)

diff --git a/src/components/common/SendEmailDialog.vue b/src/components/common/SendEmailDialog.vue
index ab83c0949..0f574a795 100644
--- a/src/components/common/SendEmailDialog.vue
+++ b/src/components/common/SendEmailDialog.vue
@@ -24,12 +24,13 @@ const address = ref(props.data.address);
 const isLoading = ref(false);
 
 async function confirm() {
-    const response = { address };
-
+    const response = { address: address.value };
     if (props.promise) {
         isLoading.value = true;
+        const { address: _address, ...restData } = props.data;
+
         try {
-            Object.assign(response, props.data);
+            Object.assign(response, restData);
             await props.promise(response);
         } finally {
             isLoading.value = false;
diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index f6400fb4f..b808f1a8a 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -89,6 +89,7 @@ const value = computed({
         map-options
         use-input
         @filter="filterHandler"
+        hide-selected
         fill-input
         ref="vnSelectRef"
     >
diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index eef2e020b..499c95beb 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -35,6 +35,10 @@ const $props = defineProps({
 const slots = useSlots();
 const { t } = useI18n();
 const entity = computed(() => useArrayData($props.dataKey).store.data);
+
+defineExpose({
+    getData,
+});
 onMounted(async () => {
     await getData();
     watch(
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 4f946ffcc..d4deed5ee 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -427,8 +427,8 @@ export default {
             dueDay: 'Fecha de vencimiento',
         },
         summary: {
-            supplier: 'Supplier',
-            supplierRef: 'Supplier ref.',
+            supplier: 'Proveedor',
+            supplierRef: 'Ref. proveedor',
             currency: 'Divisa',
             docNumber: 'Número documento',
             issued: 'Fecha de expedición',
diff --git a/src/pages/Claim/Card/ClaimDescriptorMenu.vue b/src/pages/Claim/Card/ClaimDescriptorMenu.vue
index 5688613d6..d88c3d120 100644
--- a/src/pages/Claim/Card/ClaimDescriptorMenu.vue
+++ b/src/pages/Claim/Card/ClaimDescriptorMenu.vue
@@ -37,7 +37,7 @@ function confirmPickupOrder() {
             data: {
                 address: customer.email,
             },
-            send: sendPickupOrder,
+            promise: sendPickupOrder,
         },
     });
 }
diff --git a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
index 016d2779c..c70568c1b 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
@@ -1,12 +1,20 @@
 <script setup>
 import { ref, computed } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import axios from 'axios';
 import { toCurrency, toDate } from 'src/filters';
-import CardDescriptor from 'components/ui/CardDescriptor.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
+import { useRole } from 'src/composables/useRole';
 import useCardDescription from 'src/composables/useCardDescription';
+import { downloadFile } from 'src/composables/downloadFile';
+import { useArrayData } from 'src/composables/useArrayData';
+import { usePrintService } from 'composables/usePrintService';
+import VnLv from 'src/components/ui/VnLv.vue';
+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';
 
 const $props = defineProps({
     id: {
@@ -17,13 +25,41 @@ const $props = defineProps({
 });
 
 const route = useRoute();
+const router = useRouter();
+const quasar = useQuasar();
+const { hasAny } = useRole();
 const { t } = useI18n();
+const { openReport, sendEmail } = usePrintService();
+const arrayData = useArrayData('InvoiceIn');
 
-const entityId = computed(() => {
-    return $props.id || route.params.id;
-});
-const totalAmount = ref([]);
+const invoiceIn = computed(() => arrayData.store.data);
+const cardDescriptorRef = ref();
+const entityId = computed(() => $props.id || route.params.id);
+const totalAmount = ref();
+const currentAction = ref();
+const config = ref();
 
+const actions = {
+    book: {
+        title: 'Are you sure you want to book this invoice?',
+        cb: checkToBook,
+        action: toBook,
+    },
+    delete: {
+        title: 'Are you sure you want to delete this invoice?',
+        action: deleteInvoice,
+    },
+    clone: {
+        title: 'Are you sure you want to clone this invoice?',
+        action: cloneInvoice,
+    },
+    showPdf: {
+        cb: showPdfInvoice,
+    },
+    sendPdf: {
+        cb: sendPdfInvoiceConfirmation,
+    },
+};
 const filter = {
     include: [
         {
@@ -52,23 +88,130 @@ const filter = {
 };
 
 const data = ref(useCardDescription());
-function setData(entity) {
+
+async function setData(entity) {
     data.value = useCardDescription(entity.supplierRef, entity.id);
+    const { totalDueDay } = await getTotals();
+    totalAmount.value = totalDueDay;
+}
+
+async function getTotals() {
+    const { data } = await axios.get(`InvoiceIns/${entityId.value}/getTotals`);
+    return data;
+}
+
+function openDialog() {
+    quasar.dialog({
+        component: VnConfirm,
+        componentProps: {
+            title: currentAction.value.title,
+            promise: currentAction.value.action,
+        },
+    });
+}
+
+async function checkToBook() {
+    let directBooking = true;
+
+    const totals = await getTotals();
+    const taxableBaseNotEqualDueDay = totals.totalDueDay != totals.totalTaxableBase;
+    const vatNotEqualDueDay = totals.totalDueDay != totals.totalVat;
+
+    if (taxableBaseNotEqualDueDay && vatNotEqualDueDay) directBooking = false;
+
+    const { data: dueDaysCount } = await axios.get('InvoiceInDueDays/count', {
+        where: {
+            invoiceInFk: entityId.value,
+            dueDated: { gte: Date.vnNew() },
+        },
+    });
+
+    if (dueDaysCount) directBooking = false;
+
+    if (!directBooking) openDialog();
+    else toBook();
+}
+
+async function toBook() {
+    await axios.post(`InvoiceIns/${entityId.value}/toBook`);
+
+    // Pendiente de sincronizar todo con arrayData
+    quasar.notify({
+        type: 'positive',
+        message: t('globals.dataSaved'),
+    });
+
+    await cardDescriptorRef.value.getData();
+    setTimeout(() => location.reload(), 500);
+}
+
+async function deleteInvoice() {
+    await axios.delete(`InvoiceIns/${entityId.value}`);
+    quasar.notify({
+        type: 'positive',
+        message: t('Invoice deleted'),
+    });
+    router.push({ path: '/invoice-in' });
+}
+
+async function cloneInvoice() {
+    const { data } = await axios.post(`InvoiceIns/${entityId.value}/clone`);
+    quasar.notify({
+        type: 'positive',
+        message: t('Invoice cloned'),
+    });
+    router.push({ path: `/invoice-in/${data.id}/summary` });
+}
+
+const isAgricultural = () =>
+    invoiceIn.value.supplier.sageWithholdingFk == config.value[0].sageWithholdingFk;
+
+function showPdfInvoice() {
+    if (isAgricultural()) openReport(`InvoiceIns/${entityId.value}/invoice-in-pdf`);
+}
+
+function sendPdfInvoiceConfirmation() {
+    quasar.dialog({
+        component: SendEmailDialog,
+        componentProps: {
+            data: {
+                address: invoiceIn.value.supplier.contacts[0].email,
+            },
+            promise: sendPdfInvoice,
+        },
+    });
+}
+
+function sendPdfInvoice({ address }) {
+    if (!address)
+        quasar.notify({
+            type: 'negative',
+            message: t(`The email can't be empty`),
+        });
+    else
+        return sendEmail(`InvoiceIns/${entityId.value}/invoice-in-email`, {
+            recipientId: invoiceIn.value.supplier.id,
+            recipient: address,
+        });
+}
+
+function triggerMenu(type) {
+    currentAction.value = actions[type];
+    if (currentAction.value.cb) currentAction.value.cb();
+    else openDialog(type);
 }
 </script>
 
 <template>
-    <!--Refactor para añadir en el arrayData-->
     <FetchData
-        :url="`InvoiceIns/${entityId}/getTotals`"
-        @on-fetch="
-            (data) => {
-                totalAmount = data.totalDueDay;
-            }
-        "
+        url="InvoiceInConfigs"
+        :where="{ fields: ['sageWithholdingFk'] }"
         auto-load
+        @on-fetch="(data) => (config = data)"
     />
+    <!--Refactor para añadir en el arrayData-->
     <CardDescriptor
+        ref="cardDescriptorRef"
         module="InvoiceIn"
         :url="`InvoiceIns/${entityId}`"
         :filter="filter"
@@ -77,6 +220,79 @@ function setData(entity) {
         @on-fetch="setData"
         data-key="invoiceInData"
     >
+        <template #menu="{ entity }">
+            <QItem
+                v-if="!entity.isBooked && hasAny(['administrative'])"
+                v-ripple
+                clickable
+                @click="triggerMenu('book')"
+            >
+                <QItemSection avatar>
+                    <QIcon name="summarize" />
+                </QItemSection>
+                <QItemSection>{{ t('To book') }}</QItemSection>
+            </QItem>
+            <QSeparator />
+            <QItem
+                v-if="hasAny(['administrative'])"
+                v-ripple
+                clickable
+                @click="triggerMenu('delete')"
+            >
+                <QItemSection avatar>
+                    <QIcon name="delete" />
+                </QItemSection>
+                <QItemSection>{{ t('Delete invoice') }}</QItemSection>
+            </QItem>
+            <QSeparator />
+            <QItem
+                v-if="hasAny(['administrative'])"
+                v-ripple
+                clickable
+                @click="triggerMenu('clone')"
+            >
+                <QItemSection avatar>
+                    <QIcon name="file_copy" />
+                </QItemSection>
+                <QItemSection>{{ t('Clone invoice') }}</QItemSection>
+            </QItem>
+            <QSeparator />
+            <QItem
+                v-if="isAgricultural()"
+                v-ripple
+                clickable
+                @click="triggerMenu('showPdf')"
+            >
+                <QItemSection avatar>
+                    <QIcon name="picture_as_pdf" />
+                </QItemSection>
+                <QItemSection>{{ t('Show agricultural receipt as PDF') }}</QItemSection>
+            </QItem>
+            <QSeparator />
+            <QItem
+                v-if="isAgricultural()"
+                v-ripple
+                clickable
+                @click="triggerMenu('sendPdf')"
+            >
+                <QItemSection avatar>
+                    <QIcon name="mail" />
+                </QItemSection>
+                <QItemSection>{{ t('Send agricultural receipt as PDF') }}</QItemSection>
+            </QItem>
+            <QSeparator />
+            <QItem
+                v-if="entity.dmsFk"
+                v-ripple
+                clickable
+                @click="downloadFile(entity.dmsFk)"
+            >
+                <QItemSection avatar>
+                    <QIcon name="cloud_download" />
+                </QItemSection>
+                <QItemSection>{{ t('components.smartCard.downloadFile') }}</QItemSection>
+            </QItem>
+        </template>
         <template #body="{ entity }">
             <VnLv :label="t('invoiceIn.card.issued')" :value="toDate(entity.issued)" />
             <VnLv :label="t('invoiceIn.summary.booked')" :value="toDate(entity.booked)" />
@@ -107,3 +323,25 @@ function setData(entity) {
         </template>
     </CardDescriptor>
 </template>
+<style lang="scss" scoped>
+.q-dialog {
+    .q-card {
+        width: 35em;
+        max-width: 35em;
+    }
+}
+</style>
+<i18n>
+es:
+    To book: Contabilizar
+    Are you sure you want to book this invoice?: Estas seguro de querer asentar esta factura?
+    Delete invoice: Eliminar factura
+    Are you sure you want to delete this invoice?:  Estas seguro de querer eliminar esta factura?
+    Invoice deleted: Factura eliminada
+    Clone invoice: Clonar factura
+    Invoice cloned: Factura clonada
+    Show agricultural receipt as PDF: Ver recibo agrícola como PDF
+    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
+</i18n>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
index d2855f56a..9c377e241 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
@@ -4,8 +4,6 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toCurrency, toDate } from 'src/filters';
 import { getUrl } from 'src/composables/getUrl';
-import { downloadFile } from 'src/composables/downloadFile';
-
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 
@@ -66,8 +64,8 @@ const vatColumns = ref([
     {
         name: 'rate',
         label: 'invoiceIn.summary.rate',
-        field: (row) => row.taxRate,
-        format: (value) => value,
+        field: (row) => taxRate(row.taxableBase, row.taxTypeSage?.rate),
+        format: (value) => toCurrency(value),
         sortable: true,
         align: 'left',
     },
@@ -173,6 +171,13 @@ function getIntrastatTotals(intrastat) {
     return totals;
 }
 
+function getTaxTotal(tax) {
+    return tax.reduce(
+        (acc, cur) => acc + taxRate(cur.taxableBase, cur.taxTypeSage?.rate),
+        0
+    );
+}
+
 function setData(entity) {
     if (!entity) return false;
 
@@ -181,6 +186,13 @@ function setData(entity) {
     if (entity.invoiceInIntrastat.length)
         intrastatTotals.value = { ...getIntrastatTotals(entity.invoiceInIntrastat) };
 }
+
+function taxRate(taxableBase, rate) {
+    if (rate && taxableBase) {
+        return (rate / 100) * taxableBase;
+    }
+    return 0;
+}
 </script>
 
 <template>
@@ -200,19 +212,6 @@ function setData(entity) {
                         {{ t('invoiceIn.pageTitles.basicData') }}
                         <QIcon name="open_in_new" color="primary" />
                     </a>
-                    <QBtn
-                        class="q-ml-sm"
-                        padding="xs"
-                        flat
-                        color="primary"
-                        round
-                        icon="cloud_download"
-                        @click.stop="downloadFile(invoiceIn.dmsFk)"
-                    >
-                        <QTooltip>
-                            {{ t('components.smartCard.downloadFile') }}
-                        </QTooltip>
-                    </QBtn>
                 </QCardSection>
                 <VnLv
                     :label="t('invoiceIn.summary.supplier')"
@@ -237,19 +236,6 @@ function setData(entity) {
                         {{ t('invoiceIn.pageTitles.basicData') }}
                         <QIcon name="open_in_new" color="primary" />
                     </a>
-                    <QBtn
-                        class="q-ml-sm"
-                        padding="xs"
-                        flat
-                        color="primary"
-                        round
-                        icon="cloud_download"
-                        @click.stop="downloadFile(invoiceIn.dmsFk)"
-                    >
-                        <QTooltip>
-                            {{ t('components.smartCard.downloadFile') }}
-                        </QTooltip>
-                    </QBtn>
                 </QCardSection>
                 <VnLv
                     :label="t('invoiceIn.summary.issued')"
@@ -274,19 +260,6 @@ function setData(entity) {
                         {{ t('invoiceIn.pageTitles.basicData') }}
                         <QIcon name="open_in_new" color="primary" />
                     </a>
-                    <QBtn
-                        class="q-ml-sm"
-                        padding="xs"
-                        flat
-                        color="primary"
-                        round
-                        icon="cloud_download"
-                        @click.stop="downloadFile(invoiceIn.dmsFk)"
-                    >
-                        <QTooltip>
-                            {{ t('components.smartCard.downloadFile') }}
-                        </QTooltip>
-                    </QBtn>
                 </QCardSection>
                 <QCardSection class="q-pa-none">
                     <div class="bordered q-px-sm q-mx-auto">
@@ -323,19 +296,6 @@ function setData(entity) {
                         {{ t('invoiceIn.pageTitles.basicData') }}
                         <QIcon name="open_in_new" color="primary" />
                     </a>
-                    <QBtn
-                        class="q-ml-sm"
-                        padding="xs"
-                        flat
-                        color="primary"
-                        round
-                        icon="cloud_download"
-                        @click.stop="downloadFile(invoiceIn.dmsFk)"
-                    >
-                        <QTooltip>
-                            {{ t('components.smartCard.downloadFile') }}
-                        </QTooltip>
-                    </QBtn>
                 </QCardSection>
                 <VnLv
                     :label="t('invoiceIn.summary.sage')"
@@ -356,8 +316,9 @@ function setData(entity) {
             </QCard>
             <!--Vat-->
             <QCard v-if="invoiceIn.invoiceInTax.length" class="vn-three">
-                <a class="header">
+                <a class="header" :href="`#/invoice-in/${entityId}/vat`">
                     {{ t('invoiceIn.card.vat') }}
+                    <QIcon name="open_in_new" color="primary" />
                 </a>
                 <QTable
                     :columns="vatColumns"
@@ -378,7 +339,9 @@ function setData(entity) {
                             <QTd>{{ toCurrency(invoiceIn.totals.totalTaxableBase) }}</QTd>
                             <QTd></QTd>
                             <QTd></QTd>
-                            <QTd></QTd>
+                            <QTd>{{
+                                toCurrency(getTaxTotal(invoiceIn.invoiceInTax))
+                            }}</QTd>
                             <QTd></QTd>
                         </QTr>
                     </template>
@@ -386,9 +349,10 @@ function setData(entity) {
             </QCard>
             <!--Due Day-->
             <QCard v-if="invoiceIn.invoiceInDueDay.length" class="vn-two">
-                <div class="header">
+                <a class="header" :href="`#/invoice-in/${entityId}/due-day`">
                     {{ t('invoiceIn.card.dueDay') }}
-                </div>
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
                 <QTable
                     class="full-width"
                     :columns="dueDayColumns"
@@ -415,9 +379,10 @@ function setData(entity) {
             </QCard>
             <!--Intrastat-->
             <QCard v-if="invoiceIn.invoiceInIntrastat.length">
-                <div class="header">
+                <a class="header" :href="`#/invoice-in/${entityId}/intrastat`">
                     {{ t('invoiceIn.card.intrastat') }}
-                </div>
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
                 <QTable
                     :columns="intrastatColumns"
                     :rows="invoiceIn.invoiceInIntrastat"
@@ -451,7 +416,7 @@ function setData(entity) {
 }
 .bordered {
     border: 1px solid var(--vn-text);
-    width: 18em;
+    max-width: 18em;
 }
 </style>
 <i18n>
diff --git a/test/cypress/integration/claimAction.spec.js b/test/cypress/integration/claim/claimAction.spec.js
similarity index 100%
rename from test/cypress/integration/claimAction.spec.js
rename to test/cypress/integration/claim/claimAction.spec.js

From 615c5c1477d0808a7d203a3f0f1732b39454a5c1 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 29 Nov 2023 08:44:16 +0100
Subject: [PATCH 40/81] warmFix: ticket with null zone

---
 src/pages/Claim/Card/ClaimDescriptor.vue | 2 +-
 src/pages/Ticket/Card/TicketSummary.vue  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index af7e84d38..fdebd1175 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -129,7 +129,7 @@ const setData = (entity) => {
                 :label="t('claim.card.province')"
                 :value="entity.ticket.address.province.name"
             />
-            <VnLv :label="t('claim.card.zone')" :value="entity.ticket.zone.name" />
+            <VnLv :label="t('claim.card.zone')" :value="entity.ticket?.zone?.name" />
         </template>
         <template #actions="{ entity }">
             <QCardActions>
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index ce46d1d47..3c240d5c2 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -172,7 +172,7 @@ async function changeState(value) {
                     :label="t('ticket.summary.agency')"
                     :value="ticket.agencyMode.name"
                 />
-                <VnLv :label="t('ticket.summary.zone')" :value="ticket.zone.name" />
+                <VnLv :label="t('ticket.summary.zone')" :value="ticket?.zone?.name" />
                 <VnLv
                     :label="t('ticket.summary.warehouse')"
                     :value="ticket.warehouse?.name"

From 8d0403683657cfeb295769b2d54214296e30ce90 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 1 Dec 2023 08:28:05 +0100
Subject: [PATCH 41/81] refs #5835 change descriptor menu style

---
 .../InvoiceIn/Card/InvoiceInDescriptor.vue    | 27 +++----------------
 1 file changed, 3 insertions(+), 24 deletions(-)

diff --git a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
index c70568c1b..08df18e12 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
@@ -227,69 +227,48 @@ function triggerMenu(type) {
                 clickable
                 @click="triggerMenu('book')"
             >
-                <QItemSection avatar>
-                    <QIcon name="summarize" />
-                </QItemSection>
                 <QItemSection>{{ t('To book') }}</QItemSection>
             </QItem>
-            <QSeparator />
             <QItem
                 v-if="hasAny(['administrative'])"
                 v-ripple
                 clickable
                 @click="triggerMenu('delete')"
             >
-                <QItemSection avatar>
-                    <QIcon name="delete" />
-                </QItemSection>
                 <QItemSection>{{ t('Delete invoice') }}</QItemSection>
             </QItem>
-            <QSeparator />
             <QItem
                 v-if="hasAny(['administrative'])"
                 v-ripple
                 clickable
                 @click="triggerMenu('clone')"
             >
-                <QItemSection avatar>
-                    <QIcon name="file_copy" />
-                </QItemSection>
                 <QItemSection>{{ t('Clone invoice') }}</QItemSection>
             </QItem>
-            <QSeparator />
             <QItem
                 v-if="isAgricultural()"
                 v-ripple
                 clickable
                 @click="triggerMenu('showPdf')"
             >
-                <QItemSection avatar>
-                    <QIcon name="picture_as_pdf" />
-                </QItemSection>
                 <QItemSection>{{ t('Show agricultural receipt as PDF') }}</QItemSection>
             </QItem>
-            <QSeparator />
             <QItem
                 v-if="isAgricultural()"
                 v-ripple
                 clickable
                 @click="triggerMenu('sendPdf')"
             >
-                <QItemSection avatar>
-                    <QIcon name="mail" />
-                </QItemSection>
-                <QItemSection>{{ t('Send agricultural receipt as PDF') }}</QItemSection>
+                <QItemSection
+                    >{{ t('Send agricultural receipt as PDF') }}...</QItemSection
+                >
             </QItem>
-            <QSeparator />
             <QItem
                 v-if="entity.dmsFk"
                 v-ripple
                 clickable
                 @click="downloadFile(entity.dmsFk)"
             >
-                <QItemSection avatar>
-                    <QIcon name="cloud_download" />
-                </QItemSection>
                 <QItemSection>{{ t('components.smartCard.downloadFile') }}</QItemSection>
             </QItem>
         </template>

From 51a2e7244cdabee06fb70df6edc0cb4f887e0ae5 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 1 Dec 2023 13:57:48 +0100
Subject: [PATCH 42/81] refs #5736 fix: i18n broken test env

---
 quasar.config.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/quasar.config.js b/quasar.config.js
index e8f746fd6..3a7dc1f1e 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -91,11 +91,12 @@ module.exports = configure(function (/* ctx */) {
 
             vitePlugins: [
                 [
-                    VueI18nPlugin,
+                    VueI18nPlugin({
+                        runtimeOnly: false
+                    }),
                     {
                         // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
                         // compositionOnly: false,
-
                         // you need to set i18n resource including paths !
                         include: path.resolve(__dirname, './src/i18n/**'),
                     },

From a3d6275b2f581e36eb0cd027dd5c319dc38ce01c Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 4 Dec 2023 10:38:35 +0100
Subject: [PATCH 43/81] refs #6545 counters created

---
 src/i18n/en/index.js             |  1 +
 src/i18n/es/index.js             |  1 +
 src/pages/Wagon/WagonCounter.vue | 90 ++++++++++++++++++++++++++++++++
 src/router/modules/wagon.js      | 11 +++-
 4 files changed, 102 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Wagon/WagonCounter.vue

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 0cd578848..ab5842cf6 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -449,6 +449,7 @@ export default {
             typesList: 'Types List',
             typeCreate: 'Create type',
             typeEdit: 'Edit type',
+            wagonCounter: 'Trolley counter',
         },
         type: {
             name: 'Name',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index daaf93e33..04a25cb88 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -449,6 +449,7 @@ export default {
             typesList: 'Listado tipos',
             typeCreate: 'Crear tipo',
             typeEdit: 'Editar tipo',
+            wagonCounter: 'Contador de carros',
         },
         type: {
             name: 'Nombre',
diff --git a/src/pages/Wagon/WagonCounter.vue b/src/pages/Wagon/WagonCounter.vue
new file mode 100644
index 000000000..8e1cabf1b
--- /dev/null
+++ b/src/pages/Wagon/WagonCounter.vue
@@ -0,0 +1,90 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useSession } from 'src/composables/useSession';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const session = useSession();
+const token = session.getToken();
+
+const counters = ref({
+    alquilerBandeja: { count: 0, id: 27098, title: 'Alquiler de CC Bandeja' },
+    bandejaRota: { count: 0, id: 88381, title: 'CC Bandeja Rota' },
+    carryOficial: { count: 0, id: 27097, title: ' Alquiler de CC Carry OFICIAL' },
+    candadoRojo: { count: 0, id: 142252, title: 'CC Candado rojo' },
+    sacadores: { count: 0, id: 142260, title: 'CC Sacadores' },
+    sinChapa: { count: 0, id: 142258, title: 'CC Sin Chapa' },
+    carroRoto: { count: 0, id: 142251, title: 'Carro Roto' },
+});
+
+const actions = {
+    add: (value) => value + 1,
+    substract: (value) => (value ? value - 1 : 0),
+    flush: () => 0,
+};
+
+onMounted(() => {
+    const types = Object.keys(counters.value);
+    for (let type of types) {
+        const counter = localStorage.getItem(type);
+        counters.value[type].count = counter ? parseInt(counter) : 0;
+    }
+});
+
+function getUrl(id) {
+    return `/api/Images/catalog/200x200/${id}/download?access_token=${token}`;
+}
+
+function handleEvent(type, action) {
+    const counter = counters.value[type].count;
+    counters.value[type].count = actions[action](counter);
+    localStorage.setItem(type, counters.value[type].count);
+}
+</script>
+<template>
+    <QList class="q-mx-auto q-mt-xl">
+        <QItem v-for="(props, name) in counters" :key="name">
+            <QItemSection>
+                <p class="text-h5">{{ props.title }}</p>
+                <QImg
+                    :src="getUrl(props.id)"
+                    width="150px"
+                    @click="handleEvent(name, 'add')"
+                />
+            </QItemSection>
+            <QItemSection>
+                <QItemLabel class="text-h4">
+                    {{ props.count }}
+                </QItemLabel>
+                <QItemLabel>
+                    <QBtn
+                        class="text-center q-mr-xs"
+                        color="warning"
+                        dense
+                        @click="handleEvent(name, 'substract')"
+                    >
+                        {{ t('Substract 1') }}
+                    </QBtn>
+                    <QBtn
+                        class="text-center q-ml-xs"
+                        color="red"
+                        dense
+                        @click="handleEvent(name, 'flush')"
+                    >
+                        {{ t('Flush') }}
+                    </QBtn>
+                </QItemLabel>
+            </QItemSection>
+        </QItem>
+    </QList>
+</template>
+<style lang="scss" scoped>
+.q-list {
+    max-width: 50em;
+}
+</style>
+<i18n>
+es:
+    Substract 1: Quitar 1
+    Flush: Vaciar
+</i18n>
diff --git a/src/router/modules/wagon.js b/src/router/modules/wagon.js
index 3fb808778..238e482dd 100644
--- a/src/router/modules/wagon.js
+++ b/src/router/modules/wagon.js
@@ -10,7 +10,7 @@ export default {
     component: RouterView,
     redirect: { name: 'WagonMain' },
     menus: {
-        main: ['WagonList', 'WagonTypeList'],
+        main: ['WagonList', 'WagonTypeList', 'WagonCounter'],
         card: [],
     },
     children: [
@@ -47,6 +47,15 @@ export default {
                     },
                     component: () => import('src/pages/Wagon/WagonCreate.vue'),
                 },
+                {
+                    path: 'counter',
+                    name: 'WagonCounter',
+                    meta: {
+                        title: 'wagonCounter',
+                        icon: 'add_circle',
+                    },
+                    component: () => import('src/pages/Wagon/WagonCounter.vue'),
+                },
             ],
         },
         {

From 4eee95b9450dfc3682d25f432b082f239633deb4 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 4 Dec 2023 11:40:17 +0100
Subject: [PATCH 44/81] refs #6334 fix amount, colors

---
 src/pages/Claim/Card/ClaimLines.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Claim/Card/ClaimLines.vue b/src/pages/Claim/Card/ClaimLines.vue
index c03291b85..7e98e43dd 100644
--- a/src/pages/Claim/Card/ClaimLines.vue
+++ b/src/pages/Claim/Card/ClaimLines.vue
@@ -46,7 +46,7 @@ async function onFetchClaim(data) {
 const amount = ref(0);
 const amountClaimed = ref(0);
 async function onFetch(rows) {
-    if (!rows || rows.length) return;
+    if (!rows || !rows.length) return;
     amount.value = rows.reduce(
         (acumulator, { sale }) => acumulator + sale.price * sale.quantity,
         0
@@ -155,7 +155,7 @@ function showImportDialog() {
 </script>
 <template>
     <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
-        <QToolbar class="bg-dark text-white">
+        <QToolbar class="">
             <div class="row q-gutter-md">
                 <div>
                     {{ t('Amount') }}

From 03e42f676bdf750df6d37459ffea9aa593890195 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 4 Dec 2023 12:02:27 +0100
Subject: [PATCH 45/81] refs #6334 remove class

---
 src/pages/Claim/Card/ClaimLines.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Claim/Card/ClaimLines.vue b/src/pages/Claim/Card/ClaimLines.vue
index 7e98e43dd..fa7fb123f 100644
--- a/src/pages/Claim/Card/ClaimLines.vue
+++ b/src/pages/Claim/Card/ClaimLines.vue
@@ -155,7 +155,7 @@ function showImportDialog() {
 </script>
 <template>
     <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
-        <QToolbar class="">
+        <QToolbar>
             <div class="row q-gutter-md">
                 <div>
                     {{ t('Amount') }}

From b2b366032fe1db1b8a02613c611ead7b27a137c2 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 4 Dec 2023 12:24:39 +0100
Subject: [PATCH 46/81] refs #5633 create componente VnAccountNumber

---
 src/components/common/VnAccountNumber.vue | 42 +++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/components/common/VnAccountNumber.vue

diff --git a/src/components/common/VnAccountNumber.vue b/src/components/common/VnAccountNumber.vue
new file mode 100644
index 000000000..3568ad914
--- /dev/null
+++ b/src/components/common/VnAccountNumber.vue
@@ -0,0 +1,42 @@
+<script setup>
+import { ref, watch } from 'vue';
+import { QInput } from 'quasar';
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: '',
+    },
+});
+
+const emit = defineEmits(['update:modelValue', 'accountShortToStandard']);
+
+let internalValue = ref(props.modelValue);
+
+watch(
+    () => props.modelValue,
+    (newVal) => {
+        internalValue.value = newVal;
+    }
+);
+
+watch(
+    () => internalValue.value,
+    (newVal) => {
+        emit('update:modelValue', newVal);
+        accountShortToStandard();
+    }
+);
+
+function accountShortToStandard() {
+    internalValue.value = internalValue.value.replace(
+        '.',
+        '0'.repeat(11 - internalValue.value.length)
+    );
+    emit('accountShortToStandard', internalValue.value);
+}
+</script>
+
+<template>
+    <q-input v-model="internalValue" />
+</template>

From b400a23d43892efb34f386ec0c4ca380c7d24aba Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 4 Dec 2023 13:06:07 +0100
Subject: [PATCH 47/81] refs #5633 remove emit

---
 src/components/common/VnAccountNumber.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/common/VnAccountNumber.vue b/src/components/common/VnAccountNumber.vue
index 3568ad914..f7273a72d 100644
--- a/src/components/common/VnAccountNumber.vue
+++ b/src/components/common/VnAccountNumber.vue
@@ -33,7 +33,6 @@ function accountShortToStandard() {
         '.',
         '0'.repeat(11 - internalValue.value.length)
     );
-    emit('accountShortToStandard', internalValue.value);
 }
 </script>
 

From 3d046e4bf760c19758b4482add89494d41fa872c Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 4 Dec 2023 14:21:29 +0100
Subject: [PATCH 48/81] refs #5835 summary grid updated

---
 src/components/ui/CardSummary.vue             |  3 +-
 src/components/ui/VnLv.vue                    |  8 ++-
 src/pages/InvoiceIn/Card/InvoiceInSummary.vue | 53 ++++++++++---------
 3 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index b54e44398..dc749f4a7 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -82,11 +82,13 @@ watch(props, async () => {
     .summaryBody {
         display: flex;
         flex-direction: row;
+        flex-wrap: wrap;
         justify-content: space-evenly;
         gap: 15px;
         padding: 15px;
 
         > .q-card.vn-one {
+            width: 350px;
             flex: 1;
         }
         > .q-card.vn-two {
@@ -123,7 +125,6 @@ watch(props, async () => {
                     width: max-content;
                     overflow: hidden;
                     white-space: nowrap;
-                    text-overflow: ellipsis;
                 }
             }
             .header {
diff --git a/src/components/ui/VnLv.vue b/src/components/ui/VnLv.vue
index 0f9b99713..b8da70feb 100644
--- a/src/components/ui/VnLv.vue
+++ b/src/components/ui/VnLv.vue
@@ -9,6 +9,7 @@ const $props = defineProps({
     titleValue: { type: [Number, String, Boolean], default: null },
     info: { type: String, default: null },
     dash: { type: Boolean, default: true },
+    ellipsisValue: { type: Boolean, default: true },
 });
 const isBooleanValue = computed(() => typeof $props.value === 'boolean');
 </script>
@@ -19,7 +20,7 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
                 <span :title="$props.titleLabel ?? $props.label">{{ $props.label }}</span>
             </slot>
         </div>
-        <div class="value">
+        <div class="value" :class="{ ellipsis: $props.ellipsisValue }">
             <span v-if="isBooleanValue">
                 <QIcon
                     :name="$props.value ? `check` : `close`"
@@ -42,3 +43,8 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
         </div>
     </div>
 </template>
+<style lang="scss" scoped>
+.ellipsis {
+    text-overflow: ellipsis !important;
+}
+</style>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
index 9c377e241..a5057ddd5 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
@@ -238,6 +238,7 @@ function taxRate(taxableBase, rate) {
                     </a>
                 </QCardSection>
                 <VnLv
+                    :ellipsis-value="false"
                     :label="t('invoiceIn.summary.issued')"
                     :value="toDate(invoiceIn.issued)"
                 />
@@ -254,6 +255,30 @@ function taxRate(taxableBase, rate) {
                     :value="toDate(invoiceIn.booked)"
                 />
             </QCard>
+            <QCard class="vn-one">
+                <QCardSection class="q-pa-none">
+                    <a class="header" :href="`#/invoice-in/${entityId}/basic-data`">
+                        {{ t('invoiceIn.pageTitles.basicData') }}
+                        <QIcon name="open_in_new" color="primary" />
+                    </a>
+                </QCardSection>
+                <VnLv
+                    :label="t('invoiceIn.summary.sage')"
+                    :value="invoiceIn.sageWithholding.withholding"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.vat')"
+                    :value="invoiceIn.expenseDeductible?.name"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.company')"
+                    :value="invoiceIn.company.code"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.booked')"
+                    :value="invoiceIn.isBooked"
+                />
+            </QCard>
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
                     <a class="header" :href="`#/invoice-in/${entityId}/basic-data`">
@@ -290,32 +315,8 @@ function taxRate(taxableBase, rate) {
                     </div>
                 </QCardSection>
             </QCard>
-            <QCard class="q-mb-md">
-                <QCardSection class="q-pa-none">
-                    <a class="header" :href="`#/invoice-in/${entityId}/basic-data`">
-                        {{ t('invoiceIn.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" color="primary" />
-                    </a>
-                </QCardSection>
-                <VnLv
-                    :label="t('invoiceIn.summary.sage')"
-                    :value="invoiceIn.sageWithholding.withholding"
-                />
-                <VnLv
-                    :label="t('invoiceIn.summary.vat')"
-                    :value="invoiceIn.expenseDeductible?.name"
-                />
-                <VnLv
-                    :label="t('invoiceIn.summary.company')"
-                    :value="invoiceIn.company.code"
-                />
-                <VnLv
-                    :label="t('invoiceIn.summary.booked')"
-                    :value="invoiceIn.isBooked"
-                />
-            </QCard>
             <!--Vat-->
-            <QCard v-if="invoiceIn.invoiceInTax.length" class="vn-three">
+            <QCard v-if="invoiceIn.invoiceInTax.length">
                 <a class="header" :href="`#/invoice-in/${entityId}/vat`">
                     {{ t('invoiceIn.card.vat') }}
                     <QIcon name="open_in_new" color="primary" />
@@ -348,7 +349,7 @@ function taxRate(taxableBase, rate) {
                 </QTable>
             </QCard>
             <!--Due Day-->
-            <QCard v-if="invoiceIn.invoiceInDueDay.length" class="vn-two">
+            <QCard v-if="invoiceIn.invoiceInDueDay.length">
                 <a class="header" :href="`#/invoice-in/${entityId}/due-day`">
                     {{ t('invoiceIn.card.dueDay') }}
                     <QIcon name="open_in_new" color="primary" />

From a730f2c073977409517d6371d334ac986ec207d9 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 4 Dec 2023 15:07:40 +0100
Subject: [PATCH 49/81] refs #6545 refactor

---
 src/pages/Wagon/WagonCounter.vue | 68 +++++++++++++++++++++++++-------
 1 file changed, 53 insertions(+), 15 deletions(-)

diff --git a/src/pages/Wagon/WagonCounter.vue b/src/pages/Wagon/WagonCounter.vue
index 8e1cabf1b..38e9bc529 100644
--- a/src/pages/Wagon/WagonCounter.vue
+++ b/src/pages/Wagon/WagonCounter.vue
@@ -2,19 +2,22 @@
 import { ref, onMounted } from 'vue';
 import { useSession } from 'src/composables/useSession';
 import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import VnConfirm from 'components/ui/VnConfirm.vue';
 
+const quasar = useQuasar();
 const { t } = useI18n();
 const session = useSession();
 const token = session.getToken();
 
 const counters = ref({
-    alquilerBandeja: { count: 0, id: 27098, title: 'Alquiler de CC Bandeja' },
-    bandejaRota: { count: 0, id: 88381, title: 'CC Bandeja Rota' },
-    carryOficial: { count: 0, id: 27097, title: ' Alquiler de CC Carry OFICIAL' },
-    candadoRojo: { count: 0, id: 142252, title: 'CC Candado rojo' },
-    sacadores: { count: 0, id: 142260, title: 'CC Sacadores' },
-    sinChapa: { count: 0, id: 142258, title: 'CC Sin Chapa' },
-    carroRoto: { count: 0, id: 142251, title: 'Carro Roto' },
+    alquilerBandeja: { count: 0, id: 1, title: 'Alquiler de CC Bandeja' },
+    bandejaRota: { count: 0, id: 2, title: 'CC Bandeja Rota' },
+    carryOficial: { count: 0, id: 3, title: ' Alquiler de CC Carry OFICIAL' },
+    candadoRojo: { count: 0, id: 4, title: 'CC Candado rojo' },
+    sacadores: { count: 0, id: 5, title: 'CC Sacadores' },
+    sinChapa: { count: 0, id: 6, title: 'CC Sin Chapa' },
+    carroRoto: { count: 0, id: 7, title: 'Carro Roto' },
 });
 
 const actions = {
@@ -35,24 +38,45 @@ function getUrl(id) {
     return `/api/Images/catalog/200x200/${id}/download?access_token=${token}`;
 }
 
-function handleEvent(type, action) {
+async function handleEvent(type, action) {
     const counter = counters.value[type].count;
-    counters.value[type].count = actions[action](counter);
-    localStorage.setItem(type, counters.value[type].count);
+    let isOk = true;
+
+    if (action == 'flush') isOk = await confirm();
+
+    if (isOk) {
+        counters.value[type].count = actions[action](counter);
+        localStorage.setItem(type, counters.value[type].count);
+    }
+}
+
+function confirm() {
+    return new Promise((resolve) => {
+        quasar
+            .dialog({
+                component: VnConfirm,
+                componentProps: {
+                    title: t('Are you sure?'),
+                    message: t('Se pondrá el contador a cero'),
+                },
+            })
+            .onOk(() => resolve(true))
+            .onCancel(() => resolve(false));
+    });
 }
 </script>
 <template>
-    <QList class="q-mx-auto q-mt-xl">
-        <QItem v-for="(props, name) in counters" :key="name">
+    <QList class="row q-mx-auto q-mt-xl">
+        <QItem v-for="(props, name) in counters" :key="name" class="col-6">
             <QItemSection>
-                <p class="text-h5">{{ props.title }}</p>
                 <QImg
                     :src="getUrl(props.id)"
-                    width="150px"
+                    width="130px"
                     @click="handleEvent(name, 'add')"
                 />
+                <p class="title">{{ props.title }}</p>
             </QItemSection>
-            <QItemSection>
+            <QItemSection class="q-ma-none">
                 <QItemLabel class="text-h4">
                     {{ props.count }}
                 </QItemLabel>
@@ -61,6 +85,7 @@ function handleEvent(type, action) {
                         class="text-center q-mr-xs"
                         color="warning"
                         dense
+                        size="sm"
                         @click="handleEvent(name, 'substract')"
                     >
                         {{ t('Substract 1') }}
@@ -69,12 +94,14 @@ function handleEvent(type, action) {
                         class="text-center q-ml-xs"
                         color="red"
                         dense
+                        size="sm"
                         @click="handleEvent(name, 'flush')"
                     >
                         {{ t('Flush') }}
                     </QBtn>
                 </QItemLabel>
             </QItemSection>
+            <QSeparator class="q-mt-sm q-mx-none" color="primary" />
         </QItem>
     </QList>
 </template>
@@ -82,9 +109,20 @@ function handleEvent(type, action) {
 .q-list {
     max-width: 50em;
 }
+@media (max-width: $breakpoint-sm) {
+    .q-item {
+        display: flex;
+        flex-direction: column;
+    }
+    .title {
+        min-height: 3em;
+    }
+}
 </style>
 <i18n>
 es:
     Substract 1: Quitar 1
     Flush: Vaciar
+    Are you sure?: ¿Estás seguro?
+    It will set to 0: Se pondrá a 0
 </i18n>

From b43985b9db209f9cf5bdef15b050ea4629dfbdba Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 4 Dec 2023 15:26:19 +0100
Subject: [PATCH 50/81] refs #5835 refactor

---
 src/i18n/en/index.js                          |  2 +-
 src/i18n/es/index.js                          |  2 +-
 src/pages/InvoiceIn/Card/InvoiceInSummary.vue | 18 +++++++++++-------
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 522c11100..26d37ae5a 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -347,7 +347,7 @@ export default {
     },
     invoiceOut: {
         pageTitles: {
-            invoiceOuts: 'Invoices Out',
+            invoiceOuts: 'Create invoice',
             list: 'List',
             createInvoiceOut: 'Create invoice out',
             summary: 'Summary',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index d4deed5ee..791ba85f0 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -347,7 +347,7 @@ export default {
     },
     invoiceOut: {
         pageTitles: {
-            invoiceOuts: 'Fact. emitidas',
+            invoiceOuts: 'Crear factura',
             list: 'Listado',
             createInvoiceOut: 'Crear fact. emitida',
             summary: 'Resumen',
diff --git a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
index a5057ddd5..b3b4f37b6 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
@@ -193,6 +193,10 @@ function taxRate(taxableBase, rate) {
     }
     return 0;
 }
+
+function getLink(param) {
+    return `#/invoice-in/${entityId.value}/${param}`;
+}
 </script>
 
 <template>
@@ -208,7 +212,7 @@ function taxRate(taxableBase, rate) {
             <!--Basic Data-->
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
-                    <a class="header" :href="`#/invoice-in/${entityId}/basic-data`">
+                    <a class="header" :href="getLink('basic-data')">
                         {{ t('invoiceIn.pageTitles.basicData') }}
                         <QIcon name="open_in_new" color="primary" />
                     </a>
@@ -232,7 +236,7 @@ function taxRate(taxableBase, rate) {
             </QCard>
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
-                    <a class="header" :href="`#/invoice-in/${entityId}/basic-data`">
+                    <a class="header" :href="getLink('basic-data')">
                         {{ t('invoiceIn.pageTitles.basicData') }}
                         <QIcon name="open_in_new" color="primary" />
                     </a>
@@ -257,7 +261,7 @@ function taxRate(taxableBase, rate) {
             </QCard>
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
-                    <a class="header" :href="`#/invoice-in/${entityId}/basic-data`">
+                    <a class="header" :href="getLink('basic-data')">
                         {{ t('invoiceIn.pageTitles.basicData') }}
                         <QIcon name="open_in_new" color="primary" />
                     </a>
@@ -281,7 +285,7 @@ function taxRate(taxableBase, rate) {
             </QCard>
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
-                    <a class="header" :href="`#/invoice-in/${entityId}/basic-data`">
+                    <a class="header" :href="getLink('basic-data')">
                         {{ t('invoiceIn.pageTitles.basicData') }}
                         <QIcon name="open_in_new" color="primary" />
                     </a>
@@ -317,7 +321,7 @@ function taxRate(taxableBase, rate) {
             </QCard>
             <!--Vat-->
             <QCard v-if="invoiceIn.invoiceInTax.length">
-                <a class="header" :href="`#/invoice-in/${entityId}/vat`">
+                <a class="header" :href="getLink('vat')">
                     {{ t('invoiceIn.card.vat') }}
                     <QIcon name="open_in_new" color="primary" />
                 </a>
@@ -350,7 +354,7 @@ function taxRate(taxableBase, rate) {
             </QCard>
             <!--Due Day-->
             <QCard v-if="invoiceIn.invoiceInDueDay.length">
-                <a class="header" :href="`#/invoice-in/${entityId}/due-day`">
+                <a class="header" :href="getLink('due-day')">
                     {{ t('invoiceIn.card.dueDay') }}
                     <QIcon name="open_in_new" color="primary" />
                 </a>
@@ -380,7 +384,7 @@ function taxRate(taxableBase, rate) {
             </QCard>
             <!--Intrastat-->
             <QCard v-if="invoiceIn.invoiceInIntrastat.length">
-                <a class="header" :href="`#/invoice-in/${entityId}/intrastat`">
+                <a class="header" :href="getUrl('intrastat')">
                     {{ t('invoiceIn.card.intrastat') }}
                     <QIcon name="open_in_new" color="primary" />
                 </a>

From 9a566ba87c07d2256c2c2e76e6a6788cab0bc6c1 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Wed, 6 Dec 2023 09:48:51 +0100
Subject: [PATCH 51/81] feat(wagonCounter): refs #6545 move to test

---
 src/i18n/en/index.js             |   1 +
 src/i18n/es/index.js             |   1 +
 src/pages/Wagon/WagonCounter.vue | 128 +++++++++++++++++++++++++++++++
 src/router/modules/wagon.js      |  11 ++-
 4 files changed, 140 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Wagon/WagonCounter.vue

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 948332d46..7ff2b41f6 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -448,6 +448,7 @@ export default {
             typesList: 'Types List',
             typeCreate: 'Create type',
             typeEdit: 'Edit type',
+            wagonCounter: 'Trolley counter',
         },
         type: {
             name: 'Name',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 9b452ab22..b65375a2c 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -448,6 +448,7 @@ export default {
             typesList: 'Listado tipos',
             typeCreate: 'Crear tipo',
             typeEdit: 'Editar tipo',
+            wagonCounter: 'Contador de carros',
         },
         type: {
             name: 'Nombre',
diff --git a/src/pages/Wagon/WagonCounter.vue b/src/pages/Wagon/WagonCounter.vue
new file mode 100644
index 000000000..38e9bc529
--- /dev/null
+++ b/src/pages/Wagon/WagonCounter.vue
@@ -0,0 +1,128 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useSession } from 'src/composables/useSession';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import VnConfirm from 'components/ui/VnConfirm.vue';
+
+const quasar = useQuasar();
+const { t } = useI18n();
+const session = useSession();
+const token = session.getToken();
+
+const counters = ref({
+    alquilerBandeja: { count: 0, id: 1, title: 'Alquiler de CC Bandeja' },
+    bandejaRota: { count: 0, id: 2, title: 'CC Bandeja Rota' },
+    carryOficial: { count: 0, id: 3, title: ' Alquiler de CC Carry OFICIAL' },
+    candadoRojo: { count: 0, id: 4, title: 'CC Candado rojo' },
+    sacadores: { count: 0, id: 5, title: 'CC Sacadores' },
+    sinChapa: { count: 0, id: 6, title: 'CC Sin Chapa' },
+    carroRoto: { count: 0, id: 7, title: 'Carro Roto' },
+});
+
+const actions = {
+    add: (value) => value + 1,
+    substract: (value) => (value ? value - 1 : 0),
+    flush: () => 0,
+};
+
+onMounted(() => {
+    const types = Object.keys(counters.value);
+    for (let type of types) {
+        const counter = localStorage.getItem(type);
+        counters.value[type].count = counter ? parseInt(counter) : 0;
+    }
+});
+
+function getUrl(id) {
+    return `/api/Images/catalog/200x200/${id}/download?access_token=${token}`;
+}
+
+async function handleEvent(type, action) {
+    const counter = counters.value[type].count;
+    let isOk = true;
+
+    if (action == 'flush') isOk = await confirm();
+
+    if (isOk) {
+        counters.value[type].count = actions[action](counter);
+        localStorage.setItem(type, counters.value[type].count);
+    }
+}
+
+function confirm() {
+    return new Promise((resolve) => {
+        quasar
+            .dialog({
+                component: VnConfirm,
+                componentProps: {
+                    title: t('Are you sure?'),
+                    message: t('Se pondrá el contador a cero'),
+                },
+            })
+            .onOk(() => resolve(true))
+            .onCancel(() => resolve(false));
+    });
+}
+</script>
+<template>
+    <QList class="row q-mx-auto q-mt-xl">
+        <QItem v-for="(props, name) in counters" :key="name" class="col-6">
+            <QItemSection>
+                <QImg
+                    :src="getUrl(props.id)"
+                    width="130px"
+                    @click="handleEvent(name, 'add')"
+                />
+                <p class="title">{{ props.title }}</p>
+            </QItemSection>
+            <QItemSection class="q-ma-none">
+                <QItemLabel class="text-h4">
+                    {{ props.count }}
+                </QItemLabel>
+                <QItemLabel>
+                    <QBtn
+                        class="text-center q-mr-xs"
+                        color="warning"
+                        dense
+                        size="sm"
+                        @click="handleEvent(name, 'substract')"
+                    >
+                        {{ t('Substract 1') }}
+                    </QBtn>
+                    <QBtn
+                        class="text-center q-ml-xs"
+                        color="red"
+                        dense
+                        size="sm"
+                        @click="handleEvent(name, 'flush')"
+                    >
+                        {{ t('Flush') }}
+                    </QBtn>
+                </QItemLabel>
+            </QItemSection>
+            <QSeparator class="q-mt-sm q-mx-none" color="primary" />
+        </QItem>
+    </QList>
+</template>
+<style lang="scss" scoped>
+.q-list {
+    max-width: 50em;
+}
+@media (max-width: $breakpoint-sm) {
+    .q-item {
+        display: flex;
+        flex-direction: column;
+    }
+    .title {
+        min-height: 3em;
+    }
+}
+</style>
+<i18n>
+es:
+    Substract 1: Quitar 1
+    Flush: Vaciar
+    Are you sure?: ¿Estás seguro?
+    It will set to 0: Se pondrá a 0
+</i18n>
diff --git a/src/router/modules/wagon.js b/src/router/modules/wagon.js
index 3fb808778..238e482dd 100644
--- a/src/router/modules/wagon.js
+++ b/src/router/modules/wagon.js
@@ -10,7 +10,7 @@ export default {
     component: RouterView,
     redirect: { name: 'WagonMain' },
     menus: {
-        main: ['WagonList', 'WagonTypeList'],
+        main: ['WagonList', 'WagonTypeList', 'WagonCounter'],
         card: [],
     },
     children: [
@@ -47,6 +47,15 @@ export default {
                     },
                     component: () => import('src/pages/Wagon/WagonCreate.vue'),
                 },
+                {
+                    path: 'counter',
+                    name: 'WagonCounter',
+                    meta: {
+                        title: 'wagonCounter',
+                        icon: 'add_circle',
+                    },
+                    component: () => import('src/pages/Wagon/WagonCounter.vue'),
+                },
             ],
         },
         {

From e963eddfe6615c21a81f09b00675785f68d7e392 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Wed, 6 Dec 2023 12:09:03 +0100
Subject: [PATCH 52/81] feat(wagonCounter): refs #6545 add +30 button and
 correct images

---
 src/pages/Wagon/WagonCounter.vue | 38 ++++++++++++++++++++++----------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/pages/Wagon/WagonCounter.vue b/src/pages/Wagon/WagonCounter.vue
index 38e9bc529..1c4d9e371 100644
--- a/src/pages/Wagon/WagonCounter.vue
+++ b/src/pages/Wagon/WagonCounter.vue
@@ -11,19 +11,20 @@ const session = useSession();
 const token = session.getToken();
 
 const counters = ref({
-    alquilerBandeja: { count: 0, id: 1, title: 'Alquiler de CC Bandeja' },
-    bandejaRota: { count: 0, id: 2, title: 'CC Bandeja Rota' },
-    carryOficial: { count: 0, id: 3, title: ' Alquiler de CC Carry OFICIAL' },
-    candadoRojo: { count: 0, id: 4, title: 'CC Candado rojo' },
-    sacadores: { count: 0, id: 5, title: 'CC Sacadores' },
-    sinChapa: { count: 0, id: 6, title: 'CC Sin Chapa' },
-    carroRoto: { count: 0, id: 7, title: 'Carro Roto' },
+    alquilerBandeja: { count: 0, id: 96001, title: 'CC Bandeja' },
+    bandejaRota: { count: 0, id: 88381, title: 'CC Bandeja Rota' },
+    carryOficial: { count: 0, id: 96000, title: 'CC Carry OFICIAL TAG5' },
+    candadoRojo: { count: 0, id: 142252, title: 'CC Candado rojo' },
+    sacadores: { count: 0, id: 142260, title: 'CC Sacadores' },
+    sinChapa: { count: 0, id: 142258, title: 'CC Sin Chapa' },
+    carroRoto: { count: 0, id: 142251, title: 'Carro Roto' },
 });
 
 const actions = {
     add: (value) => value + 1,
-    substract: (value) => (value ? value - 1 : 0),
+    subtract: (value) => (value ? value - 1 : 0),
     flush: () => 0,
+    addSpecific: (value) => value + 30,
 };
 
 onMounted(() => {
@@ -57,7 +58,7 @@ function confirm() {
                 component: VnConfirm,
                 componentProps: {
                     title: t('Are you sure?'),
-                    message: t('Se pondrá el contador a cero'),
+                    message: t('The counter will be reset to zero'),
                 },
             })
             .onOk(() => resolve(true))
@@ -86,9 +87,20 @@ function confirm() {
                         color="warning"
                         dense
                         size="sm"
-                        @click="handleEvent(name, 'substract')"
+                        @click="handleEvent(name, 'addSpecific')"
                     >
-                        {{ t('Substract 1') }}
+                        {{ t('Add 30') }}
+                    </QBtn>
+                </QItemLabel>
+                <QItemLabel>
+                    <QBtn
+                        class="text-center q-mr-xs"
+                        color="warning"
+                        dense
+                        size="sm"
+                        @click="handleEvent(name, 'subtract')"
+                    >
+                        {{ t('Subtract 1') }}
                     </QBtn>
                     <QBtn
                         class="text-center q-ml-xs"
@@ -121,8 +133,10 @@ function confirm() {
 </style>
 <i18n>
 es:
-    Substract 1: Quitar 1
+    Subtract 1: Quitar 1
+    Add 30: Añadir 30
     Flush: Vaciar
     Are you sure?: ¿Estás seguro?
     It will set to 0: Se pondrá a 0
+    The counter will be reset to zero: Se pondrá el contador a cero
 </i18n>

From 6c524932ee20393cfd814e1d559ffc92e429f598 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Wed, 6 Dec 2023 14:14:47 +0100
Subject: [PATCH 53/81] feat(addSpecific): refs #6545 add feats and fixes

---
 src/pages/Wagon/WagonCounter.vue | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/pages/Wagon/WagonCounter.vue b/src/pages/Wagon/WagonCounter.vue
index 1c4d9e371..eb0a705e8 100644
--- a/src/pages/Wagon/WagonCounter.vue
+++ b/src/pages/Wagon/WagonCounter.vue
@@ -14,17 +14,17 @@ const counters = ref({
     alquilerBandeja: { count: 0, id: 96001, title: 'CC Bandeja' },
     bandejaRota: { count: 0, id: 88381, title: 'CC Bandeja Rota' },
     carryOficial: { count: 0, id: 96000, title: 'CC Carry OFICIAL TAG5' },
-    candadoRojo: { count: 0, id: 142252, title: 'CC Candado rojo' },
+    candadoRojo: { count: 0, id: 96002, title: 'CC Carry NO OFICIAL' },
     sacadores: { count: 0, id: 142260, title: 'CC Sacadores' },
-    sinChapa: { count: 0, id: 142258, title: 'CC Sin Chapa' },
+    sinChapa: { count: 0, id: 2214, title: 'DC Carry Sin Placa CC' },
     carroRoto: { count: 0, id: 142251, title: 'Carro Roto' },
 });
 
 const actions = {
-    add: (value) => value + 1,
-    subtract: (value) => (value ? value - 1 : 0),
+    add: (counter) => counter + 1,
+    subtract: (counter) => (counter ? counter - 1 : 0),
     flush: () => 0,
-    addSpecific: (value) => value + 30,
+    addSpecific: (counter, amount) => counter + amount,
 };
 
 onMounted(() => {
@@ -39,14 +39,14 @@ function getUrl(id) {
     return `/api/Images/catalog/200x200/${id}/download?access_token=${token}`;
 }
 
-async function handleEvent(type, action) {
+async function handleEvent(type, action, amount) {
     const counter = counters.value[type].count;
     let isOk = true;
 
     if (action == 'flush') isOk = await confirm();
 
     if (isOk) {
-        counters.value[type].count = actions[action](counter);
+        counters.value[type].count = actions[action](counter, amount);
         localStorage.setItem(type, counters.value[type].count);
     }
 }
@@ -87,10 +87,21 @@ function confirm() {
                         color="warning"
                         dense
                         size="sm"
-                        @click="handleEvent(name, 'addSpecific')"
+                        v-if="props.title === 'CC Bandeja'"
+                        @click="handleEvent(name, 'addSpecific', 30)"
                     >
                         {{ t('Add 30') }}
                     </QBtn>
+                    <QBtn
+                        class="text-center q-mr-xs"
+                        color="warning"
+                        dense
+                        size="sm"
+                        v-else
+                        @click="handleEvent(name, 'addSpecific', 10)"
+                    >
+                        {{ t('Add 10') }}
+                    </QBtn>
                 </QItemLabel>
                 <QItemLabel>
                     <QBtn
@@ -135,6 +146,7 @@ function confirm() {
 es:
     Subtract 1: Quitar 1
     Add 30: Añadir 30
+    Add 10: Añadir 10
     Flush: Vaciar
     Are you sure?: ¿Estás seguro?
     It will set to 0: Se pondrá a 0

From 735eac5137cf7c46c2fa13189ee72e50cfd90324 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Wed, 6 Dec 2023 15:17:50 +0100
Subject: [PATCH 54/81] feat: refs #6545 isTray

---
 src/pages/Wagon/WagonCounter.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/Wagon/WagonCounter.vue b/src/pages/Wagon/WagonCounter.vue
index eb0a705e8..bd5d2ca67 100644
--- a/src/pages/Wagon/WagonCounter.vue
+++ b/src/pages/Wagon/WagonCounter.vue
@@ -11,8 +11,8 @@ const session = useSession();
 const token = session.getToken();
 
 const counters = ref({
-    alquilerBandeja: { count: 0, id: 96001, title: 'CC Bandeja' },
-    bandejaRota: { count: 0, id: 88381, title: 'CC Bandeja Rota' },
+    alquilerBandeja: { count: 0, id: 96001, title: 'CC Bandeja', isTray: true },
+    bandejaRota: { count: 0, id: 88381, title: 'CC Bandeja Rota', isTray: true },
     carryOficial: { count: 0, id: 96000, title: 'CC Carry OFICIAL TAG5' },
     candadoRojo: { count: 0, id: 96002, title: 'CC Carry NO OFICIAL' },
     sacadores: { count: 0, id: 142260, title: 'CC Sacadores' },
@@ -87,7 +87,7 @@ function confirm() {
                         color="warning"
                         dense
                         size="sm"
-                        v-if="props.title === 'CC Bandeja'"
+                        v-if="props.isTray"
                         @click="handleEvent(name, 'addSpecific', 30)"
                     >
                         {{ t('Add 30') }}

From baca1281bf572864fab40b43e5e27f26581fb628 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 6 Dec 2023 13:23:32 -0300
Subject: [PATCH 55/81] Input text refactor

---
 src/components/common/SendEmailDialog.vue     |  6 +-
 src/components/common/VnInput.vue             | 51 ++++++++++++++
 src/components/common/VnSmsDialog.vue         | 28 +++-----
 src/components/ui/VnSearchbar.vue             | 10 ++-
 src/pages/Claim/Card/ClaimBasicData.vue       |  8 ++-
 src/pages/Claim/ClaimFilter.vue               | 52 ++++++++++----
 src/pages/Claim/ClaimRmaList.vue              |  9 ++-
 src/pages/Customer/Card/CustomerBasicData.vue | 11 +--
 src/pages/Customer/CustomerFilter.vue         | 70 +++++++++++++------
 src/pages/Customer/CustomerPaymentsFilter.vue | 33 +++++----
 src/pages/InvoiceOut/InvoiceOutFilter.vue     | 34 +++------
 src/pages/InvoiceOut/InvoiceOutGlobalForm.vue | 55 +++++++--------
 .../InvoiceOut/InvoiceOutNegativeBases.vue    | 11 +--
 src/pages/Login/LoginMain.vue                 |  8 ++-
 src/pages/Login/TwoFactor.vue                 |  4 +-
 src/pages/Route/Cmr/CmrFilter.vue             | 22 +++---
 src/pages/Shelving/Card/ShelvingForm.vue      |  8 ++-
 src/pages/Supplier/SupplierCreate.vue         |  7 +-
 src/pages/Ticket/TicketFilter.vue             | 45 +++++++++---
 src/pages/Travel/ExtraCommunity.vue           | 21 +++---
 src/pages/Travel/ExtraCommunityFilter.vue     | 43 ++++++------
 src/pages/Travel/TravelCreate.vue             | 11 +--
 src/pages/Travel/TravelFilter.vue             | 31 ++++----
 src/pages/Wagon/Type/WagonTypeCreate.vue      | 11 +--
 src/pages/Wagon/WagonCreate.vue               |  9 ++-
 src/pages/Worker/WorkerFilter.vue             | 36 ++++++----
 26 files changed, 390 insertions(+), 244 deletions(-)
 create mode 100644 src/components/common/VnInput.vue

diff --git a/src/components/common/SendEmailDialog.vue b/src/components/common/SendEmailDialog.vue
index ab83c0949..9bfda9614 100644
--- a/src/components/common/SendEmailDialog.vue
+++ b/src/components/common/SendEmailDialog.vue
@@ -1,7 +1,9 @@
 <script setup>
 import { ref } from 'vue';
-import { useDialogPluginComponent } from 'quasar';
 import { useI18n } from 'vue-i18n';
+import { useDialogPluginComponent } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
 
 const props = defineProps({
     data: {
@@ -51,7 +53,7 @@ async function confirm() {
                 {{ t('The notification will be sent to the following address') }}
             </QCardSection>
             <QCardSection class="q-pt-none">
-                <QInput dense v-model="address" rounded outlined autofocus />
+                <VnInput v-model="address" is-outlined autofocus />
             </QCardSection>
             <QCardActions align="right">
                 <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
new file mode 100644
index 000000000..e3040a698
--- /dev/null
+++ b/src/components/common/VnInput.vue
@@ -0,0 +1,51 @@
+<script setup>
+import { computed } from 'vue';
+
+const emit = defineEmits(['update:modelValue', 'update:options']);
+
+const $props = defineProps({
+    modelValue: {
+        type: [String, Number],
+        default: null,
+    },
+    isOutlined: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value);
+    },
+});
+
+const styleAttrs = computed(() => {
+    return $props.isOutlined
+        ? {
+              dense: true,
+              outlined: true,
+              rounded: true,
+          }
+        : {};
+});
+</script>
+
+<template>
+    <QInput
+        ref="vnInputRef"
+        v-model="value"
+        v-bind="{ ...$attrs, ...styleAttrs }"
+        type="text"
+    >
+        <template v-if="$slots.prepend" #prepend>
+            <slot name="prepend" />
+        </template>
+        <template v-if="$slots.append" #append>
+            <slot name="append" />
+        </template>
+    </QInput>
+</template>
diff --git a/src/components/common/VnSmsDialog.vue b/src/components/common/VnSmsDialog.vue
index 7f019927e..8bb8c3858 100644
--- a/src/components/common/VnSmsDialog.vue
+++ b/src/components/common/VnSmsDialog.vue
@@ -1,7 +1,9 @@
 <script setup>
 import { ref, computed } from 'vue';
-import { useDialogPluginComponent } from 'quasar';
 import { useI18n } from 'vue-i18n';
+import { useDialogPluginComponent } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { dialogRef, onDialogOK } = useDialogPluginComponent();
 const { t, availableLocales } = useI18n();
@@ -117,24 +119,10 @@ async function send() {
                 />
             </QCardSection>
             <QCardSection class="q-pb-xs">
-                <QInput
-                    :label="t('Phone')"
-                    v-model="phone"
-                    rounded
-                    outlined
-                    autofocus
-                    dense
-                />
+                <VnInput :label="t('Phone')" v-model="phone" is-outlined />
             </QCardSection>
             <QCardSection class="q-pb-xs">
-                <QInput
-                    :label="t('Subject')"
-                    v-model="subject"
-                    rounded
-                    outlined
-                    autofocus
-                    dense
-                />
+                <VnInput v-model="subject" :label="t('Subject')" is-outlined />
             </QCardSection>
             <QCardSection class="q-mb-md" q-input>
                 <QInput
@@ -198,7 +186,7 @@ async function send() {
 en:
     CustomerDefaultLanguage: This customer uses <strong>{locale}</strong> as their default language
     templates:
-        pendingPayment: 'Your order is pending of payment. 
+        pendingPayment: 'Your order is pending of payment.
             Please, enter the website and make the payment with a credit card. Thank you.'
         minAmount: 'A minimum amount of 50€ (VAT excluded) is required for your order 
             { orderId } of { shipped } to receive it without additional shipping costs.'
@@ -215,7 +203,7 @@ es:
     Subject: Asunto
     Message: Mensaje
     templates:
-        pendingPayment: 'Su pedido está pendiente de pago. 
+        pendingPayment: 'Su pedido está pendiente de pago.
             Por favor, entre en la página web y efectue el pago con tarjeta. Muchas gracias.'
         minAmount: 'Es necesario un importe mínimo de 50€ (Sin IVA) en su pedido 
             { orderId } del día { shipped } para recibirlo sin portes adicionales.'
@@ -249,7 +237,7 @@ pt:
     Subject: Assunto
     Message: Mensagem
     templates:
-        pendingPayment: 'Seu pedido está pendente de pagamento. 
+        pendingPayment: 'Seu pedido está pendente de pagamento.
             Por favor, acesse o site e faça o pagamento com cartão. Muito obrigado.'
         minAmount: 'É necessário um valor mínimo de 50€ (sem IVA) em seu pedido 
             { orderId } do dia { shipped } para recebê-lo sem custos de envio adicionais.'
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 693d6fce2..3343ba64c 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -1,8 +1,12 @@
 <script setup>
 import { onMounted, ref } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
-import { useArrayData } from 'composables/useArrayData';
 import { useQuasar } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useArrayData } from 'composables/useArrayData';
+
 const quasar = useQuasar();
 
 const props = defineProps({
@@ -86,7 +90,7 @@ async function search() {
 
 <template>
     <QForm @submit="search">
-        <QInput
+        <VnInput
             id="searchbar"
             v-model="searchText"
             :placeholder="props.label"
@@ -113,7 +117,7 @@ async function search() {
                     <QTooltip>{{ props.info }}</QTooltip>
                 </QIcon>
             </template>
-        </QInput>
+        </VnInput>
     </QForm>
 </template>
 
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index ab818704b..f831bcf9d 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -3,10 +3,12 @@ import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
-import { useSession } from 'src/composables/useSession';
 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 { useSession } from 'src/composables/useSession';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -101,7 +103,7 @@ const statesFilter = {
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.client.name"
                         :label="t('claim.basicData.customer')"
                         disable
@@ -190,7 +192,7 @@ const statesFilter = {
                     />
                 </div>
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.rma"
                         :label="t('claim.basicData.returnOfMaterial')"
                         :rules="validate('claim.rma')"
diff --git a/src/pages/Claim/ClaimFilter.vue b/src/pages/Claim/ClaimFilter.vue
index ac8f4f0db..0cc20e595 100644
--- a/src/pages/Claim/ClaimFilter.vue
+++ b/src/pages/Claim/ClaimFilter.vue
@@ -1,9 +1,11 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -33,30 +35,31 @@ const states = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
-                <QItem>
+            <QList dense style="max-width: 256px" class="list">
+                <QItem class="q-my-sm">
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Customer ID')"
                             v-model="params.clientFk"
                             lazy-rules
+                            is-outlined
                         >
                             <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </QInput>
+                                <QIcon name="badge" size="xs"></QIcon> </template
+                        ></VnInput>
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Client Name')"
                             v-model="params.clientName"
                             lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!workers">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -71,11 +74,15 @@ const states = ref();
                             emit-value
                             map-options
                             use-input
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!workers">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -90,11 +97,15 @@ const states = ref();
                             emit-value
                             map-options
                             use-input
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!workers">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -109,11 +120,15 @@ const states = ref();
                             emit-value
                             map-options
                             use-input
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-md">
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!states">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -127,6 +142,10 @@ const states = ref();
                             option-label="description"
                             emit-value
                             map-options
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                         />
                     </QItemSection>
                 </QItem>
@@ -155,6 +174,9 @@ const states = ref();
                                 :label="t('Created')"
                                 autofocus
                                 readonly
+                                dense
+                                outlined
+                                rounded
                             >
                                 <template #append>
                                     <QIcon name="event" class="cursor-pointer">
@@ -185,6 +207,12 @@ const states = ref();
     </VnFilterPanel>
 </template>
 
+<style scoped>
+.list * {
+    max-width: 100%;
+}
+</style>
+
 <i18n>
 en:
     params:
diff --git a/src/pages/Claim/ClaimRmaList.vue b/src/pages/Claim/ClaimRmaList.vue
index 8eac83b1e..3774932e3 100644
--- a/src/pages/Claim/ClaimRmaList.vue
+++ b/src/pages/Claim/ClaimRmaList.vue
@@ -2,10 +2,13 @@
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
-import axios from 'axios';
+
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import { useArrayData } from 'src/composables/useArrayData';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useArrayData } from 'src/composables/useArrayData';
+import axios from 'axios';
 
 const quasar = useQuasar();
 const { t } = useI18n();
@@ -65,7 +68,7 @@ async function remove({ id }) {
         <QPageSticky expand position="top" :offset="[16, 16]">
             <QCard class="card q-pa-md">
                 <QForm @submit="submit">
-                    <QInput
+                    <VnInput
                         ref="input"
                         v-model="newRma.code"
                         :label="t('claim.rmaList.code')"
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 47cb6e337..458d50082 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -7,6 +7,7 @@ import { useSession } from 'src/composables/useSession';
 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';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -64,7 +65,7 @@ const filterOptions = {
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.socialName"
                         :label="t('customer.basicData.socialName')"
                         :rules="validate('client.socialName')"
@@ -87,7 +88,7 @@ const filterOptions = {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.contact"
                         :label="t('customer.basicData.contact')"
                         :rules="validate('client.contact')"
@@ -95,7 +96,7 @@ const filterOptions = {
                     />
                 </div>
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.email"
                         type="email"
                         :label="t('customer.basicData.email')"
@@ -106,7 +107,7 @@ const filterOptions = {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.phone"
                         :label="t('customer.basicData.phone')"
                         :rules="validate('client.phone')"
@@ -114,7 +115,7 @@ const filterOptions = {
                     />
                 </div>
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.mobile"
                         :label="t('customer.basicData.mobile')"
                         :rules="validate('client.mobile')"
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index c276b0d3e..d7eac2b6c 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -1,9 +1,11 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -35,31 +37,31 @@ const zones = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
-                <QItem>
+            <QList dense style="max-width: 256px" class="list">
+                <QItem class="q-my-sm">
                     <QItemSection>
-                        <QInput :label="t('FI')" v-model="params.fi" lazy-rules>
+                        <VnInput :label="t('FI')" v-model="params.fi" is-outlined>
                             <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
+                                <QIcon name="badge" size="xs" />
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection>
-                        <QInput :label="t('Name')" v-model="params.name" lazy-rules />
+                        <VnInput :label="t('Name')" v-model="params.name" is-outlined />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Social Name')"
                             v-model="params.socialName"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!workers">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -74,11 +76,15 @@ const zones = ref();
                             emit-value
                             map-options
                             use-input
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!provinces">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -92,33 +98,45 @@ const zones = ref();
                             option-label="name"
                             emit-value
                             map-options
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
                 <QItem class="q-mb-md">
                     <QItemSection>
-                        <QInput :label="t('City')" v-model="params.city" lazy-rules />
+                        <VnInput :label="t('City')" v-model="params.city" is-outlined />
                     </QItemSection>
                 </QItem>
                 <QSeparator />
                 <QExpansionItem :label="t('More options')" expand-separator>
                     <QItem>
                         <QItemSection>
-                            <QInput :label="t('Phone')" v-model="params.phone" lazy-rules>
+                            <VnInput
+                                :label="t('Phone')"
+                                v-model="params.phone"
+                                is-outlined
+                            >
                                 <template #prepend>
-                                    <QIcon name="phone" size="sm"></QIcon>
+                                    <QIcon name="phone" size="xs" />
                                 </template>
-                            </QInput>
+                            </VnInput>
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput :label="t('Email')" v-model="params.email" lazy-rules>
+                            <VnInput
+                                :label="t('Email')"
+                                v-model="params.email"
+                                is-outlined
+                            >
                                 <template #prepend>
-                                    <QIcon name="email" size="sm"></QIcon>
+                                    <QIcon name="email" size="sm" />
                                 </template>
-                            </QInput>
+                            </VnInput>
                         </QItemSection>
                     </QItem>
                     <QItem>
@@ -135,15 +153,19 @@ const zones = ref();
                                 option-label="name"
                                 emit-value
                                 map-options
+                                hide-selected
+                                dense
+                                outlined
+                                rounded
                             />
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput
+                            <VnInput
                                 :label="t('Postcode')"
                                 v-model="params.postcode"
-                                lazy-rules
+                                is-outlined
                             />
                         </QItemSection>
                     </QItem>
@@ -153,6 +175,12 @@ const zones = ref();
     </VnFilterPanel>
 </template>
 
+<style scoped>
+.list * {
+    max-width: 100%;
+}
+</style>
+
 <i18n>
 en:
     params:
diff --git a/src/pages/Customer/CustomerPaymentsFilter.vue b/src/pages/Customer/CustomerPaymentsFilter.vue
index 56fb52d79..efe7a48ee 100644
--- a/src/pages/Customer/CustomerPaymentsFilter.vue
+++ b/src/pages/Customer/CustomerPaymentsFilter.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -24,39 +25,39 @@ function isValidNumber(value) {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense>
+            <QList dense class="q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Order ID')"
                             v-model="params.orderFk"
-                            lazy-rules
+                            is-outlined
                         >
                             <template #prepend>
-                                <QIcon name="vn:basket" size="sm"></QIcon>
+                                <QIcon name="vn:basket" size="xs" />
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Customer ID')"
                             v-model="params.clientFk"
-                            lazy-rules
+                            is-outlined
                         >
                             <template #prepend>
-                                <QIcon name="vn:client" size="sm"></QIcon>
+                                <QIcon name="vn:client" size="xs" />
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Amount')"
                             v-model="params.amount"
-                            lazy-rules
+                            is-outlined
                             @update:model-value="
                                 (value) => {
                                     if (value.includes(','))
@@ -67,13 +68,15 @@ function isValidNumber(value) {
                                 (val) =>
                                     isValidNumber(val) || !val || 'Please type a number',
                             ]"
+                            lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="euro" size="sm" />
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
+
                 <QItem>
                     <QItemSection>
                         <QInput
@@ -81,6 +84,9 @@ function isValidNumber(value) {
                             :label="t('From')"
                             mask="date"
                             placeholder="yyyy/mm/dd"
+                            dense
+                            outlined
+                            rounded
                         >
                             <template #append>
                                 <QIcon name="event" class="cursor-pointer">
@@ -118,6 +124,9 @@ function isValidNumber(value) {
                             :label="t('To')"
                             mask="date"
                             placeholder="yyyy/mm/dd"
+                            dense
+                            outlined
+                            rounded
                         >
                             <template #append>
                                 <QIcon name="event" class="cursor-pointer">
diff --git a/src/pages/InvoiceOut/InvoiceOutFilter.vue b/src/pages/InvoiceOut/InvoiceOutFilter.vue
index 6711d17c6..af657022f 100644
--- a/src/pages/InvoiceOut/InvoiceOutFilter.vue
+++ b/src/pages/InvoiceOut/InvoiceOutFilter.vue
@@ -1,8 +1,10 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -38,47 +40,31 @@ function setWorkers(data) {
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
+            <QList dense class="q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Customer ID')"
-                            class="q-mt-sm"
-                            dense
-                            lazy-rules
-                            outlined
-                            rounded
                             v-model="params.clientFk"
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
-                            :label="t('FI')"
-                            class="q-mt-sm"
-                            dense
-                            lazy-rules
-                            outlined
-                            rounded
-                            v-model="params.fi"
-                        />
+                        <VnInput v-model="params.fi" :label="t('FI')" is-outlined />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Amount')"
-                            class="q-mt-sm"
-                            dense
-                            lazy-rules
-                            outlined
-                            rounded
                             v-model="params.amount"
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mt-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             :label="t('Min')"
@@ -102,7 +88,7 @@ function setWorkers(data) {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-md">
+                <QItem>
                     <QItemSection>
                         <QCheckbox
                             :label="t('Has PDF')"
diff --git a/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue b/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
index 05b642f1f..3ab7a32db 100644
--- a/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
+++ b/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
@@ -1,11 +1,13 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
 import { storeToRefs } from 'pinia';
-import { toDate } from 'src/filters';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
 import FetchData from 'components/FetchData.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
+import { toDate } from 'src/filters';
 
 const { t } = useI18n();
 const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
@@ -84,7 +86,7 @@ onMounted(async () => {
         class="form-container q-pa-md"
         style="max-width: 256px"
     >
-        <div class="column q-gutter-y-md">
+        <div class="column q-gutter-y-sm">
             <QRadio
                 v-model="clientsToInvoice"
                 dense
@@ -98,6 +100,7 @@ onMounted(async () => {
                 val="one"
                 :label="t('oneClient')"
                 :dark="true"
+                class="q-mb-sm"
             />
             <VnSelectFilter
                 v-if="clientsToInvoice === 'one'"
@@ -223,28 +226,24 @@ onMounted(async () => {
 </style>
 
 <i18n>
-    {
-        "en": {
-            "invoiceDate": "Invoice date",
-            "maxShipped": "Max date",
-            "allClients": "All clients",
-            "oneClient": "One client",
-            "company": "Company",
-            "printer": "Printer",
-            "invoiceOut": "Invoice out",
-            "client": "Client",
-            "stop": "Stop"
-        },
-        "es": {
-            "invoiceDate": "Fecha de factura",
-            "maxShipped": "Fecha límite",
-            "allClients": "Todos los clientes",
-            "oneClient": "Un solo cliente",
-            "company": "Empresa",
-            "printer": "Impresora",
-            "invoiceOut": "Facturar",
-            "client": "Cliente",
-            "stop": "Parar"
-        }
-    }
+en:
+    invoiceDate: Invoice date
+    maxShipped: Max date
+    allClients: All clients
+    oneClient: One client
+    company: Company
+    printer: Printer
+    invoiceOut: Invoice out
+    client: Client
+    stop: Stop
+es:
+    invoiceDate: Fecha de factura
+    maxShipped: Fecha límite
+    allClients: Todos los clientes
+    oneClient: Un solo cliente
+    company: Empresa
+    printer: Impresora
+    invoiceOut: Facturar
+    client: Cliente
+    stop: Parar
 </i18n>
diff --git a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
index 6ea20288d..5425b34cc 100644
--- a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
+++ b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
@@ -1,11 +1,14 @@
 <script setup>
 import { onMounted, ref, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { QCheckbox, QBtn } from 'quasar';
+
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
 import invoiceOutService from 'src/services/invoiceOut.service';
 import { toCurrency } from 'src/filters';
-import { QCheckbox, QBtn } from 'quasar';
 import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
 import { toDate } from 'src/filters';
 
@@ -331,19 +334,17 @@ onMounted(async () => {
                     <QTh v-for="col in props.cols" :key="col.name" :props="props">
                         <div class="column justify-start items-start full-height">
                             {{ t(`invoiceOut.negativeBases.${col.label}`) }}
-                            <QInput
+                            <VnInput
                                 :class="{
                                     invisible:
                                         col.field === 'isActive' ||
                                         col.field === 'hasToInvoice' ||
                                         col.field === 'isTaxDataChecked',
                                 }"
-                                dense
-                                outlined
-                                rounded
                                 v-model="filter[col.field]"
                                 type="text"
                                 @keyup.enter="search()"
+                                is-outlined
                             />
                         </div>
                     </QTh>
diff --git a/src/pages/Login/LoginMain.vue b/src/pages/Login/LoginMain.vue
index 2e4fd91ca..e2ccdac16 100644
--- a/src/pages/Login/LoginMain.vue
+++ b/src/pages/Login/LoginMain.vue
@@ -3,12 +3,13 @@ import { ref } from 'vue';
 import { Notify, useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import axios from 'axios';
 
 import { useSession } from 'src/composables/useSession';
 import { useLogin } from 'src/composables/useLogin';
 
 import VnLogo from 'components/ui/VnLogo.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import axios from 'axios';
 
 const quasar = useQuasar();
 const session = useSession();
@@ -68,13 +69,14 @@ async function onSubmit() {
 <template>
     <QForm @submit="onSubmit" class="q-gutter-y-md q-pa-lg formCard">
         <VnLogo alt="Logo" fit="contain" :ratio="16 / 9" class="q-mb-md" />
-        <QInput
+
+        <VnInput
             v-model="username"
             :label="t('login.username')"
             lazy-rules
             :rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
         />
-        <QInput
+        <VnInput
             type="password"
             v-model="password"
             :label="t('login.password')"
diff --git a/src/pages/Login/TwoFactor.vue b/src/pages/Login/TwoFactor.vue
index 1c99e8dec..b3a139149 100644
--- a/src/pages/Login/TwoFactor.vue
+++ b/src/pages/Login/TwoFactor.vue
@@ -53,7 +53,7 @@ async function onSubmit() {
             <QIcon name="phonelink_lock" size="xl" color="primary" />
             <h5 class="text-center q-my-md">{{ t('twoFactor.insert') }}</h5>
         </div>
-        <QInput
+        <VnInput
             v-model="code"
             :hint="t('twoFactor.explanation')"
             mask="# # # # # #"
@@ -64,7 +64,7 @@ async function onSubmit() {
             <template #prepend>
                 <QIcon name="lock" />
             </template>
-        </QInput>
+        </VnInput>
         <div class="q-mt-xl">
             <QBtn
                 :label="t('twoFactor.validate')"
diff --git a/src/pages/Route/Cmr/CmrFilter.vue b/src/pages/Route/Cmr/CmrFilter.vue
index b8948652a..1ccfa2404 100644
--- a/src/pages/Route/Cmr/CmrFilter.vue
+++ b/src/pages/Route/Cmr/CmrFilter.vue
@@ -28,15 +28,14 @@ const countries = ref();
             <QList dense>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('route.cmr.list.cmrFk')"
                             v-model="params.cmrFk"
-                            lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="article" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
@@ -50,41 +49,38 @@ const countries = ref();
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('route.cmr.list.ticketFk')"
                             v-model="params.ticketFk"
-                            lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="vn:ticket" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('route.cmr.list.routeFk')"
                             v-model="params.routeFk"
-                            lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="vn:delivery" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('route.cmr.list.clientFk')"
                             v-model="params.clientFk"
-                            lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="vn:client" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
@@ -156,7 +152,7 @@ const countries = ref();
             country: Country
             clientFk: Client id
             shipped: Preparation date
-    
+
     es:
         params:
             cmrFk: Id cmr
diff --git a/src/pages/Shelving/Card/ShelvingForm.vue b/src/pages/Shelving/Card/ShelvingForm.vue
index d919a05ba..61f4ceb8a 100644
--- a/src/pages/Shelving/Card/ShelvingForm.vue
+++ b/src/pages/Shelving/Card/ShelvingForm.vue
@@ -1,8 +1,10 @@
 <script setup>
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
-import { computed, ref } from 'vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const props = defineProps({
     data: {
@@ -57,7 +59,7 @@ const parkingSelectFilter = {
     />
     <VnRow class="row q-gutter-md q-mb-md">
         <div class="col">
-            <QInput
+            <VnInput
                 v-model="data.code"
                 :label="t('shelving.basicData.code')"
                 :rules="props.validate('Shelving.code')"
@@ -83,7 +85,7 @@ const parkingSelectFilter = {
     </VnRow>
     <VnRow class="row q-gutter-md q-mb-md">
         <div class="col">
-            <QInput
+            <VnInput
                 v-model="data.priority"
                 :label="t('shelving.basicData.priority')"
                 :rules="props.validate('Shelving.priority')"
diff --git a/src/pages/Supplier/SupplierCreate.vue b/src/pages/Supplier/SupplierCreate.vue
index 3d89264b3..a7e851623 100644
--- a/src/pages/Supplier/SupplierCreate.vue
+++ b/src/pages/Supplier/SupplierCreate.vue
@@ -1,11 +1,12 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
 import { reactive } from 'vue';
-import { useStateStore } from 'stores/useStateStore';
+import { useI18n } from 'vue-i18n';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 
+import { useStateStore } from 'stores/useStateStore';
+
 const { t } = useI18n();
 const stateStore = useStateStore();
 
@@ -39,7 +40,7 @@ const newSupplierForm = reactive({
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <QInput
+                        <VnInput
                             v-model="data.name"
                             :label="t('supplier.create.supplierName')"
                         />
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index aa98b9564..f20e7d98e 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -1,8 +1,11 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
 import toDateString from 'filters/toDateString';
 
 const { t } = useI18n();
@@ -52,26 +55,33 @@ const warehouses = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
+            <QList dense class="q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             v-model="params.clientFk"
                             :label="t('Customer ID')"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             v-model="params.orderFk"
                             :label="t('Order ID')"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput v-model="params.from" :label="t('From')" mask="date">
+                        <QInput
+                            v-model="params.from"
+                            :label="t('From')"
+                            mask="date"
+                            dense
+                            outlined
+                            rounded
+                        >
                             <template #append>
                                 <QIcon name="event" class="cursor-pointer">
                                     <QPopupProxy
@@ -103,7 +113,14 @@ const warehouses = ref();
                         </QInput>
                     </QItemSection>
                     <QItemSection>
-                        <QInput v-model="params.to" :label="t('To')" mask="date">
+                        <QInput
+                            v-model="params.to"
+                            :label="t('To')"
+                            mask="date"
+                            dense
+                            outlined
+                            rounded
+                        >
                             <template #append>
                                 <QIcon name="event" class="cursor-pointer">
                                     <QPopupProxy
@@ -150,6 +167,9 @@ const warehouses = ref();
                             emit-value
                             map-options
                             use-input
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
@@ -168,15 +188,18 @@ const warehouses = ref();
                             option-label="name"
                             emit-value
                             map-options
+                            dense
+                            outlined
+                            rounded
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             v-model="params.refFk"
                             :label="t('Invoice Ref.')"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
@@ -290,7 +313,7 @@ en:
     params:
         search: Contains
         clientFk: Customer
-        orderFK: Order
+        orderFk: Order
         from: From
         to: To
         salesPersonFk: Salesperson
@@ -307,7 +330,7 @@ es:
     params:
         search: Contiene
         clientFk: Cliente
-        orderFK: Pedido
+        orderFk: Pedido
         from: Desde
         to: Hasta
         salesPersonFk: Comercial
diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue
index 8ccecb926..ffaac88a6 100644
--- a/src/pages/Travel/ExtraCommunity.vue
+++ b/src/pages/Travel/ExtraCommunity.vue
@@ -1,16 +1,19 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { QBtn, QField, QPopupEdit } from 'quasar';
+
 import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
 import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
-import { QBtn, QField, QPopupEdit } from 'quasar';
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
-import { toCurrency } from 'src/filters';
-import { useArrayData } from 'composables/useArrayData';
-import { toDate } from 'src/filters';
-import { usePrintService } from 'composables/usePrintService';
-import travelService from 'src/services/travel.service';
 import ExtraCommunityFilter from './ExtraCommunityFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import travelService from 'src/services/travel.service';
+import { useArrayData } from 'composables/useArrayData';
+import { usePrintService } from 'composables/usePrintService';
+import { toDate } from 'src/filters';
+import { toCurrency } from 'src/filters';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -281,7 +284,7 @@ onMounted(async () => {
                                     label-set="Save"
                                     label-cancel="Close"
                                 >
-                                    <QInput
+                                    <VnInput
                                         v-model="rows[props.pageIndex][col.field]"
                                         dense
                                         autofocus
diff --git a/src/pages/Travel/ExtraCommunityFilter.vue b/src/pages/Travel/ExtraCommunityFilter.vue
index 5c2d8c190..0c00bd78f 100644
--- a/src/pages/Travel/ExtraCommunityFilter.vue
+++ b/src/pages/Travel/ExtraCommunityFilter.vue
@@ -1,9 +1,12 @@
 <script setup>
 import { reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import FetchData from 'components/FetchData.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
 import { toDate } from 'src/filters';
 
 const { t } = useI18n();
@@ -70,24 +73,22 @@ const decrement = (paramsObj, key) => {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense style="max-width: 256px" class="list">
-                <QItem class="q-my-sm">
+            <QList dense style="max-width: 256px" class="list q-gutter-y-sm q-mt-sm">
+                <QItem>
                     <QItemSection>
-                        <QInput label="id" dense outlined rounded v-model="params.id" />
+                        <VnInput label="id" v-model="params.id" is-outlined />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-my-sm">
+                <QItem>
                     <QItemSection>
-                        <QInput
-                            :label="t('params.ref')"
-                            dense
-                            outlined
-                            rounded
+                        <VnInput
+                            :label="t('params.reference')"
                             v-model="params.reference"
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             v-model="params.totalEntries"
@@ -118,7 +119,7 @@ const decrement = (paramsObj, key) => {
                         </QInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.agencyModeFk')"
@@ -133,7 +134,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             dense
@@ -166,7 +167,7 @@ const decrement = (paramsObj, key) => {
                         </QInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             dense
@@ -199,7 +200,7 @@ const decrement = (paramsObj, key) => {
                         </QInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.warehouseOutFk')"
@@ -214,7 +215,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.warehouseInFk')"
@@ -229,7 +230,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('supplier.pageTitles.supplier')"
@@ -244,7 +245,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.continent')"
@@ -283,7 +284,8 @@ const decrement = (paramsObj, key) => {
 <i18n>
 en:
     params:
-        ref: Reference
+        id: Id
+        reference: Reference
         totalEntries: Total entries
         agencyModeFk: Agency
         warehouseInFk: Warehouse In
@@ -294,7 +296,8 @@ en:
         continent: Continent out
 es:
     params:
-        ref: Referencia
+        id: Id
+        reference: Referencia
         totalEntries: Ent. totales
         agencyModeFk: Agencia
         warehouseInFk: Alm. entrada
diff --git a/src/pages/Travel/TravelCreate.vue b/src/pages/Travel/TravelCreate.vue
index 6b96398ed..dc23f3163 100644
--- a/src/pages/Travel/TravelCreate.vue
+++ b/src/pages/Travel/TravelCreate.vue
@@ -1,14 +1,15 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { reactive, ref } from 'vue';
-import FetchData from 'components/FetchData.vue';
+import { reactive, ref, onBeforeMount } from 'vue';
 import { useRoute } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import { toDate } from 'src/filters';
+import VnInput from 'src/components/common/VnInput.vue';
 
-import { onBeforeMount } from 'vue';
+import { toDate } from 'src/filters';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -70,7 +71,7 @@ const onFetchWarehouses = (warehouses) => {
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <QInput v-model="data.ref" :label="t('globals.reference')" />
+                        <VnInput v-model="data.ref" :label="t('globals.reference')" />
                     </div>
                     <div class="col">
                         <VnSelectFilter
diff --git a/src/pages/Travel/TravelFilter.vue b/src/pages/Travel/TravelFilter.vue
index aee936608..123659556 100644
--- a/src/pages/Travel/TravelFilter.vue
+++ b/src/pages/Travel/TravelFilter.vue
@@ -1,9 +1,12 @@
 <script setup>
 import { reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 import FetchData from 'components/FetchData.vue';
+
 import { toDate } from 'src/filters';
 
 const { t } = useI18n();
@@ -64,19 +67,17 @@ const decrement = (paramsObj, key) => {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense style="max-width: 256px" class="list">
-                <QItem class="q-my-sm">
+            <QList dense style="max-width: 256px" class="list q-gutter-y-sm q-mt-sm">
+                <QItem>
                     <QItemSection>
-                        <QInput
-                            :label="t('params.search')"
-                            dense
-                            outlined
-                            rounded
+                        <VnInput
                             v-model="params.search"
+                            :label="t('params.search')"
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.agencyModeFk')"
@@ -91,7 +92,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.warehouseOutFk')"
@@ -106,7 +107,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.warehouseInFk')"
@@ -121,7 +122,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             v-model="params.scopeDays"
@@ -151,7 +152,7 @@ const decrement = (paramsObj, key) => {
                         </QInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             dense
@@ -184,7 +185,7 @@ const decrement = (paramsObj, key) => {
                         </QInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             dense
@@ -217,7 +218,7 @@ const decrement = (paramsObj, key) => {
                         </QInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.continent')"
@@ -232,7 +233,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             v-model="params.totalEntries"
diff --git a/src/pages/Wagon/Type/WagonTypeCreate.vue b/src/pages/Wagon/Type/WagonTypeCreate.vue
index 50be4169c..aa14e2cbf 100644
--- a/src/pages/Wagon/Type/WagonTypeCreate.vue
+++ b/src/pages/Wagon/Type/WagonTypeCreate.vue
@@ -1,9 +1,12 @@
 <script setup>
-import axios from 'axios';
-import { useQuasar } from 'quasar';
 import { computed, ref, onMounted, onUpdated } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
 
 onMounted(() => fetch());
 onUpdated(() => fetch());
@@ -241,7 +244,7 @@ function exceedMaxHeight(pos) {
     <QPage class="q-pa-sm q-mx-xl">
         <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
             <QCard class="q-pa-md">
-                <QInput
+                <VnInput
                     filled
                     v-model="name"
                     :label="t('wagon.type.name')"
diff --git a/src/pages/Wagon/WagonCreate.vue b/src/pages/Wagon/WagonCreate.vue
index 0bd6f87be..cf6bc3ff2 100644
--- a/src/pages/Wagon/WagonCreate.vue
+++ b/src/pages/Wagon/WagonCreate.vue
@@ -1,9 +1,12 @@
 <script setup>
-import axios from 'axios';
-import { QIcon, QInput, QItem, QItemSection, QSelect } from 'quasar';
 import { computed, onMounted, onUpdated, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { QIcon, QInput, QItem, QItemSection, QSelect } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
+
 import { useRoute, useRouter } from 'vue-router';
+import axios from 'axios';
 
 onMounted(() => fetch());
 onUpdated(() => fetch());
@@ -100,7 +103,7 @@ function filterType(val, update) {
                         />
                     </div>
                     <div class="col">
-                        <QInput
+                        <VnInput
                             filled
                             v-model="wagon.plate"
                             :label="t('wagon.create.plate')"
diff --git a/src/pages/Worker/WorkerFilter.vue b/src/pages/Worker/WorkerFilter.vue
index 079905c4f..680a17937 100644
--- a/src/pages/Worker/WorkerFilter.vue
+++ b/src/pages/Worker/WorkerFilter.vue
@@ -1,8 +1,10 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -25,40 +27,39 @@ const departments = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
+            <QList dense class="q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
-                        <QInput :label="t('FI')" v-model="params.fi" lazy-rules>
-                            <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </QInput>
+                        <VnInput :label="t('FI')" v-model="params.fi" is-outlined
+                            ><template #prepend>
+                                <QIcon name="badge" size="xs"></QIcon> </template
+                        ></VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('First Name')"
                             v-model="params.firstName"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Last Name')"
                             v-model="params.lastName"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('User Name')"
                             v-model="params.userName"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
@@ -77,16 +78,19 @@ const departments = ref();
                             emit-value
                             map-options
                             use-input
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-md">
+                <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Extension')"
                             v-model="params.extension"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
@@ -104,6 +108,7 @@ en:
         lastName: Last name
         userName: User
         extension: Extension
+        departmentFk: Department
 es:
     params:
         search: Contiene
@@ -112,6 +117,7 @@ es:
         lastName: Apellidos
         userName: Usuario
         extension: Extensión
+        departmentFk: Departamento
     FI: NIF
     First Name: Nombre
     Last Name: Apellidos

From 84226d48ede9745c054a12e383cc9a930ca3b467 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 7 Dec 2023 08:46:38 +0100
Subject: [PATCH 56/81] ci: dev-test

---
 CHANGELOG.md | 10 ++++++++++
 package.json |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 243d67a34..3316aa441 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2352.01] - 2023-12-28
+
+### Added
+- (carros) => Se añade contador de carros. #6545
+- (Reclamaciones) => Se añade la sección para hacer acciones sobre una reclamación. #5654
+### Changed
+### Fixed
+- (Reclamaciones) => Se corrige el color de la barra según el tema y el evento de actualziar cantidades #6334
+
+
 ## [2253.01] - 2023-01-05
 
 ### Added
diff --git a/package.json b/package.json
index e09a2ac9e..583233204 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "23.48.01",
+    "version": "23.52.01",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",

From fd1f46ffc61ac0426f6347374816927af6d7e6b8 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Thu, 7 Dec 2023 12:51:47 +0100
Subject: [PATCH 57/81] feat(claimList): refs #6475 claimList add links

---
 src/components/ui/CardDescriptor.vue          | 12 ++--
 src/pages/Claim/ClaimList.vue                 | 58 ++++++++++++++-----
 .../Customer/Card/CustomerDescriptor.vue      |  5 ++
 .../Customer/Card/CustomerDescriptorProxy.vue |  7 ++-
 4 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index cfba0dfe1..2e706a56c 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import axios from 'axios';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
-import CustomerSummaryDialog from '../../pages/Customer/Card/CustomerSummaryDialog.vue';
+
 const $props = defineProps({
     url: {
         type: String,
@@ -26,9 +26,9 @@ const $props = defineProps({
         type: Number,
         default: 0,
     },
-    preview: {
-        type: Boolean,
-        default: false,
+    summary: {
+        type: Object,
+        default: null,
     },
 });
 const quasar = useQuasar();
@@ -60,7 +60,7 @@ watch($props, async () => {
 
 function viewSummary(id) {
     quasar.dialog({
-        component: CustomerSummaryDialog,
+        component: $props.summary,
         componentProps: {
             id,
         },
@@ -81,7 +81,7 @@ function viewSummary(id) {
                     icon="preview"
                     color="white"
                     class="link"
-                    v-if="preview"
+                    v-if="summary"
                 >
                     <QTooltip>
                         {{ t('components.smartCard.openSummary') }}
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 79afc7e91..cbc51174f 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -5,12 +5,13 @@ import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'filters/index';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
-import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 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 WorkerSummaryDialog from 'src/pages/Worker/Card/WorkerSummaryDialog.vue';
+import CustomerSummaryDialog from 'src/pages/Customer/Card/CustomerSummaryDialog.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -27,9 +28,25 @@ function navigate(id) {
     router.push({ path: `/claim/${id}` });
 }
 
-function viewSummary(id) {
+function viewSummary(id, summaryDialog) {
+    let dialogComponent;
+
+    switch (summaryDialog) {
+        case 'worker':
+            dialogComponent = WorkerSummaryDialog;
+            break;
+        case 'customer':
+            dialogComponent = CustomerSummaryDialog;
+            break;
+        case 'claim':
+            dialogComponent = ClaimSummaryDialog;
+            break;
+        default:
+            return;
+    }
+
     quasar.dialog({
-        component: ClaimSummaryDialog,
+        component: dialogComponent,
         componentProps: {
             id,
         },
@@ -86,12 +103,24 @@ function viewSummary(id) {
                             <VnLv label="ID" :value="row.id" />
                             <VnLv
                                 :label="t('claim.list.customer')"
-                                :value="row.clientName"
-                            />
+                                @click.stop="viewSummary(row.clientFk, 'customer')"
+                            >
+                                <template #value>
+                                    <span class="link">
+                                        {{ row.clientName }}
+                                    </span>
+                                </template>
+                            </VnLv>
                             <VnLv
                                 :label="t('claim.list.assignedTo')"
-                                :value="row.workerName"
-                            />
+                                @click.stop="viewSummary(row.workerFk, 'worker')"
+                            >
+                                <template #value>
+                                    <span class="link">
+                                        {{ row.workerName }}
+                                    </span>
+                                </template>
+                            </VnLv>
                             <VnLv
                                 :label="t('claim.list.created')"
                                 :value="toDate(row.created)"
@@ -118,18 +147,15 @@ function viewSummary(id) {
                                     {{ t('components.smartCard.openCard') }}
                                 </QTooltip>
                             </QBtn>
-                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
+                            <QBtn
+                                flat
+                                icon="preview"
+                                @click.stop="viewSummary(row.id, 'claim')"
+                            >
                                 <QTooltip>
                                     {{ t('components.smartCard.openSummary') }}
                                 </QTooltip>
                             </QBtn>
-                            <QBtn flat icon="vn:client" @click.stop>
-                                <QTooltip>
-                                    {{ t('components.smartCard.viewDescription') }}
-                                </QTooltip>
-
-                                <CustomerDescriptorProxy :id="row.clientFk" />
-                            </QBtn>
                         </template>
                     </CardList>
                 </template>
diff --git a/src/pages/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue
index 23e6228ee..4a793404d 100644
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@@ -14,6 +14,10 @@ const $props = defineProps({
         required: false,
         default: null,
     },
+    summary: {
+        type: Object,
+        default: null,
+    },
 });
 
 const route = useRoute();
@@ -34,6 +38,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.name, entity
         :title="data.title"
         :subtitle="data.subtitle"
         @on-fetch="setData"
+        :summary="$props.summary"
     >
         <template #body="{ entity }">
             <VnLv v-if="entity.salesPersonUser" :label="t('customer.card.salesPerson')">
diff --git a/src/pages/Customer/Card/CustomerDescriptorProxy.vue b/src/pages/Customer/Card/CustomerDescriptorProxy.vue
index a78726e21..9cdafdb9d 100644
--- a/src/pages/Customer/Card/CustomerDescriptorProxy.vue
+++ b/src/pages/Customer/Card/CustomerDescriptorProxy.vue
@@ -1,5 +1,6 @@
 <script setup>
 import CustomerDescriptor from './CustomerDescriptor.vue';
+import CustomerSummaryDialog from './CustomerSummaryDialog.vue';
 
 const $props = defineProps({
     id: {
@@ -10,6 +11,10 @@ const $props = defineProps({
 </script>
 <template>
     <QPopupProxy>
-        <CustomerDescriptor v-if="$props.id" :id="$props.id" :preview="true" />
+        <CustomerDescriptor
+            v-if="$props.id"
+            :id="$props.id"
+            :summary="CustomerSummaryDialog"
+        />
     </QPopupProxy>
 </template>

From e15b14cd811b44df6128006ceed48abc53a36532 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 7 Dec 2023 16:18:16 +0100
Subject: [PATCH 58/81] refs #5876 use palette color

---
 src/pages/Claim/Card/ClaimPhoto.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Claim/Card/ClaimPhoto.vue b/src/pages/Claim/Card/ClaimPhoto.vue
index 0b4fb0a0b..6ac116ce0 100644
--- a/src/pages/Claim/Card/ClaimPhoto.vue
+++ b/src/pages/Claim/Card/ClaimPhoto.vue
@@ -236,7 +236,7 @@ function onDrag() {
         </div>
     </div>
     <QDialog ref="spinnerRef">
-        <QSpinner color="orange" size="xl" />
+        <QSpinner color="primary" size="xl" />
     </QDialog>
     <QPageSticky position="bottom-right" :offset="[25, 25]">
         <label for="fileInput">

From 1c3fc57e3d60a75898c88624b18405414efb48fc Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Mon, 11 Dec 2023 06:35:54 +0100
Subject: [PATCH 59/81] feat: refs #6475 open descriptor proxy an show summary
 dialog button

---
 src/pages/Claim/Card/ClaimDescriptor.vue      |  5 +-
 src/pages/Claim/ClaimList.vue                 | 51 +++++++------------
 .../Customer/Card/CustomerDescriptorProxy.vue |  1 +
 src/pages/Worker/Card/WorkerDescriptor.vue    |  7 ++-
 .../Worker/Card/WorkerDescriptorProxy.vue     |  7 ++-
 test/cypress/integration/ticketBoxing.spec.js | 14 -----
 6 files changed, 34 insertions(+), 51 deletions(-)

diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index af7e84d38..dafdfacdd 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -7,6 +7,7 @@ import { useState } from 'src/composables/useState';
 
 import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import ClaimDescriptorMenu from 'pages/Claim/Card/ClaimDescriptorMenu.vue';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
@@ -113,7 +114,7 @@ const setData = (entity) => {
                 <template #value>
                     <span class="link">
                         {{ entity.worker.user.name }}
-                        <WorkerDescriptorProxy :id="entity.worker.userFk" />
+                        <WorkerDescriptorProxy :id="entity.worker.user.id" />
                     </span>
                 </template>
             </VnLv>
@@ -121,7 +122,7 @@ const setData = (entity) => {
                 <template #value>
                     <span class="link">
                         {{ entity.client.salesPersonUser.name }}
-                        <WorkerDescriptorProxy :id="entity.client.salesPersonFk" />
+                        <CustomerDescriptorProxy :id="entity.client.salesPersonFk" />
                     </span>
                 </template>
             </VnLv>
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index cbc51174f..096da642e 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -10,8 +10,8 @@ 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 WorkerSummaryDialog from 'src/pages/Worker/Card/WorkerSummaryDialog.vue';
-import CustomerSummaryDialog from 'src/pages/Customer/Card/CustomerSummaryDialog.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import WorkerDescriptorProxy from '../Worker/Card/WorkerDescriptorProxy.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -28,25 +28,18 @@ function navigate(id) {
     router.push({ path: `/claim/${id}` });
 }
 
-function viewSummary(id, summaryDialog) {
-    let dialogComponent;
-
-    switch (summaryDialog) {
-        case 'worker':
-            dialogComponent = WorkerSummaryDialog;
-            break;
-        case 'customer':
-            dialogComponent = CustomerSummaryDialog;
-            break;
-        case 'claim':
-            dialogComponent = ClaimSummaryDialog;
-            break;
-        default:
-            return;
-    }
-
+function viewSummary(id) {
     quasar.dialog({
-        component: dialogComponent,
+        component: ClaimSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
+}
+
+function viewDescriptor(id) {
+    quasar.dialog({
+        component: CustomerDescriptorProxy,
         componentProps: {
             id,
         },
@@ -101,23 +94,19 @@ function viewSummary(id, summaryDialog) {
                     >
                         <template #list-items>
                             <VnLv label="ID" :value="row.id" />
-                            <VnLv
-                                :label="t('claim.list.customer')"
-                                @click.stop="viewSummary(row.clientFk, 'customer')"
-                            >
+                            <VnLv :label="t('claim.list.customer')" @click.stop>
                                 <template #value>
                                     <span class="link">
                                         {{ row.clientName }}
+                                        <CustomerDescriptorProxy :id="row.clientFk" />
                                     </span>
                                 </template>
                             </VnLv>
-                            <VnLv
-                                :label="t('claim.list.assignedTo')"
-                                @click.stop="viewSummary(row.workerFk, 'worker')"
-                            >
+                            <VnLv :label="t('claim.list.assignedTo')" @click.stop>
                                 <template #value>
                                     <span class="link">
                                         {{ row.workerName }}
+                                        <WorkerDescriptorProxy :id="row.workerFk" />
                                     </span>
                                 </template>
                             </VnLv>
@@ -147,11 +136,7 @@ function viewSummary(id, summaryDialog) {
                                     {{ t('components.smartCard.openCard') }}
                                 </QTooltip>
                             </QBtn>
-                            <QBtn
-                                flat
-                                icon="preview"
-                                @click.stop="viewSummary(row.id, 'claim')"
-                            >
+                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
                                 <QTooltip>
                                     {{ t('components.smartCard.openSummary') }}
                                 </QTooltip>
diff --git a/src/pages/Customer/Card/CustomerDescriptorProxy.vue b/src/pages/Customer/Card/CustomerDescriptorProxy.vue
index 9cdafdb9d..0341f66a0 100644
--- a/src/pages/Customer/Card/CustomerDescriptorProxy.vue
+++ b/src/pages/Customer/Card/CustomerDescriptorProxy.vue
@@ -9,6 +9,7 @@ const $props = defineProps({
     },
 });
 </script>
+
 <template>
     <QPopupProxy>
         <CustomerDescriptor
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index ba64a5abb..a4dd8b55a 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -12,6 +12,10 @@ const $props = defineProps({
         required: false,
         default: null,
     },
+    summary: {
+        type: Object,
+        default: null,
+    },
 });
 
 const route = useRoute();
@@ -51,7 +55,7 @@ const sip = computed(() => worker.value.sip && worker.value.sip.extension);
 
 function getWorkerAvatar() {
     const token = getToken();
-    return `/api/Images/user/160x160/${route.params.id}/download?access_token=${token}`;
+    return `/api/Images/user/160x160/${entityId.value}/download?access_token=${token}`;
 }
 const data = ref(useCardDescription());
 const setData = (entity) =>
@@ -64,6 +68,7 @@ const setData = (entity) =>
         :filter="filter"
         :title="data.title"
         :subtitle="data.subtitle"
+        :summary="$props.summary"
         @on-fetch="
             (data) => {
                 worker = data;
diff --git a/src/pages/Worker/Card/WorkerDescriptorProxy.vue b/src/pages/Worker/Card/WorkerDescriptorProxy.vue
index 8d372b6de..98b06ad6e 100644
--- a/src/pages/Worker/Card/WorkerDescriptorProxy.vue
+++ b/src/pages/Worker/Card/WorkerDescriptorProxy.vue
@@ -1,5 +1,6 @@
 <script setup>
 import WorkerDescriptor from './WorkerDescriptor.vue';
+import WorkerSummaryDialog from './WorkerSummaryDialog.vue';
 
 const $props = defineProps({
     id: {
@@ -11,6 +12,10 @@ const $props = defineProps({
 
 <template>
     <QPopupProxy>
-        <WorkerDescriptor v-if="$props.id" :id="$props.id" />
+        <WorkerDescriptor
+            v-if="$props.id"
+            :id="$props.id"
+            :summary="WorkerSummaryDialog"
+        />
     </QPopupProxy>
 </template>
diff --git a/test/cypress/integration/ticketBoxing.spec.js b/test/cypress/integration/ticketBoxing.spec.js
index 7b3bd36cc..c4d85e945 100755
--- a/test/cypress/integration/ticketBoxing.spec.js
+++ b/test/cypress/integration/ticketBoxing.spec.js
@@ -17,18 +17,4 @@ describe('TicketBoxing', () => {
         cy.get('div[class="q-item__label text-h6"]').eq(0).click();
         cy.get('.q-notification__message').should('have.text', 'No videos available');
     });
-
-    it('should show select time and video if have video list', () => {
-        cy.intercept(
-            {
-                method: 'GET',
-                url: '/api/Boxings/*',
-            },
-            ['2022-01-01T01-01-00.mp4', '2022-02-02T02-02-00.mp4', '2022-03-03T03-03-00.mp4']
-        ).as('getVideoList');
-        cy.get('.q-list').eq(3).find('.q-item').eq(2).click();
-
-        cy.get('.q-list').eq(3).find('.q-item').eq(0).find('.q-range');
-        cy.get('.q-list').eq(3).find('.q-item').eq(1).find('.q-select');
-    });
 });

From 52622d9a00a0debe3116572bd235750c2071076b Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 11 Dec 2023 11:59:01 +0100
Subject: [PATCH 60/81] refs #6104 fix tests

---
 src/components/common/VnLog.vue        |  5 +++--
 test/cypress/integration/vnLog.spec.js |  2 +-
 test/cypress/support/commands.js       | 12 ++++++------
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index bbc8d5cde..e89fce476 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -287,9 +287,8 @@ function setDate(type) {
                 return {
                     between: [from, to],
                 };
-            } else {
-                return { lte: to };
             }
+            return { lte: to };
         }
     }
 }
@@ -657,6 +656,7 @@ setLogTree();
                         :options="actions"
                         @update:model-value="selectFilter('action')"
                         @clear="() => selectFilter('action')"
+                        hide-selected
                     />
                 </QItem>
                 <QItem class="q-mt-sm">
@@ -686,6 +686,7 @@ setLogTree();
                             option-value="id"
                             :options="workers"
                             @update:model-value="selectFilter('userSelect')"
+                            hide-selected
                         >
                             <template #option="{ opt, itemProps }">
                                 <QItem
diff --git a/test/cypress/integration/vnLog.spec.js b/test/cypress/integration/vnLog.spec.js
index 80b9d07df..d120b8ad4 100644
--- a/test/cypress/integration/vnLog.spec.js
+++ b/test/cypress/integration/vnLog.spec.js
@@ -7,7 +7,7 @@ describe('VnLog', () => {
     beforeEach(() => {
         cy.login('developer');
         cy.visit(`/#/claim/${1}/log`);
-        cy.openRightMenu();
+        cy.openRightMenu('.timeline');
     });
 
     it('should filter by insert actions', () => {
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index e57826c88..2136584e2 100755
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -51,15 +51,14 @@ Cypress.Commands.add('getValue', (selector) => {
             return cy.get(selector + '.q-checkbox__inner');
         }
         // Si es un QSelect
-        else if ($el.find('.q-select__dropdown-icon').length) {
+        if ($el.find('.q-select__dropdown-icon').length) {
             return cy.get(
                 selector +
                     '> .q-field > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native > input'
             );
-        } else {
-            // Puedes añadir un log o lanzar un error si el elemento no es reconocido
-            cy.log('Elemento no soportado');
         }
+        // Puedes añadir un log o lanzar un error si el elemento no es reconocido
+        cy.log('Elemento no soportado');
     });
 });
 
@@ -136,8 +135,9 @@ Cypress.Commands.add('openListSummary', (row) => {
     cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(row).click();
 });
 
-Cypress.Commands.add('openRightMenu', () => {
-    cy.get('.q-gutter-x-sm > .q-btn > .q-btn__content > .q-icon').click();
+Cypress.Commands.add('openRightMenu', (element) => {
+    if (element) cy.waitForElement(element);
+    cy.get('#actions-append').click();
 });
 
 Cypress.Commands.add('validateContent', (selector, expectedValue) => {

From e7c9a18f361d0df5c0c9f029ad10bad1e88475fa Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 11 Dec 2023 12:29:31 +0100
Subject: [PATCH 61/81] refs #6104 fix package

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 929a7c202..bfaba6f10 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
         "lint": "eslint --ext .js,.vue ./",
         "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
         "test:e2e": "cypress open",
-        "test:e2e:ci": "cypress run --browser chrome",
+        "test:e2e:ci": "cd ../salix && gulp docker && cd ../salix-front && cypress run",
         "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
         "test:unit": "vitest",
         "test:unit:ci": "vitest run"

From bc6ef24cd8a95100541bcc86c92c6dc33404f4d9 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 11 Dec 2023 08:56:27 -0300
Subject: [PATCH 62/81] use vn-dark css variable

---
 src/pages/Claim/ClaimList.vue           | 4 ++--
 src/pages/Customer/CustomerList.vue     | 2 +-
 src/pages/InvoiceOut/InvoiceOutList.vue | 2 +-
 src/pages/Shelving/ShelvingList.vue     | 2 +-
 src/pages/Travel/TravelList.vue         | 4 ++--
 src/pages/Wagon/Type/WagonTypeList.vue  | 2 +-
 src/pages/Wagon/WagonList.vue           | 2 +-
 src/pages/Worker/WorkerList.vue         | 2 +-
 src/router/modules/travel.js            | 2 +-
 9 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 82f11316c..af45ea985 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -110,13 +110,13 @@ function viewSummary(id) {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                class="vn-secondary-button"
+                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn
                                 :label="t('components.smartCard.viewDescription')"
                                 @click.stop
-                                class="vn-secondary-button"
+                                class="bg-vn-dark"
                                 outline
                                 style="margin-top: 15px"
                             >
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index b3ec9d1c9..5194c5cd8 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -83,7 +83,7 @@ function viewSummary(id) {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                class="vn-secondary-button"
+                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index 90f3f54d4..902dc212d 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -233,7 +233,7 @@ const downloadCsv = (rows) => {
                                 <QBtn
                                     :label="t('components.smartCard.openCard')"
                                     @click.stop="navigate(row.id)"
-                                    class="vn-secondary-button"
+                                    class="bg-vn-dark"
                                     outline
                                     type="reset"
                                 />
diff --git a/src/pages/Shelving/ShelvingList.vue b/src/pages/Shelving/ShelvingList.vue
index eb1ffab19..71b3a6ccf 100644
--- a/src/pages/Shelving/ShelvingList.vue
+++ b/src/pages/Shelving/ShelvingList.vue
@@ -105,7 +105,7 @@ function exprBuilder(param, value) {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                class="vn-secondary-button"
+                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn
diff --git a/src/pages/Travel/TravelList.vue b/src/pages/Travel/TravelList.vue
index 59e09acac..d62485a4c 100644
--- a/src/pages/Travel/TravelList.vue
+++ b/src/pages/Travel/TravelList.vue
@@ -98,13 +98,13 @@ onMounted(async () => {
                             <QBtn
                                 :label="t('components.smartCard.clone')"
                                 @click.stop="cloneTravel(row)"
-                                class="vn-secondary-button"
+                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn
                                 :label="t('addEntry')"
                                 @click.stop="viewSummary(row.id)"
-                                class="vn-secondary-button"
+                                class="bg-vn-dark"
                                 outline
                                 style="margin-top: 15px"
                             />
diff --git a/src/pages/Wagon/Type/WagonTypeList.vue b/src/pages/Wagon/Type/WagonTypeList.vue
index 58014ca92..67986aa79 100644
--- a/src/pages/Wagon/Type/WagonTypeList.vue
+++ b/src/pages/Wagon/Type/WagonTypeList.vue
@@ -64,7 +64,7 @@ async function remove(row) {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                class="vn-secondary-button"
+                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn
diff --git a/src/pages/Wagon/WagonList.vue b/src/pages/Wagon/WagonList.vue
index e66b4a4a1..020175192 100644
--- a/src/pages/Wagon/WagonList.vue
+++ b/src/pages/Wagon/WagonList.vue
@@ -81,7 +81,7 @@ async function remove(row) {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                class="vn-secondary-button"
+                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index 40e3e2109..fc7d598e5 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -87,7 +87,7 @@ function viewSummary(id) {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                class="vn-secondary-button"
+                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn
diff --git a/src/router/modules/travel.js b/src/router/modules/travel.js
index ebce7adb9..bd0a2067d 100644
--- a/src/router/modules/travel.js
+++ b/src/router/modules/travel.js
@@ -5,7 +5,7 @@ export default {
     name: 'Travel',
     meta: {
         title: 'travel',
-        icon: 'vn:package',
+        icon: 'local_airport',
     },
     component: RouterView,
     redirect: { name: 'TravelMain' },

From 1313c50e0fd63e0c1d204f3700892af64d6bdd8b Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Mon, 11 Dec 2023 07:42:19 -0500
Subject: [PATCH 63/81] Se hace cambio de color usando la paleta

---
 src/components/ui/CardList.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/CardList.vue b/src/components/ui/CardList.vue
index 17969d817..6b93a88e6 100644
--- a/src/components/ui/CardList.vue
+++ b/src/components/ui/CardList.vue
@@ -35,7 +35,7 @@ const selectedItem = (item) => {
                         <div class="title text-primary text-weight-bold text-h5">
                             {{ $props.title }}
                         </div>
-                        <QChip outline color="white" size="sm">
+                        <QChip class="q-chip-color" outline size="sm">
                             {{ t('ID') }}: {{ $props.id }}
                         </QChip>
                     </div>
@@ -64,6 +64,10 @@ const selectedItem = (item) => {
     margin-right: 25px;
 }
 
+.q-chip-color {
+    color: var(--vn-label);
+}
+
 .card-list-body {
     display: flex;
     justify-content: space-between;

From 02e220ea4227667998c7a5ae13e09075ed2ddaae Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 11 Dec 2023 09:47:51 -0300
Subject: [PATCH 64/81] cambios varios en id de cards y travel summary layout
 data

---
 src/pages/Customer/CustomerList.vue     |   2 +-
 src/pages/Travel/Card/TravelSummary.vue | 101 ++++++++++++++++--------
 src/pages/Wagon/Type/WagonTypeList.vue  |   3 -
 src/pages/Worker/WorkerList.vue         |   4 +-
 4 files changed, 69 insertions(+), 41 deletions(-)

diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 5194c5cd8..d5025ada8 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -72,10 +72,10 @@ function viewSummary(id) {
                         v-for="row of rows"
                         :key="row.id"
                         :title="row.name"
+                        :id="row.id"
                         @click="navigate(row.id)"
                     >
                         <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
                             <VnLv :label="t('customer.list.email')" :value="row.email" />
                             <VnLv :label="t('customer.list.phone')" :value="row.phone" />
                         </template>
diff --git a/src/pages/Travel/Card/TravelSummary.vue b/src/pages/Travel/Card/TravelSummary.vue
index 6920387c4..78988744a 100644
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@@ -9,6 +9,7 @@ import { toDate } from 'src/filters';
 import travelService from 'src/services/travel.service';
 import { QCheckbox, QIcon } from 'quasar';
 import { toCurrency } from 'filters/index';
+import VnRow from 'components/ui/VnRow.vue';
 
 onUpdated(() => summaryRef.value.fetch());
 
@@ -207,43 +208,73 @@ const openEntryDescriptor = () => {};
         </template>
 
         <template #body>
-            <QCard class="vn-one">
-                <VnLv :label="t('globals.shipped')" :value="toDate(travel.shipped)" />
-                <VnLv :label="t('globals.landed')" :value="toDate(travel.landed)" />
-                <VnLv :label="t('globals.agency')" :value="travel.agency?.name" />
-                <VnLv
-                    :label="t('globals.wareHouseOut')"
-                    :value="travel.warehouseOut?.name"
-                />
-                <VnLv
-                    :label="t('globals.wareHouseIn')"
-                    :value="travel.warehouseIn?.name"
-                />
-                <VnLv :label="t('globals.reference')" :value="travel.ref" />
-
-                <VnLv label="m³" :value="travel.m3" />
-                <VnLv :label="t('globals.totalEntries')" :value="travel.m3" />
-
-                <VnLv :label="t('travel.summary.delivered')" class="q-mb-xs">
-                    <template #value>
-                        <QCheckbox
-                            v-model="travel.isDelivered"
-                            disable
-                            dense
-                            class="full-width q-my-xs"
+            <QCard class="vn-one row justify-around" style="min-width: 100%">
+                <VnRow>
+                    <div class="col">
+                        <VnLv
+                            :label="t('globals.shipped')"
+                            :value="toDate(travel.shipped)"
                         />
-                    </template>
-                </VnLv>
-                <VnLv :label="t('travel.summary.received')" class="q-mb-xs">
-                    <template #value>
-                        <QCheckbox
-                            v-model="travel.isReceived"
-                            disable
-                            dense
-                            class="full-width q-mb-xs"
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('globals.wareHouseOut')"
+                            :value="travel.warehouseOut?.name"
                         />
-                    </template>
-                </VnLv>
+                    </div>
+                    <div class="col">
+                        <VnLv :label="t('travel.summary.delivered')" class="q-mb-xs">
+                            <template #value>
+                                <QCheckbox
+                                    v-model="travel.isDelivered"
+                                    disable
+                                    dense
+                                    class="full-width q-my-xs"
+                                />
+                            </template>
+                        </VnLv>
+                    </div>
+                </VnRow>
+                <VnRow>
+                    <div class="col">
+                        <VnLv
+                            :label="t('globals.landed')"
+                            :value="toDate(travel.landed)"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('globals.wareHouseIn')"
+                            :value="travel.warehouseIn?.name"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv :label="t('travel.summary.received')" class="q-mb-xs">
+                            <template #value>
+                                <QCheckbox
+                                    v-model="travel.isReceived"
+                                    disable
+                                    dense
+                                    class="full-width q-mb-xs"
+                                />
+                            </template>
+                        </VnLv>
+                    </div>
+                </VnRow>
+                <VnRow>
+                    <div class="col">
+                        <VnLv :label="t('globals.agency')" :value="travel.agency?.name" />
+                    </div>
+                    <div class="col">
+                        <VnLv :label="t('globals.reference')" :value="travel.ref" />
+                    </div>
+                    <div class="col">
+                        <VnLv label="m³" :value="travel.m3" />
+                    </div>
+                    <div class="col">
+                        <VnLv :label="t('globals.totalEntries')" :value="travel.m3" />
+                    </div>
+                </VnRow>
             </QCard>
             <QCard class="vn-two" v-if="entriesTableRows.length > 0">
                 <a class="header" :href="travelUrl + 'entry'">
diff --git a/src/pages/Wagon/Type/WagonTypeList.vue b/src/pages/Wagon/Type/WagonTypeList.vue
index 67986aa79..8e4ace744 100644
--- a/src/pages/Wagon/Type/WagonTypeList.vue
+++ b/src/pages/Wagon/Type/WagonTypeList.vue
@@ -57,9 +57,6 @@ async function remove(row) {
                         :id="row.id"
                         @click="navigate(row.id)"
                     >
-                        <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
-                        </template>
                         <template #actions>
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index fc7d598e5..a09c370ef 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -71,11 +71,11 @@ function viewSummary(id) {
                     <CardList
                         v-for="row of rows"
                         :key="row.id"
-                        @click="navigate(row.id)"
+                        :id="row.id"
                         :title="row.nickname"
+                        @click="navigate(row.id)"
                     >
                         <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
                             <VnLv :label="t('worker.list.name')" :value="row.userName" />
                             <VnLv :label="t('worker.list.email')" :value="row.email" />
                             <VnLv

From 22a634e7eb32c6856f6e9621b34372718a87e070 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 11 Dec 2023 13:49:50 +0100
Subject: [PATCH 65/81] refs #5835 refactor taxRate

---
 src/pages/InvoiceIn/Card/InvoiceInSummary.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
index b3b4f37b6..d7039fe3d 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
@@ -187,11 +187,8 @@ function setData(entity) {
         intrastatTotals.value = { ...getIntrastatTotals(entity.invoiceInIntrastat) };
 }
 
-function taxRate(taxableBase, rate) {
-    if (rate && taxableBase) {
-        return (rate / 100) * taxableBase;
-    }
-    return 0;
+function taxRate(taxableBase = 0, rate = 0) {
+    return (rate / 100) * taxableBase;
 }
 
 function getLink(param) {

From e0215e52167abdd624ea2b2c4c10b2e37d4e025a Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 11 Dec 2023 10:14:45 -0300
Subject: [PATCH 66/81] Change more forms styling

---
 src/pages/Route/Cmr/CmrFilter.vue | 8 +++++++-
 src/pages/Ticket/TicketFilter.vue | 9 +++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/pages/Route/Cmr/CmrFilter.vue b/src/pages/Route/Cmr/CmrFilter.vue
index 1ccfa2404..e7cfd73e4 100644
--- a/src/pages/Route/Cmr/CmrFilter.vue
+++ b/src/pages/Route/Cmr/CmrFilter.vue
@@ -87,7 +87,7 @@ const countries = ref();
                     <QItemSection v-if="!countries">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
-                    <QItemSection v-if="countries">
+                    <QItemSection v-if="countries" class="q-mb-sm">
                         <QSelect
                             :label="t('route.cmr.list.country')"
                             v-model="params.country"
@@ -98,6 +98,9 @@ const countries = ref();
                             transition-hide="jump-up"
                             emit-value
                             map-options
+                            dense
+                            outlined
+                            rounded
                         >
                             <template #prepend>
                                 <QIcon name="flag" size="sm"></QIcon>
@@ -111,6 +114,9 @@ const countries = ref();
                             :label="t('route.cmr.list.shipped')"
                             v-model="params.shipped"
                             mask="date"
+                            dense
+                            outlined
+                            rounded
                         >
                             <template #append>
                                 <QIcon name="event" class="cursor-pointer">
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index f20e7d98e..b7d23eeb1 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -265,6 +265,9 @@ const warehouses = ref();
                                 option-label="name"
                                 emit-value
                                 map-options
+                                dense
+                                outlined
+                                rounded
                             />
                         </QItemSection>
                     </QItem>
@@ -282,6 +285,9 @@ const warehouses = ref();
                                 option-label="name"
                                 emit-value
                                 map-options
+                                dense
+                                outlined
+                                rounded
                             />
                         </QItemSection>
                     </QItem>
@@ -299,6 +305,9 @@ const warehouses = ref();
                                 option-label="name"
                                 emit-value
                                 map-options
+                                dense
+                                outlined
+                                rounded
                             />
                         </QItemSection>
                     </QItem>

From 57b06f7d1f89b8d083789ae2c66b89e308240f8a Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Mon, 11 Dec 2023 10:51:40 -0400
Subject: [PATCH 67/81] Update shelving filter fields

---
 src/pages/Shelving/Card/ShelvingFilter.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/pages/Shelving/Card/ShelvingFilter.vue b/src/pages/Shelving/Card/ShelvingFilter.vue
index 918f63f2f..423402f89 100644
--- a/src/pages/Shelving/Card/ShelvingFilter.vue
+++ b/src/pages/Shelving/Card/ShelvingFilter.vue
@@ -50,12 +50,15 @@ function setParkings(data) {
         </template>
         <template #body="{ params }">
             <QList dense>
-                <QItem>
+                <QItem class="q-my-sm">
                     <QItemSection v-if="!parkings">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
                     <QItemSection v-if="parkings">
                         <QSelect
+                            dense
+                            outlined
+                            rounded
                             :label="t('params.parkingFk')"
                             v-model="params.parkingFk"
                             :options="parkings"
@@ -68,12 +71,15 @@ function setParkings(data) {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!workers">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
                     <QItemSection v-if="workers">
                         <QSelect
+                            dense
+                            outlined
+                            rounded
                             :label="t('params.userFk')"
                             v-model="params.userFk"
                             :options="workers"

From 9eab901be4d5e3b65e4db551b6360b3159ef28bd Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Mon, 11 Dec 2023 10:52:10 -0400
Subject: [PATCH 68/81] Fix worker descriptor image

---
 src/pages/Worker/Card/WorkerDescriptor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index 0dc42f820..5a8f4f076 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -51,7 +51,7 @@ const sip = computed(() => worker.value?.sip && worker.value.sip.extension);
 
 function getWorkerAvatar() {
     const token = getToken();
-    return `/api/Images/user/160x160/${route.params.id}/download?access_token=${token}`;
+    return `/api/Images/user/160x160/${entityId.value}/download?access_token=${token}`;
 }
 const data = ref(useCardDescription());
 const setData = (entity) => {

From 8db1b0f9acd79f53c493757aae5fb6e78b4cc3e7 Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Mon, 11 Dec 2023 13:10:28 -0400
Subject: [PATCH 69/81] Create Input date

---
 src/components/common/VnInputDate.vue         |  76 ++++++++++++
 src/pages/Claim/Card/ClaimBasicData.vue       |  29 +----
 src/pages/Claim/ClaimFilter.vue               |  29 +----
 src/pages/Customer/CustomerPaymentsFilter.vue |  71 +----------
 src/pages/InvoiceOut/InvoiceOutFilter.vue     | 112 ++----------------
 src/pages/InvoiceOut/InvoiceOutGlobalForm.vue |  64 ++--------
 .../InvoiceOut/InvoiceOutNegativeBases.vue    |  98 +++++----------
 src/pages/Route/Cmr/CmrFilter.vue             |  33 +-----
 src/pages/Ticket/TicketFilter.vue             |  64 +---------
 src/pages/Travel/ExtraCommunityFilter.vue     |  63 ++--------
 10 files changed, 150 insertions(+), 489 deletions(-)
 create mode 100644 src/components/common/VnInputDate.vue

diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
new file mode 100644
index 000000000..a8e0d4a43
--- /dev/null
+++ b/src/components/common/VnInputDate.vue
@@ -0,0 +1,76 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { toDate } from 'src/filters';
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: null,
+    },
+    readonly: {
+        type: Boolean,
+        default: false,
+    }
+});
+const emit = defineEmits(['update:modelValue']);
+const value = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value ? new Date(value).toISOString() : null);
+    },
+});
+
+const isPopupOpen = ref(false);
+
+const onDateUpdate = (date) => {
+    value.value = date;
+    isPopupOpen.value = false;
+};
+
+const padDate = (value) => value.toString().padStart(2, '0');
+const formatDate = (dateString) => {
+    const date = new Date(dateString || '');
+    return `${date.getFullYear()}/${padDate(date.getMonth() + 1)}/${padDate(
+        date.getDate()
+    )}`;
+};
+</script>
+
+<template>
+    <QInput
+        class="vn-input-date"
+        rounded
+        readonly
+        :model-value="toDate(value)"
+        v-bind="$attrs"
+    >
+        <template #append>
+            <QIcon name="event" class="cursor-pointer">
+                <QPopupProxy
+                    v-model="isPopupOpen"
+                    cover
+                    transition-show="scale"
+                    transition-hide="scale"
+                    :no-parent-event="props.readonly"
+                >
+                    <QDate
+                        :model-value="formatDate(value)"
+                        @update:model-value="onDateUpdate"
+                    />
+                </QPopupProxy>
+            </QIcon>
+        </template>
+    </QInput>
+</template>
+
+<style lang="scss">
+.vn-input-date.q-field--standard.q-field--readonly .q-field__control:before {
+    border-bottom-style: solid;
+}
+
+.vn-input-date.q-field--outlined.q-field--readonly .q-field__control:before {
+    border-style: solid;
+}
+</style>
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index bd46d1ad7..0f067f281 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -7,6 +7,7 @@ import { useSession } from 'src/composables/useSession';
 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";
 
 const route = useRoute();
 const { t } = useI18n();
@@ -108,33 +109,7 @@ const statesFilter = {
                     />
                 </div>
                 <div class="col">
-                    <QInput
-                        v-model="data.created"
-                        mask="####-##-##"
-                        fill-mask="_"
-                        autofocus
-                    >
-                        <template #append>
-                            <QIcon name="event" class="cursor-pointer">
-                                <QPopupProxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <QDate v-model="data.created" mask="YYYY-MM-DD">
-                                        <div class="row items-center justify-end">
-                                            <QBtn
-                                                v-close-popup
-                                                :label="t('globals.close')"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </QDate>
-                                </QPopupProxy>
-                            </QIcon>
-                        </template>
-                    </QInput>
+                    <VnInputDate v-model="data.created" :label="t('claim.basicData.created')" />
                 </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
diff --git a/src/pages/Claim/ClaimFilter.vue b/src/pages/Claim/ClaimFilter.vue
index 8d1117f15..c9716074d 100644
--- a/src/pages/Claim/ClaimFilter.vue
+++ b/src/pages/Claim/ClaimFilter.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -150,33 +151,7 @@ const states = ref();
                     </QItem> -->
                     <QItem>
                         <QItemSection>
-                            <QInput
-                                v-model="params.created"
-                                :label="t('Created')"
-                                autofocus
-                                readonly
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate v-model="params.created">
-                                                <div class="row items-center justify-end">
-                                                    <QBtn
-                                                        v-close-popup
-                                                        :label="t('globals.close')"
-                                                        color="primary"
-                                                        flat
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                            <VnInputDate v-model="params.created" :label="t('Created')" />
                         </QItemSection>
                     </QItem>
                 </QExpansionItem>
diff --git a/src/pages/Customer/CustomerPaymentsFilter.vue b/src/pages/Customer/CustomerPaymentsFilter.vue
index 56fb52d79..7ee584d7f 100644
--- a/src/pages/Customer/CustomerPaymentsFilter.vue
+++ b/src/pages/Customer/CustomerPaymentsFilter.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -76,78 +77,16 @@ function isValidNumber(value) {
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInputDate
                             v-model="params.from"
                             :label="t('From')"
-                            mask="date"
-                            placeholder="yyyy/mm/dd"
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.from" landscape>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.cancel')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                                <QBtn
-                                                    :label="t('globals.confirm')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        />
                     </QItemSection>
                     <QItemSection>
-                        <QInput
+                        <VnInputDate
                             v-model="params.to"
                             :label="t('To')"
-                            mask="date"
-                            placeholder="yyyy/mm/dd"
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.to" landscape>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.cancel')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                                <QBtn
-                                                    :label="t('globals.confirm')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        />
                     </QItemSection>
                 </QItem>
             </QList>
diff --git a/src/pages/InvoiceOut/InvoiceOutFilter.vue b/src/pages/InvoiceOut/InvoiceOutFilter.vue
index 6711d17c6..5d965816f 100644
--- a/src/pages/InvoiceOut/InvoiceOutFilter.vue
+++ b/src/pages/InvoiceOut/InvoiceOutFilter.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -116,128 +117,35 @@ function setWorkers(data) {
                 <QExpansionItem :label="t('More options')" expand-separator>
                     <QItem>
                         <QItemSection>
-                            <QInput
+                            <VnInputDate
+                                v-model="params.issued"
                                 :label="t('Issued')"
                                 dense
-                                mask="date"
                                 outlined
                                 rounded
-                                v-model="params.issued"
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-hide="scale"
-                                            transition-show="scale"
-                                        >
-                                            <QDate v-model="params.issued" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        @click="save"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                            />
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput
+                            <VnInputDate
+                                v-model="params.created"
                                 :label="t('Created')"
                                 dense
-                                mask="date"
                                 outlined
                                 rounded
-                                v-model="params.created"
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-hide="scale"
-                                            transition-show="scale"
-                                        >
-                                            <QDate v-model="params.created" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        @click="save"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                            />
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput
+                            <VnInputDate
+                                v-model="params.dued"
                                 :label="t('Dued')"
                                 dense
-                                mask="date"
                                 outlined
                                 rounded
-                                v-model="params.dued"
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-hide="scale"
-                                            transition-show="scale"
-                                        >
-                                            <QDate v-model="params.dued" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        @click="save"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                            />
                         </QItemSection>
                     </QItem>
                 </QExpansionItem>
diff --git a/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue b/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
index 05c55bfe2..c15d56671 100644
--- a/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
+++ b/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
@@ -3,9 +3,9 @@ import { onMounted, ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
 import { storeToRefs } from 'pinia';
-import { toDate } from 'src/filters';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import FetchData from 'components/FetchData.vue';
+import VnInputDate from "components/common/VnInputDate.vue";
 
 const { t } = useI18n();
 const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
@@ -111,64 +111,18 @@ onMounted(async () => {
                 outlined
                 rounded
             />
-            <QInput
-                dense
-                outlined
-                rounded
-                placeholder="dd-mm-aaa"
+            <VnInputDate
+                v-model="formData.invoiceDate"
                 :label="t('invoiceDate')"
-                :model-value="toDate(formData.invoiceDate)"
-            >
-                <template #append>
-                    <QIcon name="event" class="cursor-pointer">
-                        <QPopupProxy
-                            cover
-                            transition-show="scale"
-                            transition-hide="scale"
-                        >
-                            <QDate v-model="formData.invoiceDate">
-                                <div class="row items-center justify-end">
-                                    <QBtn
-                                        v-close-popup
-                                        :label="t('globals.close')"
-                                        color="primary"
-                                        flat
-                                    />
-                                </div>
-                            </QDate>
-                        </QPopupProxy>
-                    </QIcon>
-                </template>
-            </QInput>
-            <QInput
                 dense
                 outlined
-                rounded
-                placeholder="dd-mm-aaa"
+                rounded />
+            <VnInputDate
+                v-model="formData.maxShipped"
                 :label="t('maxShipped')"
-                :model-value="toDate(formData.maxShipped)"
-            >
-                <template #append>
-                    <QIcon name="event" class="cursor-pointer">
-                        <QPopupProxy
-                            cover
-                            transition-show="scale"
-                            transition-hide="scale"
-                        >
-                            <QDate v-model="formData.maxShipped">
-                                <div class="row items-center justify-end">
-                                    <QBtn
-                                        v-close-popup
-                                        :label="t('globals.close')"
-                                        color="primary"
-                                        flat
-                                    />
-                                </div>
-                            </QDate>
-                        </QPopupProxy>
-                    </QIcon>
-                </template>
-            </QInput>
+                dense
+                outlined
+                rounded />
             <VnSelectFilter
                 :label="t('company')"
                 v-model="formData.companyFk"
diff --git a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
index e0d2ddce8..63385380e 100644
--- a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
+++ b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
@@ -7,7 +7,7 @@ import invoiceOutService from 'src/services/invoiceOut.service';
 import { toCurrency } from 'src/filters';
 import { QCheckbox, QBtn } from 'quasar';
 import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
-import { toDate } from 'src/filters';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
 
@@ -15,8 +15,8 @@ const rows = ref([]);
 const { t } = useI18n();
 
 const dateRange = reactive({
-    from: Date.vnFirstDayOfMonth(),
-    to: Date.vnLastDayOfMonth(),
+    from: Date.vnFirstDayOfMonth().toISOString(),
+    to: Date.vnLastDayOfMonth().toISOString(),
 });
 
 const selectedCustomerId = ref(0);
@@ -174,7 +174,7 @@ const columns = ref([
 ]);
 
 const downloadCSV = async () => {
-    invoiceOutGlobalStore.getNegativeBasesCsv(dateRange.from, dateRange.to);
+    await invoiceOutGlobalStore.getNegativeBasesCsv(dateRange.from, dateRange.to);
 };
 
 const search = async () => {
@@ -186,20 +186,26 @@ const search = async () => {
             });
         }
     });
+    const searchFilter = {
+        limit: 20
+    }
+
+    if (and.length) {
+        searchFilter.where = {
+            and
+        }
+    }
 
     const params = {
         ...dateRange,
-        filter: {
-            limit: 20,
-            where: { and },
-        },
+        filter: JSON.stringify(searchFilter),
     };
     rows.value = await invoiceOutService.getNegativeBases(params);
 };
 
 const refresh = () => {
-    dateRange.from = Date.vnFirstDayOfMonth();
-    dateRange.to = Date.vnLastDayOfMonth();
+    dateRange.from = Date.vnFirstDayOfMonth().toISOString();
+    dateRange.to = Date.vnLastDayOfMonth().toISOString();
     filter.value = {
         company: null,
         country: null,
@@ -241,68 +247,24 @@ onMounted(async () => {
         >
             <template #top-left>
                 <div class="row justify-start items-end">
-                    <QInput
-                        dense
-                        lazy-rules
-                        outlined
-                        rounded
-                        placeholder="dd-mm-aaa"
+                    <VnInputDate
+                        v-model="dateRange.from"
                         :label="t('invoiceOut.negativeBases.from')"
-                        class="q-mr-md q"
-                        :model-value="toDate(dateRange.from)"
-                    >
-                        <template #append>
-                            <QIcon name="event" class="cursor-pointer">
-                                <QPopupProxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <QDate v-model="dateRange.from">
-                                        <div class="row items-center justify-end">
-                                            <QBtn
-                                                v-close-popup
-                                                :label="t('globals.close')"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </QDate>
-                                </QPopupProxy>
-                            </QIcon>
-                        </template>
-                    </QInput>
-                    <QInput
+                        class="q-mr-md"
                         dense
                         lazy-rules
                         outlined
                         rounded
-                        placeholder="dd-mm-aaa"
+                    />
+                    <VnInputDate
+                        v-model="dateRange.to"
                         :label="t('invoiceOut.negativeBases.to')"
-                        class="q-mr-md q"
-                        :model-value="toDate(dateRange.to)"
-                    >
-                        <template #append>
-                            <QIcon name="event" class="cursor-pointer">
-                                <QPopupProxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <QDate v-model="dateRange.to">
-                                        <div class="row items-center justify-end">
-                                            <QBtn
-                                                v-close-popup
-                                                :label="t('globals.close')"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </QDate>
-                                </QPopupProxy>
-                            </QIcon>
-                        </template>
-                    </QInput>
+                        class="q-mr-md"
+                        dense
+                        lazy-rules
+                        outlined
+                        rounded
+                    />
                     <QBtn
                         color="primary"
                         icon-right="archive"
@@ -363,8 +325,8 @@ onMounted(async () => {
                                 props.col.name !== 'hasToInvoice' &&
                                 props.col.name !== 'verifiedData'
                             "
-                            >{{ props.value }}</template
-                        >
+                            >{{ props.value }}
+                        </template>
                         <CustomerDescriptorProxy
                             v-if="props.col.name === 'clientId'"
                             :id="selectedCustomerId"
diff --git a/src/pages/Route/Cmr/CmrFilter.vue b/src/pages/Route/Cmr/CmrFilter.vue
index b8948652a..bab300672 100644
--- a/src/pages/Route/Cmr/CmrFilter.vue
+++ b/src/pages/Route/Cmr/CmrFilter.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInputDate from "components/common/VnInputDate.vue";
 
 const { t } = useI18n();
 const props = defineProps({
@@ -111,35 +112,7 @@ const countries = ref();
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
-                            :label="t('route.cmr.list.shipped')"
-                            v-model="params.shipped"
-                            mask="date"
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="rotate"
-                                        transition-hide="rotate"
-                                    >
-                                        <QDate v-model="params.shipped" minimal>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.close')"
-                                                    color="primary"
-                                                    flat
-                                                    @click="save"
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        <VnInputDate v-model="params.shipped" :label="t('route.cmr.list.shipped')" />
                     </QItemSection>
                 </QItem>
             </QList>
@@ -156,7 +129,7 @@ const countries = ref();
             country: Country
             clientFk: Client id
             shipped: Preparation date
-    
+
     es:
         params:
             cmrFk: Id cmr
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index aa98b9564..69f0b1c11 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import toDateString from 'filters/toDateString';
+import VnInputDate from "components/common/VnInputDate.vue";
 
 const { t } = useI18n();
 const props = defineProps({
@@ -71,69 +72,10 @@ const warehouses = ref();
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput v-model="params.from" :label="t('From')" mask="date">
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.from" landscape>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.cancel')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                                <QBtn
-                                                    :label="t('globals.confirm')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        <VnInputDate v-model="params.from" :label="t('From')" />
                     </QItemSection>
                     <QItemSection>
-                        <QInput v-model="params.to" :label="t('To')" mask="date">
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.to" landscape>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.cancel')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                                <QBtn
-                                                    :label="t('globals.confirm')"
-                                                    color="primary"
-                                                    flat
-                                                    @click="save"
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        <VnInputDate v-model="params.to" :label="t('To')" />
                     </QItemSection>
                 </QItem>
                 <QItem>
diff --git a/src/pages/Travel/ExtraCommunityFilter.vue b/src/pages/Travel/ExtraCommunityFilter.vue
index 26e3d42d2..2d3629de4 100644
--- a/src/pages/Travel/ExtraCommunityFilter.vue
+++ b/src/pages/Travel/ExtraCommunityFilter.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import FetchData from 'components/FetchData.vue';
-import { toDate } from 'src/filters';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -135,68 +135,24 @@ const decrement = (paramsObj, key) => {
                 </QItem>
                 <QItem class="q-mb-sm">
                     <QItemSection>
-                        <QInput
+                        <VnInputDate
+                            v-model="params.shippedFrom"
+                            :label="t('params.shippedFrom')"
                             dense
                             outlined
                             rounded
-                            placeholder="dd-mm-aaa"
-                            :label="t('params.shippedFrom')"
-                            :model-value="toDate(params.shippedFrom)"
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.shippedFrom">
-                                            <div class="row items-center justify-end">
-                                                <QBtn
-                                                    v-close-popup
-                                                    :label="t('globals.close')"
-                                                    color="primary"
-                                                    flat
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        />
                     </QItemSection>
                 </QItem>
                 <QItem class="q-mb-sm">
                     <QItemSection>
-                        <QInput
+                        <VnInputDate
+                            v-model="params.landedTo"
+                            :label="t('params.landedTo')"
                             dense
                             outlined
                             rounded
-                            placeholder="dd-mm-aaa"
-                            :model-value="toDate(params.landedTo)"
-                            :label="t('params.landedTo')"
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.landedTo">
-                                            <div class="row items-center justify-end">
-                                                <QBtn
-                                                    v-close-popup
-                                                    :label="t('globals.close')"
-                                                    color="primary"
-                                                    flat
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        />
                     </QItemSection>
                 </QItem>
                 <QItem class="q-mb-sm">
@@ -272,6 +228,7 @@ const decrement = (paramsObj, key) => {
 .input-number >>> input[type='number'] {
     -moz-appearance: textfield;
 }
+
 .input-number >>> input::-webkit-outer-spin-button,
 .input-number >>> input::-webkit-inner-spin-button {
     appearance: none;

From 4c4334aa555393ae384df4f225849986715b239b Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 11 Dec 2023 14:47:15 -0300
Subject: [PATCH 70/81] fix QField cant be clicked in extra community table

---
 src/pages/Travel/ExtraCommunity.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue
index 343c86ba0..cef3ed998 100644
--- a/src/pages/Travel/ExtraCommunity.vue
+++ b/src/pages/Travel/ExtraCommunity.vue
@@ -231,6 +231,12 @@ const navigateToTravelId = (id) => {
     router.push({ path: `/travel/${id}` });
 };
 
+const stopEventPropagation = (event, col) => {
+    if (!['ref', 'id', 'supplier'].includes(col.name)) return;
+    event.preventDefault();
+    event.stopPropagation();
+};
+
 onMounted(async () => {
     stateStore.rightDrawer = true;
 
@@ -280,7 +286,12 @@ onMounted(async () => {
                     @click="navigateToTravelId(props.row.id)"
                     class="cursor-pointer"
                 >
-                    <QTd v-for="col in props.cols" :key="col.name" :props="props">
+                    <QTd
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                        @click="stopEventPropagation($event, col)"
+                    >
                         <component
                             :is="tableColumnComponents[col.name].component"
                             class="col-content"

From 2432496eafb2337ca639d71d1302f234a987cf91 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 11 Dec 2023 15:01:51 -0300
Subject: [PATCH 71/81] more color palet corrections

---
 src/css/app.scss                        | 4 ----
 src/pages/Travel/Card/TravelSummary.vue | 2 +-
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index 2b2abec86..99170202d 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -51,7 +51,3 @@ body.body--dark {
     color: var(--vn-text);
     border-radius: 8px;
 }
-
-.vn-secondary-button {
-    background-color: var(--vn-dark);
-}
diff --git a/src/pages/Travel/Card/TravelSummary.vue b/src/pages/Travel/Card/TravelSummary.vue
index 78988744a..ad4659b11 100644
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@@ -96,7 +96,7 @@ const tableColumnComponents = {
     },
     observation: {
         component: (props) => (props.value ? QIcon : null),
-        props: () => ({ name: 'insert_drive_file', color: 'orange', size: '25px' }),
+        props: () => ({ name: 'insert_drive_file', color: 'primary', size: '25px' }),
     },
 };
 

From 2c5dc276b224e49b015549a8355c4e90b6fc7bda Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 12 Dec 2023 09:01:32 +0100
Subject: [PATCH 72/81] refs #5835

---
 src/components/ui/VnLv.vue                    | 17 +++-----
 src/i18n/es/index.js                          |  2 +-
 .../InvoiceIn/Card/InvoiceInBasicData.vue     | 42 +++++++++++--------
 3 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/src/components/ui/VnLv.vue b/src/components/ui/VnLv.vue
index b8da70feb..9a17fca05 100644
--- a/src/components/ui/VnLv.vue
+++ b/src/components/ui/VnLv.vue
@@ -4,12 +4,12 @@ import { dashIfEmpty } from 'src/filters';
 
 const $props = defineProps({
     label: { type: String, default: null },
-    value: { type: [Number, String, Boolean], default: null },
-    titleLabel: { type: String, default: null },
-    titleValue: { type: [Number, String, Boolean], default: null },
+    value: {
+        type: [String, Boolean],
+        default: null,
+    },
     info: { type: String, default: null },
     dash: { type: Boolean, default: true },
-    ellipsisValue: { type: Boolean, default: true },
 });
 const isBooleanValue = computed(() => typeof $props.value === 'boolean');
 </script>
@@ -17,10 +17,10 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
     <div class="vn-label-value">
         <div v-if="$props.label || $slots.label" class="label">
             <slot name="label">
-                <span :title="$props.titleLabel ?? $props.label">{{ $props.label }}</span>
+                <span>{{ $props.label }}</span>
             </slot>
         </div>
-        <div class="value" :class="{ ellipsis: $props.ellipsisValue }">
+        <div class="value">
             <span v-if="isBooleanValue">
                 <QIcon
                     :name="$props.value ? `check` : `close`"
@@ -43,8 +43,3 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
         </div>
     </div>
 </template>
-<style lang="scss" scoped>
-.ellipsis {
-    text-overflow: ellipsis !important;
-}
-</style>
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 83893ece4..7fcd2e9c6 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -405,7 +405,7 @@ export default {
         pageTitles: {
             invoiceIns: 'Fact. recibidas',
             list: 'Listado',
-            createInvoiceOut: 'Crear fact. recibida',
+            createInvoiceIn: 'Crear fact. recibida',
             summary: 'Resumen',
             basicData: 'Datos básicos',
             vat: 'IVA',
diff --git a/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
index 20144d8ca..4572c4c16 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
@@ -37,6 +37,10 @@ const inputFileRef = ref();
 const editDmsRef = ref();
 const createDmsRef = ref();
 
+const requiredFieldRule = (val) => val || t('Required field');
+const dateMask = '####-##-##';
+const fillMask = '_';
+
 async function checkFileExists(dmsId) {
     if (!dmsId) return;
     try {
@@ -212,10 +216,14 @@ async function upsert() {
                     <QInput
                         :label="t('Expedition date')"
                         v-model="data.issued"
-                        mask="####-##-##"
+                        :mask="dateMask"
                     >
                         <template #append>
-                            <QIcon name="event" class="cursor-pointer" fill-mask="_">
+                            <QIcon
+                                name="event"
+                                class="cursor-pointer"
+                                :fill-mask="fillMask"
+                            >
                                 <QPopupProxy
                                     cover
                                     transition-show="scale"
@@ -240,8 +248,8 @@ async function upsert() {
                     <QInput
                         :label="t('Operation date')"
                         v-model="data.operated"
-                        mask="####-##-##"
-                        fill-mask="_"
+                        :mask="dateMask"
+                        :fill-mask="fillMask"
                         autofocus
                     >
                         <template #append>
@@ -251,7 +259,7 @@ async function upsert() {
                                     transition-show="scale"
                                     transition-hide="scale"
                                 >
-                                    <QDate v-model="data.operated" mask="YYYY-MM-DD">
+                                    <QDate v-model="data.operated" :mask="dateMask">
                                         <div class="row items-center justify-end">
                                             <QBtn
                                                 v-close-popup
@@ -332,8 +340,8 @@ async function upsert() {
                         v-model="data.bookEntried"
                         clearable
                         clear-icon="close"
-                        mask="####-##-##"
-                        fill-mask="_"
+                        :mask="dateMask"
+                        :fill-mask="fillMask"
                     >
                         <template #append>
                             <QIcon name="event" class="cursor-pointer">
@@ -342,7 +350,7 @@ async function upsert() {
                                     transition-show="scale"
                                     transition-hide="scale"
                                 >
-                                    <QDate v-model="data.bookEntried" mask="YYYY-MM-DD">
+                                    <QDate v-model="data.bookEntried" :mask="dateMask">
                                         <div class="row items-center justify-end">
                                             <QBtn
                                                 v-close-popup
@@ -363,8 +371,8 @@ async function upsert() {
                         v-model="data.booked"
                         clearable
                         clear-icon="close"
-                        mask="####-##-##"
-                        fill-mask="_"
+                        :mask="dateMask"
+                        :fill-mask="fillMask"
                     >
                         <template #append>
                             <QIcon name="event" class="cursor-pointer">
@@ -373,7 +381,7 @@ async function upsert() {
                                     transition-show="scale"
                                     transition-hide="scale"
                                 >
-                                    <QDate v-model="data.booked" mask="YYYY-MM-DD">
+                                    <QDate v-model="data.booked" :mask="maskDate">
                                         <div class="row items-center justify-end">
                                             <QBtn
                                                 v-close-popup
@@ -452,7 +460,7 @@ async function upsert() {
                         option-value="id"
                         option-label="code"
                         @input-value="companiesRef.fetch()"
-                        :rules="[(val) => val || t('Required field')]"
+                        :rules="[requiredFieldRule]"
                     />
                 </QItem>
                 <QItem>
@@ -464,7 +472,7 @@ async function upsert() {
                         option-value="id"
                         option-label="name"
                         @input-value="warehousesRef.fetch()"
-                        :rules="[(val) => val || t('Required field')]"
+                        :rules="[requiredFieldRule]"
                     />
                     <VnSelectFilter
                         class="full-width q-pa-xs"
@@ -474,7 +482,7 @@ async function upsert() {
                         option-value="id"
                         option-label="name"
                         @input-value="dmsTypesRef.fetch()"
-                        :rules="[(val) => val || t('Required field')]"
+                        :rules="[requiredFieldRule]"
                     />
                 </QItem>
                 <QItem>
@@ -564,7 +572,7 @@ async function upsert() {
                         option-value="id"
                         option-label="code"
                         @input-value="companiesRef.fetch()"
-                        :rules="[(val) => val || t('Required field')]"
+                        :rules="[requiredFieldRule]"
                     />
                 </QItem>
                 <QItem>
@@ -576,7 +584,7 @@ async function upsert() {
                         option-value="id"
                         option-label="name"
                         @input-value="warehousesRef.fetch()"
-                        :rules="[(val) => val || t('Required field')]"
+                        :rules="[requiredFieldRule]"
                     />
                     <VnSelectFilter
                         class="full-width q-pa-xs"
@@ -586,7 +594,7 @@ async function upsert() {
                         option-value="id"
                         option-label="name"
                         @input-value="dmsTypesRef.fetch()"
-                        :rules="[(val) => val || t('Required field')]"
+                        :rules="[requiredFieldRule]"
                     />
                 </QItem>
                 <QItem>

From d1a5029ef727e70692171c1ca5f06017f007d119 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 12 Dec 2023 12:11:45 +0100
Subject: [PATCH 73/81] refs #5835 refactor

---
 .../InvoiceIn/Card/InvoiceInDescriptor.vue    |  9 +++++----
 src/pages/InvoiceIn/Card/InvoiceInDueDay.vue  |  8 +++++---
 src/pages/InvoiceIn/Card/InvoiceInVat.vue     | 19 +++++++------------
 .../pages/InvoiceIn/InvoiceInVat.spec.js      | 10 ++++------
 4 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
index 08df18e12..4e37102e9 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
@@ -163,6 +163,8 @@ async function cloneInvoice() {
     router.push({ path: `/invoice-in/${data.id}/summary` });
 }
 
+const isAdministrative = () => hasAny(['administrative']);
+
 const isAgricultural = () =>
     invoiceIn.value.supplier.sageWithholdingFk == config.value[0].sageWithholdingFk;
 
@@ -222,7 +224,7 @@ function triggerMenu(type) {
     >
         <template #menu="{ entity }">
             <QItem
-                v-if="!entity.isBooked && hasAny(['administrative'])"
+                v-if="!entity.isBooked && isAdministrative()"
                 v-ripple
                 clickable
                 @click="triggerMenu('book')"
@@ -230,7 +232,7 @@ function triggerMenu(type) {
                 <QItemSection>{{ t('To book') }}</QItemSection>
             </QItem>
             <QItem
-                v-if="hasAny(['administrative'])"
+                v-if="isAdministrative()"
                 v-ripple
                 clickable
                 @click="triggerMenu('delete')"
@@ -238,7 +240,7 @@ function triggerMenu(type) {
                 <QItemSection>{{ t('Delete invoice') }}</QItemSection>
             </QItem>
             <QItem
-                v-if="hasAny(['administrative'])"
+                v-if="isAdministrative()"
                 v-ripple
                 clickable
                 @click="triggerMenu('clone')"
@@ -306,7 +308,6 @@ function triggerMenu(type) {
 .q-dialog {
     .q-card {
         width: 35em;
-        max-width: 35em;
     }
 }
 </style>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue b/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
index e047876f3..e240e9a8c 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
@@ -19,6 +19,8 @@ const banks = ref([]);
 const invoiceInFormRef = ref();
 const invoiceId = route.params.id;
 
+const placeholder = 'yyyy/mm/dd';
+
 const filter = {
     where: {
         invoiceInFk: invoiceId,
@@ -67,7 +69,7 @@ const columns = computed(() => [
 const isNotEuro = (code) => code != 'EUR';
 
 async function insert() {
-    await axios.post('/InvoiceInDueDays/new ', { id: Number(invoiceId) });
+    await axios.post('/InvoiceInDueDays/new ', { id: +invoiceId });
     await invoiceInFormRef.value.reload();
 }
 </script>
@@ -99,7 +101,7 @@ async function insert() {
                         <QInput
                             v-model="row.dueDated"
                             mask="date"
-                            placeholder="yyyy/mm/dd"
+                            :placeholder="placeholder"
                             clearable
                             clear-icon="close"
                         >
@@ -186,7 +188,7 @@ async function insert() {
                                         :label="t('Date')"
                                         v-model="props.row.dueDated"
                                         mask="date"
-                                        placeholder="yyyy/mm/dd"
+                                        :placeholder="placeholder"
                                         clearable
                                         clear-icon="close"
                                     >
diff --git a/src/pages/InvoiceIn/Card/InvoiceInVat.vue b/src/pages/InvoiceIn/Card/InvoiceInVat.vue
index eb613943a..d8e742706 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInVat.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInVat.vue
@@ -112,16 +112,15 @@ const filter = {
 
 const isNotEuro = (code) => code != 'EUR';
 
-function taxRate(invoiceInTax, sageTaxTypeId) {
+function taxRate(invoiceInTax) {
+    const sageTaxTypeId = invoiceInTax.taxTypeSageFk;
     const taxRateSelection = sageTaxTypes.value.find(
         (transaction) => transaction.id == sageTaxTypeId
     );
-    const taxTypeSage = taxRateSelection && taxRateSelection.rate;
-    const taxableBase = invoiceInTax && invoiceInTax.taxableBase;
-    if (taxTypeSage && taxableBase) {
-        return (taxTypeSage / 100) * taxableBase;
-    }
-    return 0;
+    const taxTypeSage = taxRateSelection?.rate ?? 0;
+    const taxableBase = invoiceInTax?.taxableBase ?? 0;
+
+    return (taxTypeSage / 100) * taxableBase;
 }
 
 async function addExpense() {
@@ -395,11 +394,7 @@ async function addExpense() {
                                     </VnSelectFilter>
                                 </QItem>
                                 <QItem>
-                                    {{
-                                        toCurrency(
-                                            taxRate(props.row, props.row.taxTypeSageFk)
-                                        )
-                                    }}
+                                    {{ toCurrency(taxRate(props.row)) }}
                                 </QItem>
                                 <QItem>
                                     <QInput
diff --git a/test/vitest/__tests__/pages/InvoiceIn/InvoiceInVat.spec.js b/test/vitest/__tests__/pages/InvoiceIn/InvoiceInVat.spec.js
index 6ea9d6a5b..6cc082a35 100644
--- a/test/vitest/__tests__/pages/InvoiceIn/InvoiceInVat.spec.js
+++ b/test/vitest/__tests__/pages/InvoiceIn/InvoiceInVat.spec.js
@@ -53,22 +53,20 @@ describe('InvoiceInVat', () => {
 
     describe('taxRate()', () => {
         it('should correctly compute the tax rate', () => {
-            const invoiceInTax = { taxableBase: 100 };
-            const sageTaxTypeId = 1;
+            const invoiceInTax = { taxableBase: 100, taxTypeSageFk: 1 };
             vm.sageTaxTypes = [
                 { id: 1, rate: 10 },
                 { id: 2, rate: 20 },
             ];
-            const result = vm.taxRate(invoiceInTax, sageTaxTypeId);
+            const result = vm.taxRate(invoiceInTax);
             expect(result).toBe((10 / 100) * 100);
         });
 
         it('should return 0 if there is not tax rate', () => {
-            const invoiceInTax = { taxableBase: 100 };
-            const sageTaxTypeId = 1;
+            const invoiceInTax = { taxableBase: 100, taxTypeSageFk: 1 };
             vm.sageTaxTypes = [];
 
-            const result = vm.taxRate(invoiceInTax, sageTaxTypeId);
+            const result = vm.taxRate(invoiceInTax);
             expect(result).toBe(0);
         });
     });

From d75ca32d1bc6260e35a71ba63a89fc90fe3aa2aa Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 12 Dec 2023 08:53:39 -0300
Subject: [PATCH 74/81] Add title to ticket card

---
 src/pages/Ticket/TicketList.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index 7198b723a..7d7429630 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -87,6 +87,7 @@ function viewSummary(id) {
                         v-for="row of rows"
                         :key="row.id"
                         :id="row.id"
+                        :title="`${row.nickname} (${row.id})`"
                         @click="navigate(row.id)"
                     >
                         <template #list-items>

From fdb417cf131a6c698d18b0b8d2d5ab9e6ab4c3cc Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 12 Dec 2023 15:23:06 -0300
Subject: [PATCH 75/81] Fix and improve select cards logic in invoice out list

---
 src/components/ui/CardList.vue          | 18 ++----
 src/pages/InvoiceOut/InvoiceOutList.vue | 75 +++++++++++--------------
 2 files changed, 39 insertions(+), 54 deletions(-)

diff --git a/src/components/ui/CardList.vue b/src/components/ui/CardList.vue
index 6b93a88e6..7d7cee23e 100644
--- a/src/components/ui/CardList.vue
+++ b/src/components/ui/CardList.vue
@@ -1,28 +1,20 @@
 <script setup>
-import { ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 
 const $props = defineProps({
-    addElement: { type: Function, required: false },
     element: { type: Object, default: null },
     id: { type: Number, default: null },
     isSelected: { type: Boolean, default: false },
     title: { type: String, default: null },
     showCheckbox: { type: Boolean, default: false },
 });
-const checkSelect = ref(false);
 
-watch(
-    () => $props.isSelected,
-    (value) => {
-        checkSelect.value = value;
-    }
-);
+const emit = defineEmits(['toggleCardCheck']);
 
-const selectedItem = (item) => {
-    $props.addElement(item);
+const toggleCardCheck = (item) => {
+    emit('toggleCardCheck', item);
 };
 </script>
 
@@ -41,8 +33,8 @@ const selectedItem = (item) => {
                     </div>
                     <QCheckbox
                         v-if="showCheckbox"
-                        v-model="checkSelect"
-                        @click="selectedItem($props.element)"
+                        :model-value="isSelected"
+                        @click="toggleCardCheck($props.element)"
                     />
                 </div>
             </slot>
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index 902dc212d..292fa2e0a 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -13,11 +13,9 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 
 const { t } = useI18n();
-const arrayElements = ref([]);
-const manageCheckboxes = ref(false);
+const selectedCards = ref(new Map());
 const quasar = useQuasar();
 const router = useRouter();
-const showSelect = ref(false);
 const stateStore = useStateStore();
 
 onMounted(() => (stateStore.rightDrawer = true));
@@ -36,42 +34,40 @@ function viewSummary(id) {
     });
 }
 
-const setShowSelect = () => {
-    showSelect.value = !showSelect.value;
+const toggleIndividualCard = (cardData) => {
+    if (selectedCards.value.has(cardData.id)) {
+        selectedCards.value.delete(cardData.id);
+        return;
+    }
+    selectedCards.value.set(cardData.id, cardData);
 };
 
-const setManageCheckboxes = (downloadType) => {
-    console.log(downloadType);
-};
+const toggleAllCards = (cardsData) => {
+    const allSelected = selectedCards.value.size === cardsData.length;
 
-const addElement = (element) => {
-    showSelect.value = false;
-    manageCheckboxes.value = false;
-    if (arrayElements.value.length >= 0) {
-        const index = arrayElements.value.findIndex((item) => item.id === element.id);
-        if (index >= 0) {
-            arrayElements.value.splice(index, 1);
-        } else {
-            arrayElements.value.push(element);
-        }
+    if (!allSelected) {
+        // Si no todas las tarjetas están seleccionadas, selecciónalas todas
+        cardsData.forEach((data) => {
+            if (!selectedCards.value.has(data.id)) {
+                selectedCards.value.set(data.id, data);
+            }
+        });
+    } else {
+        // Si todas las tarjetas están seleccionadas, deselecciónalas todas
+        selectedCards.value.clear();
     }
 };
 
-watch(manageCheckboxes, (current, prev) => {
-    if (!current) {
-        arrayElements.value = [];
-    }
-});
-
-const downloadCsv = (rows) => {
-    const data = arrayElements.value.length ? arrayElements.value : rows;
+const downloadCsv = () => {
+    if (selectedCards.value.size === 0) return;
+    const selectedCardsArray = Array.from(selectedCards.value.values());
     let file;
-    for (var i = 0; i < data.length; i++) {
-        if (i == 0) file += Object.keys(data[i]).join(';') + '\n';
+    for (var i = 0; i < selectedCardsArray.length; i++) {
+        if (i == 0) file += Object.keys(selectedCardsArray[i]).join(';') + '\n';
         file +=
-            Object.keys(data[i])
+            Object.keys(selectedCardsArray[i])
                 .map(function (key) {
-                    return data[i][key];
+                    return selectedCardsArray[i][key];
                 })
                 .join(';') + '\n';
     }
@@ -79,7 +75,6 @@ const downloadCsv = (rows) => {
         encoding: 'windows-1252',
         mimeType: 'text/csv;charset=windows-1252;',
     });
-
     if (status === true) {
         quasar.notify({
             message: t('fileAllowed'),
@@ -137,14 +132,13 @@ const downloadCsv = (rows) => {
                 <QToolbar class="bg-vn-dark justify-end">
                     <div id="st-actions">
                         <QBtn
-                            @click="downloadCsv(rows)"
+                            @click="downloadCsv()"
                             class="q-mr-xl"
                             color="primary"
-                            :disable="!manageCheckboxes && arrayElements.length < 1"
+                            :disable="selectedCards.size === 0"
                             :label="t('globals.download')"
-                            v-if="!showSelect"
                         />
-                        <QBtnDropdown
+                        <!-- <QBtnDropdown
                             class="q-mr-xl"
                             color="primary"
                             :disable="!manageCheckboxes && arrayElements.length < 1"
@@ -176,13 +170,12 @@ const downloadCsv = (rows) => {
                                     </QItemSection>
                                 </QItem>
                             </QList>
-                        </QBtnDropdown>
-
+                        </QBtnDropdown> -->
                         <QCheckbox
                             left-label
                             :label="t('globals.markAll')"
-                            v-model="manageCheckboxes"
-                            @click="setShowSelect"
+                            @click="toggleAllCards(rows)"
+                            :model-value="selectedCards.size === rows.length"
                             class="q-mr-md"
                         />
                     </div>
@@ -190,14 +183,14 @@ const downloadCsv = (rows) => {
                 <div class="flex flex-center q-pa-md">
                     <div class="card-list">
                         <CardList
-                            :add-element="addElement"
                             :element="row"
                             :id="row.id"
-                            :is-selected="manageCheckboxes"
                             :show-checkbox="true"
+                            :is-selected="selectedCards.has(row.id)"
                             :key="row.id"
                             :title="row.ref"
                             @click="navigate(row.id)"
+                            @toggle-card-check="toggleIndividualCard(row)"
                             v-for="row of rows"
                         >
                             <template #list-items>

From c12f3f150b5d2b1abd38000becf931eb77164812 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 12 Dec 2023 15:40:22 -0300
Subject: [PATCH 76/81] remove id label from wagon list card

---
 src/pages/Wagon/WagonList.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/Wagon/WagonList.vue b/src/pages/Wagon/WagonList.vue
index 020175192..77d9da0bf 100644
--- a/src/pages/Wagon/WagonList.vue
+++ b/src/pages/Wagon/WagonList.vue
@@ -65,7 +65,6 @@ async function remove(row) {
                         @click="navigate(row.id)"
                     >
                         <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
                             <VnLv
                                 :label="t('wagon.list.plate')"
                                 :title-label="t('wagon.list.plate')"

From c90e4196d422e9dff239f7a5216e690f302a3093 Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Wed, 13 Dec 2023 07:09:20 -0500
Subject: [PATCH 77/81] Se cambian textos a internacionalizacion

---
 .../Card/InvoiceOutDescriptorMenu.vue         | 31 ++++++++++++++-----
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/pages/InvoiceOut/Card/InvoiceOutDescriptorMenu.vue b/src/pages/InvoiceOut/Card/InvoiceOutDescriptorMenu.vue
index 53cac7ccd..ab8b6470b 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutDescriptorMenu.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutDescriptorMenu.vue
@@ -1,23 +1,40 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+</script>
+
 <template>
     <QItem v-ripple clickable>
-        <QItemSection>Transferir factura a ...</QItemSection>
+        <QItemSection>{{ t('Transfer invoice to') }}</QItemSection>
     </QItem>
     <QItem v-ripple clickable>
-        <QItemSection>Ver factura ...</QItemSection>
+        <QItemSection>{{ t('See invoice') }}</QItemSection>
     </QItem>
     <QItem v-ripple clickable>
-        <QItemSection>Enviar factura ...</QItemSection>
+        <QItemSection>{{ t('Send invoice') }}</QItemSection>
     </QItem>
     <QItem v-ripple clickable>
-        <QItemSection>Eliminar factura</QItemSection>
+        <QItemSection>{{ t('Delete invoice') }}</QItemSection>
     </QItem>
     <QItem v-ripple clickable>
-        <QItemSection>Asentar factura</QItemSection>
+        <QItemSection>{{ t('Post invoice') }}</QItemSection>
     </QItem>
     <QItem v-ripple clickable>
-        <QItemSection>Regenerar PDF factura</QItemSection>
+        <QItemSection>{{ t('Regenerate invoice PDF') }}</QItemSection>
     </QItem>
     <QItem v-ripple clickable>
-        <QItemSection>Abono ...</QItemSection>
+        <QItemSection>{{ t('Pass') }}</QItemSection>
     </QItem>
 </template>
+
+<i18n>
+es:
+    Transfer invoice to: Transferir factura a
+    See invoice: Ver factura
+    Send invoice: Enviar factura
+    Delete invoice: Eliminar factura
+    Post invoice: Asentar factura
+    Regenerate invoice PDF: Regenerar PDF factura
+    Pass: Abono
+</i18n>

From 7557096af6c13f4091790cfa30afd0ae794b6577 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 13 Dec 2023 14:19:42 +0100
Subject: [PATCH 78/81] refs #6062 fix: migration errors

---
 package-lock.json                             |  12 +-
 src/boot/vnDate.js                            |  10 +
 src/components/FormModel.vue                  |  81 +++-
 src/components/common/VnInputDate.vue         |  76 ++++
 src/components/common/VnLog.vue               |  28 +-
 src/components/common/VnSelectFilter.vue      |   7 +-
 src/components/ui/CardDescriptor.vue          |  23 +-
 src/components/ui/CardList.vue                |  81 +++-
 src/components/ui/CardSummary.vue             |   4 +-
 src/components/ui/VnFilterPanel.vue           |  66 +--
 src/composables/useArrayData.js               |   4 +-
 src/composables/useNotify.js                  |  22 +
 src/composables/useState.js                   |   6 +-
 src/composables/useUserConfig.js              |  18 +-
 src/i18n/en/index.js                          | 174 +++++++-
 src/i18n/es/index.js                          | 175 +++++++-
 src/pages/Claim/Card/ClaimBasicData.vue       |  32 +-
 src/pages/Claim/ClaimFilter.vue               |  29 +-
 src/pages/Claim/ClaimList.vue                 |  36 +-
 src/pages/Customer/Card/CustomerBasicData.vue |   2 +-
 src/pages/Customer/CustomerList.vue           |  26 +-
 src/pages/Customer/CustomerPaymentsFilter.vue |  71 +--
 .../InvoiceOut/Card/InvoiceOutDescriptor.vue  |   9 +-
 .../Card/InvoiceOutDescriptorMenu.vue         |  40 ++
 src/pages/InvoiceOut/InvoiceOutFilter.vue     | 201 +++------
 src/pages/InvoiceOut/InvoiceOutGlobal.vue     | 198 +++++++++
 src/pages/InvoiceOut/InvoiceOutGlobalForm.vue | 201 +++++++++
 src/pages/InvoiceOut/InvoiceOutList.vue       | 273 ++++++++----
 .../InvoiceOut/InvoiceOutNegativeBases.vue    | 356 +++++++++++++++
 src/pages/Route/Cmr/CmrFilter.vue             |  33 +-
 src/pages/Shelving/Card/ShelvingCard.vue      |  21 +
 .../Shelving/Card/ShelvingDescriptor.vue      |  71 +++
 .../Shelving/Card/ShelvingDescriptorMenu.vue  |  61 +++
 .../Shelving/Card/ShelvingDescriptorProxy.vue |  15 +
 src/pages/Shelving/Card/ShelvingFilter.vue    | 120 +++++
 src/pages/Shelving/Card/ShelvingForm.vue      | 126 ++++++
 src/pages/Shelving/Card/ShelvingLog.vue       |   6 +
 src/pages/Shelving/Card/ShelvingSearchbar.vue |  20 +
 src/pages/Shelving/Card/ShelvingSummary.vue   | 110 +++++
 .../Shelving/Card/ShelvingSummaryDialog.vue   |  29 ++
 src/pages/Shelving/ShelvingList.vue           | 138 ++++++
 src/pages/Shelving/ShelvingMain.vue           |  17 +
 src/pages/Supplier/Card/SupplierCard.vue      |  63 +++
 .../Supplier/Card/SupplierDescriptor.vue      |  94 ++++
 .../Supplier/Card/SupplierDescriptorProxy.vue |  16 +
 src/pages/Supplier/Card/SupplierSummary.vue   | 188 ++++++++
 .../Supplier/Card/SupplierSummaryDialog.vue   |  29 ++
 src/pages/Supplier/SupplierCreate.vue         |  61 +++
 src/pages/Supplier/SupplierList.vue           | 111 +++++
 src/pages/Supplier/SupplierMain.vue           |  17 +
 src/pages/Ticket/Card/TicketSummary.vue       |   8 +-
 src/pages/Ticket/TicketFilter.vue             |  64 +--
 src/pages/Ticket/TicketList.vue               |  11 +-
 src/pages/Travel/Card/TravelCard.vue          |  51 +++
 src/pages/Travel/Card/TravelDescriptor.vue    |  80 ++++
 .../Travel/Card/TravelDescriptorProxy.vue     |  16 +
 src/pages/Travel/Card/TravelSummary.vue       | 323 ++++++++++++++
 src/pages/Travel/Card/TravelSummaryDialog.vue |  29 ++
 src/pages/Travel/ExtraCommunity.vue           | 419 ++++++++++++++++++
 src/pages/Travel/ExtraCommunityFilter.vue     | 263 +++++++++++
 src/pages/Travel/TravelCreate.vue             | 179 ++++++++
 src/pages/Travel/TravelFilter.vue             | 311 +++++++++++++
 src/pages/Travel/TravelList.vue               | 147 ++++++
 src/pages/Travel/TravelMain.vue               |  17 +
 src/pages/Wagon/Type/WagonTypeCreate.vue      |  45 +-
 src/pages/Wagon/Type/WagonTypeList.vue        |  61 +--
 src/pages/Wagon/WagonCreate.vue               |  35 +-
 src/pages/Wagon/WagonList.vue                 |  99 ++---
 src/pages/Worker/WorkerList.vue               |  26 +-
 src/router/modules/Supplier.js                |  61 +++
 src/router/modules/index.js                   |  17 +-
 src/router/modules/invoiceOut.js              |  38 +-
 src/router/modules/shelving.js                |  80 ++++
 src/router/modules/travel.js                  |  69 +++
 src/router/routes.js                          |  10 +-
 src/services/invoiceOut.service.js            |  49 ++
 src/services/travel.service.js                |  23 +
 src/stores/invoiceOutGlobal.js                | 264 +++++++++++
 src/stores/useNavigationStore.js              |   5 +-
 79 files changed, 5656 insertions(+), 751 deletions(-)
 create mode 100644 src/components/common/VnInputDate.vue
 create mode 100644 src/composables/useNotify.js
 create mode 100644 src/pages/InvoiceOut/Card/InvoiceOutDescriptorMenu.vue
 create mode 100644 src/pages/InvoiceOut/InvoiceOutGlobal.vue
 create mode 100644 src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
 create mode 100644 src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
 create mode 100644 src/pages/Shelving/Card/ShelvingCard.vue
 create mode 100644 src/pages/Shelving/Card/ShelvingDescriptor.vue
 create mode 100644 src/pages/Shelving/Card/ShelvingDescriptorMenu.vue
 create mode 100644 src/pages/Shelving/Card/ShelvingDescriptorProxy.vue
 create mode 100644 src/pages/Shelving/Card/ShelvingFilter.vue
 create mode 100644 src/pages/Shelving/Card/ShelvingForm.vue
 create mode 100644 src/pages/Shelving/Card/ShelvingLog.vue
 create mode 100644 src/pages/Shelving/Card/ShelvingSearchbar.vue
 create mode 100644 src/pages/Shelving/Card/ShelvingSummary.vue
 create mode 100644 src/pages/Shelving/Card/ShelvingSummaryDialog.vue
 create mode 100644 src/pages/Shelving/ShelvingList.vue
 create mode 100644 src/pages/Shelving/ShelvingMain.vue
 create mode 100644 src/pages/Supplier/Card/SupplierCard.vue
 create mode 100644 src/pages/Supplier/Card/SupplierDescriptor.vue
 create mode 100644 src/pages/Supplier/Card/SupplierDescriptorProxy.vue
 create mode 100644 src/pages/Supplier/Card/SupplierSummary.vue
 create mode 100644 src/pages/Supplier/Card/SupplierSummaryDialog.vue
 create mode 100644 src/pages/Supplier/SupplierCreate.vue
 create mode 100644 src/pages/Supplier/SupplierList.vue
 create mode 100644 src/pages/Supplier/SupplierMain.vue
 create mode 100644 src/pages/Travel/Card/TravelCard.vue
 create mode 100644 src/pages/Travel/Card/TravelDescriptor.vue
 create mode 100644 src/pages/Travel/Card/TravelDescriptorProxy.vue
 create mode 100644 src/pages/Travel/Card/TravelSummary.vue
 create mode 100644 src/pages/Travel/Card/TravelSummaryDialog.vue
 create mode 100644 src/pages/Travel/ExtraCommunity.vue
 create mode 100644 src/pages/Travel/ExtraCommunityFilter.vue
 create mode 100644 src/pages/Travel/TravelCreate.vue
 create mode 100644 src/pages/Travel/TravelFilter.vue
 create mode 100644 src/pages/Travel/TravelList.vue
 create mode 100644 src/pages/Travel/TravelMain.vue
 create mode 100644 src/router/modules/Supplier.js
 create mode 100644 src/router/modules/shelving.js
 create mode 100644 src/router/modules/travel.js
 create mode 100644 src/services/invoiceOut.service.js
 create mode 100644 src/services/travel.service.js
 create mode 100644 src/stores/invoiceOutGlobal.js

diff --git a/package-lock.json b/package-lock.json
index 2e96d2ccf..9db93eff3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,14 +1,14 @@
 {
     "name": "salix-front",
-    "version": "23.36.01",
+    "version": "23.52.01",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "salix-front",
-            "version": "0.0.1",
+            "version": "23.52.01",
             "dependencies": {
-                "@quasar/cli": "^2.2.1",
+                "@quasar/cli": "^2.3.0",
                 "@quasar/extras": "^1.16.4",
                 "axios": "^1.4.0",
                 "chromium": "^3.0.3",
@@ -946,9 +946,9 @@
             }
         },
         "node_modules/@quasar/cli": {
-            "version": "2.2.1",
-            "resolved": "https://registry.npmjs.org/@quasar/cli/-/cli-2.2.1.tgz",
-            "integrity": "sha512-PMwJ76IeeNRRBw+08hUMjhqGC6JKJ/t1zIb+IOiyR5D4rkBR26Ha/Z46OD3KfwUprq4Q8s4ieB1+d3VY8FhPKg==",
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@quasar/cli/-/cli-2.3.0.tgz",
+            "integrity": "sha512-DNFDemicj3jXe5+Ib+5w9Bwj1U3yoHQkqn0bU/qysIl/p0MmGA1yqOfUF0V4fw/5or1dfCvStIA/oZxUcC+2pQ==",
             "dependencies": {
                 "@quasar/ssl-certificate": "^1.0.0",
                 "ci-info": "^3.8.0",
diff --git a/src/boot/vnDate.js b/src/boot/vnDate.js
index c78886b57..33d5ac27f 100644
--- a/src/boot/vnDate.js
+++ b/src/boot/vnDate.js
@@ -15,4 +15,14 @@ export default boot(() => {
     Date.vnNow = () => {
         return new Date(Date.vnUTC()).getTime();
     };
+
+    Date.vnFirstDayOfMonth = () => {
+        const date = new Date(Date.vnUTC());
+        return new Date(date.getFullYear(), date.getMonth(), 1);
+    };
+
+    Date.vnLastDayOfMonth = () => {
+        const date = new Date(Date.vnUTC());
+        return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+    };
 });
diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index e8a9e4c17..453b3ffe1 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -6,6 +6,7 @@ import { useQuasar } from 'quasar';
 import { useState } from 'src/composables/useState';
 import { useStateStore } from 'stores/useStateStore';
 import { useValidator } from 'src/composables/useValidator';
+import useNotify from 'src/composables/useNotify.js';
 import SkeletonForm from 'components/ui/SkeletonForm.vue';
 
 const quasar = useQuasar();
@@ -13,6 +14,7 @@ const state = useState();
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { validate } = useValidator();
+const { notify } = useNotify();
 
 const $props = defineProps({
     url: {
@@ -31,10 +33,28 @@ const $props = defineProps({
         type: String,
         default: null,
     },
+    urlCreate: {
+        type: String,
+        default: null,
+    },
     defaultActions: {
         type: Boolean,
         default: true,
     },
+    autoLoad: {
+        type: Boolean,
+        default: false,
+    },
+    formInitialData: {
+        type: Object,
+        default: () => {},
+    },
+    observeFormChanges: {
+        type: Boolean,
+        default: true,
+        description:
+            'Esto se usa principalmente para permitir guardar sin hacer cambios (Útil para la feature de clonar ya que en este caso queremos poder guardar de primeras)',
+    },
 });
 
 const emit = defineEmits(['onFetch']);
@@ -43,44 +63,73 @@ defineExpose({
     save,
 });
 
-onMounted(async () => await fetch());
+onMounted(async () => {
+    // Podemos enviarle al form la estructura de data inicial sin necesidad de fetchearla
+    if ($props.formInitialData && !$props.autoLoad) {
+        state.set($props.model, $props.formInitialData);
+    } else {
+        await fetch();
+    }
+
+    // Disparamos el watcher del form después de que se haya cargado la data inicial, si así se desea
+    if ($props.observeFormChanges) {
+        startFormWatcher();
+    }
+});
 
 onUnmounted(() => {
     state.unset($props.model);
 });
 
 const isLoading = ref(false);
-const hasChanges = ref(false);
-const originalData = ref();
+// Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas
+const hasChanges = ref(!$props.observeFormChanges);
+const originalData = ref({...$props.formInitialData});
 const formData = computed(() => state.get($props.model));
 const formUrl = computed(() => $props.url);
 
+const startFormWatcher = () => {
+    watch(
+        () => formData.value,
+        (val) => {
+            if (val) hasChanges.value = true;
+        },
+        { deep: true }
+    );
+};
+
 function tMobile(...args) {
     if (!quasar.platform.is.mobile) return t(...args);
 }
 
 async function fetch() {
     const { data } = await axios.get($props.url, {
-        params: { filter: $props.filter },
+        params: { filter: JSON.stringify($props.filter) },
     });
 
     state.set($props.model, data);
     originalData.value = data && JSON.parse(JSON.stringify(data));
 
-    watch(formData.value, () => (hasChanges.value = true));
-
     emit('onFetch', state.get($props.model));
 }
 
 async function save() {
     if (!hasChanges.value) {
-        return quasar.notify({
-            type: 'negative',
-            message: t('globals.noChanges'),
-        });
+        notify('globals.noChanges', 'negative');
+        return;
     }
     isLoading.value = true;
-    await axios.patch($props.urlUpdate || $props.url, formData.value);
+
+    try {
+        if ($props.urlCreate) {
+            await axios.post($props.urlCreate, formData.value);
+            notify('globals.dataCreated', 'positive');
+        } else {
+            await axios.patch($props.urlUpdate || $props.url, formData.value);
+        }
+    } catch (err) {
+        notify('errors.create', 'negative');
+    }
 
     originalData.value = JSON.parse(JSON.stringify(formData.value));
     hasChanges.value = false;
@@ -91,11 +140,12 @@ function reset() {
     state.set($props.model, originalData.value);
     originalData.value = JSON.parse(JSON.stringify(originalData.value));
 
-    watch(formData.value, () => (hasChanges.value = true));
-
     emit('onFetch', state.get($props.model));
-    hasChanges.value = false;
+    if ($props.observeFormChanges) {
+        hasChanges.value = false;
+    }
 }
+
 // eslint-disable-next-line vue/no-dupe-keys
 function filter(value, update, filterOptions) {
     update(
@@ -118,7 +168,7 @@ watch(formUrl, async () => {
 });
 </script>
 <template>
-    <QBanner v-if="hasChanges" class="text-white bg-warning">
+    <QBanner v-if="$props.observeFormChanges && hasChanges" class="text-white bg-warning">
         <QIcon name="warning" size="md" class="q-mr-md" />
         <span>{{ t('globals.changesToSave') }}</span>
     </QBanner>
@@ -176,6 +226,7 @@ watch(formUrl, async () => {
     max-width: 800px;
     width: 100%;
 }
+
 .q-card {
     padding: 32px;
 }
diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
new file mode 100644
index 000000000..a8e0d4a43
--- /dev/null
+++ b/src/components/common/VnInputDate.vue
@@ -0,0 +1,76 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { toDate } from 'src/filters';
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: null,
+    },
+    readonly: {
+        type: Boolean,
+        default: false,
+    }
+});
+const emit = defineEmits(['update:modelValue']);
+const value = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value ? new Date(value).toISOString() : null);
+    },
+});
+
+const isPopupOpen = ref(false);
+
+const onDateUpdate = (date) => {
+    value.value = date;
+    isPopupOpen.value = false;
+};
+
+const padDate = (value) => value.toString().padStart(2, '0');
+const formatDate = (dateString) => {
+    const date = new Date(dateString || '');
+    return `${date.getFullYear()}/${padDate(date.getMonth() + 1)}/${padDate(
+        date.getDate()
+    )}`;
+};
+</script>
+
+<template>
+    <QInput
+        class="vn-input-date"
+        rounded
+        readonly
+        :model-value="toDate(value)"
+        v-bind="$attrs"
+    >
+        <template #append>
+            <QIcon name="event" class="cursor-pointer">
+                <QPopupProxy
+                    v-model="isPopupOpen"
+                    cover
+                    transition-show="scale"
+                    transition-hide="scale"
+                    :no-parent-event="props.readonly"
+                >
+                    <QDate
+                        :model-value="formatDate(value)"
+                        @update:model-value="onDateUpdate"
+                    />
+                </QPopupProxy>
+            </QIcon>
+        </template>
+    </QInput>
+</template>
+
+<style lang="scss">
+.vn-input-date.q-field--standard.q-field--readonly .q-field__control:before {
+    border-bottom-style: solid;
+}
+
+.vn-input-date.q-field--outlined.q-field--readonly .q-field__control:before {
+    border-style: solid;
+}
+</style>
diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index e89fce476..0949fb5cb 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -25,6 +25,14 @@ const props = defineProps({
         type: String,
         default: null,
     },
+    url: {
+        type: String,
+        default: null,
+    },
+    mapper: {
+        type: Function,
+        default: null,
+    },
 });
 
 const filter = {
@@ -155,7 +163,7 @@ function parseProps(propNames, locale, vals, olds) {
     return props;
 }
 
-function getLogs(data) {
+function getLogTree(data) {
     const logs = [];
     let originLog = null;
     let userLog = null;
@@ -226,10 +234,8 @@ async function openPointRecord(id, modelLog) {
 }
 async function setLogTree() {
     filter.where = { and: [{ originFk: route.params.id }] };
-    const { data } = await axios.get(`${props.model}Logs`, {
-        params: { filter: JSON.stringify(filter) },
-    });
-    logTree.value = getLogs(data);
+    const { data } = await getLogs(filter);
+    logTree.value = getLogTree(data);
 }
 
 function filterByRecord(modelLog) {
@@ -257,11 +263,15 @@ async function applyFilter() {
         filter.where.and.push(selectedFilters.value);
     }
 
-    const { data } = await axios.get(`${props.model}Logs`, {
+    const { data } = await getLogs(filter);
+
+    logTree.value = getLogTree(data);
+}
+
+async function getLogs(filter) {
+    return axios.get(props.url ?? `${props.model}Logs`, {
         params: { filter: JSON.stringify(filter) },
     });
-
-    logTree.value = getLogs(data);
 }
 
 function setDate(type) {
@@ -467,7 +477,7 @@ setLogTree();
                     </QItemSection>
                     <QItemSection>
                         <QCard
-                            class="changes-log q-py-none"
+                            class="changes-log q-py-none q-mb-xs"
                             v-for="(log, logIndex) in modelLog.logs"
                             :key="logIndex"
                         >
diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 83107267d..568da613f 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -98,7 +98,12 @@ const value = computed({
         ref="vnSelectRef"
     >
         <template v-if="isClearable" #append>
-            <QIcon name="close" @click.stop="value = null" class="cursor-pointer" />
+            <QIcon
+                name="close"
+                @click.stop="value = null"
+                class="cursor-pointer"
+                size="18px"
+            />
         </template>
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData">
             <slot :name="slotName" v-bind="slotData ?? {}" />
diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index b20419b5d..2669b53a9 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -63,6 +63,7 @@ async function getData() {
         skip: 0,
     });
     const { data } = await arrayData.fetch({ append: false });
+    entity.value = data;
     emit('onFetch', data);
 }
 const emit = defineEmits(['onFetch']);
@@ -98,13 +99,13 @@ function viewSummary(id) {
                 </QBtn>
                 <RouterLink :to="{ name: `${module}Summary`, params: { id: entity.id } }">
                     <QBtn
-                        round
-                        flat
-                        dense
-                        size="md"
-                        icon="launch"
-                        color="white"
                         class="link"
+                        color="white"
+                        dense
+                        flat
+                        icon="launch"
+                        round
+                        size="md"
                     >
                         <QTooltip>
                             {{ t('components.cardDescriptor.summary') }}
@@ -112,13 +113,13 @@ function viewSummary(id) {
                     </QBtn>
                 </RouterLink>
                 <QBtn
-                    v-if="slots.menu"
-                    size="md"
-                    icon="more_vert"
                     color="white"
-                    round
-                    flat
                     dense
+                    flat
+                    icon="more_vert"
+                    round
+                    size="md"
+                    v-if="slots.menu"
                 >
                     <QTooltip>
                         {{ t('components.cardDescriptor.moreOptions') }}
diff --git a/src/components/ui/CardList.vue b/src/components/ui/CardList.vue
index af2398ebd..7d7cee23e 100644
--- a/src/components/ui/CardList.vue
+++ b/src/components/ui/CardList.vue
@@ -1,31 +1,69 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
 const $props = defineProps({
+    element: { type: Object, default: null },
     id: { type: Number, default: null },
+    isSelected: { type: Boolean, default: false },
     title: { type: String, default: null },
+    showCheckbox: { type: Boolean, default: false },
 });
+
+const emit = defineEmits(['toggleCardCheck']);
+
+const toggleCardCheck = (item) => {
+    emit('toggleCardCheck', item);
+};
 </script>
+
 <template>
     <QCard class="card q-mb-md cursor-pointer q-hoverable bg-white-7 q-pa-lg">
         <div>
             <slot name="title">
-                <div class="title text-primary text-weight-bold text-h5">
-                    {{ $props.title ?? `#${$props.id}` }}
+                <div class="flex justify-between">
+                    <div class="flex items-center">
+                        <div class="title text-primary text-weight-bold text-h5">
+                            {{ $props.title }}
+                        </div>
+                        <QChip class="q-chip-color" outline size="sm">
+                            {{ t('ID') }}: {{ $props.id }}
+                        </QChip>
+                    </div>
+                    <QCheckbox
+                        v-if="showCheckbox"
+                        :model-value="isSelected"
+                        @click="toggleCardCheck($props.element)"
+                    />
                 </div>
             </slot>
-            <div class="card-list-body row">
-                <div class="list-items row flex-wrap-wrap q-mt-md">
+            <div class="card-list-body">
+                <div class="list-items row flex-wrap-wrap">
                     <slot name="list-items" />
                 </div>
 
-                <div class="actions column justify-center">
+                <div class="actions">
                     <slot name="actions" />
                 </div>
             </div>
         </div>
     </QCard>
 </template>
+
 <style lang="scss">
+.title {
+    margin-right: 25px;
+}
+
+.q-chip-color {
+    color: var(--vn-label);
+}
+
 .card-list-body {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
     .vn-label-value {
         display: flex;
         justify-content: flex-start;
@@ -39,28 +77,33 @@ const $props = defineProps({
             white-space: nowrap;
         }
         .value {
-            width: 60%;
+            width: 65%;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
         }
     }
     .actions {
-        .q-btn {
-            width: 30px;
-        }
-        .q-icon {
-            color: $primary;
-            font-size: 25px;
-        }
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        width: 25%;
     }
 }
 
 @media (max-width: $breakpoint-xs) {
     .card-list-body {
+        flex-wrap: wrap;
+        justify-content: center;
         .vn-label-value {
             width: 100%;
         }
+        .actions {
+            width: 100%;
+            margin-top: 15px;
+            padding: 0 15%;
+            justify-content: center;
+        }
     }
 }
 </style>
@@ -73,11 +116,11 @@ const $props = defineProps({
     background-color: var(--vn-gray);
 }
 .list-items {
-    width: 90%;
-}
-@media (max-width: $breakpoint-xs) {
-    .list-items {
-        width: 85%;
-    }
+    width: 75%;
 }
 </style>
+
+<i18n>
+    es:
+        ID: ID
+</i18n>
diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index dc749f4a7..29363509d 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -27,7 +27,7 @@ defineExpose({
 async function fetch() {
     const params = {};
 
-    if (props.filter) params.filter = props.filter;
+    if (props.filter) params.filter = JSON.stringify(props.filter);
 
     const { data } = await axios.get(props.url, { params });
     entity.value = data;
@@ -73,6 +73,7 @@ watch(props, async () => {
 
 .cardSummary {
     width: 100%;
+
     .summaryHeader {
         text-align: center;
         font-size: 20px;
@@ -86,6 +87,7 @@ watch(props, async () => {
         justify-content: space-evenly;
         gap: 15px;
         padding: 15px;
+        background-color: var(--vn-gray);
 
         > .q-card.vn-one {
             width: 350px;
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 55e432857..9cd5a052f 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -26,7 +26,7 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(['refresh', 'clear']);
+const emit = defineEmits(['refresh', 'clear', 'search']);
 
 const arrayData = useArrayData(props.dataKey);
 const store = arrayData.store;
@@ -49,6 +49,7 @@ async function search() {
     if (!props.showAll && !Object.values(params).length) store.data = [];
 
     isLoading.value = false;
+    emit('search');
 }
 
 async function reload() {
@@ -102,6 +103,7 @@ function formatValue(value) {
     return `"${value}"`;
 }
 </script>
+
 <template>
     <QForm @submit="search">
         <QList dense>
@@ -115,32 +117,32 @@ function formatValue(value) {
                     <div class="q-gutter-xs">
                         <QBtn
                             @click="clearFilters"
-                            icon="filter_list_off"
                             color="primary"
-                            size="sm"
+                            dense
+                            flat
+                            icon="filter_list_off"
                             padding="none"
                             round
-                            flat
-                            dense
+                            size="sm"
                         >
                             <QTooltip>{{ t('Remove filters') }}</QTooltip>
                         </QBtn>
                         <QBtn
                             @click="reload"
-                            icon="refresh"
                             color="primary"
-                            size="sm"
+                            dense
+                            flat
+                            icon="refresh"
                             padding="none"
                             round
-                            flat
-                            dense
+                            size="sm"
                         >
                             <QTooltip>{{ t('Refresh') }}</QTooltip>
                         </QBtn>
                     </div>
                 </QItemSection>
             </QItem>
-            <QItem>
+            <QItem class="q-mb-sm">
                 <div
                     v-if="tags.length === 0"
                     class="text-grey font-xs text-center full-width"
@@ -149,14 +151,14 @@ function formatValue(value) {
                 </div>
                 <div>
                     <QChip
-                        v-for="chip of tags"
                         :key="chip.label"
                         @remove="remove(chip.label)"
-                        icon="label"
-                        color="primary"
                         class="text-dark"
-                        size="sm"
+                        color="primary"
+                        icon="label"
                         removable
+                        size="sm"
+                        v-for="chip of tags"
                     >
                         <slot name="tags" :tag="chip" :format-fn="formatValue">
                             <div class="q-gutter-x-xs">
@@ -168,29 +170,29 @@ function formatValue(value) {
                 </div>
             </QItem>
             <QSeparator />
-            <template v-if="props.searchButton">
-                <QItem>
-                    <QItemSection class="q-py-sm">
-                        <QBtn
-                            :label="t('Search')"
-                            type="submit"
-                            color="primary"
-                            class="full-width"
-                            icon="search"
-                            unelevated
-                            rounded
-                            dense
-                        />
-                    </QItemSection>
-                </QItem>
-                <QSeparator />
-            </template>
         </QList>
         <slot name="body" :params="userParams" :search-fn="search"></slot>
+        <template v-if="props.searchButton">
+            <QItem>
+                <QItemSection class="q-py-sm">
+                    <QBtn
+                        :label="t('Search')"
+                        class="full-width"
+                        color="primary"
+                        dense
+                        icon="search"
+                        rounded
+                        type="submit"
+                        unelevated
+                    />
+                </QItemSection>
+            </QItem>
+            <QSeparator />
+        </template>
     </QForm>
     <QInnerLoading
-        :showing="isLoading"
         :label="t('globals.pleaseWait')"
+        :showing="isLoading"
         color="primary"
     />
 </template>
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 6fcca4722..523340cc9 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -149,13 +149,13 @@ export function useArrayData(key, userOptions) {
         return { filter, params };
     }
 
-    function sanitizerParams(params) {
+    function sanitizerParams(params, exprBuilder) {
         for (const param in params) {
             if (params[param] === '' || params[param] === null) {
                 delete store.userParams[param];
                 delete params[param];
                 if (store.filter?.where) {
-                    delete store.filter.where[Object.keys(store?.exprBuilder(param))[0]];
+                    delete store.filter.where[Object.keys(exprBuilder ? exprBuilder(param) : param)[0]];
                     if (Object.keys(store.filter.where).length === 0) {
                         delete store.filter.where;
                     }
diff --git a/src/composables/useNotify.js b/src/composables/useNotify.js
new file mode 100644
index 000000000..2f0e1c257
--- /dev/null
+++ b/src/composables/useNotify.js
@@ -0,0 +1,22 @@
+import { Notify } from 'quasar';
+import { i18n } from 'src/boot/i18n';
+
+export default function useNotify() {
+    const notify = (message, type, icon) => {
+        const defaultIcons = {
+            warning: 'warning',
+            negative: 'error',
+            positive: 'check',
+        };
+
+        Notify.create({
+            message: i18n.global.t(message),
+            type: type,
+            icon: icon ? icon : defaultIcons[type],
+        });
+    };
+
+    return {
+        notify,
+    };
+}
diff --git a/src/composables/useState.js b/src/composables/useState.js
index f0ff830ab..1c797e992 100644
--- a/src/composables/useState.js
+++ b/src/composables/useState.js
@@ -8,6 +8,7 @@ const user = ref({
     nickname: '',
     lang: '',
     darkMode: null,
+    companyFk: null,
 });
 
 const roles = ref([]);
@@ -23,6 +24,7 @@ export function useState() {
                 nickname: user.value.nickname,
                 lang: user.value.lang,
                 darkMode: user.value.darkMode,
+                companyFk: user.value.companyFk,
             };
         });
     }
@@ -34,6 +36,7 @@ export function useState() {
             nickname: data.nickname,
             lang: data.lang,
             darkMode: data.darkMode,
+            companyFk: data.companyFk,
         };
     }
 
@@ -59,7 +62,6 @@ export function useState() {
         delete state.value[name];
     }
 
-
     return {
         getUser,
         setUser,
@@ -69,6 +71,6 @@ export function useState() {
         get,
         unset,
         drawer,
-        headerMounted
+        headerMounted,
     };
 }
diff --git a/src/composables/useUserConfig.js b/src/composables/useUserConfig.js
index 767ffb54e..692943978 100644
--- a/src/composables/useUserConfig.js
+++ b/src/composables/useUserConfig.js
@@ -1,14 +1,24 @@
 import axios from 'axios';
 import { useState } from './useState';
+import useNotify from './useNotify';
 
 export function useUserConfig() {
     const state = useState();
+    const { notify } = useNotify();
 
     async function fetch() {
-        const { data } = await axios.get('UserConfigs/getUserConfig');
-        const user = state.getUser().value;
-        user.darkMode = data.darkMode;
-        state.setUser(user);
+        try {
+            const { data } = await axios.get('UserConfigs/getUserConfig');
+            const user = state.getUser().value;
+            user.darkMode = data.darkMode;
+            user.companyFk = data.companyFk;
+            state.setUser(user);
+
+            return data;
+        } catch (error) {
+            notify('globals.errors.userConfig', 'negative');
+            console.error('Error fetching user config:', error);
+        }
     }
 
     return {
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 41bf03c5e..3c3c9f7df 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -21,6 +21,7 @@ export default {
         dataDeleted: 'Data deleted',
         search: 'Search',
         changes: 'Changes',
+        dataCreated: 'Data created',
         add: 'Add',
         create: 'Create',
         save: 'Save',
@@ -47,12 +48,29 @@ export default {
         dateFormat: 'en-GB',
         microsip: 'Open in MicroSIP',
         noSelectedRows: `You don't have any line selected`,
+        downloadCSVSuccess: 'CSV downloaded successfully',
+        // labels compartidos entre vistas
+        reference: 'Reference',
+        agency: 'Agency',
+        wareHouseOut: 'Warehouse Out',
+        wareHouseIn: 'Warehouse In',
+        landed: 'Landed',
+        shipped: 'Shipped',
+        totalEntries: 'Total entries',
+        amount: 'Amount',
+        packages: 'Packages',
+        download: 'Download',
+        selectRows: 'Select all { numberRows } row(s)',
+        allRows: 'All { numberRows } row(s)',
+        markAll: 'Mark all',
     },
     errors: {
         statusUnauthorized: 'Access denied',
         statusInternalServerError: 'An internal server error has ocurred',
         statusBadGateway: 'It seems that the server has fall down',
         statusGatewayTimeout: 'Could not contact the server',
+        userConfig: 'Error fetching user config',
+        create: 'Error during creation',
     },
     login: {
         title: 'Login',
@@ -235,7 +253,6 @@ export default {
             invoice: 'Invoice',
             shipped: 'Shipped',
             landed: 'Landed',
-            packages: 'Packages',
             consigneePhone: 'Consignee phone',
             consigneeMobile: 'Consignee mobile',
             clientPhone: 'Client phone',
@@ -252,7 +269,6 @@ export default {
             description: 'Description',
             price: 'Price',
             discount: 'Discount',
-            amount: 'Amount',
             packing: 'Packing',
             hasComponentLack: 'Component lack',
             itemShortage: 'Not visible',
@@ -345,7 +361,6 @@ export default {
             assignedTo: 'Assigned',
             created: 'Created',
             state: 'State',
-            packages: 'Packages',
             picked: 'Picked',
             returnOfMaterial: 'Return of material authorization (RMA)',
         },
@@ -359,6 +374,8 @@ export default {
         pageTitles: {
             invoiceOuts: 'Create invoice',
             list: 'List',
+            negativeBases: 'Negative Bases',
+            globalInvoicing: 'Global invoicing',
             createInvoiceOut: 'Create invoice out',
             summary: 'Summary',
             basicData: 'Basic Data',
@@ -367,7 +384,6 @@ export default {
             ref: 'Reference',
             issued: 'Issued',
             shortIssued: 'Issued',
-            amount: 'Amount',
             client: 'Client',
             created: 'Created',
             shortCreated: 'Created',
@@ -377,7 +393,6 @@ export default {
         },
         card: {
             issued: 'Issued',
-            amount: 'Amount',
             client: 'Client',
             company: 'Company',
             customerCard: 'Customer card',
@@ -400,6 +415,73 @@ export default {
             shipped: 'Shipped',
             totalWithVat: 'Amount',
         },
+        globalInvoices: {
+            errors: {
+                chooseValidClient: 'Choose a valid client',
+                chooseValidCompany: 'Choose a valid company',
+                chooseValidPrinter: 'Choose a valid printer',
+                fillDates: 'Invoice date and the max date should be filled',
+                invoiceDateLessThanMaxDate: 'Invoice date can not be less than max date',
+                invoiceWithFutureDate: 'Exists an invoice with a future date',
+                noTicketsToInvoice: 'There are not clients to invoice',
+                criticalInvoiceError: 'Critical invoicing error, process stopped',
+            },
+            table: {
+                client: 'Client',
+                addressId: 'Address id',
+                streetAddress: 'Street',
+            },
+            statusCard: {
+                percentageText: '{getPercentage}% {getAddressNumber} of {getNAddresses}',
+                pdfsNumberText: '{nPdfs} of {totalPdfs} PDFs',
+            },
+        },
+        negativeBases: {
+            from: 'From',
+            to: 'To',
+            company: 'Company',
+            country: 'Country',
+            clientId: 'Client Id',
+            client: 'Client',
+            amount: 'Amount',
+            base: 'Base',
+            ticketId: 'Ticket Id',
+            active: 'Active',
+            hasToInvoice: 'Has to Invoice',
+            verifiedData: 'Verified Data',
+            comercial: 'Comercial',
+            errors: {
+                downloadCsvFailed: 'CSV download failed',
+            },
+        },
+    },
+    shelving: {
+        pageTitles: {
+            shelving: 'Shelving',
+            shelvingList: 'Shelving List',
+            create: 'Create',
+            summary: 'Summary',
+            basicData: 'Basic Data',
+            log: 'Logs',
+        },
+        list: {
+            parking: 'Parking',
+            priority: 'Priority',
+            newShelving: 'New Shelving',
+        },
+        summary: {
+            code: 'Code',
+            parking: 'Parking',
+            priority: 'Priority',
+            worker: 'Worker',
+            recyclable: 'Recyclable',
+        },
+        basicData: {
+            code: 'Code',
+            parking: 'Parking',
+            priority: 'Priority',
+            recyclable: 'Recyclable',
+        },
     },
     invoiceIn: {
         pageTitles: {
@@ -581,6 +663,81 @@ export default {
             },
         },
     },
+    supplier: {
+        pageTitles: {
+            suppliers: 'Suppliers',
+            supplier: 'Supplier',
+            list: 'List',
+            create: 'Create',
+            summary: 'Summary',
+        },
+        list: {
+            payMethod: 'Pay method',
+            payDeadline: 'Pay deadline',
+            payDay: 'Pay day',
+            account: 'Account',
+            newSupplier: 'New supplier',
+        },
+        summary: {
+            responsible: 'Responsible',
+            notes: 'Notes',
+            verified: 'Verified',
+            isActive: 'Is active',
+            billingData: 'Billing data',
+            payMethod: 'Pay method',
+            payDeadline: 'Pay deadline',
+            payDay: 'Día de pago',
+            account: 'Account',
+            fiscalData: 'Fiscal data',
+            sageTaxType: 'Sage tax type',
+            sageTransactionType: 'Sage transaction type',
+            sageWithholding: 'Sage withholding',
+            supplierActivity: 'Supplier activity',
+            healthRegister: 'Healt register',
+            fiscalAddress: 'Fiscal address',
+            socialName: 'Social name',
+            taxNumber: 'Tax number',
+            street: 'Street',
+            city: 'City',
+            postCode: 'Postcode',
+            province: 'Province',
+            country: 'Country',
+        },
+        create: {
+            supplierName: 'Supplier name',
+        },
+    },
+    travel: {
+        pageTitles: {
+            travel: 'Travels',
+            list: 'List',
+            create: 'Create',
+            summary: 'Summary',
+            extraCommunity: 'Extra community',
+        },
+        summary: {
+            confirmed: 'Confirmed',
+            entryId: 'Entry Id',
+            freight: 'Freight',
+            package: 'Package',
+            delivered: 'Delivered',
+            received: 'Received',
+            entries: 'Entries',
+            cloneShipping: 'Clone travel',
+            CloneTravelAndEntries: 'Clone travel and his entries',
+            AddEntry: 'Add entry',
+        },
+        variables: {
+            search: 'Id/Reference',
+            agencyModeFk: 'Agency',
+            warehouseInFk: ' Warehouse In',
+            warehouseOutFk: 'Warehouse Out',
+            landedFrom: 'Landed from',
+            landedTo: 'Landed to',
+            continent: 'Continent out',
+            totalEntries: 'Total entries',
+        },
+    },
     components: {
         topbar: {},
         userPanel: {
@@ -588,10 +745,11 @@ export default {
             logOut: 'Log Out',
         },
         smartCard: {
-            openCard: 'View card',
-            openSummary: 'Open summary',
-            viewDescription: 'View description',
             downloadFile: 'Download file',
+            clone: 'Clone',
+            openCard: 'View',
+            openSummary: 'Summary',
+            viewDescription: 'Description',
         },
         cardDescriptor: {
             mainList: 'Main list',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 7fcd2e9c6..0289b7e78 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -21,6 +21,7 @@ export default {
         dataDeleted: 'Datos eliminados',
         search: 'Buscar',
         changes: 'Cambios',
+        dataCreated: 'Datos creados',
         add: 'Añadir',
         create: 'Crear',
         save: 'Guardar',
@@ -47,12 +48,28 @@ export default {
         dateFormat: 'es-ES',
         noSelectedRows: `No tienes ninguna línea seleccionada`,
         microsip: 'Abrir en MicroSIP',
+        downloadCSVSuccess: 'Descarga de CSV exitosa',
+        reference: 'Referencia',
+        agency: 'Agencia',
+        wareHouseOut: 'Alm. salida',
+        wareHouseIn: 'Alm. entrada',
+        landed: 'F. entrega',
+        shipped: 'F. envío',
+        totalEntries: 'Ent. totales',
+        amount: 'Importe',
+        packages: 'Bultos',
+        download: 'Descargar',
+        selectRows: 'Seleccionar las { numberRows } filas(s)',
+        allRows: 'Todo { numberRows } filas(s)',
+        markAll: 'Marcar todo',
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',
         statusInternalServerError: 'Ha ocurrido un error interno del servidor',
         statusBadGateway: 'Parece ser que el servidor ha caído',
         statusGatewayTimeout: 'No se ha podido contactar con el servidor',
+        userConfig: 'Error al obtener configuración de usuario',
+        create: 'Error al crear',
     },
     login: {
         title: 'Inicio de sesión',
@@ -234,7 +251,6 @@ export default {
             invoice: 'Factura',
             shipped: 'Enviado',
             landed: 'Entregado',
-            packages: 'Bultos',
             consigneePhone: 'Tel. consignatario',
             consigneeMobile: 'Móv. consignatario',
             clientPhone: 'Tel. cliente',
@@ -251,7 +267,6 @@ export default {
             description: 'Descripción',
             price: 'Precio',
             discount: 'Descuento',
-            amount: 'Importe',
             packing: 'Encajado',
             hasComponentLack: 'Faltan componentes',
             itemShortage: 'No visible',
@@ -344,7 +359,6 @@ export default {
             assignedTo: 'Asignada a',
             created: 'Creada',
             state: 'Estado',
-            packages: 'Bultos',
             picked: 'Recogida',
             returnOfMaterial: 'Autorización de retorno de materiales (RMA)',
         },
@@ -359,6 +373,8 @@ export default {
         pageTitles: {
             invoiceOuts: 'Crear factura',
             list: 'Listado',
+            negativeBases: 'Bases Negativas',
+            globalInvoicing: 'Facturación global',
             createInvoiceOut: 'Crear fact. emitida',
             summary: 'Resumen',
             basicData: 'Datos básicos',
@@ -367,7 +383,6 @@ export default {
             ref: 'Referencia',
             issued: 'Fecha emisión',
             shortIssued: 'F. emisión',
-            amount: 'Importe',
             client: 'Cliente',
             created: 'Fecha creación',
             shortCreated: 'F. creación',
@@ -377,7 +392,6 @@ export default {
         },
         card: {
             issued: 'Fecha emisión',
-            amount: 'Importe',
             client: 'Cliente',
             company: 'Empresa',
             customerCard: 'Ficha del cliente',
@@ -400,6 +414,75 @@ export default {
             shipped: 'F. envío',
             totalWithVat: 'Importe',
         },
+        globalInvoices: {
+            errors: {
+                chooseValidClient: 'Selecciona un cliente válido',
+                chooseValidCompany: 'Selecciona una empresa válida',
+                chooseValidPrinter: 'Selecciona una impresora válida',
+                fillDates:
+                    'La fecha de la factura y la fecha máxima deben estar completas',
+                invoiceDateLessThanMaxDate:
+                    'La fecha de la factura no puede ser menor que la fecha máxima',
+                invoiceWithFutureDate: 'Existe una factura con una fecha futura',
+                noTicketsToInvoice: 'No hay clientes para facturar',
+                criticalInvoiceError: 'Error crítico en la facturación, proceso detenido',
+            },
+            table: {
+                client: 'Cliente',
+                addressId: 'Id dirección',
+                streetAddress: 'Dirección fiscal',
+            },
+            statusCard: {
+                percentageText: '{getPercentage}% {getAddressNumber} de {getNAddresses}',
+                pdfsNumberText: '{nPdfs} de {totalPdfs} PDFs',
+            },
+        },
+        negativeBases: {
+            from: 'Desde',
+            to: 'Hasta',
+            company: 'Empresa',
+            country: 'País',
+            clientId: 'Id cliente',
+            client: 'Cliente',
+            amount: 'Importe',
+            base: 'Base',
+            ticketId: 'Id ticket',
+            active: 'Activo',
+            hasToInvoice: 'Facturar',
+            verifiedData: 'Datos comprobados',
+            comercial: 'Comercial',
+            errors: {
+                downloadCsvFailed: 'Error al descargar CSV',
+            },
+        },
+    },
+    shelving: {
+        pageTitles: {
+            shelving: 'Carros',
+            shelvingList: 'Listado de carros',
+            create: 'Crear',
+            summary: 'Resumen',
+            basicData: 'Datos básicos',
+            log: 'Registros de auditoría',
+        },
+        list: {
+            parking: 'Parking',
+            priority: 'Prioridad',
+            newShelving: 'Nuevo Carro',
+        },
+        summary: {
+            code: 'Código',
+            parking: 'Parking',
+            priority: 'Prioridad',
+            worker: 'Trabajador',
+            recyclable: 'Reciclable',
+        },
+        basicData: {
+            code: 'Código',
+            parking: 'Parking',
+            priority: 'Prioridad',
+            recyclable: 'Reciclable',
+        },
     },
     invoiceIn: {
         pageTitles: {
@@ -579,6 +662,81 @@ export default {
             },
         },
     },
+    supplier: {
+        pageTitles: {
+            suppliers: 'Proveedores',
+            supplier: 'Proveedor',
+            list: 'Listado',
+            create: 'Crear',
+            summary: 'Resumen',
+        },
+        list: {
+            payMethod: 'Método de pago',
+            payDeadline: 'Plazo de pago',
+            payDay: 'Día de pago',
+            account: 'Cuenta',
+            newSupplier: 'Nuevo proveedor',
+        },
+        summary: {
+            responsible: 'Responsable',
+            notes: 'Notas',
+            verified: 'Verificado',
+            isActive: 'Está activo',
+            billingData: 'Forma de pago',
+            payMethod: 'Método de pago',
+            payDeadline: 'Plazo de pago',
+            payDay: 'Día de pago',
+            account: 'Cuenta',
+            fiscalData: 'Data fiscal',
+            sageTaxType: 'Tipo de impuesto Sage',
+            sageTransactionType: 'Tipo de transacción Sage',
+            sageWithholding: 'Retención sage',
+            supplierActivity: 'Actividad proveedor',
+            healthRegister: 'Pasaporte sanitario',
+            fiscalAddress: 'Dirección fiscal',
+            socialName: 'Razón social',
+            taxNumber: 'NIF/CIF',
+            street: 'Dirección',
+            city: 'Población',
+            postCode: 'Código postal',
+            province: 'Provincia',
+            country: 'País',
+        },
+        create: {
+            supplierName: 'Nombre del proveedor',
+        },
+    },
+    travel: {
+        pageTitles: {
+            travel: 'Envíos',
+            list: 'Listado',
+            create: 'Crear',
+            summary: 'Resumen',
+            extraCommunity: 'Extra comunitarios',
+        },
+        summary: {
+            confirmed: 'Confirmado',
+            entryId: 'Id entrada',
+            freight: 'Porte',
+            package: 'Embalaje',
+            delivered: 'Enviada',
+            received: 'Recibida',
+            entries: 'Entradas',
+            cloneShipping: 'Clonar envío',
+            CloneTravelAndEntries: 'Clonar travel y sus entradas',
+            AddEntry: 'Añadir entrada',
+        },
+        variables: {
+            search: 'Id/Referencia',
+            agencyModeFk: 'Agencia',
+            warehouseInFk: 'Alm. entrada',
+            warehouseOutFk: ' Alm. salida',
+            landedFrom: 'Llegada desde',
+            landedTo: 'Llegada hasta',
+            continent: 'Cont. Salida',
+            totalEntries: 'Ent. totales',
+        },
+    },
     components: {
         topbar: {},
         userPanel: {
@@ -586,10 +744,11 @@ export default {
             logOut: 'Cerrar sesión',
         },
         smartCard: {
-            openCard: 'Ver ficha',
-            openSummary: 'Abrir detalles',
-            viewDescription: 'Ver descripción',
             downloadFile: 'Descargar archivo',
+            clone: 'Clonar',
+            openCard: 'Ficha',
+            openSummary: 'Detalles',
+            viewDescription: 'Descripción',
         },
         cardDescriptor: {
             mainList: 'Listado principal',
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index 94e447e13..0f067f281 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -7,6 +7,7 @@ import { useSession } from 'src/composables/useSession';
 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";
 
 const route = useRoute();
 const { t } = useI18n();
@@ -96,6 +97,7 @@ const statesFilter = {
         :url-update="`Claims/updateClaim/${route.params.id}`"
         :filter="claimFilter"
         model="claim"
+        auto-load
     >
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
@@ -107,33 +109,7 @@ const statesFilter = {
                     />
                 </div>
                 <div class="col">
-                    <QInput
-                        v-model="data.created"
-                        mask="####-##-##"
-                        fill-mask="_"
-                        autofocus
-                    >
-                        <template #append>
-                            <QIcon name="event" class="cursor-pointer">
-                                <QPopupProxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <QDate v-model="data.created" mask="YYYY-MM-DD">
-                                        <div class="row items-center justify-end">
-                                            <QBtn
-                                                v-close-popup
-                                                label="Close"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </QDate>
-                                </QPopupProxy>
-                            </QIcon>
-                        </template>
-                    </QInput>
+                    <VnInputDate v-model="data.created" :label="t('claim.basicData.created')" />
                 </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
@@ -183,7 +159,7 @@ const statesFilter = {
                 <div class="col">
                     <QInput
                         v-model.number="data.packages"
-                        :label="t('claim.basicData.packages')"
+                        :label="t('globals.packages')"
                         :rules="validate('claim.packages')"
                         type="number"
                     />
diff --git a/src/pages/Claim/ClaimFilter.vue b/src/pages/Claim/ClaimFilter.vue
index ac8f4f0db..c9716074d 100644
--- a/src/pages/Claim/ClaimFilter.vue
+++ b/src/pages/Claim/ClaimFilter.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -150,33 +151,7 @@ const states = ref();
                     </QItem> -->
                     <QItem>
                         <QItemSection>
-                            <QInput
-                                v-model="params.created"
-                                :label="t('Created')"
-                                autofocus
-                                readonly
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate v-model="params.created">
-                                                <div class="row items-center justify-end">
-                                                    <QBtn
-                                                        v-close-popup
-                                                        label="Close"
-                                                        color="primary"
-                                                        flat
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                            <VnInputDate v-model="params.created" :label="t('Created')" />
                         </QItemSection>
                     </QItem>
                 </QExpansionItem>
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index fe69e97aa..fbf28bc8e 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -89,10 +89,11 @@ function viewDescriptor(id) {
             >
                 <template #body="{ rows }">
                     <CardList
-                        v-for="row of rows"
+                        :id="row.id"
                         :key="row.id"
                         :title="row.clientName"
                         @click="navigate(row.id)"
+                        v-for="row of rows"
                     >
                         <template #list-items>
                             <VnLv label="ID" :value="row.id" />
@@ -118,11 +119,7 @@ function viewDescriptor(id) {
                             />
                             <VnLv :label="t('claim.list.state')">
                                 <template #value>
-                                    <QBadge
-                                        :color="stateColor(row.stateCode)"
-                                        class="q-ma-none"
-                                        dense
-                                    >
+                                    <QBadge :color="stateColor(row.stateCode)" dense>
                                         {{ row.stateDescription }}
                                     </QBadge>
                                 </template>
@@ -130,19 +127,26 @@ function viewDescriptor(id) {
                         </template>
                         <template #actions>
                             <QBtn
-                                flat
-                                icon="arrow_circle_right"
+                                :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
+                                class="bg-vn-dark"
+                                outline
+                            />
+                            <QBtn
+                                :label="t('components.smartCard.viewDescription')"
+                                @click.stop
+                                class="bg-vn-dark"
+                                outline
+                                style="margin-top: 15px"
                             >
-                                <QTooltip>
-                                    {{ t('components.smartCard.openCard') }}
-                                </QTooltip>
-                            </QBtn>
-                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
-                                <QTooltip>
-                                    {{ t('components.smartCard.openSummary') }}
-                                </QTooltip>
+                                <CustomerDescriptorProxy :id="row.clientFk" />
                             </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
                         </template>
                     </CardList>
                 </template>
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 08c661f0b..47cb6e337 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -60,7 +60,7 @@ const filterOptions = {
         auto-load
     />
 
-    <FormModel :url="`Clients/${route.params.id}`" model="customer">
+    <FormModel :url="`Clients/${route.params.id}`" model="customer" auto-load>
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 41512d12f..7e37bb88a 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -73,10 +73,10 @@ function viewSummary(id) {
                         v-for="row of rows"
                         :key="row.id"
                         :title="row.name"
+                        :id="row.id"
                         @click="navigate(row.id)"
                     >
                         <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
                             <VnLv :label="t('customer.list.email')" :value="row.email" />
                             <VnLv :value="row.phone">
                                 <template #label>
@@ -87,25 +87,17 @@ function viewSummary(id) {
                         </template>
                         <template #actions>
                             <QBtn
-                                flat
-                                color="primary"
-                                icon="arrow_circle_right"
+                                :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                            >
-                                <QTooltip>
-                                    {{ t('components.smartCard.openCard') }}
-                                </QTooltip>
-                            </QBtn>
+                                class="bg-vn-dark"
+                                outline
+                            />
                             <QBtn
-                                flat
-                                color="grey-7"
-                                icon="preview"
+                                :label="t('components.smartCard.openSummary')"
                                 @click.stop="viewSummary(row.id)"
-                            >
-                                <QTooltip>
-                                    {{ t('components.smartCard.openSummary') }}
-                                </QTooltip>
-                            </QBtn>
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
                         </template>
                     </CardList>
                 </template>
diff --git a/src/pages/Customer/CustomerPaymentsFilter.vue b/src/pages/Customer/CustomerPaymentsFilter.vue
index 56fb52d79..7ee584d7f 100644
--- a/src/pages/Customer/CustomerPaymentsFilter.vue
+++ b/src/pages/Customer/CustomerPaymentsFilter.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -76,78 +77,16 @@ function isValidNumber(value) {
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInputDate
                             v-model="params.from"
                             :label="t('From')"
-                            mask="date"
-                            placeholder="yyyy/mm/dd"
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.from" landscape>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.cancel')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                                <QBtn
-                                                    :label="t('globals.confirm')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        />
                     </QItemSection>
                     <QItemSection>
-                        <QInput
+                        <VnInputDate
                             v-model="params.to"
                             :label="t('To')"
-                            mask="date"
-                            placeholder="yyyy/mm/dd"
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.to" landscape>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.cancel')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                                <QBtn
-                                                    :label="t('globals.confirm')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        />
                     </QItemSection>
                 </QItem>
             </QList>
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue b/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
index 4271f7f38..9c1bb3649 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
@@ -7,6 +7,7 @@ import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
+import InvoiceOutDescriptorMenu from './InvoiceOutDescriptorMenu.vue';
 
 const $props = defineProps({
     id: {
@@ -59,12 +60,12 @@ const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.
         @on-fetch="setData"
         data-key="invoiceOutData"
     >
+        <template #menu="{ entity }">
+            <InvoiceOutDescriptorMenu :invoice-out="entity" />
+        </template>
         <template #body="{ entity }">
             <VnLv :label="t('invoiceOut.card.issued')" :value="toDate(entity.issued)" />
-            <VnLv
-                :label="t('invoiceOut.card.amount')"
-                :value="toCurrency(entity.amount)"
-            />
+            <VnLv :label="t('globals.amount')" :value="toCurrency(entity.amount)" />
             <VnLv v-if="entity.client" :label="t('invoiceOut.card.client')">
                 <template #value>
                     <span class="link">
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutDescriptorMenu.vue b/src/pages/InvoiceOut/Card/InvoiceOutDescriptorMenu.vue
new file mode 100644
index 000000000..ab8b6470b
--- /dev/null
+++ b/src/pages/InvoiceOut/Card/InvoiceOutDescriptorMenu.vue
@@ -0,0 +1,40 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+</script>
+
+<template>
+    <QItem v-ripple clickable>
+        <QItemSection>{{ t('Transfer invoice to') }}</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection>{{ t('See invoice') }}</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection>{{ t('Send invoice') }}</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection>{{ t('Delete invoice') }}</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection>{{ t('Post invoice') }}</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection>{{ t('Regenerate invoice PDF') }}</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection>{{ t('Pass') }}</QItemSection>
+    </QItem>
+</template>
+
+<i18n>
+es:
+    Transfer invoice to: Transferir factura a
+    See invoice: Ver factura
+    Send invoice: Enviar factura
+    Delete invoice: Eliminar factura
+    Post invoice: Asentar factura
+    Regenerate invoice PDF: Regenerar PDF factura
+    Pass: Abono
+</i18n>
diff --git a/src/pages/InvoiceOut/InvoiceOutFilter.vue b/src/pages/InvoiceOut/InvoiceOutFilter.vue
index 1ecaf828b..5d965816f 100644
--- a/src/pages/InvoiceOut/InvoiceOutFilter.vue
+++ b/src/pages/InvoiceOut/InvoiceOutFilter.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -43,66 +44,72 @@ function setWorkers(data) {
                     <QItemSection>
                         <QInput
                             :label="t('Customer ID')"
-                            v-model="params.clientFk"
+                            class="q-mt-sm"
+                            dense
                             lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="vn:client" size="sm"></QIcon>
-                            </template>
-                        </QInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <QInput :label="t('FI')" v-model="params.fi" lazy-rules>
-                            <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </QInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <QInput :label="t('Amount')" v-model="params.amount" lazy-rules>
-                            <template #prepend>
-                                <QIcon name="euro" size="sm"></QIcon>
-                            </template>
-                        </QInput>
+                            outlined
+                            rounded
+                            v-model="params.clientFk"
+                        />
                     </QItemSection>
                 </QItem>
                 <QItem>
+                    <QItemSection>
+                        <QInput
+                            :label="t('FI')"
+                            class="q-mt-sm"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            v-model="params.fi"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput
+                            :label="t('Amount')"
+                            class="q-mt-sm"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            v-model="params.amount"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mt-sm">
                     <QItemSection>
                         <QInput
                             :label="t('Min')"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
                             type="number"
                             v-model.number="params.min"
-                            lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="euro" size="sm"></QIcon>
-                            </template>
-                        </QInput>
+                        />
                     </QItemSection>
                     <QItemSection>
                         <QInput
                             :label="t('Max')"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
                             type="number"
                             v-model.number="params.max"
-                            lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="euro" size="sm"></QIcon>
-                            </template>
-                        </QInput>
+                        />
                     </QItemSection>
                 </QItem>
                 <QItem class="q-mb-md">
                     <QItemSection>
                         <QCheckbox
-                            v-model="params.hasPdf"
-                            @update:model-value="searchFn()"
                             :label="t('Has PDF')"
+                            @update:model-value="searchFn()"
                             toggle-indeterminate
+                            v-model="params.hasPdf"
                         />
                     </QItemSection>
                 </QItem>
@@ -110,115 +117,35 @@ function setWorkers(data) {
                 <QExpansionItem :label="t('More options')" expand-separator>
                     <QItem>
                         <QItemSection>
-                            <QInput
-                                :label="t('Issued')"
+                            <VnInputDate
                                 v-model="params.issued"
-                                mask="date"
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate v-model="params.issued" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        color="primary"
-                                                        flat
-                                                        @click="save"
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                                :label="t('Issued')"
+                                dense
+                                outlined
+                                rounded
+                            />
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput
-                                :label="t('Created')"
+                            <VnInputDate
                                 v-model="params.created"
-                                mask="date"
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate v-model="params.created" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        color="primary"
-                                                        flat
-                                                        @click="save"
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                                :label="t('Created')"
+                                dense
+                                outlined
+                                rounded
+                            />
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput :label="t('Dued')" v-model="params.dued" mask="date">
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate v-model="params.dued" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        color="primary"
-                                                        flat
-                                                        @click="save"
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                            <VnInputDate
+                                v-model="params.dued"
+                                :label="t('Dued')"
+                                dense
+                                outlined
+                                rounded
+                            />
                         </QItemSection>
                     </QItem>
                 </QExpansionItem>
diff --git a/src/pages/InvoiceOut/InvoiceOutGlobal.vue b/src/pages/InvoiceOut/InvoiceOutGlobal.vue
new file mode 100644
index 000000000..7284ca04e
--- /dev/null
+++ b/src/pages/InvoiceOut/InvoiceOutGlobal.vue
@@ -0,0 +1,198 @@
+<script setup>
+import { onMounted, onUnmounted, computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import InvoiceOutGlobalForm from './InvoiceOutGlobalForm.vue';
+import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
+import { storeToRefs } from 'pinia';
+import { QBadge, QBtn } from 'quasar';
+import CustomerDescriptor from 'src/pages/Customer/Card/CustomerDescriptor.vue';
+
+const stateStore = useStateStore();
+const { t } = useI18n();
+const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
+
+// invoiceOutGlobalStore state and getters
+const {
+    status,
+    getPercentage,
+    getAddressNumber,
+    getNAddresses,
+    nPdfs,
+    totalPdfs,
+    errors,
+} = storeToRefs(invoiceOutGlobalStore);
+
+const selectedCustomerId = ref(null);
+
+const tableColumnComponents = {
+    clientId: {
+        component: QBtn,
+        props: { flat: true, color: 'blue' },
+        event: (prop) => selectCustomerId(prop.value),
+    },
+    clientName: {
+        component: 'span',
+        props: {},
+    },
+    id: {
+        component: 'span',
+        props: {},
+    },
+    nickname: {
+        component: 'span',
+        props: {},
+    },
+    message: {
+        component: QBadge,
+        props: { color: 'red' },
+    },
+};
+
+const columns = computed(() => {
+    return [
+        { label: 'Id', field: 'clientId', name: 'clientId', align: 'left' },
+        {
+            label: t('invoiceOut.globalInvoices.table.client'),
+            field: 'clientName',
+            name: 'clientName',
+            align: 'left',
+        },
+        {
+            label: t('invoiceOut.globalInvoices.table.addressId'),
+            field: 'id',
+            name: 'id',
+            align: 'left',
+        },
+        {
+            label: t('invoiceOut.globalInvoices.table.streetAddress'),
+            field: 'nickname',
+            name: 'nickname',
+            align: 'left',
+        },
+        { label: 'Error', field: 'message', name: 'message', align: 'left' },
+    ];
+});
+
+const rows = computed(() => {
+    if (!errors && !errors.length > 0) return [];
+    return errors.value.map((row) => {
+        return {
+            ...row.client,
+            message: row.message,
+        };
+    });
+});
+
+const selectCustomerId = (id) => {
+    selectedCustomerId.value = id;
+};
+
+onMounted(() => (stateStore.rightDrawer = true));
+onUnmounted(() => {
+    stateStore.rightDrawer = false;
+    invoiceOutGlobalStore.$reset();
+});
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" :width="256" side="right" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <InvoiceOutGlobalForm />
+        </QScrollArea>
+    </QDrawer>
+
+    <QPage class="column items-center q-pa-md">
+        <QCard v-if="status" class="card">
+            <QCardSection class="card-section">
+                <span class="text">{{ t(`status.${status}`) }}</span>
+                <span class="text">{{
+                    t('invoiceOut.globalInvoices.statusCard.percentageText', {
+                        getPercentage: getPercentage,
+                        getAddressNumber: getAddressNumber,
+                        getNAddresses: getNAddresses,
+                    })
+                }}</span>
+                <span class="text">{{
+                    t('invoiceOut.globalInvoices.statusCard.pdfsNumberText', {
+                        nPdfs: nPdfs,
+                        totalPdfs: totalPdfs,
+                    })
+                }}</span>
+            </QCardSection>
+        </QCard>
+
+        <QTable
+            v-if="rows.length > 0"
+            :rows="rows"
+            :columns="columns"
+            hide-bottom
+            row-key="id"
+            :pagination="{ rowsPerPage: 0 }"
+            class="full-width q-mt-md"
+        >
+            <template #body-cell="props">
+                <QTd :props="props">
+                    <component
+                        :is="tableColumnComponents[props.col.name].component"
+                        v-bind="tableColumnComponents[props.col.name].props"
+                        @click="tableColumnComponents[props.col.name].event(props)"
+                        class="col-content"
+                    >
+                        {{ props.value }}
+                        <QPopupProxy>
+                            <CustomerDescriptor
+                                v-if="selectedCustomerId === props.value"
+                                :id="selectedCustomerId"
+                            />
+                        </QPopupProxy>
+                    </component>
+                </QTd>
+            </template>
+        </QTable>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.card {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    background-color: var(--vn-dark);
+    padding: 16px;
+
+    .card-section {
+        display: flex;
+        flex-direction: column;
+        padding: 0px;
+    }
+
+    .text {
+        font-size: 14px;
+        color: var(--vn-text);
+    }
+}
+
+.col-content {
+    border-radius: 4px;
+    padding: 6px 6px 6px 6px;
+}
+</style>
+
+<i18n>
+en:
+    status:
+        packageInvoicing: Build packaging tickets
+        invoicing: Invoicing client
+        stopping: Stopping process
+        done: Ended process
+    of: of
+
+es:
+    status:
+        packageInvoicing: Generación de tickets de empaque
+        invoicing: Facturando a cliente
+        stopping: Deteniendo proceso
+        done: Proceso detenido
+    of: de
+</i18n>
diff --git a/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue b/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
new file mode 100644
index 000000000..c15d56671
--- /dev/null
+++ b/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
@@ -0,0 +1,201 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
+import { storeToRefs } from 'pinia';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import FetchData from 'components/FetchData.vue';
+import VnInputDate from "components/common/VnInputDate.vue";
+
+const { t } = useI18n();
+const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
+
+// invoiceOutGlobalStore state and getters
+const {
+    initialDataLoading,
+    formInitialData,
+
+    invoicing,
+    status,
+} = storeToRefs(invoiceOutGlobalStore);
+
+// invoiceOutGlobalStore actions
+const { makeInvoice, setStatusValue } = invoiceOutGlobalStore;
+
+const clientsToInvoice = ref('all');
+
+const companiesOptions = ref([]);
+
+const printersOptions = ref([]);
+
+const clientsOptions = ref([]);
+
+const formData = ref({
+    companyFk: null,
+    invoiceDate: null,
+    maxShipped: null,
+    clientId: null,
+    printer: null,
+});
+
+const optionsInitialData = computed(() => {
+    return (
+        companiesOptions.value.length > 0 &&
+        printersOptions.value.length > 0 &&
+        clientsOptions.value.length > 0
+    );
+});
+
+const getStatus = computed({
+    get() {
+        return status.value;
+    },
+    set(value) {
+        setStatusValue(value.value);
+    },
+});
+
+const onFetchCompanies = (companies) => {
+    companiesOptions.value = [...companies];
+};
+
+const onFetchPrinters = (printers) => {
+    printersOptions.value = [...printers];
+};
+
+const onFetchClients = (clients) => {
+    clientsOptions.value = [...clients];
+};
+
+onMounted(async () => {
+    await invoiceOutGlobalStore.init();
+    formData.value = { ...formInitialData.value };
+});
+</script>
+
+<template>
+    <FetchData url="Companies" @on-fetch="(data) => onFetchCompanies(data)" auto-load />
+    <FetchData url="Printers" @on-fetch="(data) => onFetchPrinters(data)" auto-load />
+    <FetchData url="Clients" @on-fetch="(data) => onFetchClients(data)" auto-load />
+
+    <QForm
+        v-if="!initialDataLoading && optionsInitialData"
+        @submit="makeInvoice(formData, clientsToInvoice)"
+        class="form-container q-pa-md"
+        style="max-width: 256px"
+    >
+        <div class="column q-gutter-y-md">
+            <QRadio
+                v-model="clientsToInvoice"
+                dense
+                val="all"
+                :label="t('allClients')"
+                :dark="true"
+            />
+            <QRadio
+                v-model="clientsToInvoice"
+                dense
+                val="one"
+                :label="t('oneClient')"
+                :dark="true"
+            />
+            <VnSelectFilter
+                v-if="clientsToInvoice === 'one'"
+                :label="t('client')"
+                v-model="formData.clientId"
+                :options="clientsOptions"
+                option-value="id"
+                option-label="name"
+                hide-selected
+                dense
+                outlined
+                rounded
+            />
+            <VnInputDate
+                v-model="formData.invoiceDate"
+                :label="t('invoiceDate')"
+                dense
+                outlined
+                rounded />
+            <VnInputDate
+                v-model="formData.maxShipped"
+                :label="t('maxShipped')"
+                dense
+                outlined
+                rounded />
+            <VnSelectFilter
+                :label="t('company')"
+                v-model="formData.companyFk"
+                :options="companiesOptions"
+                option-value="id"
+                option-label="code"
+                hide-selected
+                dense
+                outlined
+                rounded
+            />
+            <VnSelectFilter
+                :label="t('printer')"
+                v-model="formData.printer"
+                :options="printersOptions"
+                option-value="id"
+                option-label="name"
+                hide-selected
+                dense
+                outlined
+                rounded
+            />
+        </div>
+
+        <QBtn
+            v-if="!invoicing"
+            :label="t('invoiceOut')"
+            type="submit"
+            color="primary"
+            class="q-mt-md full-width"
+            unelevated
+            rounded
+            dense
+        />
+        <QBtn
+            v-if="invoicing"
+            :label="t('stop')"
+            color="primary"
+            class="q-mt-md full-width"
+            unelevated
+            rounded
+            dense
+            @click="getStatus = 'stopping'"
+        />
+    </QForm>
+</template>
+
+<style scoped>
+.form-container * {
+    max-width: 100%;
+}
+</style>
+
+<i18n>
+en:
+    invoiceDate: Invoice date
+    maxShipped: Max date
+    allClients: All clients
+    oneClient: One client
+    company: Company
+    printer: Printer
+    invoiceOut: Invoice out
+    client: Client
+    stop: Stop
+
+es:
+    invoiceDate: Fecha de factura
+    maxShipped: Fecha límite
+    allClients: Todos los clientes
+    oneClient: Un solo cliente
+    company: Empresa
+    printer: Impresora
+    invoiceOut: Facturar
+    client: Cliente
+    stop: Parar
+</i18n>
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index 137dedba8..292fa2e0a 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -1,8 +1,8 @@
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
+import { exportFile, useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import InvoiceOutSummaryDialog from './Card/InvoiceOutSummaryDialog.vue';
@@ -12,10 +12,11 @@ import InvoiceOutFilter from './InvoiceOutFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 
-const stateStore = useStateStore();
-const router = useRouter();
-const quasar = useQuasar();
 const { t } = useI18n();
+const selectedCards = ref(new Map());
+const quasar = useQuasar();
+const router = useRouter();
+const stateStore = useStateStore();
 
 onMounted(() => (stateStore.rightDrawer = true));
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -32,25 +33,81 @@ function viewSummary(id) {
         },
     });
 }
+
+const toggleIndividualCard = (cardData) => {
+    if (selectedCards.value.has(cardData.id)) {
+        selectedCards.value.delete(cardData.id);
+        return;
+    }
+    selectedCards.value.set(cardData.id, cardData);
+};
+
+const toggleAllCards = (cardsData) => {
+    const allSelected = selectedCards.value.size === cardsData.length;
+
+    if (!allSelected) {
+        // Si no todas las tarjetas están seleccionadas, selecciónalas todas
+        cardsData.forEach((data) => {
+            if (!selectedCards.value.has(data.id)) {
+                selectedCards.value.set(data.id, data);
+            }
+        });
+    } else {
+        // Si todas las tarjetas están seleccionadas, deselecciónalas todas
+        selectedCards.value.clear();
+    }
+};
+
+const downloadCsv = () => {
+    if (selectedCards.value.size === 0) return;
+    const selectedCardsArray = Array.from(selectedCards.value.values());
+    let file;
+    for (var i = 0; i < selectedCardsArray.length; i++) {
+        if (i == 0) file += Object.keys(selectedCardsArray[i]).join(';') + '\n';
+        file +=
+            Object.keys(selectedCardsArray[i])
+                .map(function (key) {
+                    return selectedCardsArray[i][key];
+                })
+                .join(';') + '\n';
+    }
+    const status = exportFile('file.csv', file, {
+        encoding: 'windows-1252',
+        mimeType: 'text/csv;charset=windows-1252;',
+    });
+    if (status === true) {
+        quasar.notify({
+            message: t('fileAllowed'),
+            color: 'positive',
+            icon: 'check',
+        });
+    } else {
+        quasar.notify({
+            message: t('fileDenied'),
+            color: 'negative',
+            icon: 'warning',
+        });
+    }
+};
 </script>
 
 <template>
     <template v-if="stateStore.isHeaderMounted()">
         <Teleport to="#searchbar">
             <VnSearchbar
+                :info="t('youCanSearchByInvoiceReference')"
+                :label="t('searchInvoice')"
                 data-key="InvoiceOutList"
-                :label="t('Search invoice')"
-                :info="t('You can search by invoice reference')"
             />
         </Teleport>
         <Teleport to="#actions-append">
             <div class="row q-gutter-x-sm">
                 <QBtn
-                    flat
                     @click="stateStore.toggleRightDrawer()"
-                    round
                     dense
+                    flat
                     icon="menu"
+                    round
                 >
                     <QTooltip bottom anchor="bottom right">
                         {{ t('globals.collapseMenu') }}
@@ -64,71 +121,128 @@ function viewSummary(id) {
             <InvoiceOutFilter data-key="InvoiceOutList" />
         </QScrollArea>
     </QDrawer>
-    <QPage class="column items-center q-pa-md">
-        <div class="card-list">
-            <VnPaginate
-                data-key="InvoiceOutList"
-                url="InvoiceOuts/filter"
-                order="issued DESC, id DESC"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <CardList
-                        v-for="row of rows"
-                        :key="row.id"
-                        :title="row.ref"
-                        @click="navigate(row.id)"
-                    >
-                        <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
-                            <VnLv
-                                :label="t('invoiceOut.list.shortIssued')"
-                                :title-label="t('invoiceOut.list.issued')"
-                                :value="toDate(row.issued)"
-                            />
-                            <VnLv
-                                :label="t('invoiceOut.list.amount')"
-                                :value="toCurrency(row.amount)"
-                            />
-                            <VnLv
-                                :label="t('invoiceOut.list.client')"
-                                :value="row.clientSocialName"
-                            />
-                            <VnLv
-                                :label="t('invoiceOut.list.shortCreated')"
-                                :title-label="t('invoiceOut.list.created')"
-                                :value="toDate(row.created)"
-                            />
-                            <VnLv
-                                :label="t('invoiceOut.list.company')"
-                                :value="row.companyCode"
-                            />
-                            <VnLv
-                                :label="t('invoiceOut.list.shortDued')"
-                                :title-label="t('invoiceOut.list.dued')"
-                                :value="toDate(row.dued)"
-                            />
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                flat
-                                icon="arrow_circle_right"
-                                @click.stop="navigate(row.id)"
-                            >
-                                <QTooltip>
-                                    {{ t('components.smartCard.openCard') }}
-                                </QTooltip>
-                            </QBtn>
-                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
-                                <QTooltip>
-                                    {{ t('components.smartCard.openSummary') }}
-                                </QTooltip>
-                            </QBtn>
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
+    <QPage>
+        <VnPaginate
+            auto-load
+            data-key="InvoiceOutList"
+            order="issued DESC, id DESC"
+            url="InvoiceOuts/filter"
+        >
+            <template #body="{ rows }">
+                <QToolbar class="bg-vn-dark justify-end">
+                    <div id="st-actions">
+                        <QBtn
+                            @click="downloadCsv()"
+                            class="q-mr-xl"
+                            color="primary"
+                            :disable="selectedCards.size === 0"
+                            :label="t('globals.download')"
+                        />
+                        <!-- <QBtnDropdown
+                            class="q-mr-xl"
+                            color="primary"
+                            :disable="!manageCheckboxes && arrayElements.length < 1"
+                            :label="t('globals.download')"
+                            v-else
+                        >
+                            <QList>
+                                <QItem clickable v-close-popup @click="downloadCsv(rows)">
+                                    <QItemSection>
+                                        <QItemLabel>
+                                            {{
+                                                t('globals.allRows', {
+                                                    numberRows: rows.length,
+                                                })
+                                            }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+
+                                <QItem clickable v-close-popup @click="downloadCsv(rows)">
+                                    <QItemSection>
+                                        <QItemLabel>
+                                            {{
+                                                t('globals.selectRows', {
+                                                    numberRows: rows.length,
+                                                })
+                                            }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </QList>
+                        </QBtnDropdown> -->
+                        <QCheckbox
+                            left-label
+                            :label="t('globals.markAll')"
+                            @click="toggleAllCards(rows)"
+                            :model-value="selectedCards.size === rows.length"
+                            class="q-mr-md"
+                        />
+                    </div>
+                </QToolbar>
+                <div class="flex flex-center q-pa-md">
+                    <div class="card-list">
+                        <CardList
+                            :element="row"
+                            :id="row.id"
+                            :show-checkbox="true"
+                            :is-selected="selectedCards.has(row.id)"
+                            :key="row.id"
+                            :title="row.ref"
+                            @click="navigate(row.id)"
+                            @toggle-card-check="toggleIndividualCard(row)"
+                            v-for="row of rows"
+                        >
+                            <template #list-items>
+                                <VnLv
+                                    :label="t('invoiceOut.list.shortIssued')"
+                                    :title-label="t('invoiceOut.list.issued')"
+                                    :value="toDate(row.issued)"
+                                />
+                                <VnLv
+                                    :label="t('invoiceOut.list.amount')"
+                                    :value="toCurrency(row.amount)"
+                                />
+                                <VnLv
+                                    :label="t('invoiceOut.list.client')"
+                                    :value="row.clientSocialName"
+                                />
+                                <VnLv
+                                    :label="t('invoiceOut.list.shortCreated')"
+                                    :title-label="t('invoiceOut.list.created')"
+                                    :value="toDate(row.created)"
+                                />
+                                <VnLv
+                                    :label="t('invoiceOut.list.company')"
+                                    :value="row.companyCode"
+                                />
+                                <VnLv
+                                    :label="t('invoiceOut.list.shortDued')"
+                                    :title-label="t('invoiceOut.list.dued')"
+                                    :value="toDate(row.dued)"
+                                />
+                            </template>
+                            <template #actions>
+                                <QBtn
+                                    :label="t('components.smartCard.openCard')"
+                                    @click.stop="navigate(row.id)"
+                                    class="bg-vn-dark"
+                                    outline
+                                    type="reset"
+                                />
+                                <QBtn
+                                    :label="t('components.smartCard.openSummary')"
+                                    @click.stop="viewSummary(row.id)"
+                                    color="primary"
+                                    style="margin-top: 15px"
+                                    type="submit"
+                                />
+                            </template>
+                        </CardList>
+                    </div>
+                </div>
+            </template>
+        </VnPaginate>
     </QPage>
 </template>
 
@@ -140,7 +254,14 @@ function viewSummary(id) {
 </style>
 
 <i18n>
+en:
+    searchInvoice: Search issued invoice
+    fileDenied: Browser denied file download...
+    fileAllowed: Successful download of CSV file
+    youCanSearchByInvoiceReference: You can search by invoice reference
 es:
-    Search invoice: Buscar factura emitida
-    You can search by invoice reference: Puedes buscar por referencia de la factura
+    searchInvoice: Buscar factura emitida
+    fileDenied: El navegador denegó la descarga de archivos...
+    fileAllowed: Descarga exitosa de archivo CSV
+    youCanSearchByInvoiceReference: Puedes buscar por referencia de la factura
 </i18n>
diff --git a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
new file mode 100644
index 000000000..63385380e
--- /dev/null
+++ b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
@@ -0,0 +1,356 @@
+<script setup>
+import { onMounted, ref, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import invoiceOutService from 'src/services/invoiceOut.service';
+import { toCurrency } from 'src/filters';
+import { QCheckbox, QBtn } from 'quasar';
+import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
+import VnInputDate from 'components/common/VnInputDate.vue';
+
+const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
+
+const rows = ref([]);
+const { t } = useI18n();
+
+const dateRange = reactive({
+    from: Date.vnFirstDayOfMonth().toISOString(),
+    to: Date.vnLastDayOfMonth().toISOString(),
+});
+
+const selectedCustomerId = ref(0);
+const selectedWorkerId = ref(0);
+
+const filter = ref({
+    company: null,
+    country: null,
+    clientId: null,
+    client: null,
+    amount: null,
+    base: null,
+    ticketId: null,
+    active: null,
+    hasToInvoice: null,
+    verifiedData: null,
+    comercial: null,
+});
+
+const tableColumnComponents = {
+    company: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    country: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    clientId: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: (prop) => selectCustomerId(prop.value),
+    },
+    client: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    amount: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    base: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    ticketId: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    active: {
+        component: QCheckbox,
+        props: (prop) => ({
+            disable: true,
+            'model-value': Boolean(prop.value),
+        }),
+        event: () => {},
+    },
+    hasToInvoice: {
+        component: QCheckbox,
+        props: (prop) => ({
+            disable: true,
+            'model-value': Boolean(prop.value),
+        }),
+        event: () => {},
+    },
+    verifiedData: {
+        component: QCheckbox,
+        props: (prop) => ({
+            disable: true,
+            'model-value': Boolean(prop.value),
+        }),
+        event: () => {},
+    },
+    comercial: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: (prop) => selectWorkerId(prop.row.comercialId),
+    },
+};
+
+const columns = ref([
+    {
+        label: 'company',
+        field: 'company',
+        name: 'company',
+        align: 'left',
+    },
+    {
+        label: 'country',
+        field: 'country',
+        name: 'country',
+        align: 'left',
+    },
+    {
+        label: 'clientId',
+        field: 'clientId',
+        name: 'clientId',
+        align: 'left',
+    },
+    {
+        label: 'client',
+        field: 'clientSocialName',
+        name: 'client',
+        align: 'left',
+    },
+    {
+        label: 'amount',
+        field: 'amount',
+        name: 'amount',
+        align: 'left',
+        format: (value) => toCurrency(value),
+    },
+    {
+        label: 'base',
+        field: 'taxableBase',
+        name: 'base',
+        align: 'left',
+    },
+    {
+        label: 'ticketId',
+        field: 'ticketFk',
+        name: 'ticketId',
+        align: 'left',
+    },
+    {
+        label: 'active',
+        field: 'isActive',
+        name: 'active',
+        align: 'left',
+    },
+    {
+        label: 'hasToInvoice',
+        field: 'hasToInvoice',
+        name: 'hasToInvoice',
+        align: 'left',
+    },
+    {
+        label: 'verifiedData',
+        field: 'isTaxDataChecked',
+        name: 'verifiedData',
+        align: 'left',
+    },
+    {
+        label: 'comercial',
+        field: 'comercialName',
+        name: 'comercial',
+        align: 'left',
+    },
+]);
+
+const downloadCSV = async () => {
+    await invoiceOutGlobalStore.getNegativeBasesCsv(dateRange.from, dateRange.to);
+};
+
+const search = async () => {
+    const and = [];
+    Object.keys(filter.value).forEach((key) => {
+        if (filter.value[key]) {
+            and.push({
+                [key]: filter.value[key],
+            });
+        }
+    });
+    const searchFilter = {
+        limit: 20
+    }
+
+    if (and.length) {
+        searchFilter.where = {
+            and
+        }
+    }
+
+    const params = {
+        ...dateRange,
+        filter: JSON.stringify(searchFilter),
+    };
+    rows.value = await invoiceOutService.getNegativeBases(params);
+};
+
+const refresh = () => {
+    dateRange.from = Date.vnFirstDayOfMonth().toISOString();
+    dateRange.to = Date.vnLastDayOfMonth().toISOString();
+    filter.value = {
+        company: null,
+        country: null,
+        clientId: null,
+        client: null,
+        amount: null,
+        base: null,
+        ticketId: null,
+        active: null,
+        hasToInvoice: null,
+        verifiedData: null,
+        comercial: null,
+    };
+    search();
+};
+
+const selectCustomerId = (id) => {
+    selectedCustomerId.value = id;
+};
+
+const selectWorkerId = (id) => {
+    selectedWorkerId.value = id;
+};
+
+onMounted(async () => {
+    refresh();
+});
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :rows="rows"
+            :columns="columns"
+            hide-bottom
+            row-key="clientId"
+            :pagination="{ rowsPerPage: 0 }"
+            class="full-width q-mt-md"
+        >
+            <template #top-left>
+                <div class="row justify-start items-end">
+                    <VnInputDate
+                        v-model="dateRange.from"
+                        :label="t('invoiceOut.negativeBases.from')"
+                        class="q-mr-md"
+                        dense
+                        lazy-rules
+                        outlined
+                        rounded
+                    />
+                    <VnInputDate
+                        v-model="dateRange.to"
+                        :label="t('invoiceOut.negativeBases.to')"
+                        class="q-mr-md"
+                        dense
+                        lazy-rules
+                        outlined
+                        rounded
+                    />
+                    <QBtn
+                        color="primary"
+                        icon-right="archive"
+                        no-caps
+                        @click="downloadCSV()"
+                    />
+                </div>
+            </template>
+            <template #top-right>
+                <div class="row justify-start items-center">
+                    <span class="q-mr-md text-results">
+                        {{ rows.length }} {{ t('results') }}
+                    </span>
+                    <QBtn
+                        color="primary"
+                        icon-right="search"
+                        no-caps
+                        class="q-mr-sm"
+                        @click="search()"
+                    />
+                    <QBtn color="primary" icon-right="refresh" no-caps @click="refresh" />
+                </div>
+            </template>
+            <template #header="props">
+                <QTr :props="props" class="full-height">
+                    <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                        <div class="column justify-start items-start full-height">
+                            {{ t(`invoiceOut.negativeBases.${col.label}`) }}
+                            <QInput
+                                :class="{
+                                    invisible:
+                                        col.field === 'isActive' ||
+                                        col.field === 'hasToInvoice' ||
+                                        col.field === 'isTaxDataChecked',
+                                }"
+                                dense
+                                outlined
+                                rounded
+                                v-model="filter[col.field]"
+                                type="text"
+                                @keyup.enter="search()"
+                            />
+                        </div>
+                    </QTh>
+                </QTr>
+            </template>
+            <template #body-cell="props">
+                <QTd :props="props">
+                    <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 !== 'active' &&
+                                props.col.name !== 'hasToInvoice' &&
+                                props.col.name !== 'verifiedData'
+                            "
+                            >{{ props.value }}
+                        </template>
+                        <CustomerDescriptorProxy
+                            v-if="props.col.name === 'clientId'"
+                            :id="selectedCustomerId"
+                        />
+                        <WorkerDescriptorProxy
+                            v-if="props.col.name === 'comercial'"
+                            :id="selectedWorkerId"
+                        />
+                    </component>
+                </QTd>
+            </template>
+        </QTable>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.col-content {
+    border-radius: 4px;
+    padding: 6px 6px 6px 6px;
+}
+
+.text-results {
+    color: var(--vn-label);
+}
+</style>
+
+<i18n></i18n>
diff --git a/src/pages/Route/Cmr/CmrFilter.vue b/src/pages/Route/Cmr/CmrFilter.vue
index b8948652a..bab300672 100644
--- a/src/pages/Route/Cmr/CmrFilter.vue
+++ b/src/pages/Route/Cmr/CmrFilter.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInputDate from "components/common/VnInputDate.vue";
 
 const { t } = useI18n();
 const props = defineProps({
@@ -111,35 +112,7 @@ const countries = ref();
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
-                            :label="t('route.cmr.list.shipped')"
-                            v-model="params.shipped"
-                            mask="date"
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="rotate"
-                                        transition-hide="rotate"
-                                    >
-                                        <QDate v-model="params.shipped" minimal>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.close')"
-                                                    color="primary"
-                                                    flat
-                                                    @click="save"
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        <VnInputDate v-model="params.shipped" :label="t('route.cmr.list.shipped')" />
                     </QItemSection>
                 </QItem>
             </QList>
@@ -156,7 +129,7 @@ const countries = ref();
             country: Country
             clientFk: Client id
             shipped: Preparation date
-    
+
     es:
         params:
             cmrFk: Id cmr
diff --git a/src/pages/Shelving/Card/ShelvingCard.vue b/src/pages/Shelving/Card/ShelvingCard.vue
new file mode 100644
index 000000000..221740486
--- /dev/null
+++ b/src/pages/Shelving/Card/ShelvingCard.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+import LeftMenu from 'components/LeftMenu.vue';
+import ShelvingDescriptor from 'pages/Shelving/Card/ShelvingDescriptor.vue';
+
+const stateStore = useStateStore();
+</script>
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
+            <ShelvingDescriptor />
+            <QSeparator />
+            <LeftMenu source="card" />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage>
+            <RouterView></RouterView>
+        </QPage>
+    </QPageContainer>
+</template>
diff --git a/src/pages/Shelving/Card/ShelvingDescriptor.vue b/src/pages/Shelving/Card/ShelvingDescriptor.vue
new file mode 100644
index 000000000..34c374117
--- /dev/null
+++ b/src/pages/Shelving/Card/ShelvingDescriptor.vue
@@ -0,0 +1,71 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import VnLv from 'components/ui/VnLv.vue';
+import useCardDescription from 'composables/useCardDescription';
+import WorkerDescriptorProxy from "pages/Worker/Card/WorkerDescriptorProxy.vue";
+import ShelvingDescriptorMenu from "pages/Shelving/Card/ShelvingDescriptorMenu.vue";
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const { t } = useI18n();
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const filter = {
+    include: [
+        {
+            relation: 'worker',
+            scope: {
+                fields: ['id'],
+                include: {
+                    relation: 'user',
+                    scope: { fields: ['nickname'] },
+                },
+            },
+        },
+        { relation: 'parking' },
+    ],
+};
+const data = ref(useCardDescription());
+const setData = (entity) => (data.value = useCardDescription(entity.code, entity.id));
+</script>
+
+<template>
+    <CardDescriptor
+        module="Shelving"
+        :url="`Shelvings/${entityId}`"
+        :filter="filter"
+        :title="data.title"
+        :subtitle="data.subtitle"
+        data-key="Shelvings"
+        @on-fetch="setData"
+    >
+        <template #body="{ entity }">
+            <VnLv :label="t('shelving.summary.code')" :value="entity.code" />
+            <VnLv :label="t('shelving.summary.parking')" :value="entity.parking?.code" />
+            <VnLv v-if="entity.worker" :label="t('shelving.summary.worker')">
+                <template #value>
+                    <span class="link">
+                        {{ entity.worker?.user?.nickname }}
+                        <WorkerDescriptorProxy :id="entity.worker?.id" />
+                    </span>
+                </template>
+            </VnLv>
+        </template>
+        <template #menu="{entity}">
+            <ShelvingDescriptorMenu :shelving="entity" />
+        </template>
+    </CardDescriptor>
+</template>
diff --git a/src/pages/Shelving/Card/ShelvingDescriptorMenu.vue b/src/pages/Shelving/Card/ShelvingDescriptorMenu.vue
new file mode 100644
index 000000000..6290cda75
--- /dev/null
+++ b/src/pages/Shelving/Card/ShelvingDescriptorMenu.vue
@@ -0,0 +1,61 @@
+<script setup>
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import VnConfirm from 'components/ui/VnConfirm.vue';
+
+const $props = defineProps({
+    shelving: {
+        type: Object,
+        required: true,
+    },
+});
+
+const router = useRouter();
+const quasar = useQuasar();
+const { t } = useI18n();
+
+function confirmRemove() {
+    quasar
+        .dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('confirmDeletion'),
+                message: t('confirmDeletionMessage'),
+                promise: remove,
+            },
+        })
+        .onOk(async () => await router.push({ name: 'ShelvingList' }));
+}
+
+async function remove() {
+    if (!$props.shelving.value.id) {
+        return;
+    }
+    await axios.delete(`Shelvings/${$props.shelving.value.id}`);
+    quasar.notify({
+        message: t('globals.dataDeleted'),
+        type: 'positive',
+    });
+}
+</script>
+<template>
+    <QItem @click="confirmRemove()" v-ripple clickable>
+        <QItemSection avatar>
+            <QIcon name="delete" />
+        </QItemSection>
+        <QItemSection>{{ t('deleteShelving') }}</QItemSection>
+    </QItem>
+</template>
+
+<i18n>
+{
+    "en": {
+        "deleteShelving": "Delete Shelving"
+    },
+    "es": {
+        "deleteShelving": "Eliminar carro"
+    }
+}
+</i18n>
diff --git a/src/pages/Shelving/Card/ShelvingDescriptorProxy.vue b/src/pages/Shelving/Card/ShelvingDescriptorProxy.vue
new file mode 100644
index 000000000..8023271b0
--- /dev/null
+++ b/src/pages/Shelving/Card/ShelvingDescriptorProxy.vue
@@ -0,0 +1,15 @@
+<script setup>
+import ShelvingDescriptor from "pages/Shelving/Card/ShelvingDescriptor.vue";
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+<template>
+    <QPopupProxy>
+        <ShelvingDescriptor v-if="$props.id" :id="$props.id" />
+    </QPopupProxy>
+</template>
diff --git a/src/pages/Shelving/Card/ShelvingFilter.vue b/src/pages/Shelving/Card/ShelvingFilter.vue
new file mode 100644
index 000000000..423402f89
--- /dev/null
+++ b/src/pages/Shelving/Card/ShelvingFilter.vue
@@ -0,0 +1,120 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const emit = defineEmits(['search']);
+
+const workers = ref();
+const parkings = ref();
+
+function setWorkers(data) {
+    workers.value = data;
+}
+
+function setParkings(data) {
+    parkings.value = data;
+}
+</script>
+
+<template>
+    <FetchData
+        url="Parkings"
+        :filter="{ fields: ['id', 'code'] }"
+        sort-by="code ASC"
+        @on-fetch="setParkings"
+        auto-load
+    />
+    <FetchData
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        sort-by="firstName ASC"
+        @on-fetch="setWorkers"
+        auto-load
+    />
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true" @search="emit('search')">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params }">
+            <QList dense>
+                <QItem class="q-my-sm">
+                    <QItemSection v-if="!parkings">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="parkings">
+                        <QSelect
+                            dense
+                            outlined
+                            rounded
+                            :label="t('params.parkingFk')"
+                            v-model="params.parkingFk"
+                            :options="parkings"
+                            option-value="id"
+                            option-label="code"
+                            emit-value
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection v-if="!workers">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="workers">
+                        <QSelect
+                            dense
+                            outlined
+                            rounded
+                            :label="t('params.userFk')"
+                            v-model="params.userFk"
+                            :options="workers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-md">
+                    <QItemSection>
+                        <QCheckbox
+                            v-model="params.isRecyclable"
+                            :label="t('params.isRecyclable')"
+                            toggle-indeterminate
+                        />
+                    </QItemSection>
+                </QItem>
+            </QList>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        parkingFk: Parking
+        userFk: Worker
+        isRecyclable: Recyclable
+es:
+    params:
+        parkingFk: Parking
+        userFk: Trabajador
+        isRecyclable: Reciclable
+</i18n>
diff --git a/src/pages/Shelving/Card/ShelvingForm.vue b/src/pages/Shelving/Card/ShelvingForm.vue
new file mode 100644
index 000000000..e30ac1939
--- /dev/null
+++ b/src/pages/Shelving/Card/ShelvingForm.vue
@@ -0,0 +1,126 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const shelvingId = route.params?.id || null;
+const isNew = Boolean(!shelvingId);
+const defaultInitialData = {
+    parkingFk: null,
+    priority: 0,
+    code: null,
+    isRecyclable: false,
+}
+
+const parkingFilter = { fields: ['id', 'code'] };
+const parkingList = ref([]);
+const parkingListCopy = ref([]);
+
+const setParkingList = (data) => {
+    parkingList.value = data;
+    parkingListCopy.value = data;
+};
+
+const parkingSelectFilter = {
+    options: parkingList,
+    filterFn: (options, value) => {
+        const search = value.trim().toLowerCase();
+
+        if (!search || search === '') {
+            return parkingListCopy.value;
+        }
+
+        return options.value.filter((option) =>
+            option.code.toLowerCase().startsWith(search)
+        );
+    },
+};
+
+const shelvingFilter = {
+    include: [
+        {
+            relation: 'worker',
+            scope: {
+                fields: ['id'],
+                include: {
+                    relation: 'user',
+                    scope: { fields: ['nickname'] },
+                },
+            },
+        },
+        { relation: 'parking' },
+    ],
+};
+</script>
+<template>
+    <QToolbar class="bg-vn-dark justify-end">
+        <div id="st-data"></div>
+        <QSpace />
+        <div id="st-actions"></div>
+    </QToolbar>
+    <FetchData
+        url="Parkings"
+        :filter="parkingFilter"
+        @on-fetch="setParkingList"
+        auto-load
+    />
+    <FormModel
+        :url="isNew ? null : `Shelvings/${shelvingId}`"
+        :url-create="isNew ? 'Shelvings' : null"
+        :observe-form-changes="!isNew"
+        :filter="shelvingFilter"
+        model="shelving"
+        :auto-load="!isNew"
+        :form-initial-data="defaultInitialData"
+    >
+        <template #form="{ data, validate, filter }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        v-model="data.code"
+                        :label="t('shelving.basicData.code')"
+                        :rules="validate('Shelving.code')"
+                    />
+                </div>
+                <div class="col">
+                    <QSelect
+                        v-model="data.parkingFk"
+                        :options="parkingList"
+                        option-value="id"
+                        option-label="code"
+                        emit-value
+                        :label="t('shelving.basicData.parking')"
+                        map-options
+                        use-input
+                        @filter="
+                            (value, update) => filter(value, update, parkingSelectFilter)
+                        "
+                        :rules="validate('Shelving.parkingFk')"
+                        :input-debounce="0"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        v-model="data.priority"
+                        :label="t('shelving.basicData.priority')"
+                        :rules="validate('Shelving.priority')"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        v-model="data.isRecyclable"
+                        :label="t('shelving.basicData.recyclable')"
+                        :rules="validate('Shelving.isRecyclable')"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
diff --git a/src/pages/Shelving/Card/ShelvingLog.vue b/src/pages/Shelving/Card/ShelvingLog.vue
new file mode 100644
index 000000000..8f355d2ca
--- /dev/null
+++ b/src/pages/Shelving/Card/ShelvingLog.vue
@@ -0,0 +1,6 @@
+<script setup>
+import VnLog from 'src/components/common/VnLog.vue';
+</script>
+<template>
+    <VnLog model="Shelving" url="/ShelvingLogs"></VnLog>
+</template>
diff --git a/src/pages/Shelving/Card/ShelvingSearchbar.vue b/src/pages/Shelving/Card/ShelvingSearchbar.vue
new file mode 100644
index 000000000..89a4de01e
--- /dev/null
+++ b/src/pages/Shelving/Card/ShelvingSearchbar.vue
@@ -0,0 +1,20 @@
+<script setup>
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import {useI18n} from "vue-i18n";
+const { t } = useI18n();
+</script>
+
+<template>
+    <VnSearchbar
+        data-key="ShelvingList"
+        :label="t('Search shelving')"
+        :info="t('You can search by search reference')"
+    />
+</template>
+
+<style scoped lang="scss"></style>
+<i18n>
+es:
+    Search shelving: Buscar carros
+    You can search by shelving reference: Puedes buscar por referencia del carro
+</i18n>
diff --git a/src/pages/Shelving/Card/ShelvingSummary.vue b/src/pages/Shelving/Card/ShelvingSummary.vue
new file mode 100644
index 000000000..f1f914385
--- /dev/null
+++ b/src/pages/Shelving/Card/ShelvingSummary.vue
@@ -0,0 +1,110 @@
+<script setup>
+import { computed, onMounted, onUnmounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+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';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+const route = useRoute();
+const stateStore = useStateStore();
+const router = useRouter();
+const { t } = useI18n();
+
+const entityId = computed(() => $props.id || route.params.id);
+const isDialog = Boolean($props.id);
+const hideRightDrawer = () => {
+    if (!isDialog) {
+        stateStore.rightDrawer = false;
+    }
+}
+onMounted(hideRightDrawer);
+onUnmounted(hideRightDrawer);
+const filter = {
+    include: [
+        {
+            relation: 'worker',
+            scope: {
+                fields: ['id'],
+                include: {
+                    relation: 'user',
+                    scope: { fields: ['nickname'] },
+                },
+            },
+        },
+        { relation: 'parking' },
+    ],
+};
+</script>
+
+<template>
+    <template v-if="!isDialog && stateStore.isHeaderMounted()">
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
+    <div class="q-pa-md">
+        <CardSummary ref="summary" :url="`Shelvings/${entityId}`" :filter="filter">
+            <template #header="{ entity }">
+                <div>{{ entity.code }}</div>
+            </template>
+            <template #body="{ entity }">
+                <QCard class="vn-one">
+                    <div class="header">
+                        {{ t('shelving.pageTitles.basicData') }}
+                    </div>
+                    <VnLv :label="t('shelving.summary.code')" :value="entity.code" />
+                    <VnLv
+                        :label="t('shelving.summary.parking')"
+                        :value="entity.parking?.code"
+                    />
+                    <VnLv
+                        :label="t('shelving.summary.priority')"
+                        :value="entity.priority"
+                    />
+                    <VnLv
+                        :label="t('shelving.summary.worker')"
+                        :value="entity.worker?.user?.nickname"
+                    />
+                    <VnLv
+                        :label="t('shelving.summary.recyclable')"
+                        :value="entity.isRecyclable"
+                    />
+                </QCard>
+            </template>
+        </CardSummary>
+    </div>
+    <QDrawer
+        v-if="!isDialog"
+        v-model="stateStore.rightDrawer"
+        side="right"
+        :width="256"
+        show-if-above
+    >
+        <QScrollArea class="fit text-grey-8">
+            <ShelvingFilter
+                data-key="ShelvingList"
+                @search="router.push({ name: 'ShelvingList' })"
+            />
+        </QScrollArea>
+    </QDrawer>
+</template>
diff --git a/src/pages/Shelving/Card/ShelvingSummaryDialog.vue b/src/pages/Shelving/Card/ShelvingSummaryDialog.vue
new file mode 100644
index 000000000..783e47395
--- /dev/null
+++ b/src/pages/Shelving/Card/ShelvingSummaryDialog.vue
@@ -0,0 +1,29 @@
+<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>
diff --git a/src/pages/Shelving/ShelvingList.vue b/src/pages/Shelving/ShelvingList.vue
new file mode 100644
index 000000000..71b3a6ccf
--- /dev/null
+++ b/src/pages/Shelving/ShelvingList.vue
@@ -0,0 +1,138 @@
+<script setup>
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import { useStateStore } from 'stores/useStateStore';
+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 ShelvingSearchbar from 'pages/Shelving/Card/ShelvingSearchbar.vue';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const quasar = useQuasar();
+const { t } = useI18n();
+const filter = {
+    include: [{ relation: 'parking' }],
+};
+
+onMounted(() => (stateStore.rightDrawer = true));
+onUnmounted(() => (stateStore.rightDrawer = false));
+
+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':
+            return { code: { like: `%${value}%` } };
+        case 'parkingFk':
+        case 'userFk':
+        case 'isRecyclable':
+            return { [param]: value };
+    }
+}
+</script>
+
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <ShelvingSearchbar />
+        </Teleport>
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <ShelvingFilter data-key="ShelvingList" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <div class="card-list">
+            <VnPaginate
+                data-key="ShelvingList"
+                url="Shelvings"
+                :filter="filter"
+                :expr-builder="exprBuilder"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :id="row.id"
+                        :title="row.code"
+                        @click="navigate(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv
+                                :label="t('shelving.list.parking')"
+                                :title-label="t('shelving.list.parking')"
+                                :value="row.parking?.code"
+                            />
+                            <VnLv
+                                :label="t('shelving.list.priority')"
+                                :value="row?.priority"
+                            />
+                        </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)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+        <QPageSticky :offset="[20, 20]">
+            <RouterLink :to="{ name: 'ShelvingCreate' }">
+                <QBtn fab icon="add" color="primary" />
+                <QTooltip>
+                    {{ t('shelving.list.newShelving') }}
+                </QTooltip>
+            </RouterLink>
+        </QPageSticky>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+</style>
diff --git a/src/pages/Shelving/ShelvingMain.vue b/src/pages/Shelving/ShelvingMain.vue
new file mode 100644
index 000000000..66ce78f23
--- /dev/null
+++ b/src/pages/Shelving/ShelvingMain.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const stateStore = useStateStore();
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
+            <LeftMenu />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
+</template>
diff --git a/src/pages/Supplier/Card/SupplierCard.vue b/src/pages/Supplier/Card/SupplierCard.vue
new file mode 100644
index 000000000..cf94c9e8d
--- /dev/null
+++ b/src/pages/Supplier/Card/SupplierCard.vue
@@ -0,0 +1,63 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+
+const stateStore = useStateStore();
+const { t } = useI18n();
+</script>
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="SuppliersList"
+                :limit="20"
+                :label="t('Search suppliers')"
+            />
+        </Teleport>
+    </template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
+            <!-- Aca iría left menu y descriptor -->
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage>
+            <QToolbar class="bg-vn-dark justify-end">
+                <div id="st-data"></div>
+                <QSpace />
+                <div id="st-actions"></div>
+            </QToolbar>
+            <div class="q-pa-md"><RouterView></RouterView></div>
+        </QPage>
+    </QPageContainer>
+</template>
+
+<style lang="scss">
+.q-scrollarea__content {
+    max-width: 100%;
+}
+</style>
+
+<style lang="scss" scoped>
+.descriptor {
+    max-width: 256px;
+
+    h5 {
+        margin: 0 15px;
+    }
+
+    .header {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .q-card__actions {
+        justify-content: center;
+    }
+
+    #descriptor-skeleton .q-card__actions {
+        justify-content: space-between;
+    }
+}
+</style>
diff --git a/src/pages/Supplier/Card/SupplierDescriptor.vue b/src/pages/Supplier/Card/SupplierDescriptor.vue
new file mode 100644
index 000000000..910d36489
--- /dev/null
+++ b/src/pages/Supplier/Card/SupplierDescriptor.vue
@@ -0,0 +1,94 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import useCardDescription from 'src/composables/useCardDescription';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const { t } = useI18n();
+
+const filter = {
+    fields: [
+        'id',
+        'name',
+        'nickname',
+        'nif',
+        'payMethodFk',
+        'payDemFk',
+        'payDay',
+        'isActive',
+        'isSerious',
+        'isTrucker',
+        'account',
+    ],
+    include: [
+        {
+            relation: 'payMethod',
+            scope: {
+                fields: ['id', 'name'],
+            },
+        },
+        {
+            relation: 'payDem',
+            scope: {
+                fields: ['id', 'payDem'],
+            },
+        },
+        {
+            relation: 'client',
+            scope: {
+                fields: ['id', 'fi'],
+            },
+        },
+    ],
+};
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const data = ref(useCardDescription());
+const setData = (entity) => {
+    data.value = useCardDescription(entity.ref, entity.id);
+};
+</script>
+
+<template>
+    <CardDescriptor
+        module="Supplier"
+        :url="`Suppliers/${entityId}`"
+        :title="data.title"
+        :subtitle="data.subtitle"
+        :filter="filter"
+        @on-fetch="setData"
+        data-key="Supplier"
+    >
+        <template #body="{ entity }">
+            <VnLv :label="t('supplier.summary.taxNumber')" :value="entity.nif" />
+            <VnLv label="Alias" :value="entity.nickname" />
+            <VnLv
+                :label="t('supplier.summary.payMethod')"
+                :value="entity.payMethod.name"
+            />
+            <VnLv
+                :label="t('supplier.summary.payDeadline')"
+                :value="entity.payDem.payDem"
+            />
+            <VnLv :label="t('supplier.summary.payDay')" :value="entity.payDay" />
+            <VnLv :label="t('supplier.summary.account')" :value="entity.account" />
+        </template>
+    </CardDescriptor>
+</template>
+<i18n>
+
+</i18n>
diff --git a/src/pages/Supplier/Card/SupplierDescriptorProxy.vue b/src/pages/Supplier/Card/SupplierDescriptorProxy.vue
new file mode 100644
index 000000000..b730a39dd
--- /dev/null
+++ b/src/pages/Supplier/Card/SupplierDescriptorProxy.vue
@@ -0,0 +1,16 @@
+<script setup>
+import SupplierDescriptor from './SupplierDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <QPopupProxy>
+        <SupplierDescriptor v-if="$props.id" :id="$props.id" />
+    </QPopupProxy>
+</template>
diff --git a/src/pages/Supplier/Card/SupplierSummary.vue b/src/pages/Supplier/Card/SupplierSummary.vue
new file mode 100644
index 000000000..e9fbffe96
--- /dev/null
+++ b/src/pages/Supplier/Card/SupplierSummary.vue
@@ -0,0 +1,188 @@
+<script setup>
+import { onMounted, ref, computed, onUpdated } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import CardSummary from 'components/ui/CardSummary.vue';
+import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import { getUrl } from 'src/composables/getUrl';
+import { useRole } from 'src/composables/useRole';
+import { dashIfEmpty } from 'src/filters';
+
+onUpdated(() => summaryRef.value.fetch());
+
+const route = useRoute();
+const roleState = useRole();
+const { t } = useI18n();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const entityId = computed(() => $props.id || route.params.id);
+
+const summaryRef = ref();
+const supplier = ref();
+const supplierUrl = ref();
+
+onMounted(async () => {
+    await roleState.fetch();
+    supplierUrl.value = (await getUrl('supplier/')) + entityId.value;
+});
+
+async function setData(data) {
+    if (data) {
+        supplier.value = data;
+    }
+}
+
+const isAdministrative = computed(() => {
+    return roleState.hasAny(['administrative']);
+});
+</script>
+
+<template>
+    <CardSummary
+        ref="summaryRef"
+        :url="`Suppliers/${entityId}/getSummary`"
+        @on-fetch="(data) => setData(data)"
+    >
+        <template #header-left>
+            <a v-if="isAdministrative" class="header link" :href="supplierUrl">
+                <QIcon name="open_in_new" color="white" size="25px" />
+            </a>
+        </template>
+        <template #header>
+            <span>{{ supplier.name }} - {{ supplier.id }}</span>
+        </template>
+
+        <template #body>
+            <QCard class="vn-one">
+                <a v-if="isAdministrative" class="header link" :href="supplierUrl">
+                    {{ t('globals.summary.basicData') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <span v-else> {{ t('globals.summary.basicData') }}</span>
+                <VnLv label="Id" :value="supplier.id" />
+                <VnLv label="Alias" :value="supplier.nickname" />
+                <VnLv :label="t('supplier.summary.responsible')">
+                    <template #value>
+                        <span class="link">
+                            {{ dashIfEmpty(supplier.worker?.user?.nickname) }}
+                            <WorkerDescriptorProxy
+                                v-if="supplier.worker?.user?.id"
+                                :id="supplier.worker?.user?.id"
+                            />
+                        </span>
+                    </template>
+                </VnLv>
+                <VnLv :label="t('supplier.summary.notes')" class="q-mb-xs">
+                    <template #value>
+                        <span> {{ dashIfEmpty(supplier.note) }} </span>
+                    </template>
+                </VnLv>
+
+                <VnLv :label="t('supplier.summary.verified')" class="q-mb-xs">
+                    <template #value>
+                        <QCheckbox
+                            v-model="supplier.isSerious"
+                            dense
+                            disable
+                            class="full-width q-mb-xs"
+                        />
+                    </template>
+                </VnLv>
+                <VnLv :label="t('supplier.summary.isActive')" class="q-mb-xs">
+                    <template #value>
+                        <QCheckbox
+                            v-model="supplier.isActive"
+                            dense
+                            disable
+                            class="full-width q-mb-xs"
+                        />
+                    </template>
+                </VnLv>
+            </QCard>
+            <QCard class="vn-one">
+                <a v-if="isAdministrative" class="header link" :href="supplierUrl">
+                    {{ t('supplier.summary.billingData') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <span v-else> {{ t('supplier.summary.billingData') }}</span>
+                <VnLv
+                    :label="t('supplier.summary.payMethod')"
+                    :value="supplier.payMethod?.name"
+                    dash
+                />
+                <VnLv
+                    :label="t('supplier.summary.payDeadline')"
+                    :value="supplier.payDem?.payDem"
+                    dash
+                />
+                <VnLv :label="t('supplier.summary.payDay')" :value="supplier.payDay" />
+                <VnLv :label="t('supplier.summary.account')" :value="supplier.account" />
+            </QCard>
+            <QCard class="vn-one">
+                <a v-if="isAdministrative" class="header link" :href="supplierUrl">
+                    {{ t('supplier.summary.fiscalData') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <span v-else> {{ t('supplier.summary.fiscalData') }}</span>
+                <VnLv
+                    :label="t('supplier.summary.sageTaxType')"
+                    :value="supplier.sageTaxType?.vat"
+                    dash
+                />
+                <VnLv
+                    :label="t('supplier.summary.sageTransactionType')"
+                    :value="supplier.sageTransactionType?.transaction"
+                    dash
+                />
+                <VnLv
+                    :label="t('supplier.summary.sageWithholding')"
+                    :value="supplier.sageWithholding?.withholding"
+                    dash
+                />
+                <VnLv
+                    :label="t('supplier.summary.supplierActivity')"
+                    :value="supplier.supplierActivity?.name"
+                    dash
+                />
+                <VnLv
+                    :label="t('supplier.summary.healthRegister')"
+                    :value="supplier.healthRegister"
+                />
+            </QCard>
+            <QCard class="vn-one">
+                <a v-if="isAdministrative" class="header link" :href="supplierUrl">
+                    {{ t('supplier.summary.fiscalAddress') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <span v-else> {{ t('supplier.summary.fiscalAddress') }}</span>
+                <VnLv :label="t('supplier.summary.socialName')" :value="supplier.name" />
+                <VnLv :label="t('supplier.summary.taxNumber')" :value="supplier.nif" />
+                <VnLv :label="t('supplier.summary.street')" :value="supplier.street" />
+                <VnLv :label="t('supplier.summary.city')" :value="supplier.city" />
+                <VnLv
+                    :label="t('supplier.summary.postCode')"
+                    :value="supplier.postCode"
+                />
+                <VnLv
+                    :label="t('supplier.summary.province')"
+                    :value="supplier.province?.name"
+                    dash
+                />
+                <VnLv
+                    :label="t('supplier.summary.country')"
+                    :value="supplier.country?.country"
+                    dash
+                />
+            </QCard>
+        </template>
+    </CardSummary>
+</template>
+<style lang="scss" scoped></style>
diff --git a/src/pages/Supplier/Card/SupplierSummaryDialog.vue b/src/pages/Supplier/Card/SupplierSummaryDialog.vue
new file mode 100644
index 000000000..6353caa38
--- /dev/null
+++ b/src/pages/Supplier/Card/SupplierSummaryDialog.vue
@@ -0,0 +1,29 @@
+<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>
diff --git a/src/pages/Supplier/SupplierCreate.vue b/src/pages/Supplier/SupplierCreate.vue
new file mode 100644
index 000000000..9b792483b
--- /dev/null
+++ b/src/pages/Supplier/SupplierCreate.vue
@@ -0,0 +1,61 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { reactive } from 'vue';
+import { useStateStore } from 'stores/useStateStore';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+
+const { t } = useI18n();
+const stateStore = useStateStore();
+
+const newSupplierForm = reactive({
+    name: null,
+});
+</script>
+
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="SuppliersList"
+                :limit="20"
+                :label="t('Search suppliers')"
+            />
+        </Teleport>
+    </template>
+
+    <QPage>
+        <QToolbar class="bg-vn-dark justify-end">
+            <div id="st-data"></div>
+            <QSpace />
+            <div id="st-actions"></div>
+        </QToolbar>
+        <FormModel
+            url-create="Suppliers/newSupplier"
+            model="supplier"
+            :form-initial-data="newSupplierForm"
+        >
+            <template #form="{ data }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput
+                            v-model="data.name"
+                            :label="t('supplier.create.supplierName')"
+                        />
+                    </div>
+                </VnRow>
+            </template>
+        </FormModel>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.card {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    background-color: var(--vn-dark);
+    padding: 40px;
+}
+</style>
diff --git a/src/pages/Supplier/SupplierList.vue b/src/pages/Supplier/SupplierList.vue
new file mode 100644
index 000000000..ea7bc3cb0
--- /dev/null
+++ b/src/pages/Supplier/SupplierList.vue
@@ -0,0 +1,111 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+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 { useQuasar } from 'quasar';
+import SupplierSummaryDialog from './Card/SupplierSummaryDialog.vue';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const quasar = useQuasar();
+const { t } = useI18n();
+
+function navigate(id) {
+    router.push({ path: `/supplier/${id}` });
+}
+
+const redirectToCreateView = () => {
+    router.push({ name: 'SupplierCreate' });
+};
+
+const viewSummary = (id) => {
+    quasar.dialog({
+        component: SupplierSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
+};
+</script>
+
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="SuppliersList"
+                :limit="20"
+                :label="t('Search suppliers')"
+            />
+        </Teleport>
+    </template>
+
+    <QPage class="column items-center q-pa-md">
+        <div class="card-list">
+            <VnPaginate data-key="SuppliersList" url="Suppliers/filter" auto-load>
+                <template #body="{ rows }">
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="row.socialName"
+                        :id="row.id"
+                        @click="navigate(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv label="NIF/CIF" :value="row.nif" />
+                            <VnLv label="Alias" :value="row.nickname" />
+                            <VnLv
+                                :label="t('supplier.list.payMethod')"
+                                :value="row.payMethod"
+                            />
+                            <VnLv
+                                :label="t('supplier.list.payDeadline')"
+                                :title-label="t('invoiceOut.list.created')"
+                                :value="row.payDem"
+                            />
+                            <VnLv
+                                :label="t('supplier.list.payDay')"
+                                :value="row.payDay"
+                            />
+                            <VnLv
+                                :label="t('supplier.list.account')"
+                                :value="row.account"
+                            />
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id)"
+                                color="primary"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+        <QPageSticky :offset="[20, 20]">
+            <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
+            <QTooltip>
+                {{ t('supplier.list.newSupplier') }}
+            </QTooltip>
+        </QPageSticky>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+</style>
+
+<i18n>
+en:
+    Search suppliers: Search suppliers
+
+es:
+    Search suppliers: Buscar proveedores
+</i18n>
diff --git a/src/pages/Supplier/SupplierMain.vue b/src/pages/Supplier/SupplierMain.vue
new file mode 100644
index 000000000..66ce78f23
--- /dev/null
+++ b/src/pages/Supplier/SupplierMain.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const stateStore = useStateStore();
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
+            <LeftMenu />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
+</template>
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index 5c4c79a4f..cfc35c032 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -208,7 +208,7 @@ async function changeState(value) {
                     :label="t('ticket.summary.landed')"
                     :value="toDate(ticket.landed)"
                 />
-                <VnLv :label="t('ticket.summary.packages')" :value="ticket.packages" />
+                <VnLv :label="t('global.packages')" :value="ticket.packages" />
                 <VnLv :value="ticket.address.phone">
                     <template #label>
                         {{ t('ticket.summary.consigneePhone') }}
@@ -276,7 +276,7 @@ async function changeState(value) {
                             <QTh auto-width>{{ t('ticket.summary.description') }}</QTh>
                             <QTh auto-width>{{ t('ticket.summary.price') }}</QTh>
                             <QTh auto-width>{{ t('ticket.summary.discount') }}</QTh>
-                            <QTh auto-width>{{ t('ticket.summary.amount') }}</QTh>
+                            <QTh auto-width>{{ t('globals.amount') }}</QTh>
                             <QTh auto-width>{{ t('ticket.summary.packing') }}</QTh>
                         </QTr>
                     </template>
@@ -400,7 +400,7 @@ async function changeState(value) {
                 v-if="ticket.packagings.length > 0 || ticket.services.length > 0"
             >
                 <a class="header link" :href="ticketUrl + 'package'">
-                    {{ t('ticket.summary.packages') }}
+                    {{ t('globals.packages') }}
                     <QIcon name="open_in_new" color="primary" />
                 </a>
                 <QTable :rows="ticket.packagings" flat>
@@ -431,7 +431,7 @@ async function changeState(value) {
                             <QTh auto-width>{{ t('ticket.summary.description') }}</QTh>
                             <QTh auto-width>{{ t('ticket.summary.price') }}</QTh>
                             <QTh auto-width>{{ t('ticket.summary.taxClass') }}</QTh>
-                            <QTh auto-width>{{ t('ticket.summary.amount') }}</QTh>
+                            <QTh auto-width>{{ t('globals.amount') }}</QTh>
                         </QTr>
                     </template>
                     <template #body="props">
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index aa98b9564..69f0b1c11 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import toDateString from 'filters/toDateString';
+import VnInputDate from "components/common/VnInputDate.vue";
 
 const { t } = useI18n();
 const props = defineProps({
@@ -71,69 +72,10 @@ const warehouses = ref();
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput v-model="params.from" :label="t('From')" mask="date">
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.from" landscape>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.cancel')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                                <QBtn
-                                                    :label="t('globals.confirm')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        <VnInputDate v-model="params.from" :label="t('From')" />
                     </QItemSection>
                     <QItemSection>
-                        <QInput v-model="params.to" :label="t('To')" mask="date">
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.to" landscape>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.cancel')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                                <QBtn
-                                                    :label="t('globals.confirm')"
-                                                    color="primary"
-                                                    flat
-                                                    @click="save"
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        <VnInputDate v-model="params.to" :label="t('To')" />
                     </QItemSection>
                 </QItem>
                 <QItem>
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index 5826423d1..7d7429630 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -87,6 +87,7 @@ function viewSummary(id) {
                         v-for="row of rows"
                         :key="row.id"
                         :id="row.id"
+                        :title="`${row.nickname} (${row.id})`"
                         @click="navigate(row.id)"
                     >
                         <template #list-items>
@@ -120,11 +121,11 @@ function viewSummary(id) {
                             />
                         </template>
                         <template #actions>
-                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
-                                <QTooltip>
-                                    {{ t('components.smartCard.openSummary') }}
-                                </QTooltip>
-                            </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id)"
+                                color="primary"
+                            />
                         </template>
                     </CardList>
                 </template>
diff --git a/src/pages/Travel/Card/TravelCard.vue b/src/pages/Travel/Card/TravelCard.vue
new file mode 100644
index 000000000..6309c14ab
--- /dev/null
+++ b/src/pages/Travel/Card/TravelCard.vue
@@ -0,0 +1,51 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+
+const stateStore = useStateStore();
+</script>
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
+            <!-- Aca iría left menu y descriptor -->
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage>
+            <QToolbar class="bg-vn-dark justify-end">
+                <div id="st-data"></div>
+                <QSpace />
+                <div id="st-actions"></div>
+            </QToolbar>
+            <div class="q-pa-md"><RouterView></RouterView></div>
+        </QPage>
+    </QPageContainer>
+</template>
+
+<style lang="scss">
+.q-scrollarea__content {
+    max-width: 100%;
+}
+</style>
+
+<style lang="scss" scoped>
+.descriptor {
+    max-width: 256px;
+
+    h5 {
+        margin: 0 15px;
+    }
+
+    .header {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .q-card__actions {
+        justify-content: center;
+    }
+
+    #descriptor-skeleton .q-card__actions {
+        justify-content: space-between;
+    }
+}
+</style>
diff --git a/src/pages/Travel/Card/TravelDescriptor.vue b/src/pages/Travel/Card/TravelDescriptor.vue
new file mode 100644
index 000000000..6a45710ad
--- /dev/null
+++ b/src/pages/Travel/Card/TravelDescriptor.vue
@@ -0,0 +1,80 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { toDate } from 'src/filters';
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import useCardDescription from 'src/composables/useCardDescription';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const { t } = useI18n();
+
+const filter = {
+    fields: [
+        'id',
+        'ref',
+        'shipped',
+        'landed',
+        'totalEntries',
+        'warehouseInFk',
+        'warehouseOutFk',
+        'cargoSupplierFk',
+    ],
+    include: [
+        {
+            relation: 'warehouseIn',
+            scope: {
+                fields: ['name'],
+            },
+        },
+        {
+            relation: 'warehouseOut',
+            scope: {
+                fields: ['name'],
+            },
+        },
+    ],
+};
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const data = ref(useCardDescription());
+
+const setData = (entity) => {
+    data.value = useCardDescription(entity.ref, entity.id);
+};
+</script>
+
+<template>
+    <CardDescriptor
+        module="Travel"
+        :url="`Travels/${entityId}`"
+        :title="data.title"
+        :subtitle="data.subtitle"
+        :filter="filter"
+        @on-fetch="setData"
+        data-key="travelData"
+    >
+        <template #body="{ entity }">
+            <VnLv :label="t('globals.wareHouseIn')" :value="entity.warehouseIn.name" />
+            <VnLv :label="t('globals.wareHouseOut')" :value="entity.warehouseOut.name" />
+            <VnLv :label="t('globals.shipped')" :value="toDate(entity.shipped)" />
+            <VnLv :label="t('globals.landed')" :value="toDate(entity.landed)" />
+            <VnLv :label="t('globals.totalEntries')" :value="entity.totalEntries" />
+        </template>
+    </CardDescriptor>
+</template>
+<i18n>
+
+</i18n>
diff --git a/src/pages/Travel/Card/TravelDescriptorProxy.vue b/src/pages/Travel/Card/TravelDescriptorProxy.vue
new file mode 100644
index 000000000..ab5c42d7e
--- /dev/null
+++ b/src/pages/Travel/Card/TravelDescriptorProxy.vue
@@ -0,0 +1,16 @@
+<script setup>
+import TravelDescriptor from './TravelDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <QPopupProxy>
+        <TravelDescriptor v-if="$props.id" :id="$props.id" />
+    </QPopupProxy>
+</template>
diff --git a/src/pages/Travel/Card/TravelSummary.vue b/src/pages/Travel/Card/TravelSummary.vue
new file mode 100644
index 000000000..ad4659b11
--- /dev/null
+++ b/src/pages/Travel/Card/TravelSummary.vue
@@ -0,0 +1,323 @@
+<script setup>
+import { onMounted, ref, computed, onUpdated } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import CardSummary from 'components/ui/CardSummary.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import { getUrl } from 'src/composables/getUrl';
+import { toDate } from 'src/filters';
+import travelService from 'src/services/travel.service';
+import { QCheckbox, QIcon } from 'quasar';
+import { toCurrency } from 'filters/index';
+import VnRow from 'components/ui/VnRow.vue';
+
+onUpdated(() => summaryRef.value.fetch());
+
+const route = useRoute();
+const { t } = useI18n();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const router = useRouter();
+const entityId = computed(() => $props.id || route.params.id);
+const entries = ref([]);
+const summaryRef = ref();
+const travel = ref();
+const travelUrl = ref();
+
+onMounted(async () => {
+    travelUrl.value = (await getUrl('travel/')) + entityId.value;
+});
+
+const cloneTravel = () => {
+    const stringifiedTravelData = JSON.stringify(travel.value);
+    redirectToCreateView(stringifiedTravelData);
+};
+
+const headerMenuOptions = [
+    { name: t('travel.summary.cloneShipping'), action: cloneTravel },
+    { name: t('travel.summary.CloneTravelAndEntries'), action: null },
+    { name: t('travel.summary.AddEntry'), action: null },
+];
+
+const tableColumnComponents = {
+    isConfirmed: {
+        component: () => QCheckbox,
+        props: (prop) => ({
+            disable: true,
+            'model-value': Boolean(prop.value),
+        }),
+    },
+    id: {
+        component: () => 'span',
+        props: () => {},
+        event: () => openEntryDescriptor(),
+    },
+    supplierName: {
+        component: () => 'span',
+        props: () => {},
+        event: () => {},
+    },
+    reference: {
+        component: () => 'span',
+        props: () => {},
+        event: () => {},
+    },
+    freightValue: {
+        component: () => 'span',
+        props: () => {},
+        event: () => {},
+    },
+    packageValue: {
+        component: () => 'span',
+        props: () => {},
+        event: () => {},
+    },
+    cc: {
+        component: () => 'span',
+        props: () => {},
+        event: () => {},
+    },
+    pallet: {
+        component: () => 'span',
+        props: () => {},
+        event: () => {},
+    },
+    m3: {
+        component: () => 'span',
+        props: () => {},
+        event: () => {},
+    },
+    observation: {
+        component: (props) => (props.value ? QIcon : null),
+        props: () => ({ name: 'insert_drive_file', color: 'primary', size: '25px' }),
+    },
+};
+
+const entriesTableColumns = computed(() => {
+    return [
+        {
+            label: t('travel.summary.confirmed'),
+            field: 'isConfirmed',
+            name: 'isConfirmed',
+            align: 'left',
+        },
+        {
+            label: t('travel.summary.entryId'),
+            field: 'id',
+            name: 'id',
+            align: 'left',
+        },
+        {
+            label: t('supplier.pageTitles.supplier'),
+            field: 'supplierName',
+            name: 'supplierName',
+            align: 'left',
+        },
+        {
+            label: t('globals.reference'),
+            field: 'reference',
+            name: 'reference',
+            align: 'left',
+        },
+        {
+            label: t('travel.summary.freight'),
+            field: 'freightValue',
+            name: 'freightValue',
+            align: 'left',
+            format: (val) => {
+                return toCurrency(val);
+            },
+        },
+        {
+            label: t('travel.summary.package'),
+            field: 'packageValue',
+            name: 'packageValue',
+            align: 'left',
+            format: (val) => {
+                return toCurrency(val);
+            },
+        },
+        { label: 'CC', field: 'cc', name: 'cc', align: 'left' },
+        { label: 'Pallet', field: 'pallet', name: 'pallet', align: 'left' },
+        { label: 'm³', field: 'm3', name: 'm3', align: 'left' },
+        {
+            label: '',
+            field: 'observation',
+            name: 'observation',
+            align: 'left',
+            toolTip: 'Observation three',
+        },
+    ];
+});
+
+const entriesTableRows = computed(() => {
+    if (!entries.value && !entries.value.length > 0) return [];
+    return entries.value;
+});
+
+async function setTravelData(data) {
+    if (data) {
+        travel.value = data;
+        const entriesResponse = await travelService.getTravelEntries(travel.value.id);
+        if (entriesResponse.data) entries.value = entriesResponse.data;
+    }
+}
+
+const redirectToCreateView = (queryParams) => {
+    router.push({ name: 'TravelCreate', query: { travelData: queryParams } });
+};
+
+const openEntryDescriptor = () => {};
+</script>
+
+<template>
+    <CardSummary
+        ref="summaryRef"
+        :url="`Travels/${entityId}/getTravel`"
+        @on-fetch="(data) => setTravelData(data)"
+    >
+        <template #header-left>
+            <a class="header link" :href="travelUrl">
+                <QIcon name="open_in_new" color="white" size="25px" />
+            </a>
+        </template>
+        <template #header>
+            <span>{{ travel.ref }} - {{ travel.id }}</span>
+        </template>
+
+        <template #header-right>
+            <QBtn color="white" dense flat icon="more_vert" round size="md">
+                <QTooltip>
+                    {{ t('components.cardDescriptor.moreOptions') }}
+                </QTooltip>
+                <QMenu>
+                    <QList dense v-for="option in headerMenuOptions" :key="option">
+                        <QItem v-ripple clickable @click="option.action">
+                            {{ option.name }}
+                        </QItem>
+                    </QList>
+                </QMenu>
+            </QBtn>
+        </template>
+
+        <template #body>
+            <QCard class="vn-one row justify-around" style="min-width: 100%">
+                <VnRow>
+                    <div class="col">
+                        <VnLv
+                            :label="t('globals.shipped')"
+                            :value="toDate(travel.shipped)"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('globals.wareHouseOut')"
+                            :value="travel.warehouseOut?.name"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv :label="t('travel.summary.delivered')" class="q-mb-xs">
+                            <template #value>
+                                <QCheckbox
+                                    v-model="travel.isDelivered"
+                                    disable
+                                    dense
+                                    class="full-width q-my-xs"
+                                />
+                            </template>
+                        </VnLv>
+                    </div>
+                </VnRow>
+                <VnRow>
+                    <div class="col">
+                        <VnLv
+                            :label="t('globals.landed')"
+                            :value="toDate(travel.landed)"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('globals.wareHouseIn')"
+                            :value="travel.warehouseIn?.name"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv :label="t('travel.summary.received')" class="q-mb-xs">
+                            <template #value>
+                                <QCheckbox
+                                    v-model="travel.isReceived"
+                                    disable
+                                    dense
+                                    class="full-width q-mb-xs"
+                                />
+                            </template>
+                        </VnLv>
+                    </div>
+                </VnRow>
+                <VnRow>
+                    <div class="col">
+                        <VnLv :label="t('globals.agency')" :value="travel.agency?.name" />
+                    </div>
+                    <div class="col">
+                        <VnLv :label="t('globals.reference')" :value="travel.ref" />
+                    </div>
+                    <div class="col">
+                        <VnLv label="m³" :value="travel.m3" />
+                    </div>
+                    <div class="col">
+                        <VnLv :label="t('globals.totalEntries')" :value="travel.m3" />
+                    </div>
+                </VnRow>
+            </QCard>
+            <QCard class="vn-two" v-if="entriesTableRows.length > 0">
+                <a class="header" :href="travelUrl + 'entry'">
+                    {{ t('travel.summary.entries') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <QTable
+                    :rows="entriesTableRows"
+                    :columns="entriesTableColumns"
+                    hide-bottom
+                    row-key="id"
+                    class="full-width q-mt-md"
+                >
+                    <template #body-cell="props">
+                        <QTd :props="props">
+                            <component
+                                :is="
+                                    tableColumnComponents[props.col.name].component(props)
+                                "
+                                v-bind="
+                                    tableColumnComponents[props.col.name].props(props)
+                                "
+                                @click="
+                                    tableColumnComponents[props.col.name].event(props)
+                                "
+                                class="col-content"
+                            >
+                                <template
+                                    v-if="
+                                        props.col.name !== 'observation' &&
+                                        props.col.name !== 'isConfirmed'
+                                    "
+                                    >{{ props.value }}</template
+                                >
+                                <QTooltip v-if="props.col.toolTip">{{
+                                    props.col.toolTip
+                                }}</QTooltip>
+                            </component>
+                        </QTd>
+                    </template>
+                </QTable>
+            </QCard>
+        </template>
+    </CardSummary>
+</template>
+<style lang="scss" scoped></style>
diff --git a/src/pages/Travel/Card/TravelSummaryDialog.vue b/src/pages/Travel/Card/TravelSummaryDialog.vue
new file mode 100644
index 000000000..8351d6e5b
--- /dev/null
+++ b/src/pages/Travel/Card/TravelSummaryDialog.vue
@@ -0,0 +1,29 @@
+<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>
diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue
new file mode 100644
index 000000000..cef3ed998
--- /dev/null
+++ b/src/pages/Travel/ExtraCommunity.vue
@@ -0,0 +1,419 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import { QBtn, QField, QPopupEdit } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
+import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import ExtraCommunityFilter from './ExtraCommunityFilter.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { toCurrency } from 'src/filters';
+import { useArrayData } from 'composables/useArrayData';
+import { toDate } from 'src/filters';
+import { usePrintService } from 'composables/usePrintService';
+import travelService from 'src/services/travel.service';
+
+const router = useRouter();
+const stateStore = useStateStore();
+const { t } = useI18n();
+const { openReport } = usePrintService();
+
+const shippedFrom = ref(Date.vnNew());
+const landedTo = ref(Date.vnNew());
+
+const arrayData = useArrayData('ExtraCommunity', {
+    url: 'Travels/extraCommunityFilter',
+    limit: 0,
+    order: [
+        'landed ASC',
+        'shipped ASC',
+        'travelFk',
+        'loadPriority',
+        'agencyModeFk',
+        'supplierName',
+        'evaNotes',
+    ],
+    userParams: {
+        continent: 'AM',
+        shippedFrom: shippedFrom.value,
+        landedTo: landedTo.value,
+    },
+});
+
+const rows = computed(() => arrayData.store.data || []);
+
+const tableColumnComponents = {
+    id: {
+        component: QBtn,
+        attrs: () => ({ flat: true, color: 'blue', class: 'col-content' }),
+    },
+    cargoSupplierNickname: {
+        component: QBtn,
+        attrs: () => ({ flat: true, color: 'blue', class: 'col-content' }),
+    },
+    agencyModeName: {
+        component: 'span',
+        attrs: () => ({ class: 'col-content' }),
+    },
+    invoiceAmount: {
+        component: 'span',
+        attrs: () => ({
+            class: 'col-content',
+        }),
+    },
+    ref: {
+        component: QField,
+        attrs: () => ({ readonly: true, dense: true }),
+    },
+    stickers: {
+        component: 'span',
+        attrs: () => ({ class: 'col-content' }),
+    },
+    kg: {
+        component: 'span',
+        attrs: () => ({ class: 'col-content' }),
+    },
+    loadedKg: {
+        component: 'span',
+        attrs: () => ({ class: 'col-content' }),
+    },
+    volumeKg: {
+        component: 'span',
+        attrs: () => ({ class: 'col-content' }),
+    },
+    warehouseOutName: {
+        component: 'span',
+        attrs: () => ({ class: 'col-content' }),
+    },
+    shipped: {
+        component: 'span',
+        attrs: () => ({ class: 'col-content' }),
+    },
+    warehouseInName: {
+        component: 'span',
+        attrs: () => ({ class: 'col-content' }),
+    },
+    landed: {
+        component: 'span',
+        attrs: () => ({ class: 'col-content' }),
+    },
+};
+
+const columns = computed(() => {
+    return [
+        {
+            label: 'id',
+            field: 'id',
+            name: 'id',
+            align: 'left',
+            showValue: true,
+        },
+        {
+            label: t('supplier.pageTitles.supplier'),
+            field: 'cargoSupplierNickname',
+            name: 'cargoSupplierNickname',
+            align: 'left',
+            showValue: true,
+        },
+        {
+            label: t('globals.agency'),
+            field: 'agencyModeName',
+            name: 'agencyModeName',
+            align: 'left',
+            showValue: true,
+        },
+        {
+            label: t('globals.amount'),
+            name: 'invoiceAmount',
+            field: 'entries',
+            align: 'left',
+            showValue: true,
+            format: (value) =>
+                toCurrency(
+                    value
+                        ? value.reduce((sum, entry) => {
+                              return sum + (entry.invoiceAmount || 0);
+                          }, 0)
+                        : 0
+                ),
+        },
+        {
+            label: t('globals.reference'),
+            field: 'ref',
+            name: 'ref',
+            align: 'left',
+            showValue: false,
+        },
+        {
+            label: t('globals.packages'),
+            field: 'stickers',
+            name: 'stickers',
+            align: 'left',
+            showValue: true,
+        },
+        {
+            label: t('kg'),
+            field: 'kg',
+            name: 'kg',
+            align: 'left',
+            showValue: true,
+        },
+        {
+            label: t('physicKg'),
+            field: 'loadedKg',
+            name: 'loadedKg',
+            align: 'left',
+            showValue: true,
+        },
+        {
+            label: 'KG Vol.',
+            field: 'volumeKg',
+            name: 'volumeKg',
+            align: 'left',
+            showValue: true,
+        },
+        {
+            label: t('globals.wareHouseOut'),
+            field: 'warehouseOutName',
+            name: 'warehouseOutName',
+            align: 'left',
+            showValue: true,
+        },
+        {
+            label: t('shipped'),
+            field: 'shipped',
+            name: 'shipped',
+            align: 'left',
+            format: (value) => toDate(value.substring(0, 10)),
+            showValue: true,
+        },
+        {
+            label: t('globals.wareHouseIn'),
+            field: 'warehouseInName',
+            name: 'warehouseInName',
+            align: 'left',
+            showValue: true,
+        },
+        {
+            label: t('landed'),
+            field: 'landed',
+            name: 'landed',
+            align: 'left',
+            format: (value) => toDate(value.substring(0, 10)),
+            showValue: true,
+        },
+    ];
+});
+
+async function getData() {
+    await arrayData.fetch({ append: false });
+}
+
+const openReportPdf = () => {
+    const params = {
+        ...arrayData.store.userParams,
+        limit: arrayData.store.limit,
+    };
+
+    openReport('Travels/extra-community-pdf', params);
+};
+
+const saveFieldValue = async (val, field, index) => {
+    const id = rows.value[index].id;
+    const params = { [field]: val };
+    await travelService.updateTravel(id, params);
+};
+
+const navigateToTravelId = (id) => {
+    router.push({ path: `/travel/${id}` });
+};
+
+const stopEventPropagation = (event, col) => {
+    if (!['ref', 'id', 'supplier'].includes(col.name)) return;
+    event.preventDefault();
+    event.stopPropagation();
+};
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+
+    shippedFrom.value.setDate(shippedFrom.value.getDate() - 2);
+    shippedFrom.value.setHours(0, 0, 0, 0);
+
+    landedTo.value.setDate(landedTo.value.getDate() + 7);
+    landedTo.value.setHours(23, 59, 59, 59);
+    await getData();
+});
+</script>
+
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="ExtraCommunity"
+                :limit="20"
+                :label="t('searchExtraCommunity')"
+            />
+        </Teleport>
+    </template>
+    <QToolbar class="bg-vn-dark justify-end">
+        <div id="st-data"></div>
+        <QSpace />
+        <div id="st-actions">
+            <QBtn color="primary" icon-right="archive" no-caps @click="openReportPdf()" />
+        </div>
+    </QToolbar>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <ExtraCommunityFilter data-key="ExtraCommunity" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :rows="rows"
+            :columns="columns"
+            hide-bottom
+            row-key="clientId"
+            :pagination="{ rowsPerPage: 0 }"
+            class="full-width q-mt-md"
+        >
+            <template #body="props">
+                <QTr
+                    :props="props"
+                    @click="navigateToTravelId(props.row.id)"
+                    class="cursor-pointer"
+                >
+                    <QTd
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                        @click="stopEventPropagation($event, col)"
+                    >
+                        <component
+                            :is="tableColumnComponents[col.name].component"
+                            class="col-content"
+                            v-bind="tableColumnComponents[col.name].attrs(props)"
+                        >
+                            <!-- Editable 'ref' and 'kg' QField slot -->
+                            <template
+                                v-if="col.name === 'ref' || col.name === 'kg'"
+                                #control
+                            >
+                                <div
+                                    class="self-center full-width no-outline"
+                                    tabindex="0"
+                                >
+                                    {{ col.value }}
+                                </div>
+                                <QPopupEdit
+                                    :key="col.name"
+                                    v-model="col.value"
+                                    label-set="Save"
+                                    label-cancel="Close"
+                                >
+                                    <QInput
+                                        v-model="rows[props.pageIndex][col.field]"
+                                        dense
+                                        autofocus
+                                        @keyup.enter="
+                                            saveFieldValue(
+                                                rows[props.pageIndex][col.field],
+                                                col.field,
+                                                props.rowIndex
+                                            )
+                                        "
+                                    />
+                                </QPopupEdit>
+                            </template>
+
+                            <template v-if="col.showValue">
+                                {{ col.value }}
+                            </template>
+
+                            <!-- Main Row Descriptors -->
+                            <TravelDescriptorProxy
+                                v-if="col.name === 'id'"
+                                :id="props.row.id"
+                            />
+                            <SupplierDescriptorProxy
+                                v-if="col.name === 'cargoSupplierNickname'"
+                                :id="props.row.cargoSupplierFk"
+                            />
+                        </component>
+                    </QTd>
+                </QTr>
+                <QTr
+                    v-for="entry in props.row.entries"
+                    :key="entry.id"
+                    :props="props"
+                    class="secondary-row"
+                >
+                    <QTd
+                        ><QBtn flat color="blue" class="col-content">{{ entry.id }}</QBtn>
+                        <!-- Cuando se cree el modulo relacionado a entries, crear su descriptor y colocarlo acá -->
+                        <!-- <EntryDescriptorProxy :id="entry.id"/> -->
+                    </QTd>
+                    <QTd
+                        ><QBtn flat color="blue" class="col-content">{{
+                            entry.supplierName
+                        }}</QBtn>
+                        <SupplierDescriptorProxy :id="entry.supplierFk" />
+                    </QTd>
+                    <QTd></QTd>
+                    <QTd
+                        ><span class="col-content">{{
+                            toCurrency(entry.invoiceAmount)
+                        }}</span></QTd
+                    >
+                    <QTd
+                        ><span class="col-content">{{ entry.reference }}</span></QTd
+                    >
+                    <QTd
+                        ><span class="col-content">{{ entry.stickers }}</span></QTd
+                    >
+                    <QTd></QTd>
+                    <QTd
+                        ><span class="col-content">{{ entry.loadedkg }}</span></QTd
+                    >
+                    <QTd
+                        ><span class="col-content">{{ entry.volumeKg }}</span></QTd
+                    >
+                    <QTd></QTd>
+                    <QTd></QTd>
+                    <QTd></QTd>
+                    <QTd></QTd>
+                </QTr>
+            </template>
+        </QTable>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.col-content {
+    border-radius: 4px;
+    padding: 6px 6px 6px 6px;
+}
+
+.secondary-row {
+    background-color: var(--vn-gray);
+}
+</style>
+
+<i18n>
+en:
+    searchExtraCommunity: Search for extra community shipping
+    kg: BI. KG
+    physicKg: Phy. KG
+    shipped: W. shipped
+    landed: W. landed
+
+es:
+    searchExtraCommunity: Buscar por envío extra comunitario
+    kg: KG Bloq.
+    physicKg: KG físico
+    shipped: F. envío
+    landed: F. llegada
+</i18n>
diff --git a/src/pages/Travel/ExtraCommunityFilter.vue b/src/pages/Travel/ExtraCommunityFilter.vue
new file mode 100644
index 000000000..2d3629de4
--- /dev/null
+++ b/src/pages/Travel/ExtraCommunityFilter.vue
@@ -0,0 +1,263 @@
+<script setup>
+import { reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import FetchData from 'components/FetchData.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const filtersOptions = reactive({
+    warehouses: [],
+    continents: [],
+    agencies: [],
+    suppliers: [],
+});
+
+const updateFilterOptions = (data, optionKey) => {
+    filtersOptions[optionKey] = [...data];
+};
+
+const add = (paramsObj, key) => {
+    if (paramsObj[key] === undefined) {
+        paramsObj[key] = 1;
+    } else {
+        paramsObj[key]++;
+    }
+};
+
+const decrement = (paramsObj, key) => {
+    if (paramsObj[key] === 0) return;
+
+    paramsObj[key]--;
+};
+</script>
+
+<template>
+    <FetchData
+        url="Warehouses"
+        @on-fetch="(data) => updateFilterOptions(data, 'warehouses')"
+        auto-load
+    />
+    <FetchData
+        url="Continents"
+        @on-fetch="(data) => updateFilterOptions(data, 'continents')"
+        auto-load
+    />
+    <FetchData
+        url="AgencyModes"
+        @on-fetch="(data) => updateFilterOptions(data, 'agencies')"
+        auto-load
+    />
+    <FetchData
+        url="Suppliers"
+        @on-fetch="(data) => updateFilterOptions(data, 'suppliers')"
+        auto-load
+    />
+
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params }">
+            <QList dense style="max-width: 256px" class="list">
+                <QItem class="q-my-sm">
+                    <QItemSection>
+                        <QInput label="id" dense outlined rounded v-model="params.id" />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-my-sm">
+                    <QItemSection>
+                        <QInput
+                            :label="t('params.ref')"
+                            dense
+                            outlined
+                            rounded
+                            v-model="params.reference"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QInput
+                            v-model="params.totalEntries"
+                            type="number"
+                            :label="t('params.totalEntries')"
+                            dense
+                            outlined
+                            rounded
+                            min="0"
+                            class="input-number"
+                        >
+                            <template #append>
+                                <QBtn
+                                    icon="add"
+                                    flat
+                                    dense
+                                    size="12px"
+                                    @click="add(params, 'totalEntries')"
+                                />
+                                <QBtn
+                                    icon="remove"
+                                    flat
+                                    dense
+                                    size="12px"
+                                    @click="decrement(params, 'totalEntries')"
+                                />
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.agencyModeFk')"
+                            v-model="params.agencyModeFk"
+                            :options="filtersOptions.agencies"
+                            option-value="agencyFk"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnInputDate
+                            v-model="params.shippedFrom"
+                            :label="t('params.shippedFrom')"
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnInputDate
+                            v-model="params.landedTo"
+                            :label="t('params.landedTo')"
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.warehouseOutFk')"
+                            v-model="params.warehouseOutFk"
+                            :options="filtersOptions.warehouses"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.warehouseInFk')"
+                            v-model="params.warehouseInFk"
+                            :options="filtersOptions.warehouses"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('supplier.pageTitles.supplier')"
+                            v-model="params.cargoSupplierFk"
+                            :options="filtersOptions.suppliers"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.continent')"
+                            v-model="params.continent"
+                            :options="filtersOptions.continents"
+                            option-value="code"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+            </QList>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<style scoped>
+.list * {
+    max-width: 100%;
+}
+
+.input-number >>> input[type='number'] {
+    -moz-appearance: textfield;
+}
+
+.input-number >>> input::-webkit-outer-spin-button,
+.input-number >>> input::-webkit-inner-spin-button {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}
+</style>
+
+<i18n>
+en:
+    params:
+        ref: Reference
+        totalEntries: Total entries
+        agencyModeFk: Agency
+        warehouseInFk: Warehouse In
+        warehouseOutFk: Warehouse Out
+        shippedFrom: Shipped from
+        landedTo: Landed to
+        cargoSupplierFk: Supplier
+        continent: Continent out
+es:
+    params:
+        ref: Referencia
+        totalEntries: Ent. totales
+        agencyModeFk: Agencia
+        warehouseInFk: Alm. entrada
+        warehouseOutFk: Alm. salida
+        shippedFrom: Llegada desde
+        landedTo: Llegada hasta
+        cargoSupplierFk: Proveedor
+        continent: Cont. Salida
+</i18n>
diff --git a/src/pages/Travel/TravelCreate.vue b/src/pages/Travel/TravelCreate.vue
new file mode 100644
index 000000000..434bbb238
--- /dev/null
+++ b/src/pages/Travel/TravelCreate.vue
@@ -0,0 +1,179 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { reactive, ref } from 'vue';
+import FetchData from 'components/FetchData.vue';
+import { useRoute } from 'vue-router';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import { toDate } from 'src/filters';
+
+import { onBeforeMount } from 'vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const newTravelForm = reactive({
+    ref: null,
+    agencyModeFk: null,
+    shipped: null,
+    landed: null,
+    warehouseOutFk: null,
+    warehouseInFk: null,
+});
+
+const agenciesOptions = ref([]);
+const viewAction = ref();
+const warehousesOptions = ref([]);
+
+onBeforeMount(() => {
+    // Esto nos permite decirle a FormModel si queremos observar los cambios o no
+    // Ya que si queremos clonar queremos que nos permita guardar inmediatamente sin realizar cambios en el form
+    viewAction.value = route.query.travelData ? 'clone' : 'create';
+
+    if (route.query.travelData) {
+        const travelData = JSON.parse(route.query.travelData);
+        for (let key in newTravelForm) {
+            if (key === 'landed' || key === 'shipped') {
+                newTravelForm[key] = travelData[key].substring(0, 10);
+            } else {
+                newTravelForm[key] = travelData[key];
+            }
+        }
+    }
+});
+
+const onFetchAgencies = (agencies) => {
+    agenciesOptions.value = [...agencies];
+};
+
+const onFetchWarehouses = (warehouses) => {
+    warehousesOptions.value = [...warehouses];
+};
+</script>
+
+<template>
+    <FetchData url="AgencyModes" @on-fetch="(data) => onFetchAgencies(data)" auto-load />
+    <FetchData url="Warehouses" @on-fetch="(data) => onFetchWarehouses(data)" auto-load />
+    <QPage>
+        <QToolbar class="bg-vn-dark">
+            <div id="st-data"></div>
+            <QSpace />
+            <div id="st-actions"></div>
+        </QToolbar>
+        <FormModel
+            url-update="Travels"
+            model="travel"
+            :form-initial-data="newTravelForm"
+            :observe-form-changes="viewAction === 'create'"
+        >
+            <template #form="{ data }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput v-model="data.ref" :label="t('globals.reference')" />
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('globals.agency')"
+                            v-model="data.agencyModeFk"
+                            :options="agenciesOptions"
+                            option-value="agencyFk"
+                            option-label="name"
+                            hide-selected
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput
+                            rounded
+                            placeholder="dd-mm-aaa"
+                            :label="t('globals.shipped')"
+                            :model-value="toDate(data.shipped)"
+                        >
+                            <template #append>
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <QDate v-model="data.shipped">
+                                            <div class="row items-center justify-end">
+                                                <QBtn
+                                                    v-close-popup
+                                                    :label="t('globals.close')"
+                                                    color="primary"
+                                                    flat
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
+                            </template>
+                        </QInput>
+                    </div>
+                    <div class="col">
+                        <QInput
+                            rounded
+                            placeholder="dd-mm-aaa"
+                            :label="t('globals.landed')"
+                            :model-value="toDate(data.landed)"
+                        >
+                            <template #append>
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <QDate v-model="data.landed">
+                                            <div class="row items-center justify-end">
+                                                <QBtn
+                                                    v-close-popup
+                                                    :label="t('globals.close')"
+                                                    color="primary"
+                                                    flat
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
+                            </template>
+                        </QInput>
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('globals.wareHouseOut')"
+                            v-model="data.warehouseOutFk"
+                            :options="warehousesOptions"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                        />
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('globals.wareHouseIn')"
+                            v-model="data.warehouseInFk"
+                            :options="warehousesOptions"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                        />
+                    </div>
+                </VnRow>
+            </template>
+        </FormModel>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.card {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-gap: 20px;
+}
+</style>
diff --git a/src/pages/Travel/TravelFilter.vue b/src/pages/Travel/TravelFilter.vue
new file mode 100644
index 000000000..2c2d80488
--- /dev/null
+++ b/src/pages/Travel/TravelFilter.vue
@@ -0,0 +1,311 @@
+<script setup>
+import { reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import FetchData from 'components/FetchData.vue';
+import { toDate } from 'src/filters';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const filtersOptions = reactive({
+    warehouses: [],
+    continents: [],
+    agencies: [],
+});
+
+const updateFilterOptions = (data, optionKey) => {
+    filtersOptions[optionKey] = [...data];
+};
+
+const add = (paramsObj, key) => {
+    if (paramsObj[key] === undefined) {
+        paramsObj[key] = 1;
+    } else {
+        paramsObj[key]++;
+    }
+};
+
+const decrement = (paramsObj, key) => {
+    if (paramsObj[key] === 0) return;
+
+    paramsObj[key]--;
+};
+</script>
+
+<template>
+    <FetchData
+        url="Warehouses"
+        @on-fetch="(data) => updateFilterOptions(data, 'warehouses')"
+        auto-load
+    />
+    <FetchData
+        url="Continents"
+        @on-fetch="(data) => updateFilterOptions(data, 'continents')"
+        auto-load
+    />
+    <FetchData
+        url="AgencyModes"
+        @on-fetch="(data) => updateFilterOptions(data, 'agencies')"
+        auto-load
+    />
+
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params }">
+            <QList dense style="max-width: 256px" class="list">
+                <QItem class="q-my-sm">
+                    <QItemSection>
+                        <QInput
+                            :label="t('params.search')"
+                            dense
+                            outlined
+                            rounded
+                            v-model="params.search"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.agencyModeFk')"
+                            v-model="params.agencyModeFk"
+                            :options="filtersOptions.agencies"
+                            option-value="agencyFk"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.warehouseOutFk')"
+                            v-model="params.warehouseOutFk"
+                            :options="filtersOptions.warehouses"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.warehouseInFk')"
+                            v-model="params.warehouseInFk"
+                            :options="filtersOptions.warehouses"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QInput
+                            v-model="params.scopeDays"
+                            type="number"
+                            :label="t('params.scopeDays')"
+                            dense
+                            outlined
+                            rounded
+                            class="input-number"
+                        >
+                            <template #append>
+                                <QBtn
+                                    icon="add"
+                                    flat
+                                    dense
+                                    size="12px"
+                                    @click="add(params, 'scopeDays')"
+                                />
+                                <QBtn
+                                    icon="remove"
+                                    flat
+                                    dense
+                                    size="12px"
+                                    @click="decrement(params, 'scopeDays')"
+                                />
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QInput
+                            dense
+                            outlined
+                            rounded
+                            placeholder="dd-mm-aaa"
+                            :label="t('params.landedFrom')"
+                            :model-value="toDate(params.landedFrom)"
+                        >
+                            <template #append>
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <QDate v-model="params.landedFrom">
+                                            <div class="row items-center justify-end">
+                                                <QBtn
+                                                    v-close-popup
+                                                    :label="t('globals.close')"
+                                                    color="primary"
+                                                    flat
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QInput
+                            dense
+                            outlined
+                            rounded
+                            placeholder="dd-mm-aaa"
+                            :model-value="toDate(params.landedTo)"
+                            :label="t('params.landedTo')"
+                        >
+                            <template #append>
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <QDate v-model="params.landedTo">
+                                            <div class="row items-center justify-end">
+                                                <QBtn
+                                                    v-close-popup
+                                                    :label="t('globals.close')"
+                                                    color="primary"
+                                                    flat
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.continent')"
+                            v-model="params.continent"
+                            :options="filtersOptions.continents"
+                            option-value="code"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QInput
+                            v-model="params.totalEntries"
+                            type="number"
+                            :label="t('params.totalEntries')"
+                            dense
+                            outlined
+                            rounded
+                            min="0"
+                            class="input-number"
+                        >
+                            <template #append>
+                                <QBtn
+                                    icon="add"
+                                    flat
+                                    dense
+                                    size="12px"
+                                    @click="add(params, 'totalEntries')"
+                                />
+                                <QBtn
+                                    icon="remove"
+                                    flat
+                                    dense
+                                    size="12px"
+                                    @click="decrement(params, 'totalEntries')"
+                                />
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+            </QList>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<style scoped>
+.list * {
+    max-width: 100%;
+}
+
+.input-number >>> input[type='number'] {
+    -moz-appearance: textfield;
+}
+.input-number >>> input::-webkit-outer-spin-button,
+.input-number >>> input::-webkit-inner-spin-button {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}
+</style>
+
+<i18n>
+en:
+    params:
+        search: Id/Reference
+        agencyModeFk: Agency
+        warehouseInFk: Warehouse In
+        warehouseOutFk: Warehouse Out
+        scopeDays: Days onward
+        landedFrom: Landed from
+        landedTo: Landed to
+        continent: Continent out
+        totalEntries: Total entries
+es:
+    params:
+        search: Id/Referencia
+        agencyModeFk: Agencia
+        warehouseInFk: Alm. entrada
+        warehouseOutFk: Alm. salida
+        scopeDays: Días adelante
+        landedFrom: Llegada desde
+        landedTo: Llegada hasta
+        continent: Cont. Salida
+        totalEntries: Ent. totales
+
+</i18n>
diff --git a/src/pages/Travel/TravelList.vue b/src/pages/Travel/TravelList.vue
new file mode 100644
index 000000000..d62485a4c
--- /dev/null
+++ b/src/pages/Travel/TravelList.vue
@@ -0,0 +1,147 @@
+<script setup>
+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 CardList from 'src/components/ui/CardList.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import TravelSummaryDialog from './Card/TravelSummaryDialog.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import TravelFilter from './TravelFilter.vue';
+import { toDate } from 'src/filters/index';
+
+const router = useRouter();
+const quasar = useQuasar();
+const { t } = useI18n();
+const stateStore = useStateStore();
+
+const navigateToTravelId = (id) => {
+    router.push({ path: `/travel/${id}` });
+};
+
+const cloneTravel = (travelData) => {
+    const stringifiedTravelData = JSON.stringify(travelData);
+    redirectToCreateView(stringifiedTravelData);
+};
+
+const redirectToCreateView = (queryParams) => {
+    router.push({ name: 'TravelCreate', query: { travelData: queryParams } });
+};
+
+const viewSummary = (id) => {
+    quasar.dialog({
+        component: TravelSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
+};
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+});
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <TravelFilter data-key="TravelList" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <div class="card-list">
+            <VnPaginate
+                data-key="TravelList"
+                url="Travels/filter"
+                auto-load
+                order="shipped DESC, landed DESC"
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="row.ref"
+                        :id="row.id"
+                        @click="navigateToTravelId(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv
+                                :label="t('globals.agency')"
+                                :value="row.agencyModeName"
+                            />
+                            <VnLv
+                                :label="t('globals.wareHouseOut')"
+                                :value="row.warehouseOutFk"
+                            />
+                            <VnLv
+                                :label="t('globals.shipped')"
+                                :value="toDate(row.shipped)"
+                            />
+                            <VnLv
+                                :label="t('globals.landed')"
+                                :value="toDate(row.landed)"
+                            />
+                            <VnLv
+                                :label="t('globals.wareHouseIn')"
+                                :value="row.warehouseInFk"
+                            />
+
+                            <VnLv
+                                :label="t('globals.totalEntries')"
+                                :value="row.totalEntries"
+                            />
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('components.smartCard.clone')"
+                                @click.stop="cloneTravel(row)"
+                                class="bg-vn-dark"
+                                outline
+                            />
+                            <QBtn
+                                :label="t('addEntry')"
+                                @click.stop="viewSummary(row.id)"
+                                class="bg-vn-dark"
+                                outline
+                                style="margin-top: 15px"
+                            />
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+        <QPageSticky :offset="[20, 20]">
+            <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
+            <QTooltip>
+                {{ t('supplier.list.newSupplier') }}
+            </QTooltip>
+        </QPageSticky>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+</style>
+
+<i18n>
+en:
+    addEntry: Add entry
+
+
+es:
+    addEntry: Añadir entrada
+
+
+</i18n>
diff --git a/src/pages/Travel/TravelMain.vue b/src/pages/Travel/TravelMain.vue
new file mode 100644
index 000000000..66ce78f23
--- /dev/null
+++ b/src/pages/Travel/TravelMain.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const stateStore = useStateStore();
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
+            <LeftMenu />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
+</template>
diff --git a/src/pages/Wagon/Type/WagonTypeCreate.vue b/src/pages/Wagon/Type/WagonTypeCreate.vue
index adfd41049..50be4169c 100644
--- a/src/pages/Wagon/Type/WagonTypeCreate.vue
+++ b/src/pages/Wagon/Type/WagonTypeCreate.vue
@@ -239,8 +239,8 @@ function exceedMaxHeight(pos) {
 
 <template>
     <QPage class="q-pa-sm q-mx-xl">
-        <QCard class="q-pa-sm">
-            <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-md">
+        <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
+            <QCard class="q-pa-md">
                 <QInput
                     filled
                     v-model="name"
@@ -248,7 +248,7 @@ function exceedMaxHeight(pos) {
                     :rules="[(val) => !!val || t('wagon.warnings.nameNotEmpty')]"
                 />
                 <QCheckbox class="q-mb-sm" v-model="divisible" label="Divisible" />
-                <div class="wagon-tray q-mx-xl" v-for="tray in wagon" :key="tray.id">
+                <div class="wagon-tray q-mx-lg" v-for="tray in wagon" :key="tray.id">
                     <div class="position">
                         <QInput
                             autofocus
@@ -309,16 +309,6 @@ function exceedMaxHeight(pos) {
                     <QIcon color="grey-6" name="trip_origin" size="3rem" />
                     <QIcon color="grey-6" name="trip_origin" size="3rem" />
                 </div>
-                <div>
-                    <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
-                    <QBtn
-                        :label="t('wagon.type.reset')"
-                        type="reset"
-                        color="primary"
-                        flat
-                        class="q-ml-sm"
-                    />
-                </div>
                 <QDialog
                     v-model="colorPickerActive"
                     position="right"
@@ -346,8 +336,18 @@ function exceedMaxHeight(pos) {
                         </QCardSection>
                     </QCard>
                 </QDialog>
-            </QForm>
-        </QCard>
+            </QCard>
+            <div class="q-mt-md">
+                <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
+                <QBtn
+                    :label="t('wagon.type.reset')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                />
+            </div>
+        </QForm>
     </QPage>
 </template>
 
@@ -357,45 +357,55 @@ function exceedMaxHeight(pos) {
     justify-content: center;
     align-items: flex-start;
 }
-.q-card {
+
+.q-form {
     width: 70%;
 }
+
 .q-dialog {
     .q-card {
         width: 100%;
     }
 }
+
 .wheels {
     margin-left: 5%;
     display: flex;
     justify-content: space-around;
 }
+
 .wagon-tray {
     display: flex;
     height: 6rem;
+
     .position {
-        width: 15%;
+        width: 20%;
         border-right: 1rem solid gray;
         display: flex;
         align-items: flex-end;
         justify-content: flex-end;
         padding-right: 1rem;
     }
+
     .shelving {
         display: flex;
         width: 75%;
+
         .shelving-half {
             width: 50%;
             height: 100%;
+
             .shelving-up {
                 height: 80%;
                 width: 100%;
             }
+
             .shelving-down {
                 height: 20%;
                 width: 100%;
             }
         }
+
         .shelving-divisible {
             width: 1%;
             height: 100%;
@@ -403,6 +413,7 @@ function exceedMaxHeight(pos) {
             border-right: 0.5rem dashed grey;
         }
     }
+
     .action-button {
         width: 10%;
         border-left: 1rem solid gray;
diff --git a/src/pages/Wagon/Type/WagonTypeList.vue b/src/pages/Wagon/Type/WagonTypeList.vue
index f364da008..8e4ace744 100644
--- a/src/pages/Wagon/Type/WagonTypeList.vue
+++ b/src/pages/Wagon/Type/WagonTypeList.vue
@@ -5,6 +5,8 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import CardList from 'components/ui/CardList.vue';
+import VnLv from 'components/ui/VnLv.vue';
 
 const quasar = useQuasar();
 const arrayData = useArrayData('WagonTypeList');
@@ -48,43 +50,28 @@ async function remove(row) {
                 auto-load
             >
                 <template #body="{ rows }">
-                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
-                        <QItem
-                            class="q-pa-none items-start cursor-pointer q-hoverable"
-                            v-ripple
-                            clickable
-                        >
-                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
-                                <div class="text-h6">{{ row.name }}</div>
-                                <QItem-label caption>#{{ row.id }}</QItem-label>
-                            </QItemSection>
-                            <QSeparator vertical />
-                            <QCardActions vertical class="justify-between">
-                                <QBtn
-                                    flat
-                                    round
-                                    color="primary"
-                                    icon="arrow_circle_right"
-                                    @click="navigate(row.id)"
-                                >
-                                    <QTooltip>
-                                        {{ t('components.smartCard.openCard') }}
-                                    </QTooltip>
-                                </QBtn>
-                                <QBtn
-                                    flat
-                                    round
-                                    color="primary"
-                                    icon="delete"
-                                    @click="remove(row)"
-                                >
-                                    <QTooltip>
-                                        {{ t('wagon.list.remove') }}
-                                    </QTooltip>
-                                </QBtn>
-                            </QCardActions>
-                        </QItem>
-                    </QCard>
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="(row.name || '').toString()"
+                        :id="row.id"
+                        @click="navigate(row.id)"
+                    >
+                        <template #actions>
+                            <QBtn
+                                :label="t('components.smartCard.openCard')"
+                                @click.stop="navigate(row.id)"
+                                class="bg-vn-dark"
+                                outline
+                            />
+                            <QBtn
+                                :label="t('wagon.list.remove')"
+                                @click.stop="remove(row)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
                 </template>
             </VnPaginate>
         </div>
diff --git a/src/pages/Wagon/WagonCreate.vue b/src/pages/Wagon/WagonCreate.vue
index 123e01d36..0bd6f87be 100644
--- a/src/pages/Wagon/WagonCreate.vue
+++ b/src/pages/Wagon/WagonCreate.vue
@@ -86,9 +86,9 @@ function filterType(val, update) {
 
 <template>
     <QPage class="q-pa-sm q-mx-xl">
-        <QCard class="q-pa-sm">
-            <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-md">
-                <div class="row q-col-gutter-md q-mb-md">
+        <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
+            <QCard class="q-pa-md">
+                <div class="row q-col-gutter-md">
                     <div class="col">
                         <QInput
                             filled
@@ -108,7 +108,7 @@ function filterType(val, update) {
                         />
                     </div>
                 </div>
-                <div class="row q-col-gutter-md q-mb-md">
+                <div class="row q-col-gutter-md">
                     <div class="col">
                         <QInput
                             filled
@@ -155,18 +155,18 @@ function filterType(val, update) {
                         </QSelect>
                     </div>
                 </div>
-                <div>
-                    <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
-                    <QBtn
-                        :label="t('wagon.type.reset')"
-                        type="reset"
-                        color="primary"
-                        flat
-                        class="q-ml-sm"
-                    />
-                </div>
-            </QForm>
-        </QCard>
+            </QCard>
+            <div class="q-mt-md">
+                <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
+                <QBtn
+                    :label="t('wagon.type.reset')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                />
+            </div>
+        </QForm>
     </QPage>
 </template>
 
@@ -176,7 +176,8 @@ function filterType(val, update) {
     justify-content: center;
     align-items: flex-start;
 }
-.q-card {
+
+.q-form {
     width: 70%;
 }
 </style>
diff --git a/src/pages/Wagon/WagonList.vue b/src/pages/Wagon/WagonList.vue
index 5e512aa92..77d9da0bf 100644
--- a/src/pages/Wagon/WagonList.vue
+++ b/src/pages/Wagon/WagonList.vue
@@ -5,6 +5,8 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import CardList from 'components/ui/CardList.vue';
+import VnLv from 'components/ui/VnLv.vue';
 
 const quasar = useQuasar();
 const arrayData = useArrayData('WagonList');
@@ -55,69 +57,40 @@ async function remove(row) {
                 auto-load
             >
                 <template #body="{ rows }">
-                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
-                        <QItem
-                            class="q-pa-none items-start cursor-pointer q-hoverable"
-                            v-ripple
-                            clickable
-                        >
-                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
-                                <div class="text-h6">{{ row.label }}</div>
-                                <QItemLabel caption>#{{ row.id }}</QItemLabel>
-                                <QList>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('wagon.list.plate') }}
-                                            </QItemLabel>
-                                            <QItemLabel>{{ row.plate }}</QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('wagon.list.volume') }}
-                                            </QItemLabel>
-                                            <QItemLabel>{{ row.volume }}</QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('wagon.list.type') }}
-                                            </QItemLabel>
-                                            <QItemLabel>{{ row.type.name }}</QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                </QList>
-                            </QItemSection>
-                            <QSeparator vertical />
-                            <QCardActions vertical class="justify-between">
-                                <QBtn
-                                    flat
-                                    round
-                                    color="primary"
-                                    icon="arrow_circle_right"
-                                    @click="navigate(row.id)"
-                                >
-                                    <QTooltip>
-                                        {{ t('components.smartCard.openCard') }}
-                                    </QTooltip>
-                                </QBtn>
-                                <QBtn
-                                    flat
-                                    round
-                                    color="primary"
-                                    icon="delete"
-                                    @click="remove(row)"
-                                >
-                                    <QTooltip>
-                                        {{ t('wagon.list.remove') }}
-                                    </QTooltip>
-                                </QBtn>
-                            </QCardActions>
-                        </QItem>
-                    </QCard>
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="(row.label || '').toString()"
+                        :id="row.id"
+                        @click="navigate(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv
+                                :label="t('wagon.list.plate')"
+                                :title-label="t('wagon.list.plate')"
+                                :value="row.plate"
+                            />
+                            <VnLv :label="t('wagon.list.volume')" :value="row?.volume" />
+                            <VnLv
+                                :label="t('wagon.list.type')"
+                                :value="row?.type?.name"
+                            />
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('components.smartCard.openCard')"
+                                @click.stop="navigate(row.id)"
+                                class="bg-vn-dark"
+                                outline
+                            />
+                            <QBtn
+                                :label="t('wagon.list.remove')"
+                                @click.stop="remove(row)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
                 </template>
             </VnPaginate>
         </div>
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index cb75cdee3..a09c370ef 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -71,11 +71,11 @@ function viewSummary(id) {
                     <CardList
                         v-for="row of rows"
                         :key="row.id"
-                        @click="navigate(row.id)"
+                        :id="row.id"
                         :title="row.nickname"
+                        @click="navigate(row.id)"
                     >
                         <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
                             <VnLv :label="t('worker.list.name')" :value="row.userName" />
                             <VnLv :label="t('worker.list.email')" :value="row.email" />
                             <VnLv
@@ -85,19 +85,17 @@ function viewSummary(id) {
                         </template>
                         <template #actions>
                             <QBtn
-                                flat
-                                icon="arrow_circle_right"
+                                :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                            >
-                                <QTooltip>
-                                    {{ t('components.smartCard.openCard') }}
-                                </QTooltip>
-                            </QBtn>
-                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
-                                <QTooltip>
-                                    {{ t('components.smartCard.openSummary') }}
-                                </QTooltip>
-                            </QBtn>
+                                class="bg-vn-dark"
+                                outline
+                            />
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
                         </template>
                     </CardList>
                 </template>
diff --git a/src/router/modules/Supplier.js b/src/router/modules/Supplier.js
new file mode 100644
index 000000000..198a9581e
--- /dev/null
+++ b/src/router/modules/Supplier.js
@@ -0,0 +1,61 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/supplier',
+    name: 'Supplier',
+    meta: {
+        title: 'suppliers',
+        icon: 'vn:supplier',
+    },
+    component: RouterView,
+    redirect: { name: 'SupplierMain' },
+    menus: {
+        main: ['SupplierList'],
+        card: [],
+    },
+    children: [
+        {
+            path: '',
+            name: 'SupplierMain',
+            component: () => import('src/pages/Supplier/SupplierMain.vue'),
+            redirect: { name: 'SupplierList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'SupplierList',
+                    meta: {
+                        title: 'list',
+                        icon: 'view_list',
+                    },
+                    component: () => import('src/pages/Supplier/SupplierList.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'SupplierCreate',
+                    meta: {
+                        title: 'create',
+                    },
+                    component: () => import('src/pages/Supplier/SupplierCreate.vue'),
+                },
+            ],
+        },
+        {
+            name: 'SupplierCard',
+            path: ':id',
+            component: () => import('src/pages/Supplier/Card/SupplierCard.vue'),
+            redirect: { name: 'SupplierSummary' },
+            children: [
+                {
+                    name: 'SupplierSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary',
+                        icon: 'launch',
+                    },
+                    component: () =>
+                        import('src/pages/Supplier/Card/SupplierSummary.vue'),
+                },
+            ],
+        },
+    ],
+};
diff --git a/src/router/modules/index.js b/src/router/modules/index.js
index 2bb28c817..0ab5bf2b2 100644
--- a/src/router/modules/index.js
+++ b/src/router/modules/index.js
@@ -4,7 +4,22 @@ import Claim from './claim';
 import InvoiceOut from './invoiceOut';
 import invoiceIn from './invoiceIn';
 import Worker from './worker';
+import Shelving from './shelving';
 import Wagon from './wagon';
 import Route from './route';
+import Supplier from './Supplier';
+import Travel from './travel';
 
-export default [Customer, Ticket, Claim, InvoiceOut, invoiceIn, Worker, Wagon, Route];
+export default [
+    Customer,
+    Ticket,
+    Claim,
+    InvoiceOut,
+    Worker,
+    Shelving,
+    Wagon,
+    Route,
+    Supplier,
+    Travel,
+    invoiceIn,
+];
diff --git a/src/router/modules/invoiceOut.js b/src/router/modules/invoiceOut.js
index daf5041e9..084cf6ac3 100644
--- a/src/router/modules/invoiceOut.js
+++ b/src/router/modules/invoiceOut.js
@@ -5,12 +5,12 @@ export default {
     name: 'InvoiceOut',
     meta: {
         title: 'invoiceOuts',
-        icon: 'vn:invoice-out'
+        icon: 'vn:invoice-out',
     },
     component: RouterView,
     redirect: { name: 'InvoiceOutMain' },
     menus: {
-        main: ['InvoiceOutList'],
+        main: ['InvoiceOutList', 'InvoiceOutGlobal', 'InvoiceOutNegativeBases'],
         card: [],
     },
     children: [
@@ -28,8 +28,27 @@ export default {
                         icon: 'view_list',
                     },
                     component: () => import('src/pages/InvoiceOut/InvoiceOutList.vue'),
-                }
-            ]
+                },
+                {
+                    path: 'global-invoicing',
+                    name: 'InvoiceOutGlobal',
+                    meta: {
+                        title: 'globalInvoicing',
+                        icon: 'contact_support',
+                    },
+                    component: () => import('src/pages/InvoiceOut/InvoiceOutGlobal.vue'),
+                },
+                {
+                    path: 'negative-bases',
+                    name: 'InvoiceOutNegativeBases',
+                    meta: {
+                        title: 'negativeBases',
+                        icon: 'view_list',
+                    },
+                    component: () =>
+                        import('src/pages/InvoiceOut/InvoiceOutNegativeBases.vue'),
+                },
+            ],
         },
         {
             name: 'InvoiceOutCard',
@@ -41,11 +60,12 @@ export default {
                     name: 'InvoiceOutSummary',
                     path: 'summary',
                     meta: {
-                        title: 'summary'
+                        title: 'summary',
                     },
-                    component: () => import('src/pages/InvoiceOut/Card/InvoiceOutSummary.vue'),
-                }
-            ]
+                    component: () =>
+                        import('src/pages/InvoiceOut/Card/InvoiceOutSummary.vue'),
+                },
+            ],
         },
-    ]
+    ],
 };
diff --git a/src/router/modules/shelving.js b/src/router/modules/shelving.js
new file mode 100644
index 000000000..494f286c3
--- /dev/null
+++ b/src/router/modules/shelving.js
@@ -0,0 +1,80 @@
+import {RouterView} from "vue-router";
+
+export default {
+    path: '/shelving',
+    name: 'Shelving',
+    meta: {
+        title: 'shelving',
+        icon: 'vn:inventory'
+    },
+    component: RouterView,
+    redirect: { name: 'ShelvingMain' },
+    menus: {
+        main: ['ShelvingList'],
+        card: ['ShelvingBasicData', 'ShelvingLog']
+    },
+    children: [
+        {
+            path: '',
+            name: 'ShelvingMain',
+            component: () => import('src/pages/Shelving/ShelvingMain.vue'),
+            redirect: { name: 'ShelvingList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'ShelvingList',
+                    meta: {
+                        title: 'shelvingList',
+                        icon: 'view_list',
+                    },
+                    component: () => import('src/pages/Shelving/ShelvingList.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'ShelvingCreate',
+                    meta: {
+                        title: 'create',
+                    },
+                    component: () => import('src/pages/Shelving/Card/ShelvingForm.vue'),
+                },
+            ],
+        },
+        {
+            name: 'ShelvingLayout',
+            path: ':id',
+            component: () => import('pages/Shelving/Card/ShelvingCard.vue'),
+            redirect: { name: 'ShelvingSummary' },
+            children: [
+                {
+                    name: 'ShelvingSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary',
+                    },
+                    component: () =>
+                        import('pages/Shelving/Card/ShelvingSummary.vue'),
+                },
+                {
+                    name: 'ShelvingBasicData',
+                    path: 'basic-data',
+                    meta: {
+                        title: 'basicData',
+                        icon: 'vn:settings',
+                        roles: ['salesPerson'],
+                    },
+                    component: () => import('pages/Shelving/Card/ShelvingForm.vue'),
+                },
+                {
+                    name: 'ShelvingLog',
+                    path: 'log',
+                    meta: {
+                        title: 'log',
+                        icon: 'history',
+                    },
+                    component: () => import('src/pages/Shelving/Card/ShelvingLog.vue'),
+                },
+            ],
+        },
+    ]
+};
+
diff --git a/src/router/modules/travel.js b/src/router/modules/travel.js
new file mode 100644
index 000000000..bd0a2067d
--- /dev/null
+++ b/src/router/modules/travel.js
@@ -0,0 +1,69 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/travel',
+    name: 'Travel',
+    meta: {
+        title: 'travel',
+        icon: 'local_airport',
+    },
+    component: RouterView,
+    redirect: { name: 'TravelMain' },
+    menus: {
+        main: ['TravelList', 'ExtraCommunity'],
+        card: [],
+    },
+    children: [
+        {
+            path: '',
+            name: 'TravelMain',
+            component: () => import('src/pages/Travel/TravelMain.vue'),
+            redirect: { name: 'TravelList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'TravelList',
+                    meta: {
+                        title: 'list',
+                        icon: 'view_list',
+                    },
+                    component: () => import('src/pages/Travel/TravelList.vue'),
+                },
+                {
+                    path: 'extra-community',
+                    name: 'ExtraCommunity',
+                    meta: {
+                        title: 'extraCommunity',
+                        icon: 'vn:shipment-01',
+                    },
+                    component: () => import('src/pages/Travel/ExtraCommunity.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'TravelCreate',
+                    meta: {
+                        title: 'extraCommunity',
+                        icon: '',
+                    },
+                    component: () => import('src/pages/Travel/TravelCreate.vue'),
+                },
+            ],
+        },
+        {
+            name: 'TravelCard',
+            path: ':id',
+            component: () => import('src/pages/Travel/Card/TravelCard.vue'),
+            redirect: { name: 'TravelSummary' },
+            children: [
+                {
+                    name: 'TravelSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary',
+                    },
+                    component: () => import('src/pages/Travel/Card/TravelSummary.vue'),
+                },
+            ],
+        },
+    ],
+};
diff --git a/src/router/routes.js b/src/router/routes.js
index 6632979d3..550fcf64e 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -5,7 +5,10 @@ import worker from './modules/worker';
 import invoiceOut from './modules/invoiceOut';
 import invoiceIn from './modules/invoiceIn';
 import wagon from './modules/wagon';
+import supplier from './modules/Supplier';
 import route from './modules/route';
+import travel from './modules/travel';
+import shelving from 'src/router/modules/shelving';
 
 const routes = [
     {
@@ -49,15 +52,18 @@ const routes = [
             ticket,
             claim,
             worker,
+            shelving,
             invoiceOut,
             invoiceIn,
+            wagon,
+            route,
+            supplier,
+            travel,
             {
                 path: '/:catchAll(.*)*',
                 name: 'NotFound',
                 component: () => import('../pages/NotFound.vue'),
             },
-            wagon,
-            route,
         ],
     },
 ];
diff --git a/src/services/invoiceOut.service.js b/src/services/invoiceOut.service.js
new file mode 100644
index 000000000..6232f319d
--- /dev/null
+++ b/src/services/invoiceOut.service.js
@@ -0,0 +1,49 @@
+import axios from 'axios';
+
+const request = async (method, url, params = {}) => {
+    try {
+        let response;
+
+        if (method === 'GET') {
+            response = await axios.get(url, { params });
+        } else if (method === 'POST') {
+            response = await axios.post(url, params);
+        }
+        return response.data;
+    } catch (err) {
+        console.error(`Error with ${method} request to ${url}`, err);
+        return err.response;
+    }
+};
+
+const invoiceOutService = {
+    getNegativeBases: async (params) => {
+        return await request('GET', 'InvoiceOuts/negativeBases', params);
+    },
+
+    getNegativeBasesCsv: async (params) => {
+        return await request('GET', 'InvoiceOuts/negativeBasesCsv', params);
+    },
+
+    getInvoiceDate: async (params) => {
+        return await request('GET', 'InvoiceOuts/getInvoiceDate', params);
+    },
+
+    getFindOne: async (params) => {
+        return await request('GET', 'InvoiceOutConfigs/findOne', params);
+    },
+
+    getClientsToInvoice: async (params) => {
+        return await request('POST', 'InvoiceOuts/clientsToInvoice', params);
+    },
+
+    invoiceClient: async (params) => {
+        return await request('POST', 'InvoiceOuts/invoiceClient', params);
+    },
+
+    makePdfAndNotify: async (invoiceId, params) => {
+        return await request('POST', `InvoiceOuts/${invoiceId}/makePdfAndNotify`, params);
+    },
+};
+
+export default invoiceOutService;
diff --git a/src/services/travel.service.js b/src/services/travel.service.js
new file mode 100644
index 000000000..469b8b237
--- /dev/null
+++ b/src/services/travel.service.js
@@ -0,0 +1,23 @@
+import axios from 'axios';
+
+const travelService = {
+    getTravelEntries: async (param) => {
+        try {
+            return await axios.get(`Travels/${param}/getEntries`);
+        } catch (err) {
+            console.error(`Error fetching travel entries`, err);
+            return err.response;
+        }
+    },
+
+    updateTravel: async (id, params) => {
+        try {
+            return await axios.patch(`Travels/${id}`, params);
+        } catch (err) {
+            console.error(`Error updating travel`, err);
+            return err.response;
+        }
+    },
+};
+
+export default travelService;
diff --git a/src/stores/invoiceOutGlobal.js b/src/stores/invoiceOutGlobal.js
new file mode 100644
index 000000000..d449a577d
--- /dev/null
+++ b/src/stores/invoiceOutGlobal.js
@@ -0,0 +1,264 @@
+import { defineStore } from 'pinia';
+import { useUserConfig } from 'src/composables/useUserConfig';
+import invoiceOutService from 'src/services/invoiceOut.service';
+import useNotify from 'src/composables/useNotify.js';
+import { exportFile } from 'quasar';
+
+const { notify } = useNotify();
+
+export const useInvoiceOutGlobalStore = defineStore({
+    id: 'invoiceOutGlobal',
+
+    state: () => ({
+        initialDataLoading: true,
+        formInitialData: {
+            companyFk: null,
+            invoiceDate: null,
+            maxShipped: null,
+            clientId: null,
+            printer: null,
+        },
+        addresses: [],
+        minInvoicingDate: null,
+        parallelism: null,
+        invoicing: false,
+        isInvoicing: false,
+        status: null,
+        addressIndex: 0,
+        errors: [],
+        printer: null,
+        nRequests: 0,
+        nPdfs: 0,
+        totalPdfs: 0,
+    }),
+    actions: {
+        async init() {
+            await this.fetchAllData();
+        },
+
+        async fetchAllData() {
+            try {
+                const userInfo = await useUserConfig().fetch();
+                const date = Date.vnNew();
+                this.formInitialData.maxShipped = new Date(
+                    date.getFullYear(),
+                    date.getMonth(),
+                    0
+                )
+                    .toISOString()
+                    .substring(0, 10);
+
+                await Promise.all([
+                    this.fetchParallelism(),
+                    this.fetchInvoiceOutConfig(userInfo.companyFk),
+                ]);
+
+                this.initialDataLoading = false;
+            } catch (err) {
+                console.error('Error fetching invoice out global initial data');
+            }
+        },
+
+        async fetchInvoiceOutConfig(companyFk) {
+            this.formInitialData.companyFk = companyFk;
+            const params = { companyFk: companyFk };
+            const { issued } = await invoiceOutService.getInvoiceDate(params);
+            const stringDate = issued.substring(0, 10);
+            this.minInvoicingDate = stringDate;
+            this.formInitialData.invoiceDate = stringDate;
+        },
+
+        async fetchParallelism() {
+            const filter = { fields: ['parallelism'] };
+            const { parallelism } = await invoiceOutService.getFindOne(filter);
+            this.parallelism = parallelism;
+        },
+
+        async makeInvoice(formData, clientsToInvoice) {
+            this.invoicing = true;
+            this.status = 'packageInvoicing';
+            try {
+                this.printer = formData.printer;
+                const params = {
+                    invoiceDate: new Date(formData.invoiceDate),
+                    maxShipped: new Date(formData.maxShipped),
+                    clientId: formData.clientId ? formData.clientId : null,
+                    companyFk: formData.companyFk,
+                };
+
+                this.validateMakeInvoceParams(params, clientsToInvoice);
+
+                if (clientsToInvoice == 'all') params.clientId = undefined;
+
+                const addressesResponse = await invoiceOutService.getClientsToInvoice(
+                    params
+                );
+
+                this.addresses = addressesResponse;
+
+                if (!this.addresses || !this.addresses.length > 0) {
+                    notify(
+                        'invoiceOut.globalInvoices.errors.noTicketsToInvoice',
+                        'negative'
+                    );
+                    throw new Error("There aren't addresses to invoice");
+                }
+
+                this.addresses.forEach(async (address) => {
+                    await this.invoiceClient(address, formData);
+                });
+            } catch (err) {
+                this.handleError(err);
+            }
+        },
+
+        validateMakeInvoceParams(params, clientsToInvoice) {
+            if (clientsToInvoice === 'one' && !params.clientId) {
+                notify('invoiceOut.globalInvoices.errors.chooseValidClient', 'negative');
+                throw new Error('Invalid client');
+            }
+            if (!params.invoiceDate || !params.maxShipped) {
+                notify('invoiceOut.globalInvoices.errors.fillDates', 'negative');
+                throw new Error('Missing dates');
+            }
+            if (params.invoiceDate < params.maxShipped) {
+                notify(
+                    'invoiceOut.globalInvoices.errors.invoiceDateLessThanMaxDate',
+                    'negative'
+                );
+                throw new Error('Invalid date range');
+            }
+
+            const invoiceDateTime = new Date(params.invoiceDate).getTime();
+            const minInvoiceDateTime = new Date(this.minInvoicingDate).getTime();
+
+            if (this.minInvoicingDate && invoiceDateTime < minInvoiceDateTime) {
+                notify(
+                    'invoiceOut.globalInvoices.errors.invoiceWithFutureDate',
+                    'negative'
+                );
+                throw new Error('Invoice date in the future');
+            }
+
+            if (!params.companyFk) {
+                notify('invoiceOut.globalInvoices.errors.chooseValidCompany', 'negative');
+                throw new Error('Invalid company');
+            }
+            if (!this.printer) {
+                notify('invoiceOut.globalInvoices.errors.chooseValidPrinter', 'negative');
+                throw new Error('Invalid printer');
+            }
+        },
+
+        async invoiceClient(address, formData) {
+            if (this.nRequests === this.parallelism || this.isInvoicing) return;
+
+            if (this.status === 'stopping') {
+                if (this.nRequests) return;
+                this.invoicing = false;
+                this.status = 'done';
+                return;
+            }
+
+            const params = {
+                clientId: address.clientId,
+                addressId: address.id,
+                invoiceDate: new Date(formData.invoiceDate),
+                maxShipped: new Date(formData.maxShipped),
+                companyFk: formData.companyFk,
+            };
+
+            this.status = 'invoicing';
+            this.invoicing = true;
+
+            const invoiceResponse = await invoiceOutService.invoiceClient(params);
+
+            if (invoiceResponse.data.error) {
+                if (invoiceResponse.status >= 400 && invoiceResponse.status < 500) {
+                    this.invoiceClientError(address, invoiceResponse);
+                    this.addressIndex++;
+                    return;
+                } else {
+                    this.invoicing = false;
+                    this.status = 'done';
+                    notify(
+                        'invoiceOut.globalInvoices.errors.criticalInvoiceError',
+                        'negative'
+                    );
+                    throw new Error('Critical invoicing error, process stopped');
+                }
+            } else {
+                this.isInvoicing = false;
+                if (invoiceResponse.data) {
+                    this.makePdfAndNotify(invoiceResponse.data, address);
+                }
+            }
+        },
+
+        async makePdfAndNotify(invoiceId, client) {
+            try {
+                this.nRequests++;
+                this.totalPdfs++;
+                const params = { printerFk: this.printer };
+                await invoiceOutService.makePdfAndNotify(invoiceId, params);
+                this.nPdfs++;
+                this.nRequests--;
+            } catch (err) {
+                this.invoiceClientError(client, err, true);
+            }
+        },
+
+        invoiceClientError(client, response, isWarning) {
+            const message = response.data?.error?.message || response.message;
+            this.errors.unshift({ client, message, isWarning });
+        },
+
+        handleError(err) {
+            this.invoicing = false;
+            this.status = null;
+            throw err;
+        },
+
+        async getNegativeBasesCsv(from, to) {
+            try {
+                const params = { from: from, to: to };
+                const CSVResponse = await invoiceOutService.getNegativeBasesCsv(params);
+
+                if (CSVResponse.data && CSVResponse.data.error) throw new Error();
+
+                const status = exportFile('negativeBases.csv', CSVResponse, {
+                    encoding: 'windows-1252',
+                    mimeType: 'text/csv;charset=windows-1252;',
+                });
+
+                if (status) {
+                    notify('globals.downloadCSVSuccess', 'positive');
+                }
+            } catch (err) {
+                notify('invoiceOut.negativeBases.errors.downloadCsvFailed', 'negative');
+            }
+        },
+
+        // State mutations actions
+
+        setStatusValue(status) {
+            this.status = status;
+        },
+    },
+
+    getters: {
+        getNAddresses(state) {
+            return state.addresses.length;
+        },
+        getPercentage(state) {
+            if (this.getNAdresses <= 0 || !state.addressIndex) {
+                return 0;
+            }
+            let porcentaje = (state.addressIndex / this.getNAddresses) * 100;
+            return porcentaje;
+        },
+        getAddressNumber(state) {
+            return state.addressIndex;
+        },
+    },
+});
diff --git a/src/stores/useNavigationStore.js b/src/stores/useNavigationStore.js
index 5db0049cf..b5947f87b 100644
--- a/src/stores/useNavigationStore.js
+++ b/src/stores/useNavigationStore.js
@@ -11,10 +11,13 @@ export const useNavigationStore = defineStore('navigationStore', () => {
         'claim',
         'ticket',
         'invoiceOut',
-        'invoiceIn',
         'worker',
+        'shelving',
         'wagon',
         'route',
+        'supplier',
+        'travel',
+        'invoiceIn',
     ];
     const pinnedModules = ref([]);
     const role = useRole();

From bbb2dadc9d93fcb57d1b7026fe7bfb07a28cf352 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 13 Dec 2023 14:36:01 +0100
Subject: [PATCH 79/81] refs #6062 test: fix value name

---
 test/vitest/__tests__/components/common/VnLog.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/vitest/__tests__/components/common/VnLog.spec.js b/test/vitest/__tests__/components/common/VnLog.spec.js
index dbcb30272..b654bff9b 100644
--- a/test/vitest/__tests__/components/common/VnLog.spec.js
+++ b/test/vitest/__tests__/components/common/VnLog.spec.js
@@ -104,7 +104,7 @@ describe('VnLog', () => {
     });
 
     it('should correctly set logTree', async () => {
-        vm.logTree = vm.getLogs(fakeLogTreeData);
+        vm.logTree = vm.getLogTree(fakeLogTreeData);
         expect(vm.logTree[0].originFk).toEqual(1);
         expect(vm.logTree[0].logs[0].user.name).toEqual('salesPerson');
     });

From a1499280158631a95de8879cac45ada61ee21ea6 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 13 Dec 2023 14:44:56 +0100
Subject: [PATCH 80/81] refs #6062 fix: invoiceIn translation

---
 src/i18n/en/index.js | 2 +-
 src/i18n/es/index.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 3c3c9f7df..5e7e116c5 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -372,7 +372,7 @@ export default {
     },
     invoiceOut: {
         pageTitles: {
-            invoiceOuts: 'Create invoice',
+            invoiceOuts: 'Invoice out',
             list: 'List',
             negativeBases: 'Negative Bases',
             globalInvoicing: 'Global invoicing',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 0289b7e78..4e570e7b4 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -371,7 +371,7 @@ export default {
     },
     invoiceOut: {
         pageTitles: {
-            invoiceOuts: 'Crear factura',
+            invoiceOuts: 'Fact. emitidas',
             list: 'Listado',
             negativeBases: 'Bases Negativas',
             globalInvoicing: 'Facturación global',

From d369ce715232034a80fbc26d11af54601f2cf908 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 13 Dec 2023 14:57:27 -0300
Subject: [PATCH 81/81] more filters adaptations

---
 src/pages/Claim/ClaimFilter.vue           |   5 +-
 src/pages/Customer/CustomerFilter.vue     |   5 +-
 src/pages/InvoiceIn/InvoiceInFilter.vue   | 177 ++++++++--------------
 src/pages/Route/Cmr/CmrFilter.vue         |   6 +-
 src/pages/Travel/ExtraCommunityFilter.vue |   5 +-
 src/pages/Travel/TravelFilter.vue         |   5 +-
 6 files changed, 85 insertions(+), 118 deletions(-)

diff --git a/src/pages/Claim/ClaimFilter.vue b/src/pages/Claim/ClaimFilter.vue
index 9fd781dc9..b06f47653 100644
--- a/src/pages/Claim/ClaimFilter.vue
+++ b/src/pages/Claim/ClaimFilter.vue
@@ -36,7 +36,7 @@ const states = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense style="max-width: 256px" class="list">
+            <QList dense class="list">
                 <QItem class="q-my-sm">
                     <QItemSection>
                         <VnInput
@@ -184,6 +184,9 @@ const states = ref();
 </template>
 
 <style scoped>
+.list {
+    width: 256px;
+}
 .list * {
     max-width: 100%;
 }
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index d7eac2b6c..36a9add89 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -37,7 +37,7 @@ const zones = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense style="max-width: 256px" class="list">
+            <QList dense class="list">
                 <QItem class="q-my-sm">
                     <QItemSection>
                         <VnInput :label="t('FI')" v-model="params.fi" is-outlined>
@@ -176,6 +176,9 @@ const zones = ref();
 </template>
 
 <style scoped>
+.list {
+    width: 256px;
+}
 .list * {
     max-width: 100%;
 }
diff --git a/src/pages/InvoiceIn/InvoiceInFilter.vue b/src/pages/InvoiceIn/InvoiceInFilter.vue
index 6348d4167..f8198d237 100644
--- a/src/pages/InvoiceIn/InvoiceInFilter.vue
+++ b/src/pages/InvoiceIn/InvoiceInFilter.vue
@@ -1,9 +1,12 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
 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';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -33,28 +36,32 @@ const suppliersRef = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
+            <QList dense class="list q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
-                        <QInput :label="t('Id or Supplier')" v-model="params.search">
+                        <VnInput
+                            :label="t('Id or Supplier')"
+                            v-model="params.search"
+                            is-outlined
+                        >
                             <template #prepend>
                                 <QIcon name="badge" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('params.supplierRef')"
                             v-model="params.supplierRef"
-                            @input.
+                            is-outlined
                             lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="vn:client" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
@@ -66,52 +73,67 @@ const suppliersRef = ref();
                             option-value="id"
                             option-label="nickname"
                             @input-value="suppliersRef.fetch()"
+                            dense
+                            outlined
+                            rounded
                         >
                         </VnSelectFilter>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput :label="t('params.fi')" v-model="params.fi" lazy-rules>
+                        <VnInput
+                            :label="t('params.fi')"
+                            v-model="params.fi"
+                            is-outlined
+                            lazy-rules
+                        >
                             <template #prepend>
                                 <QIcon name="badge" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('params.serialNumber')"
                             v-model="params.serialNumber"
+                            is-outlined
                             lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="badge" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('params.serial')"
                             v-model="params.serial"
+                            is-outlined
                             lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="badge" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput :label="t('Amount')" v-model="params.amount" lazy-rules>
+                        <VnInput
+                            :label="t('Amount')"
+                            v-model="params.amount"
+                            is-outlined
+                            lazy-rules
+                        >
                             <template #prepend>
                                 <QIcon name="euro" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem class="q-mb-md">
@@ -127,137 +149,57 @@ const suppliersRef = ref();
                 <QExpansionItem :label="t('More options')" expand-separator>
                     <QItem>
                         <QItemSection>
-                            <QInput
+                            <VnInput
                                 :label="t('params.awb')"
                                 v-model="params.awbCode"
+                                is-outlined
                                 lazy-rules
                             >
                                 <template #prepend>
                                     <QIcon name="badge" size="sm"></QIcon>
                                 </template>
-                            </QInput>
+                            </VnInput>
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput
+                            <VnInput
                                 :label="t('params.account')"
                                 v-model="params.account"
+                                is-outlined
                                 lazy-rules
                             >
                                 <template #prepend>
                                     <QIcon name="person" size="sm" />
                                 </template>
-                            </QInput>
+                            </VnInput>
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput :label="t('From')" v-model="params.from" mask="date">
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate v-model="params.from" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        color="primary"
-                                                        flat
-                                                        @click="save"
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                            <VnInputDate
+                                :label="t('From')"
+                                v-model="params.from"
+                                is-outlined
+                            />
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput :label="t('To')" v-model="params.to" mask="date">
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate v-model="params.to" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        color="primary"
-                                                        flat
-                                                        @click="save"
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                            <VnInputDate
+                                :label="t('To')"
+                                v-model="params.to"
+                                is-outlined
+                            />
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput
+                            <VnInputDate
                                 :label="t('Issued')"
                                 v-model="params.issued"
-                                mask="date"
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate v-model="params.issued" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        color="primary"
-                                                        flat
-                                                        @click="save"
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                                is-outlined
+                            />
                         </QItemSection>
                     </QItem>
                 </QExpansionItem>
@@ -266,6 +208,15 @@ const suppliersRef = ref();
     </VnFilterPanel>
 </template>
 
+<style scoped>
+.list {
+    width: 256px;
+}
+.list * {
+    max-width: 100%;
+}
+</style>
+
 <i18n>
 en:
     params:
diff --git a/src/pages/Route/Cmr/CmrFilter.vue b/src/pages/Route/Cmr/CmrFilter.vue
index 89cc822b3..a5bf5513b 100644
--- a/src/pages/Route/Cmr/CmrFilter.vue
+++ b/src/pages/Route/Cmr/CmrFilter.vue
@@ -28,12 +28,13 @@ const countries = ref();
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense>
+            <QList dense class="q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
                         <VnInput
                             :label="t('route.cmr.list.cmrFk')"
                             v-model="params.cmrFk"
+                            is-outlined
                         >
                             <template #prepend>
                                 <QIcon name="article" size="sm"></QIcon>
@@ -55,6 +56,7 @@ const countries = ref();
                         <VnInput
                             :label="t('route.cmr.list.ticketFk')"
                             v-model="params.ticketFk"
+                            is-outlined
                         >
                             <template #prepend>
                                 <QIcon name="vn:ticket" size="sm"></QIcon>
@@ -67,6 +69,7 @@ const countries = ref();
                         <VnInput
                             :label="t('route.cmr.list.routeFk')"
                             v-model="params.routeFk"
+                            is-outlined
                         >
                             <template #prepend>
                                 <QIcon name="vn:delivery" size="sm"></QIcon>
@@ -79,6 +82,7 @@ const countries = ref();
                         <VnInput
                             :label="t('route.cmr.list.clientFk')"
                             v-model="params.clientFk"
+                            is-outlined
                         >
                             <template #prepend>
                                 <QIcon name="vn:client" size="sm"></QIcon>
diff --git a/src/pages/Travel/ExtraCommunityFilter.vue b/src/pages/Travel/ExtraCommunityFilter.vue
index b7c97649c..57c3ec4bf 100644
--- a/src/pages/Travel/ExtraCommunityFilter.vue
+++ b/src/pages/Travel/ExtraCommunityFilter.vue
@@ -72,7 +72,7 @@ const decrement = (paramsObj, key) => {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense style="max-width: 256px" class="list q-gutter-y-sm q-mt-sm">
+            <QList dense class="list q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
                         <VnInput label="id" v-model="params.id" is-outlined />
@@ -217,6 +217,9 @@ const decrement = (paramsObj, key) => {
 </template>
 
 <style scoped>
+.list {
+    width: 256px;
+}
 .list * {
     max-width: 100%;
 }
diff --git a/src/pages/Travel/TravelFilter.vue b/src/pages/Travel/TravelFilter.vue
index 51f398f4e..d4cb286c2 100644
--- a/src/pages/Travel/TravelFilter.vue
+++ b/src/pages/Travel/TravelFilter.vue
@@ -67,7 +67,7 @@ const decrement = (paramsObj, key) => {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense style="max-width: 256px" class="list q-gutter-y-sm q-mt-sm">
+            <QList dense class="list q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
                         <VnInput
@@ -270,6 +270,9 @@ const decrement = (paramsObj, key) => {
 </template>
 
 <style scoped>
+.list {
+    width: 256px;
+}
 .list * {
     max-width: 100%;
 }