From 8861ee038dfbf44da1b97f8cf91a6bb4517f86ab Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 9 Jan 2024 10:35:39 +0100
Subject: [PATCH 01/86] refs #6384 fix: redirect to same path when id change

---
 src/components/ui/VnSearchbar.vue | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 35f6c1548..bb54f6d31 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -72,15 +72,10 @@ async function search() {
     });
     if (!props.redirect) return;
 
-    const rows = store.data;
-    const module = route.matched[1];
-    if (rows.length === 1) {
-        const [firstRow] = rows;
-        await router.push({ path: `${module.path}/${firstRow.id}` });
-    } else if (route.matched.length > 3) {
-        await router.push({ path: `/${module.path}` });
-        arrayData.updateStateParams();
-    }
+    const { matched: matches } = route;
+    const { path } = matches[matches.length-1];
+    const newRoute = path.replace(':id', searchText.value);
+    await router.push(newRoute);
 }
 </script>
 

From d139d670f17bc8f239455937b7ed47b12e41d20e Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 9 Jan 2024 10:37:59 +0100
Subject: [PATCH 02/86] refs #6384 perf: replace code with VnSubToolbar

---
 src/pages/Claim/Card/ClaimCard.vue         | 1 -
 src/pages/Customer/Card/CustomerCard.vue   | 7 ++-----
 src/pages/InvoiceIn/Card/InvoiceInCard.vue | 7 ++-----
 src/pages/Supplier/Card/SupplierCard.vue   | 7 ++-----
 src/pages/Ticket/Card/TicketCard.vue       | 7 ++-----
 src/pages/Travel/Card/TravelCard.vue       | 7 ++-----
 src/pages/Worker/Card/WorkerCard.vue       | 7 ++-----
 7 files changed, 12 insertions(+), 31 deletions(-)

diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index b6c948c96..8ebfcc285 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -1,6 +1,5 @@
 <script setup>
 import LeftMenu from 'components/LeftMenu.vue';
-import { getUrl } from 'composables/getUrl';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { computed } from 'vue';
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index c833d0cf9..36ec263f0 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -5,6 +5,7 @@ import { useRoute } from 'vue-router';
 import CustomerDescriptor from './CustomerDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 const route = useRoute();
@@ -28,11 +29,7 @@ const { t } = useI18n();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
-                <div id="st-data"></div>
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
+            <VnSubToolbar />
             <div class="q-pa-md"><RouterView></RouterView></div>
         </QPage>
     </QPageContainer>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInCard.vue b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
index 4d06cb41e..de843d6af 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInCard.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import InvoiceInDescriptor from './InvoiceInDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
@@ -74,11 +75,7 @@ onMounted(async () => {
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
-                <div id="st-data"></div>
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
+            <VnSubToolbar />
             <div class="q-pa-md"><RouterView></RouterView></div>
         </QPage>
     </QPageContainer>
diff --git a/src/pages/Supplier/Card/SupplierCard.vue b/src/pages/Supplier/Card/SupplierCard.vue
index cf94c9e8d..33d1fe592 100644
--- a/src/pages/Supplier/Card/SupplierCard.vue
+++ b/src/pages/Supplier/Card/SupplierCard.vue
@@ -2,6 +2,7 @@
 import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -23,11 +24,7 @@ const { t } = useI18n();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
-                <div id="st-data"></div>
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
+            <VnSubToolbar />
             <div class="q-pa-md"><RouterView></RouterView></div>
         </QPage>
     </QPageContainer>
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 91921f827..d8b899b17 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -4,6 +4,7 @@ import { useStateStore } from 'stores/useStateStore';
 import TicketDescriptor from './TicketDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -26,11 +27,7 @@ const { t } = useI18n();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
-                <div id="st-data"></div>
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
+            <VnSubToolbar />
             <div class="q-pa-md"><RouterView></RouterView></div>
         </QPage>
     </QPageContainer>
diff --git a/src/pages/Travel/Card/TravelCard.vue b/src/pages/Travel/Card/TravelCard.vue
index 6309c14ab..db34bbfa0 100644
--- a/src/pages/Travel/Card/TravelCard.vue
+++ b/src/pages/Travel/Card/TravelCard.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { useStateStore } from 'stores/useStateStore';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 </script>
@@ -11,11 +12,7 @@ const stateStore = useStateStore();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
-                <div id="st-data"></div>
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
+            <VnSubToolbar />
             <div class="q-pa-md"><RouterView></RouterView></div>
         </QPage>
     </QPageContainer>
diff --git a/src/pages/Worker/Card/WorkerCard.vue b/src/pages/Worker/Card/WorkerCard.vue
index 972eb52ec..19397b62e 100644
--- a/src/pages/Worker/Card/WorkerCard.vue
+++ b/src/pages/Worker/Card/WorkerCard.vue
@@ -4,6 +4,7 @@ import { useStateStore } from 'stores/useStateStore';
 import WorkerDescriptor from './WorkerDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -26,11 +27,7 @@ const { t } = useI18n();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
-                <div id="st-data"></div>
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
+            <VnSubToolbar />
             <div class="q-pa-md"><RouterView></RouterView></div>
         </QPage>
     </QPageContainer>

From 762daa620b6e62da265491912e915b948e33fcde Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 9 Jan 2024 12:06:17 +0100
Subject: [PATCH 03/86] refs #6384 test: e2e

---
 test/cypress/integration/vnSearchBar.spec.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 test/cypress/integration/vnSearchBar.spec.js

diff --git a/test/cypress/integration/vnSearchBar.spec.js b/test/cypress/integration/vnSearchBar.spec.js
new file mode 100644
index 000000000..6a769c9d9
--- /dev/null
+++ b/test/cypress/integration/vnSearchBar.spec.js
@@ -0,0 +1,20 @@
+/// <reference types="cypress" />
+describe('VnSearchBar', () => {
+    beforeEach(() => {
+        cy.login('developer');
+        cy.visit('/');
+    });
+
+        it('should redirect to new customer', () => {
+            cy.visit('#/customer/1112/basic-data')
+            cy.get('.q-toolbar > .q-btn--round.q-btn--dense > .q-btn__content > .q-icon').click();
+            cy.get('.q-item > .q-item__label').should('have.text',' #1112')
+            cy.get('.fullscreen').click();
+            cy.get('#searchbar > form > label > div:nth-child(1) input').clear();
+            cy.get('#searchbar > form > label > div:nth-child(1) input').type('1{enter}');
+            cy.get('.q-toolbar > .q-btn--round.q-btn--dense > .q-btn__content > .q-icon').click();
+            cy.get('.q-item > .q-item__label').should('have.text',' #1')
+        });
+
+
+            });

From b4f330a2378ea217ee8e10a4d8f955b055a33e8b Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 9 Jan 2024 12:20:56 +0100
Subject: [PATCH 04/86] refs #6384 test: e2e

---
 test/cypress/integration/vnSearchBar.spec.js | 15 +++++++--------
 test/cypress/support/commands.js             | 17 +++++++++++++++++
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/test/cypress/integration/vnSearchBar.spec.js b/test/cypress/integration/vnSearchBar.spec.js
index 6a769c9d9..d6dea0780 100644
--- a/test/cypress/integration/vnSearchBar.spec.js
+++ b/test/cypress/integration/vnSearchBar.spec.js
@@ -7,14 +7,13 @@ describe('VnSearchBar', () => {
 
         it('should redirect to new customer', () => {
             cy.visit('#/customer/1112/basic-data')
-            cy.get('.q-toolbar > .q-btn--round.q-btn--dense > .q-btn__content > .q-icon').click();
+            cy.openLeftMenu();
             cy.get('.q-item > .q-item__label').should('have.text',' #1112')
-            cy.get('.fullscreen').click();
-            cy.get('#searchbar > form > label > div:nth-child(1) input').clear();
-            cy.get('#searchbar > form > label > div:nth-child(1) input').type('1{enter}');
-            cy.get('.q-toolbar > .q-btn--round.q-btn--dense > .q-btn__content > .q-icon').click();
+            cy.closeLeftMenu();
+            cy.clearSearchbar();
+            cy.writeSearchbar('1{enter}');
+            cy.openLeftMenu();
             cy.get('.q-item > .q-item__label').should('have.text',' #1')
+            cy.closeLeftMenu();
         });
-
-
-            });
+});
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index 4dfde6e21..7effb94a6 100755
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -166,6 +166,23 @@ Cypress.Commands.add('openRightMenu', (element) => {
     cy.get('#actions-append').click();
 });
 
+Cypress.Commands.add('openLeftMenu', (element) => {
+    if (element) cy.waitForElement(element);
+    cy.get('.q-toolbar > .q-btn--round.q-btn--dense > .q-btn__content > .q-icon').click();
+});
+Cypress.Commands.add('closeLeftMenu', (element) => {
+    if (element) cy.waitForElement(element);
+    cy.get('.fullscreen').click();
+});
+
+Cypress.Commands.add('clearSearchbar', (element) => {
+    if (element) cy.waitForElement(element);
+    cy.get('#searchbar > form > label > div:nth-child(1) input').clear();
+});
+
+Cypress.Commands.add('writeSearchbar', (value) => {
+     cy.get('#searchbar > form > label > div:nth-child(1) input').type(value);
+});
 Cypress.Commands.add('validateContent', (selector, expectedValue) => {
     cy.get(selector).should('have.text', expectedValue);
 });

From bdbc34d4e7fb9a1a1bb9f5183cf9f7f955f7471b Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Tue, 9 Jan 2024 14:00:51 +0100
Subject: [PATCH 05/86] refs #6325 claimRatio

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

diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index 6693274ac..4ebd6efab 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -38,7 +38,7 @@ const balanceDue = computed(() => {
 const balanceDueWarning = computed(() => (balanceDue.value ? 'negative' : ''));
 
 const claimRate = computed(() => {
-    return customer.value.claimsRatio.claimingRate * 100;
+    return customer.value.claimsRatio.claimingRate;
 });
 
 const priceIncreasingRate = computed(() => {

From 3e8744c8371be5ea1df84cb5c542223ca0629196 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 9 Jan 2024 14:24:29 +0100
Subject: [PATCH 06/86] fix: refs #6630 fix css

---
 src/components/common/VnLog.vue | 51 ++++++++++++++++-----------------
 src/components/ui/VnAvatar.vue  |  3 +-
 2 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 0949fb5cb..1794c3850 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -415,7 +415,7 @@ setLogTree();
             <div class="line bg-grey"></div>
         </QItem>
         <div
-            class="user-log q-mb-sm row"
+            class="user-log q-mb-sm"
             v-for="(userLog, userIndex) in originLog.logs"
             :key="userIndex"
         >
@@ -425,6 +425,7 @@ setLogTree();
                         class="cursor-pointer"
                         :worker="userLog.user.id"
                         :title="userLog.user.nickname"
+                        size="lg"
                     />
                     <WorkerDescriptorProxy
                         v-if="userLog.user.image"
@@ -823,14 +824,30 @@ setLogTree();
 .q-item {
     min-height: 0px;
 }
+.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;
+        }
+    }
+}
 .origin-log {
     &:first-child > .origin-info {
         margin-top: 0;
     }
     & > .origin-info {
-        width: 100%;
-        max-width: 42em;
         margin-top: 28px;
         gap: 6px;
 
@@ -847,14 +864,15 @@ setLogTree();
     }
 }
 .user-log {
+    display: flex;
     width: 100%;
     max-width: 40em;
-
     & > .timeline {
         position: relative;
-        padding-right: 5px;
-        width: 50px;
+        padding-right: 1px;
+        width: 38px;
         min-width: 38px;
+        flex-grow: auto;
         & > .arrow {
             height: 8px;
             width: 8px;
@@ -874,7 +892,7 @@ setLogTree();
             position: absolute;
             background-color: $primary;
             width: 2px;
-            left: 23px;
+            left: 19px;
             z-index: -1;
             top: 0;
             bottom: -8px;
@@ -984,25 +1002,6 @@ setLogTree();
         }
     }
 }
-.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:
diff --git a/src/components/ui/VnAvatar.vue b/src/components/ui/VnAvatar.vue
index 85bece243..0cda98b32 100644
--- a/src/components/ui/VnAvatar.vue
+++ b/src/components/ui/VnAvatar.vue
@@ -5,13 +5,14 @@ const $props = defineProps({
     worker: { type: Number, required: true },
     description: { type: String, default: null },
     clickable: { type: Boolean, default: false },
+    size: { type: String, default: 'xl' },
 });
 const session = useSession();
 const token = session.getToken();
 </script>
 <template>
     <div class="avatar-picture column items-center">
-        <QAvatar color="orange">
+        <QAvatar color="orange" :size="$props.size">
             <QImg
                 :src="`/api/Images/user/160x160/${$props.worker}/download?access_token=${token}`"
                 spinner-color="white"

From 5438ce5c337155454044a62a8462930aca30ed71 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 9 Jan 2024 14:34:25 +0100
Subject: [PATCH 07/86] fix: refs #6630 fix css

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

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 1794c3850..14e4789fc 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -911,6 +911,7 @@ setLogTree();
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
+        min-height: 22px;
         .model-value {
             font-style: italic;
         }

From 57eca9b2672cc988fcee5730b65c598fb008d9ac Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 9 Jan 2024 15:21:26 +0100
Subject: [PATCH 08/86] fix: refs #6630 getLogTree grouping fixed

---
 src/components/common/VnLog.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 14e4789fc..b0a9f230c 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -168,17 +168,17 @@ function getLogTree(data) {
     let originLog = null;
     let userLog = null;
     let modelLog = null;
-    let prevLog;
     let nLogs;
 
-    data.forEach((log) => {
+    for (let i = 0; i < data.length; i++) {
+        let log = data[i];
+        let prevLog = i > 0 ? data[i - 1] : null;
         const locale = validations[log.changedModel]?.locale || {};
 
         // Origin
         const originChanged = !prevLog || log.originFk != prevLog.originFk;
         if (originChanged) {
             logs.push((originLog = { originFk: log.originFk, logs: [] }));
-            prevLog = log;
         }
         // User
         const userChanged = originChanged || log.userFk != prevLog.userFk;
@@ -197,6 +197,7 @@ function getLogTree(data) {
             log.changedModel != prevLog.changedModel ||
             log.changedModelId != prevLog.changedModelId ||
             nLogs >= 6;
+
         if (modelChanged) {
             userLog.logs.push(
                 (modelLog = {
@@ -221,7 +222,7 @@ function getLogTree(data) {
         propNames = [...new Set(propNames)];
 
         log.props = parseProps(propNames, locale, vals, olds);
-    });
+    }
     return logs;
 }
 

From ef8e77904d78772a4a2517829f71a205c0b907f3 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 9 Jan 2024 16:54:07 +0100
Subject: [PATCH 09/86] refs #6384 test: vitest

---
 .../components/common/VnSearchBar.spec.js     | 70 +++++++++++++++++++
 test/vitest/helper.js                         | 20 +-----
 2 files changed, 71 insertions(+), 19 deletions(-)
 create mode 100644 test/vitest/__tests__/components/common/VnSearchBar.spec.js

diff --git a/test/vitest/__tests__/components/common/VnSearchBar.spec.js b/test/vitest/__tests__/components/common/VnSearchBar.spec.js
new file mode 100644
index 000000000..24111e90e
--- /dev/null
+++ b/test/vitest/__tests__/components/common/VnSearchBar.spec.js
@@ -0,0 +1,70 @@
+import { vi, describe, expect, it, beforeAll, beforeEach, afterEach } from 'vitest';
+import { createWrapper, axios } from 'app/test/vitest/helper';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+
+vi.mock('vue-router', () => ({
+    useRouter: () => ({
+        push: vi.fn( ),
+        currentRoute: {
+            value: {
+                params: {
+                    id: 11,
+                },
+            },
+        },
+    }),
+    useRoute: () => ({
+        matched: [
+            {
+                path: '/',
+            },
+            {
+                path: '/customer',
+            },
+            {
+                path: '/customer/:id',
+            },
+            {
+                path: '/customer/:id/basic-data',
+            },
+        ],
+        query: {},
+        params: {},
+    }),
+}));
+
+describe('VnSearchBar', () => {
+    let vm;
+    let wrapper;
+
+    beforeAll(() => {
+        wrapper = createWrapper(VnSearchbar, {
+            propsData: {
+                dataKey: 'CustomerList',
+                label: 'Search customer',
+                info: 'Info customer',
+            },
+        });
+        vm = wrapper.vm;
+
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+    it('should be defined', async () => {
+        expect(vm.searchText).toBeDefined();
+        expect(vm.searchText).toEqual('');
+    });
+    it('should redirect', async () => {
+        vi.spyOn(vm.router,'push');
+        vm.searchText = '1';
+        await vm.search();
+        expect(vm.router.push).toHaveBeenCalledWith('/customer/1/basic-data');
+        vm.searchText = '1112';
+        expect(vm.searchText).toEqual('1112');
+        vi.spyOn(vm.router,'push');
+        await vm.search();
+        expect(vm.router.push).toHaveBeenCalledWith('/customer/1112/basic-data');
+     });
+});
diff --git a/test/vitest/helper.js b/test/vitest/helper.js
index 89cc640fd..2b8c70a5f 100644
--- a/test/vitest/helper.js
+++ b/test/vitest/helper.js
@@ -14,25 +14,6 @@ installQuasarPlugin({
     },
 });
 const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false });
-const mockPush = vi.fn();
-
-vi.mock('vue-router', () => ({
-    useRouter: () => ({
-        push: mockPush,
-        currentRoute: {
-            value: {
-                params: {
-                    id: 1,
-                },
-            },
-        },
-    }),
-    useRoute: () => ({
-        matched: [],
-        query: {},
-        params: {},
-    }),
-}));
 
 vi.mock('axios');
 
@@ -74,6 +55,7 @@ export function createWrapper(component, options) {
         mocks: {
             t: (tKey) => tKey,
             $t: (tKey) => tKey,
+            customRouter: false
         },
     };
 

From 988c47677b8287f9591e0be543b9b20cb957f35f Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 9 Jan 2024 17:01:11 +0100
Subject: [PATCH 10/86] refs #6384 test: fix vitest

---
 .../components/common/VnSearchBar.spec.js     | 45 ++++++-------------
 test/vitest/helper.js                         | 20 ++++++++-
 2 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/test/vitest/__tests__/components/common/VnSearchBar.spec.js b/test/vitest/__tests__/components/common/VnSearchBar.spec.js
index 24111e90e..fd0a026ef 100644
--- a/test/vitest/__tests__/components/common/VnSearchBar.spec.js
+++ b/test/vitest/__tests__/components/common/VnSearchBar.spec.js
@@ -2,36 +2,6 @@ import { vi, describe, expect, it, beforeAll, beforeEach, afterEach } from 'vite
 import { createWrapper, axios } from 'app/test/vitest/helper';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 
-vi.mock('vue-router', () => ({
-    useRouter: () => ({
-        push: vi.fn( ),
-        currentRoute: {
-            value: {
-                params: {
-                    id: 11,
-                },
-            },
-        },
-    }),
-    useRoute: () => ({
-        matched: [
-            {
-                path: '/',
-            },
-            {
-                path: '/customer',
-            },
-            {
-                path: '/customer/:id',
-            },
-            {
-                path: '/customer/:id/basic-data',
-            },
-        ],
-        query: {},
-        params: {},
-    }),
-}));
 
 describe('VnSearchBar', () => {
     let vm;
@@ -46,7 +16,20 @@ describe('VnSearchBar', () => {
             },
         });
         vm = wrapper.vm;
-
+        vm.route.matched = [
+            {
+                path: '/',
+            },
+            {
+                path: '/customer',
+            },
+            {
+                path: '/customer/:id',
+            },
+            {
+                path: '/customer/:id/basic-data',
+            },
+        ];
     });
 
     afterEach(() => {
diff --git a/test/vitest/helper.js b/test/vitest/helper.js
index 2b8c70a5f..89cc640fd 100644
--- a/test/vitest/helper.js
+++ b/test/vitest/helper.js
@@ -14,6 +14,25 @@ installQuasarPlugin({
     },
 });
 const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false });
+const mockPush = vi.fn();
+
+vi.mock('vue-router', () => ({
+    useRouter: () => ({
+        push: mockPush,
+        currentRoute: {
+            value: {
+                params: {
+                    id: 1,
+                },
+            },
+        },
+    }),
+    useRoute: () => ({
+        matched: [],
+        query: {},
+        params: {},
+    }),
+}));
 
 vi.mock('axios');
 
@@ -55,7 +74,6 @@ export function createWrapper(component, options) {
         mocks: {
             t: (tKey) => tKey,
             $t: (tKey) => tKey,
-            customRouter: false
         },
     };
 

From d4968d060b9181857966784049763fbf707ffb11 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 9 Jan 2024 17:02:21 +0100
Subject: [PATCH 11/86] Revert "refs #6384 perf: replace code with
 VnSubToolbar"

This reverts commit d139d670f17bc8f239455937b7ed47b12e41d20e.
---
 src/pages/Claim/Card/ClaimCard.vue         | 1 +
 src/pages/Customer/Card/CustomerCard.vue   | 7 +++++--
 src/pages/InvoiceIn/Card/InvoiceInCard.vue | 7 +++++--
 src/pages/Supplier/Card/SupplierCard.vue   | 7 +++++--
 src/pages/Ticket/Card/TicketCard.vue       | 7 +++++--
 src/pages/Travel/Card/TravelCard.vue       | 7 +++++--
 src/pages/Worker/Card/WorkerCard.vue       | 7 +++++--
 7 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index 8ebfcc285..b6c948c96 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -1,5 +1,6 @@
 <script setup>
 import LeftMenu from 'components/LeftMenu.vue';
+import { getUrl } from 'composables/getUrl';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { computed } from 'vue';
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 36ec263f0..c833d0cf9 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -5,7 +5,6 @@ import { useRoute } from 'vue-router';
 import CustomerDescriptor from './CustomerDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 const route = useRoute();
@@ -29,7 +28,11 @@ const { t } = useI18n();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <VnSubToolbar />
+            <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>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInCard.vue b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
index de843d6af..4d06cb41e 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInCard.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import InvoiceInDescriptor from './InvoiceInDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
@@ -75,7 +74,11 @@ onMounted(async () => {
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <VnSubToolbar />
+            <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>
diff --git a/src/pages/Supplier/Card/SupplierCard.vue b/src/pages/Supplier/Card/SupplierCard.vue
index 33d1fe592..cf94c9e8d 100644
--- a/src/pages/Supplier/Card/SupplierCard.vue
+++ b/src/pages/Supplier/Card/SupplierCard.vue
@@ -2,7 +2,6 @@
 import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -24,7 +23,11 @@ const { t } = useI18n();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <VnSubToolbar />
+            <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>
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index d8b899b17..91921f827 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -4,7 +4,6 @@ import { useStateStore } from 'stores/useStateStore';
 import TicketDescriptor from './TicketDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -27,7 +26,11 @@ const { t } = useI18n();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <VnSubToolbar />
+            <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>
diff --git a/src/pages/Travel/Card/TravelCard.vue b/src/pages/Travel/Card/TravelCard.vue
index db34bbfa0..6309c14ab 100644
--- a/src/pages/Travel/Card/TravelCard.vue
+++ b/src/pages/Travel/Card/TravelCard.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { useStateStore } from 'stores/useStateStore';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 </script>
@@ -12,7 +11,11 @@ const stateStore = useStateStore();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <VnSubToolbar />
+            <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>
diff --git a/src/pages/Worker/Card/WorkerCard.vue b/src/pages/Worker/Card/WorkerCard.vue
index 19397b62e..972eb52ec 100644
--- a/src/pages/Worker/Card/WorkerCard.vue
+++ b/src/pages/Worker/Card/WorkerCard.vue
@@ -4,7 +4,6 @@ import { useStateStore } from 'stores/useStateStore';
 import WorkerDescriptor from './WorkerDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -27,7 +26,11 @@ const { t } = useI18n();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <VnSubToolbar />
+            <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>

From f2006663b732bf70908254362624e4e08078fce1 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Wed, 10 Jan 2024 14:29:01 +0100
Subject: [PATCH 12/86] refs #6664 popup

---
 src/components/ui/VnConfirm.vue      | 13 ++++++++++---
 src/pages/Claim/Card/ClaimAction.vue | 16 +++++++++++-----
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/ui/VnConfirm.vue b/src/components/ui/VnConfirm.vue
index f8715f685..c6650a28f 100644
--- a/src/components/ui/VnConfirm.vue
+++ b/src/components/ui/VnConfirm.vue
@@ -2,6 +2,7 @@
 import { ref } from 'vue';
 import { useDialogPluginComponent } from 'quasar';
 import { useI18n } from 'vue-i18n';
+import { onMounted } from 'vue';
 
 const { t } = useI18n();
 
@@ -28,6 +29,7 @@ const props = defineProps({
         required: false,
         default: null,
     },
+    callbackFn: Function,
 });
 
 defineEmits(['confirm', ...useDialogPluginComponent.emits]);
@@ -37,12 +39,17 @@ const { dialogRef, onDialogOK } = useDialogPluginComponent();
 const title = props.title || t('Confirm');
 const message = props.message || t('Are you sure you want to continue?');
 const isLoading = ref(false);
-
+onMounted(() => {
+    if (props.callbackFn) props.callbackFn();
+});
 async function confirm() {
+    let html = null;
+    html = document.getElementById(props.data.inputId);
     isLoading.value = true;
     if (props.promise) {
         try {
-            await props.promise(props.data);
+            if (html) await props.promise({ ...props.data, return: html.value });
+            else await props.promise(props.data);
         } finally {
             isLoading.value = false;
         }
@@ -66,7 +73,7 @@ async function confirm() {
                 <QBtn icon="close" :disable="isLoading" flat round dense v-close-popup />
             </QCardSection>
             <QCardSection class="row items-center">
-                <span v-html="message"></span>
+                <span id="spanHTML" v-html="message"></span>
             </QCardSection>
             <QCardActions align="right">
                 <QBtn
diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index e92e65fc7..f3dd0b952 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -37,6 +37,7 @@ const marker_labels = [
     { value: DEFAULT_MIN_RESPONSABILITY, label: t('claim.summary.company') },
     { value: DEFAULT_MAX_RESPONSABILITY, label: t('claim.summary.person') },
 ];
+const portesMultiplicator = ref();
 
 const columns = computed(() => [
     {
@@ -140,22 +141,27 @@ async function regularizeClaim() {
                 component: VnConfirm,
                 componentProps: {
                     title: t('confirmGreuges'),
-                    message: t('confirmGreugesMessage'),
+                    message: `
+                    <input class="q-field__native q-m-md" type="number" placeholder="1" id="multiplicatorValue" name="multiplicatorValue" min="0" max="50"/>
+                     `,
+                    data: { inputId: 'multiplicatorValue' },
+                    promise: onUpdateGreugeAccept,
                 },
             })
             .onOk(async () => await onUpdateGreugeAccept());
     }
 }
 
-async function onUpdateGreugeAccept() {
+async function onUpdateGreugeAccept({ return: multiplicatorValue }) {
     const greugeTypeFreightId = (
         await axios.get(`GreugeTypes/findOne`, {
             filter: { where: { code: 'freightPickUp' } },
         })
     ).data.id;
-    const freightPickUpPrice = (await axios.get(`GreugeConfigs/findOne`)).data
-        .freightPickUpPrice;
-
+    const freightPickUpPrice =
+        (await axios.get(`GreugeConfigs/findOne`)).data.freightPickUpPrice *
+        +multiplicatorValue;
+    console.log(freightPickUpPrice);
     await axios.post(`Greuges`, {
         clientFk: claim.value.clientFk,
         description: `${t('ClaimGreugeDescription')} ${claimId}`.toUpperCase(),

From cdadb57af38c0b3f749c8d551775c251f95765d8 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 10 Jan 2024 15:41:00 +0100
Subject: [PATCH 13/86] fix: refs #6630 resolve conficts

---
 src/components/common/VnLog.vue | 2 +-
 src/components/ui/VnAvatar.vue  | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 1a271f50f..b42dac386 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -428,6 +428,7 @@ setLogTree();
                                 :class="{ 'cursor-pointer': userLog.user.id }"
                                 :worker-id="userLog.user.id"
                                 :title="userLog.user.nickname"
+                                size="md"
                             />
                         </template>
                     </VnUserLink>
@@ -666,7 +667,6 @@ setLogTree();
                         option-label="locale"
                         :options="actions"
                         @update:model-value="selectFilter('action')"
-                        @clear="() => selectFilter('action')"
                         hide-selected
                     />
                 </QItem>
diff --git a/src/components/ui/VnAvatar.vue b/src/components/ui/VnAvatar.vue
index 566497395..d26aeac19 100644
--- a/src/components/ui/VnAvatar.vue
+++ b/src/components/ui/VnAvatar.vue
@@ -4,6 +4,7 @@ import { useSession } from 'src/composables/useSession';
 const $props = defineProps({
     workerId: { type: Number, required: true },
     description: { type: String, default: null },
+    size: { type: String, default: 'xl' },
 });
 const session = useSession();
 const token = session.getToken();

From 3c8022ac459f92d10cc67959e2e4ca3ebfdb47ec Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 10 Jan 2024 16:49:09 +0100
Subject: [PATCH 14/86] feat: refs #6630 VnAvatar letter feature added

---
 src/components/common/VnLog.vue |  4 ++--
 src/components/ui/VnAvatar.vue  | 21 +++++++++++++++++++--
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index b42dac386..4dcb86780 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -422,13 +422,13 @@ setLogTree();
         >
             <div class="timeline">
                 <div class="user-avatar">
-                    <VnUserLink v-if="userLog.user.image" :worker-id="userLog.user.id">
+                    <VnUserLink :worker-id="userLog.user.id">
                         <template #link>
                             <VnAvatar
                                 :class="{ 'cursor-pointer': userLog.user.id }"
                                 :worker-id="userLog.user.id"
                                 :title="userLog.user.nickname"
-                                size="md"
+                                size="lg"
                             />
                         </template>
                     </VnUserLink>
diff --git a/src/components/ui/VnAvatar.vue b/src/components/ui/VnAvatar.vue
index d26aeac19..5a5483084 100644
--- a/src/components/ui/VnAvatar.vue
+++ b/src/components/ui/VnAvatar.vue
@@ -1,20 +1,37 @@
 <script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
+import { useColor } from 'src/composables/useColor';
 
 const $props = defineProps({
     workerId: { type: Number, required: true },
     description: { type: String, default: null },
-    size: { type: String, default: 'xl' },
+    size: { type: String, default: null },
+    title: { type: String, default: null },
 });
 const session = useSession();
 const token = session.getToken();
+const { t } = useI18n();
+
+const title = computed(() => $props.title ?? t('globals.system'));
+const showLetter = ref(false);
 </script>
 <template>
     <div class="avatar-picture column items-center">
-        <QAvatar color="orange" :size="$props.size">
+        <QAvatar
+            :style="{
+                backgroundColor: useColor(title),
+            }"
+            :size="$props.size"
+            :title="title"
+        >
+            <template v-if="showLetter">{{ title.charAt(0) }}</template>
             <QImg
+                v-else
                 :src="`/api/Images/user/160x160/${$props.workerId}/download?access_token=${token}`"
                 spinner-color="white"
+                @error="showLetter = true"
             />
         </QAvatar>
         <div class="description">

From b36cdbf7214376bfc6d3d99e1b96c1f89723ec65 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Thu, 11 Jan 2024 08:33:57 +0100
Subject: [PATCH 15/86] refs #6664 scss

---
 src/components/ui/VnConfirm.vue      | 2 +-
 src/pages/Claim/Card/ClaimAction.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/VnConfirm.vue b/src/components/ui/VnConfirm.vue
index c6650a28f..0ce18cadb 100644
--- a/src/components/ui/VnConfirm.vue
+++ b/src/components/ui/VnConfirm.vue
@@ -72,7 +72,7 @@ async function confirm() {
                 <QSpace />
                 <QBtn icon="close" :disable="isLoading" flat round dense v-close-popup />
             </QCardSection>
-            <QCardSection class="row items-center">
+            <QCardSection class="row justify-center items-center">
                 <span id="spanHTML" v-html="message"></span>
             </QCardSection>
             <QCardActions align="right">
diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index f3dd0b952..76f76903c 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -142,7 +142,7 @@ async function regularizeClaim() {
                 componentProps: {
                     title: t('confirmGreuges'),
                     message: `
-                    <input class="q-field__native q-m-md" type="number" placeholder="1" id="multiplicatorValue" name="multiplicatorValue" min="0" max="50"/>
+                    <input class="q-field__native text-grey-2" type="number" placeholder="1" id="multiplicatorValue" name="multiplicatorValue" min="0" max="50"/>
                      `,
                     data: { inputId: 'multiplicatorValue' },
                     promise: onUpdateGreugeAccept,

From 375154b18d06624e809dafe3a152a0af9283fca4 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Thu, 11 Jan 2024 10:26:15 +0100
Subject: [PATCH 16/86] refs #6325 claimingRate

---
 src/pages/Claim/Card/ClaimDescriptor.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index 85ae9f7e1..47809e9dc 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -2,7 +2,7 @@
 import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { toDate } from 'src/filters';
+import { toDate, toPercentage } from 'src/filters';
 import { useState } from 'src/composables/useState';
 
 import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
@@ -34,7 +34,16 @@ const filter = {
         {
             relation: 'client',
             scope: {
-                include: { relation: 'salesPersonUser' },
+                include: [
+                    { relation: 'salesPersonUser' },
+                    {
+                        relation: 'claimsRatio',
+                        scope: {
+                            fields: ['claimingRate'],
+                            limit: 1,
+                        },
+                    },
+                ],
             },
         },
         {
@@ -137,6 +146,10 @@ const setData = (entity) => {
                 :value="entity.ticket?.address?.province?.name"
             />
             <VnLv :label="t('claim.card.zone')" :value="entity.ticket?.zone?.name" />
+            <VnLv
+                :label="t('claim.card.zone')"
+                :value="toPercentage(entity.client?.claimsRatio?.claimingRate)"
+            />
         </template>
         <template #actions="{ entity }">
             <QCardActions>

From 1bc2abdab2a6515bd6818c1518ff8ce09f172a13 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 11 Jan 2024 11:44:53 +0100
Subject: [PATCH 17/86] fix: refs #6630 drop unused imports

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

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 5c911a08e..9571c742e 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -1,8 +1,7 @@
 <script setup>
-import { onMounted, useSlots, ref, watch, computed } from 'vue';
+import { onMounted, useSlots, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
-import axios from 'axios';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
 

From 88b68ef399800f49eb31ce1ec5c3613c57d7715d Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 11 Jan 2024 12:02:33 +0100
Subject: [PATCH 18/86] fix: refs #6630 large click event

---
 src/pages/Claim/ClaimList.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 55a244995..eac32c040 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -98,10 +98,12 @@ function viewSummary(id) {
                             </VnLv>
                             <VnLv :label="t('claim.list.assignedTo')" @click.stop>
                                 <template #value>
-                                    <VnUserLink
-                                        :name="row.workerName"
-                                        :worker-id="row.workerFk"
-                                    />
+                                    <span>
+                                        <VnUserLink
+                                            :name="row.workerName"
+                                            :worker-id="row.workerFk"
+                                        />
+                                    </span>
                                 </template>
                             </VnLv>
                             <VnLv

From 77d4e7296812dc0647f89092326eab0dc42dc06d Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 11 Jan 2024 12:08:06 +0100
Subject: [PATCH 19/86] fix: refs #6630 fix click event propagation

---
 src/pages/Claim/ClaimList.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index eac32c040..da44427dd 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -88,17 +88,17 @@ function viewSummary(id) {
                     >
                         <template #list-items>
                             <VnLv label="ID" :value="row.id" />
-                            <VnLv :label="t('claim.list.customer')" @click.stop>
+                            <VnLv :label="t('claim.list.customer')">
                                 <template #value>
-                                    <span class="link">
+                                    <span class="link" @click.stop>
                                         {{ row.clientName }}
                                         <CustomerDescriptorProxy :id="row.clientFk" />
                                     </span>
                                 </template>
                             </VnLv>
-                            <VnLv :label="t('claim.list.assignedTo')" @click.stop>
+                            <VnLv :label="t('claim.list.assignedTo')">
                                 <template #value>
-                                    <span>
+                                    <span @click.stop>
                                         <VnUserLink
                                             :name="row.workerName"
                                             :worker-id="row.workerFk"

From 96fdd3f4106b4776f15218536d94f57fcdea1dae Mon Sep 17 00:00:00 2001
From: JAVIER SEGARRA MARTINEZ <jsegarra@verdnatura.es>
Date: Thu, 11 Jan 2024 12:35:58 +0000
Subject: [PATCH 20/86] refs #6384 perf: remove unused dependencie

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

diff --git a/package.json b/package.json
index c4f5b828a..1d729b82f 100644
--- a/package.json
+++ b/package.json
@@ -24,8 +24,7 @@
         "validator": "^13.9.0",
         "vue": "^3.3.4",
         "vue-i18n": "^9.2.2",
-        "vue-router": "^4.2.1",
-        "vue-router-mock": "^0.2.0"
+        "vue-router": "^4.2.1"
     },
     "devDependencies": {
         "@intlify/unplugin-vue-i18n": "^0.8.1",

From 8df915e0ef6b7f8cd656f96bc668ce7cfa026d63 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 11 Jan 2024 15:53:31 +0100
Subject: [PATCH 21/86] fix: refs #6630 remove autoload

---
 src/pages/InvoiceIn/InvoiceInList.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/InvoiceIn/InvoiceInList.vue b/src/pages/InvoiceIn/InvoiceInList.vue
index effccc830..bf16faafa 100644
--- a/src/pages/InvoiceIn/InvoiceInList.vue
+++ b/src/pages/InvoiceIn/InvoiceInList.vue
@@ -76,7 +76,6 @@ function viewSummary(id) {
                 data-key="InvoiceInList"
                 url="InvoiceIns/filter"
                 order="issued DESC, id DESC"
-                auto-load
             >
                 <template #body="{ rows }">
                     <CardList

From 3f720e057160ce4a2c31319069d684d29bea42f2 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 11 Jan 2024 16:29:20 +0100
Subject: [PATCH 22/86] fix: refs #6630 fix flush selectfilter in vnlog

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

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 4dcb86780..c93399e58 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -321,7 +321,6 @@ function selectFilter(type, dateType) {
     }
     if (type === 'action' && selectedFilters.value.changedModel === null) {
         selectedFilters.value.changedModel = undefined;
-        reload = false;
     }
     if (type === 'userRadio') {
         selectedFilters.value.userFk = userRadio.value;

From 14e68548817731a8b122e04d82a7b190f29e64f5 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 11 Jan 2024 16:42:41 +0100
Subject: [PATCH 23/86] fix: refs #6630 fix invoiceInList test

---
 test/cypress/integration/invoiceIn/invoiceInList.spec.js | 1 +
 test/cypress/support/commands.js                         | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/test/cypress/integration/invoiceIn/invoiceInList.spec.js b/test/cypress/integration/invoiceIn/invoiceInList.spec.js
index 60d8c5be1..9d3adbc73 100644
--- a/test/cypress/integration/invoiceIn/invoiceInList.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInList.spec.js
@@ -9,6 +9,7 @@ describe('InvoiceInList', () => {
     beforeEach(() => {
         cy.login('developer');
         cy.visit(`/#/invoice-in`);
+        cy.clickFilterSearchBtn();
     });
 
     it('should redirect on clicking a invoice', () => {
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index 7dc6ffab7..e4d1cebe1 100755
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -178,9 +178,13 @@ Cypress.Commands.add('clearSearchbar', (element) => {
 });
 
 Cypress.Commands.add('writeSearchbar', (value) => {
-     cy.get('#searchbar > form > label > div:nth-child(1) input').type(value);
+    cy.get('#searchbar > form > label > div:nth-child(1) input').type(value);
 });
 Cypress.Commands.add('validateContent', (selector, expectedValue) => {
     cy.get(selector).should('have.text', expectedValue);
 });
+
+Cypress.Commands.add('clickFilterSearchBtn', () => {
+    cy.get('.q-item__section > .q-btn > .q-btn__content > .q-icon').click();
+});
 // registerCommands();

From 334b4dc9283bd2551881cf993e2301c9d247cbea Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Fri, 12 Jan 2024 09:13:36 +0100
Subject: [PATCH 24/86] refs #6353 remove rating

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

diff --git a/src/pages/Order/Card/OrderCatalogItem.vue b/src/pages/Order/Card/OrderCatalogItem.vue
index 140a4c349..bc448eb8c 100644
--- a/src/pages/Order/Card/OrderCatalogItem.vue
+++ b/src/pages/Order/Card/OrderCatalogItem.vue
@@ -51,13 +51,6 @@ const dialog = ref(null);
                         :value="item?.[`value${index + 4}`]"
                     />
                 </template>
-                <QRating
-                    :model-value="item.stars"
-                    icon="star"
-                    icon-selected="star"
-                    color="primary"
-                    readonly
-                />
                 <div class="footer">
                     <div class="price">
                         <p>{{ item.available }} {{ t('to') }} {{ item.price }}</p>
@@ -72,7 +65,8 @@ const dialog = ref(null);
                         </QIcon>
                     </div>
                     <p v-if="item.priceKg" class="price-kg">
-                        {{ t('price-kg') }} {{ toCurrency(item.priceKg) || DEFAULT_PRICE_KG }}
+                        {{ t('price-kg') }}
+                        {{ toCurrency(item.priceKg) || DEFAULT_PRICE_KG }}
                     </p>
                 </div>
             </div>

From 810dd81b34669426630453370dde37ec00beaa4f Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 12 Jan 2024 09:58:12 +0100
Subject: [PATCH 25/86] refs #6280 feat VnLocation approach

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

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
new file mode 100644
index 000000000..70e818ade
--- /dev/null
+++ b/src/components/common/VnLocation.vue
@@ -0,0 +1,179 @@
+<script setup>
+import { ref, toRefs, computed, watch } from 'vue';
+import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+import VnSelectCreate from 'components/common/VnSelectCreate.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import FetchData from 'components/FetchData.vue';
+const emit = defineEmits(['update:modelValue', 'update:options']);
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const citiesLocationOptions = ref([]);
+const provincesLocationOptions = ref([]);
+const countriesOptions = ref([]);
+const postcodesOptions = ref([]);
+const postcodeFetchDataRef = ref(null);
+
+const $props = defineProps({
+    modelValue: {
+        type: [String, Number, Object],
+        default: null,
+    },
+    options: {
+        type: Array,
+        default: () => [],
+    },
+    optionLabel: {
+        type: String,
+        default: '',
+    },
+    optionValue: {
+        type: String,
+        default: '',
+    },
+    filterOptions: {
+        type: Array,
+        default: () => [],
+    },
+    isClearable: {
+        type: Boolean,
+        default: true,
+    },
+    defaultFilter: {
+        type: Boolean,
+        default: true,
+    },
+});
+const locationsRef = ref();
+const locationsRefFilter = ref({ fields: ['code', 'nickname'], limit: 30 });
+
+const { optionLabel, optionValue, options } = toRefs($props);
+const myOptions = ref([]);
+const myOptionsOriginal = ref([]);
+const vnSelectRef = ref();
+const showForm = ref(false);
+
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value);
+    },
+});
+
+function setOptions(data) {
+    myOptions.value = JSON.parse(JSON.stringify(data));
+    myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
+}
+setOptions(options.value);
+const filter = (val, options) => {
+    const search = val.toString().toLowerCase();
+
+    if (!search) return options;
+    // if (!search.length < 2) return options;
+
+    return options
+};
+
+const filterHandler = (val, update) => {
+    update(
+        () => {
+            // if (val.length>2)
+                myOptions.value = filter(val, myOptionsOriginal.value);
+        },
+        (ref) => {
+            if (val !== '' && ref.options.length > 0) {
+                ref.setOptionIndex(-1);
+                ref.moveOptionSelection(1, true);
+            }
+        }
+    );
+};
+
+function locationFilter(val) {
+    let where = { limit: 30 };
+    let params = {};
+    let key = 'nickname';
+
+    if (new RegExp(/\d/g).test(val)) {
+        key = 'id';
+    }
+    params = { [key]: { like: `%${val}%` } };
+    where = Object.assign(where, params);
+    locationsRef.value.fetch({ where });
+}
+watch(options, (newValue) => {
+    setOptions(newValue);
+});
+
+function showLabel(data){
+    return `${data.code} - ${data.town.name}(${data.town.province.name}), ${data.town.province.country.country}`;
+}
+
+</script>
+
+<template>
+    <FetchData
+        ref="postcodeFetchDataRef"
+        url="Postcodes/location"
+        @on-fetch="(data) => (postcodesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        @on-fetch="(data) => (citiesLocationOptions = data)"
+        auto-load
+        url="Towns/location"
+    />
+    <FetchData
+        @on-fetch="(data) => (provincesLocationOptions = data)"
+        auto-load
+        url="Provinces/location"
+    />
+    <FetchData
+        @on-fetch="(data) => (countriesOptions = data)"
+        auto-load
+        url="Countries"
+    />
+    <VnSelectCreate
+        v-model="value"
+        :options="postcodesOptions"
+        :label="t('Location')"
+        :option-label="showLabel"
+        v-bind="$attrs"
+        emit-value
+        map-options
+        use-input
+        @filter="filterHandler"
+        clearable
+        hide-selected
+        fill-input
+        :class="{ required: $attrs.required }"
+    >
+        <template #form>
+            <CreateNewPostcode @on-data-saved="onPostcodeCreated($event)" />
+        </template>
+        <template #option="scope">
+            <QItem v-bind="scope.itemProps">
+                <QItemSection v-if="scope.opt">
+                    <QItemLabel>{{ scope.opt.code }}</QItemLabel>
+                    <QItemLabel caption
+                        >{{ showLabel(scope.opt)}}</QItemLabel
+                    >
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnSelectCreate>
+</template>
+<style lang="scss" scoped>
+.add-icon {
+    cursor: pointer;
+    background-color: $primary;
+    border-radius: 50px;
+}
+</style>
+
+<i18n>
+es:
+    Location: Ubicación
+</i18n>

From 68ba851e6e9f5c2b5a7e47b3b33df2b8ce1fddf3 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 12 Jan 2024 09:58:24 +0100
Subject: [PATCH 26/86] refs #6280 feat use VnLocation in CustomerCreate

---
 src/pages/Customer/CustomerCreate.vue | 96 ++-------------------------
 1 file changed, 7 insertions(+), 89 deletions(-)

diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue
index cfaef0855..f6ac6a165 100644
--- a/src/pages/Customer/CustomerCreate.vue
+++ b/src/pages/Customer/CustomerCreate.vue
@@ -2,12 +2,11 @@
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
+import VnLocation from 'src/components/common/VnLocation.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const { t } = useI18n();
@@ -133,96 +132,15 @@ const onPostcodeCreated = async () => {
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectCreate
-                            v-model="data.postcode"
-                            :label="t('Postcode')"
-                            :rules="validate('Worker.postcode')"
-                            :roles-allowed-to-create="['deliveryAssistant']"
+                        <VnLocation
                             :options="postcodesOptions"
-                            option-label="code"
-                            option-value="code"
-                            hide-selected
-                        >
-                            <template #form>
-                                <CustomerCreateNewPostcode
-                                    @on-data-saved="onPostcodeCreated($event)"
-                                />
-                            </template>
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection v-if="scope.opt">
-                                        <QItemLabel>{{ scope.opt.code }}</QItemLabel>
-                                        <QItemLabel caption
-                                            >{{ scope.opt.code }} -
-                                            {{ scope.opt.town.name }} ({{
-                                                scope.opt.town.province.name
-                                            }},
-                                            {{
-                                                scope.opt.town.province.country.country
-                                            }})</QItemLabel
-                                        >
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectCreate>
-                    </div>
-                    <div class="col">
-                        <!-- ciudades -->
-                        <VnSelectFilter
-                            :label="t('City')"
-                            :options="citiesLocationOptions"
-                            hide-selected
-                            option-label="name"
-                            option-value="name"
-                            v-model="data.city"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>{{ scope.opt.name }}</QItemLabel>
-                                        <QItemLabel caption>
-                                            {{
-                                                `${scope.opt.name}, ${scope.opt.province.name} (${scope.opt.province.country.country})`
-                                            }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectFilter>
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('Province')"
-                            :options="provincesLocationOptions"
-                            hide-selected
-                            option-label="name"
-                            option-value="id"
-                            v-model="data.provinceFk"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>{{
-                                            `${scope.opt.name} (${scope.opt.country.country})`
-                                        }}</QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectFilter>
-                    </div>
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('Country')"
-                            :options="countriesOptions"
-                            hide-selected
-                            option-label="country"
-                            option-value="id"
-                            v-model="data.countryFk"
-                        />
+                            v-model="data.location"
+                        @update:model-value="(data)=> console.log(data)"
+                            >
+                        </VnLocation>
                     </div>
                 </VnRow>
+
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput v-model="data.userName" :label="t('Web user')" />

From 67d4471f42eb2d125103ad42f8c65d3e44e4fe70 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 12 Jan 2024 10:57:50 +0100
Subject: [PATCH 27/86] refs #6280 feat: improve VnLocation

---
 src/components/common/VnLocation.vue     |  7 +++--
 src/components/common/VnSelectFilter.vue | 38 ++++++++++++++++++++++--
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 70e818ade..3a296e168 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -135,16 +135,19 @@ function showLabel(data){
         auto-load
         url="Countries"
     />
+    <!-- @input-value="filter"
+    :default-filter="false" -->
     <VnSelectCreate
         v-model="value"
         :options="postcodesOptions"
         :label="t('Location')"
-        :option-label="showLabel"
+        option-label="code"
         v-bind="$attrs"
         emit-value
         map-options
         use-input
-        @filter="filterHandler"
+        :filter-options="['code','town.name']"
+        :filter-rules="['val.length>2',{code:'.length > 2'}]"
         clearable
         hide-selected
         fill-input
diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 244fb50bb..2c5c16e4f 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -16,7 +16,11 @@ const $props = defineProps({
         default: '',
     },
     filterOptions: {
-        type: Array,
+        type: [Array, Function],
+        default: () => [],
+    },
+    filterRules: {
+        type: [Array, Function],
         default: () => [],
     },
     isClearable: {
@@ -47,16 +51,46 @@ function setOptions(data) {
     myOptions.value = JSON.parse(JSON.stringify(data));
     myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
+function deepFind(obj, path) {
+  var paths = path.split('.')
+    , current = obj
+    , i;
+
+  for (i = 0; i < paths.length; ++i) {
+    if (current[paths[i]] == undefined) {
+      return undefined;
+    } else {
+      current = current[paths[i]];
+    }
+  }
+  return current;
+}
 setOptions(options.value);
 const filter = (val, options) => {
     const search = val.toString().toLowerCase();
 
     if (!search) return options;
+    if($props.filterRules.length) {
+        const passSomeRule = $props.filterRules.some((rule) => {
+            if(typeof rule === 'object') return true
+            const cond = eval(rule)
+            return cond;
+        });
+        if(!passSomeRule) return options
+    }
 
     return options.filter((row) => {
         if ($props.filterOptions.length) {
             return $props.filterOptions.some((prop) => {
-                const propValue = String(row[prop]).toLowerCase();
+                const passRules = $props.filterRules
+                .filter(rule=>typeof rule === 'object')
+                .every(rule=>{
+                    const propExists = Object.keys(rule).includes(prop);
+                    if(!propExists) return false;
+                    return eval(prop.concat(rule[prop]))
+                });
+                const propValue = String(deepFind(row,prop)).toLowerCase();
+                if(passRules)
                 return propValue.includes(search);
             });
         }

From 4b3ca3bbd97872f8c8935f0ec30ee3d442f14788 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 12 Jan 2024 11:27:54 +0100
Subject: [PATCH 28/86] refs #6280 feat: return geoFk VnLocation

---
 src/components/common/VnLocation.vue     | 51 +++---------------------
 src/components/common/VnSelectFilter.vue |  9 -----
 2 files changed, 5 insertions(+), 55 deletions(-)

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 3a296e168..5c41144ac 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -2,7 +2,6 @@
 import { ref, toRefs, computed, watch } from 'vue';
 import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 import VnSelectCreate from 'components/common/VnSelectCreate.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
 import FetchData from 'components/FetchData.vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 import { useI18n } from 'vue-i18n';
@@ -44,14 +43,10 @@ const $props = defineProps({
         default: true,
     },
 });
-const locationsRef = ref();
-const locationsRefFilter = ref({ fields: ['code', 'nickname'], limit: 30 });
 
-const { optionLabel, optionValue, options } = toRefs($props);
+const { options } = toRefs($props);
 const myOptions = ref([]);
 const myOptionsOriginal = ref([]);
-const vnSelectRef = ref();
-const showForm = ref(false);
 
 const value = computed({
     get() {
@@ -67,42 +62,6 @@ function setOptions(data) {
     myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
 setOptions(options.value);
-const filter = (val, options) => {
-    const search = val.toString().toLowerCase();
-
-    if (!search) return options;
-    // if (!search.length < 2) return options;
-
-    return options
-};
-
-const filterHandler = (val, update) => {
-    update(
-        () => {
-            // if (val.length>2)
-                myOptions.value = filter(val, myOptionsOriginal.value);
-        },
-        (ref) => {
-            if (val !== '' && ref.options.length > 0) {
-                ref.setOptionIndex(-1);
-                ref.moveOptionSelection(1, true);
-            }
-        }
-    );
-};
-
-function locationFilter(val) {
-    let where = { limit: 30 };
-    let params = {};
-    let key = 'nickname';
-
-    if (new RegExp(/\d/g).test(val)) {
-        key = 'id';
-    }
-    params = { [key]: { like: `%${val}%` } };
-    where = Object.assign(where, params);
-    locationsRef.value.fetch({ where });
-}
 watch(options, (newValue) => {
     setOptions(newValue);
 });
@@ -135,19 +94,19 @@ function showLabel(data){
         auto-load
         url="Countries"
     />
-    <!-- @input-value="filter"
-    :default-filter="false" -->
     <VnSelectCreate
         v-model="value"
         :options="postcodesOptions"
         :label="t('Location')"
-        option-label="code"
+        option-value="geoFk"
+        :option-label="showLabel"
+        :placeholder="t('Min. 3 char')"
         v-bind="$attrs"
         emit-value
         map-options
         use-input
         :filter-options="['code','town.name']"
-        :filter-rules="['val.length>2',{code:'.length > 2'}]"
+        :filter-rules="['val.length>2']"
         clearable
         hide-selected
         fill-input
diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 2c5c16e4f..ad0a0ec38 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -72,7 +72,6 @@ const filter = (val, options) => {
     if (!search) return options;
     if($props.filterRules.length) {
         const passSomeRule = $props.filterRules.some((rule) => {
-            if(typeof rule === 'object') return true
             const cond = eval(rule)
             return cond;
         });
@@ -82,15 +81,7 @@ const filter = (val, options) => {
     return options.filter((row) => {
         if ($props.filterOptions.length) {
             return $props.filterOptions.some((prop) => {
-                const passRules = $props.filterRules
-                .filter(rule=>typeof rule === 'object')
-                .every(rule=>{
-                    const propExists = Object.keys(rule).includes(prop);
-                    if(!propExists) return false;
-                    return eval(prop.concat(rule[prop]))
-                });
                 const propValue = String(deepFind(row,prop)).toLowerCase();
-                if(passRules)
                 return propValue.includes(search);
             });
         }

From 20835471a3a1c392b080f51295e0bf49c92a71cf Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 15 Jan 2024 09:14:42 +0100
Subject: [PATCH 29/86] refs #6280 feat: handle option selected from 
 VnLocation

---
 src/components/common/VnLocation.vue  |  4 ++--
 src/pages/Customer/CustomerCreate.vue | 18 +++++++++++++-----
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 5c41144ac..e91c78430 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -98,9 +98,8 @@ function showLabel(data){
         v-model="value"
         :options="postcodesOptions"
         :label="t('Location')"
-        option-value="geoFk"
         :option-label="showLabel"
-        :placeholder="t('Min. 3 char')"
+        :placeholder="t('Search by postalCode or town (at least 3 characters')"
         v-bind="$attrs"
         emit-value
         map-options
@@ -138,4 +137,5 @@ function showLabel(data){
 <i18n>
 es:
     Location: Ubicación
+    Search by postalCode or town (at least 3 characters): Buscar por código postal o nombre ( al menos 3 letras)
 </i18n>
diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue
index f6ac6a165..3afda7fac 100644
--- a/src/pages/Customer/CustomerCreate.vue
+++ b/src/pages/Customer/CustomerCreate.vue
@@ -36,9 +36,13 @@ const provincesLocationOptions = ref([]);
 const countriesOptions = ref([]);
 const postcodesOptions = ref([]);
 
-const onPostcodeCreated = async () => {
-    postcodeFetchDataRef.value.fetch();
-};
+
+function handleLocation(data, { city, postcode, provinceFk, countryFk }) {
+    data.postcode = postcode;
+    data.city = city;
+    data.provinceFk = provinceFk;
+    data.countryFk = countryFk;
+}
 </script>
 
 <template>
@@ -133,10 +137,14 @@ const onPostcodeCreated = async () => {
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <VnLocation
+                            :rules="validate('Worker.postcode')"
+                            :roles-allowed-to-create="['deliveryAssistant']"
                             :options="postcodesOptions"
                             v-model="data.location"
-                        @update:model-value="(data)=> console.log(data)"
-                            >
+                            @update:model-value="
+                                (location) => handleLocation(data, location)
+                            "
+                        >
                         </VnLocation>
                     </div>
                 </VnRow>

From 84b53131c7de09dc3ab204eba3c246f920321ee6 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 15 Jan 2024 09:22:01 +0100
Subject: [PATCH 30/86] refs #6280 feat: deepFind as composable

---
 src/components/common/VnSelectFilter.vue | 14 +-------------
 src/composables/deepFind.js              | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 13 deletions(-)
 create mode 100644 src/composables/deepFind.js

diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index ad0a0ec38..c197f17ea 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { deepFind } from 'src/composables/deepFind';
 import { ref, toRefs, computed, watch } from 'vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 
@@ -51,20 +52,7 @@ function setOptions(data) {
     myOptions.value = JSON.parse(JSON.stringify(data));
     myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
-function deepFind(obj, path) {
-  var paths = path.split('.')
-    , current = obj
-    , i;
 
-  for (i = 0; i < paths.length; ++i) {
-    if (current[paths[i]] == undefined) {
-      return undefined;
-    } else {
-      current = current[paths[i]];
-    }
-  }
-  return current;
-}
 setOptions(options.value);
 const filter = (val, options) => {
     const search = val.toString().toLowerCase();
diff --git a/src/composables/deepFind.js b/src/composables/deepFind.js
new file mode 100644
index 000000000..ec28fe387
--- /dev/null
+++ b/src/composables/deepFind.js
@@ -0,0 +1,14 @@
+export async function deepFind(obj, path) {
+    const keys = path.split('.');
+    let current = obj;
+
+    for (const key of keys) {
+        if (current[key] !== undefined) {
+            current = current[key];
+        } else {
+            return undefined;
+        }
+    }
+
+    return current;
+}

From 972c340fad8043f67cfc33861d3dcc2f3052643d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 15 Jan 2024 14:44:38 +0100
Subject: [PATCH 31/86] refs #6704: fix1

---
 src/components/ui/VnPaginate.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index 1aa99ea0c..ecebf8933 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -1,10 +1,12 @@
 <script setup>
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
+import { useRoute } from 'vue-router';
 
 const { t } = useI18n();
 
+const route = useRoute();
 const props = defineProps({
     dataKey: {
         type: String,
@@ -79,14 +81,27 @@ const store = arrayData.store;
 onMounted(() => {
     if (props.autoLoad) fetch();
 });
-
+onUnmounted(async ()=>{
+   arrayData.destroy()
+});
 watch(
     () => props.data,
     () => {
+        // store.skip = 0;
         store.data = props.data;
     }
 );
 
+// watch(
+//     () => route.path,
+//     async (newId, oldId) => {
+//         if (newId!==oldId) {
+//             // arrayData.hasMoreData.value = [];
+//             arrayData.store.clear()
+//                         }
+//         }
+//     );
+
 async function fetch() {
     await arrayData.fetch({ append: false });
     if (!arrayData.hasMoreData.value) {

From e480b17edc5b212b71f564c8f2a7095eae73b460 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 16 Jan 2024 07:24:41 +0100
Subject: [PATCH 32/86] refs #6704: fix2

---
 src/composables/useArrayData.js   | 14 +++++++++++++-
 src/pages/Worker/WorkerCreate.vue |  4 ++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 9f66a0e89..d5c564373 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -142,10 +142,21 @@ export function useArrayData(key, userOptions) {
         userParams = sanitizerParams(userParams, store?.exprBuilder);
 
         store.userParams = userParams;
-
+        store.skip = 0;
         await fetch({ append: false });
         return { filter, params };
     }
+    async function removeFilter({ filter, params }) {
+        if (filter) store.userFilter = Object.assign(store.userFilter, filter);
+
+        let userParams = Object.assign({}, store.userParams, params);
+        userParams = sanitizerParams(userParams, store?.exprBuilder);
+
+        store.userParams = userParams;
+        store.skip = 0;
+        await loadMore({ append: false });
+        return { filter, params };
+    }
 
     function sanitizerParams(params, exprBuilder) {
         for (const param in params) {
@@ -200,6 +211,7 @@ export function useArrayData(key, userOptions) {
         fetch,
         applyFilter,
         addFilter,
+        removeFilter,
         refresh,
         destroy,
         loadMore,
diff --git a/src/pages/Worker/WorkerCreate.vue b/src/pages/Worker/WorkerCreate.vue
index accac7cf2..a476632bb 100644
--- a/src/pages/Worker/WorkerCreate.vue
+++ b/src/pages/Worker/WorkerCreate.vue
@@ -9,7 +9,7 @@ import VnInputDate from 'components/common/VnInputDate.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
 import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
-import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
@@ -189,7 +189,7 @@ onMounted(async () => {
                             hide-selected
                         >
                             <template #form>
-                                <CustomerCreateNewPostcode
+                                <CreateNewPostcode
                                     @on-data-saved="onPostcodeCreated($event)"
                                 />
                             </template>

From 9daffdfa22d95949065044b4d3e48758fea62546 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 16 Jan 2024 08:40:03 +0100
Subject: [PATCH 33/86] refs #6704: posible fix

---
 src/components/ui/VnFilterPanel.vue | 37 ++++++++++++++++-------------
 src/components/ui/VnPaginate.vue    | 11 ++++-----
 src/composables/useArrayData.js     |  8 +++++--
 src/stores/useArrayDataStore.js     |  2 ++
 4 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 0a306dc5f..9cb558467 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -65,18 +65,6 @@ onMounted(() => {
 
 const isLoading = ref(false);
 
-async function search() {
-    isLoading.value = true;
-    const params = { ...userParams.value };
-    const { params: newParams } = await arrayData.addFilter({ params });
-    userParams.value = newParams;
-
-    if (!props.showAll && !Object.values(params).length) store.data = [];
-
-    isLoading.value = false;
-    emit('search');
-}
-
 async function reload() {
     isLoading.value = true;
     const params = Object.values(userParams.value).filter((param) => param);
@@ -87,6 +75,25 @@ async function reload() {
     emit('refresh');
 }
 
+async function search() {
+    isLoading.value = true;
+    const params = { ...userParams.value };
+    store.pagination = true;
+    store.filter.skip = 0;
+    store.skip = 0;
+    const { params: newParams } = await arrayData.addFilter({ params });
+    userParams.value = newParams;
+
+    if (!props.showAll && !Object.values(params).length) store.data = [];
+
+    isLoading.value = false;
+    emit('search');
+}
+async function remove(key) {
+    userParams.value[key] = null;
+    await search();
+    emit('remove', key);
+}
 async function clearFilters() {
     isLoading.value = true;
 
@@ -126,11 +133,7 @@ const customTags = computed(() =>
     tagsList.value.filter((tag) => (props.customTags || []).includes(tag.label))
 );
 
-async function remove(key) {
-    userParams.value[key] = null;
-    await search();
-    emit('remove', key);
-}
+
 
 function formatValue(value) {
     if (typeof value === 'boolean') {
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index ecebf8933..ea52a2943 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -81,14 +81,13 @@ const store = arrayData.store;
 onMounted(() => {
     if (props.autoLoad) fetch();
 });
-onUnmounted(async ()=>{
-   arrayData.destroy()
-});
-watch(
-    () => props.data,
+
+watch(()=>[props.data, store],
     () => {
         // store.skip = 0;
         store.data = props.data;
+        if(store.pagination)
+        paginate()
     }
 );
 
@@ -187,7 +186,7 @@ async function onLoad(...params) {
         v-if="store.data"
         @load="onLoad"
         :offset="offset"
-        class="full-width full-height overflow-auto"
+        class="full-width full-height"
     >
         <slot name="body" :rows="store.data"></slot>
         <div v-if="isLoading" class="info-row q-pa-md text-center">
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index d5c564373..7ed15baf3 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -99,7 +99,10 @@ export function useArrayData(key, userOptions) {
         const { limit } = filter;
 
         hasMoreData.value = response.data.length === limit;
-
+        if (store.pagination) {
+            // await loadMore();
+            store.pagination = false;
+        }
         if (append) {
             if (!store.data) store.data = [];
             for (const row of response.data) store.data.push(row);
@@ -143,7 +146,8 @@ export function useArrayData(key, userOptions) {
 
         store.userParams = userParams;
         store.skip = 0;
-        await fetch({ append: false });
+        store.filter.skip = 0;
+        await fetch({ append: false, loadMore: true });
         return { filter, params };
     }
     async function removeFilter({ filter, params }) {
diff --git a/src/stores/useArrayDataStore.js b/src/stores/useArrayDataStore.js
index 223406a33..94e772a87 100644
--- a/src/stores/useArrayDataStore.js
+++ b/src/stores/useArrayDataStore.js
@@ -19,6 +19,8 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
             order: '',
             data: ref(),
             isLoading: false,
+            loadMore: false,
+            pagination: false,
             exprBuilder: null,
         };
     }

From b58f9bee2eac2d5c2a3b675a334aadfd447fb141 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 16 Jan 2024 11:24:28 +0100
Subject: [PATCH 34/86] refs #6704: fix bug

---
 src/components/ui/VnFilterPanel.vue |  6 ++++-
 src/components/ui/VnPaginate.vue    | 42 ++++++++++++++++++++++++-----
 src/composables/useArrayData.js     | 17 ++++++++----
 src/stores/useArrayDataStore.js     |  1 +
 4 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 9cb558467..6b6960243 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -79,6 +79,7 @@ async function search() {
     isLoading.value = true;
     const params = { ...userParams.value };
     store.pagination = true;
+    store.userParamsChanged = true;
     store.filter.skip = 0;
     store.skip = 0;
     const { params: newParams } = await arrayData.addFilter({ params });
@@ -87,6 +88,8 @@ async function search() {
     if (!props.showAll && !Object.values(params).length) store.data = [];
 
     isLoading.value = false;
+    // store.pagination = false;
+
     emit('search');
 }
 async function remove(key) {
@@ -96,10 +99,11 @@ async function remove(key) {
 }
 async function clearFilters() {
     isLoading.value = true;
+    store.userParamsChanged = true;
 
     // Filtrar los params no removibles
     const removableFilters = Object.keys(userParams.value).filter((param) =>
-        props.unremovableParams.includes(param)
+    props.unremovableParams.includes(param)
     );
     const newParams = {};
     // Conservar solo los params que no son removibles
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index ea52a2943..dfb19ed88 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -1,5 +1,12 @@
 <script setup>
-import { onMounted, ref, watch, onUnmounted } from 'vue';
+import {
+    onMounted,
+    ref,
+    watch,
+    onUnmounted,
+    onRenderTriggered,
+    onRenderTracked,
+} from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
 import { useRoute } from 'vue-router';
@@ -57,7 +64,7 @@ const props = defineProps({
         default: null,
     },
 });
-
+const infiniteScrollRef = ref();
 const emit = defineEmits(['onFetch', 'onPaginate']);
 defineExpose({ fetch });
 const isLoading = ref(false);
@@ -82,12 +89,19 @@ onMounted(() => {
     if (props.autoLoad) fetch();
 });
 
-watch(()=>[props.data, store],
+// onRenderTracked((e)=>{
+// console.log(e)
+// });
+// onRenderTracked((e)=>{
+// console.log(e)
+// });
+
+watch(
+    () => [props.data, store],
     () => {
         // store.skip = 0;
         store.data = props.data;
-        if(store.pagination)
-        paginate()
+        if (store.pagination) paginate();
     }
 );
 
@@ -115,9 +129,14 @@ async function paginate() {
     if (!props.url) return;
 
     isLoading.value = true;
+    // infiniteScrollRef.value.resume()
     await arrayData.loadMore();
 
     if (!arrayData.hasMoreData.value) {
+        // infiniteScrollRef.value.resume()
+        if (store.userParamsChanged) arrayData.hasMoreData.value = true;
+        store.userParamsChanged = false;
+
         isLoading.value = false;
         return;
     }
@@ -135,6 +154,7 @@ async function paginate() {
 }
 
 async function onLoad(...params) {
+    console.log('ENTRA');
     if (!store.data) return;
 
     const done = params[1];
@@ -143,9 +163,16 @@ async function onLoad(...params) {
     pagination.value.page = pagination.value.page + 1;
 
     await paginate();
+    let isDone = false;
+    if (store.userParamsChanged) isDone = !arrayData.hasMoreData.value;
+    // console.error('isDone', isDone);
+    // if(isDone){
+    //     // infiniteScrollRef.value.trigger()
+    //     console.error('VnPaginate', isDone, arrayData.store.pagination)
 
-    const endOfPages = !arrayData.hasMoreData.value;
-    done(endOfPages);
+    // }
+    // done(false);
+    done(isDone);
 }
 </script>
 
@@ -183,6 +210,7 @@ async function onLoad(...params) {
         </div>
     </div>
     <QInfiniteScroll
+        ref="infiniteScrollRef"
         v-if="store.data"
         @load="onLoad"
         :offset="offset"
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 7ed15baf3..b0ba5a836 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -98,11 +98,17 @@ export function useArrayData(key, userOptions) {
 
         const { limit } = filter;
 
-        hasMoreData.value = response.data.length === limit;
-        if (store.pagination) {
-            // await loadMore();
-            store.pagination = false;
+        /*if (Object.keys(store.userParams).length > 0) {
+            hasMoreData.value = true;
+        } else if(store.userParamsChanged){
+            hasMoreData.value = false;
         }
+        else */hasMoreData.value = response.data.length === limit;
+        // if (store.pagination) {
+        //     console.error('Before-ArrayData', store.pagination, hasMoreData.value)
+        //     hasMoreData.value = true;
+        //     console.error('After-ArrayData', store.pagination, hasMoreData.value)
+        // }
         if (append) {
             if (!store.data) store.data = [];
             for (const row of response.data) store.data.push(row);
@@ -182,6 +188,7 @@ export function useArrayData(key, userOptions) {
 
     async function loadMore() {
         if (!hasMoreData.value) return;
+        console.error('loadMore', hasMoreData.value);
 
         store.skip = store.limit * page.value;
         page.value += 1;
@@ -200,7 +207,7 @@ export function useArrayData(key, userOptions) {
         if (store.skip) query.skip = store.skip;
         if (store.userParams && Object.keys(store.userParams).length !== 0)
             query.params = JSON.stringify(store.userParams);
-
+        // hasMoreData.value = true;
         if (router)
             router.replace({
                 path: route.path,
diff --git a/src/stores/useArrayDataStore.js b/src/stores/useArrayDataStore.js
index 94e772a87..c8cd349e0 100644
--- a/src/stores/useArrayDataStore.js
+++ b/src/stores/useArrayDataStore.js
@@ -21,6 +21,7 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
             isLoading: false,
             loadMore: false,
             pagination: false,
+            userParamsChanged: true,
             exprBuilder: null,
         };
     }

From a94fb6026a9bd20a295bb7c69e8b3230fe0b7379 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 16 Jan 2024 12:14:48 +0100
Subject: [PATCH 35/86] refs #6704: remove bad code

---
 src/components/ui/VnFilterPanel.vue | 47 ++++++++++++++---------------
 src/components/ui/VnPaginate.vue    | 46 ++--------------------------
 src/composables/useArrayData.js     | 30 +++---------------
 src/pages/Claim/Card/ClaimNotes.vue |  2 +-
 src/stores/useArrayDataStore.js     |  2 --
 5 files changed, 30 insertions(+), 97 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 6b6960243..dfe0e57ab 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -64,6 +64,20 @@ onMounted(() => {
 });
 
 const isLoading = ref(false);
+async function search() {
+    isLoading.value = true;
+    const params = { ...userParams.value };
+    store.userParamsChanged = true;
+    store.filter.skip = 0;
+    store.skip = 0;
+    const { params: newParams } = await arrayData.addFilter({ params });
+    userParams.value = newParams;
+
+    if (!props.showAll && !Object.values(params).length) store.data = [];
+
+    isLoading.value = false;
+    emit('search');
+}
 
 async function reload() {
     isLoading.value = true;
@@ -75,35 +89,14 @@ async function reload() {
     emit('refresh');
 }
 
-async function search() {
-    isLoading.value = true;
-    const params = { ...userParams.value };
-    store.pagination = true;
-    store.userParamsChanged = true;
-    store.filter.skip = 0;
-    store.skip = 0;
-    const { params: newParams } = await arrayData.addFilter({ params });
-    userParams.value = newParams;
-
-    if (!props.showAll && !Object.values(params).length) store.data = [];
-
-    isLoading.value = false;
-    // store.pagination = false;
-
-    emit('search');
-}
-async function remove(key) {
-    userParams.value[key] = null;
-    await search();
-    emit('remove', key);
-}
 async function clearFilters() {
     isLoading.value = true;
     store.userParamsChanged = true;
-
+    store.filter.skip = 0;
+    store.skip = 0;
     // Filtrar los params no removibles
     const removableFilters = Object.keys(userParams.value).filter((param) =>
-    props.unremovableParams.includes(param)
+        props.unremovableParams.includes(param)
     );
     const newParams = {};
     // Conservar solo los params que no son removibles
@@ -137,7 +130,11 @@ const customTags = computed(() =>
     tagsList.value.filter((tag) => (props.customTags || []).includes(tag.label))
 );
 
-
+async function remove(key) {
+    userParams.value[key] = null;
+    await search();
+    emit('remove', key);
+}
 
 function formatValue(value) {
     if (typeof value === 'boolean') {
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index dfb19ed88..4c38c1c1a 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -1,19 +1,10 @@
 <script setup>
-import {
-    onMounted,
-    ref,
-    watch,
-    onUnmounted,
-    onRenderTriggered,
-    onRenderTracked,
-} from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
-import { useRoute } from 'vue-router';
 
 const { t } = useI18n();
 
-const route = useRoute();
 const props = defineProps({
     dataKey: {
         type: String,
@@ -64,7 +55,7 @@ const props = defineProps({
         default: null,
     },
 });
-const infiniteScrollRef = ref();
+
 const emit = defineEmits(['onFetch', 'onPaginate']);
 defineExpose({ fetch });
 const isLoading = ref(false);
@@ -89,32 +80,13 @@ onMounted(() => {
     if (props.autoLoad) fetch();
 });
 
-// onRenderTracked((e)=>{
-// console.log(e)
-// });
-// onRenderTracked((e)=>{
-// console.log(e)
-// });
-
 watch(
-    () => [props.data, store],
+    () => props.data,
     () => {
-        // store.skip = 0;
         store.data = props.data;
-        if (store.pagination) paginate();
     }
 );
 
-// watch(
-//     () => route.path,
-//     async (newId, oldId) => {
-//         if (newId!==oldId) {
-//             // arrayData.hasMoreData.value = [];
-//             arrayData.store.clear()
-//                         }
-//         }
-//     );
-
 async function fetch() {
     await arrayData.fetch({ append: false });
     if (!arrayData.hasMoreData.value) {
@@ -129,14 +101,11 @@ async function paginate() {
     if (!props.url) return;
 
     isLoading.value = true;
-    // infiniteScrollRef.value.resume()
     await arrayData.loadMore();
 
     if (!arrayData.hasMoreData.value) {
-        // infiniteScrollRef.value.resume()
         if (store.userParamsChanged) arrayData.hasMoreData.value = true;
         store.userParamsChanged = false;
-
         isLoading.value = false;
         return;
     }
@@ -154,7 +123,6 @@ async function paginate() {
 }
 
 async function onLoad(...params) {
-    console.log('ENTRA');
     if (!store.data) return;
 
     const done = params[1];
@@ -165,13 +133,6 @@ async function onLoad(...params) {
     await paginate();
     let isDone = false;
     if (store.userParamsChanged) isDone = !arrayData.hasMoreData.value;
-    // console.error('isDone', isDone);
-    // if(isDone){
-    //     // infiniteScrollRef.value.trigger()
-    //     console.error('VnPaginate', isDone, arrayData.store.pagination)
-
-    // }
-    // done(false);
     done(isDone);
 }
 </script>
@@ -210,7 +171,6 @@ async function onLoad(...params) {
         </div>
     </div>
     <QInfiniteScroll
-        ref="infiniteScrollRef"
         v-if="store.data"
         @load="onLoad"
         :offset="offset"
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index b0ba5a836..3f031f1d1 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -98,17 +98,8 @@ export function useArrayData(key, userOptions) {
 
         const { limit } = filter;
 
-        /*if (Object.keys(store.userParams).length > 0) {
-            hasMoreData.value = true;
-        } else if(store.userParamsChanged){
-            hasMoreData.value = false;
-        }
-        else */hasMoreData.value = response.data.length === limit;
-        // if (store.pagination) {
-        //     console.error('Before-ArrayData', store.pagination, hasMoreData.value)
-        //     hasMoreData.value = true;
-        //     console.error('After-ArrayData', store.pagination, hasMoreData.value)
-        // }
+        hasMoreData.value = response.data.length === limit;
+
         if (append) {
             if (!store.data) store.data = [];
             for (const row of response.data) store.data.push(row);
@@ -153,18 +144,7 @@ export function useArrayData(key, userOptions) {
         store.userParams = userParams;
         store.skip = 0;
         store.filter.skip = 0;
-        await fetch({ append: false, loadMore: true });
-        return { filter, params };
-    }
-    async function removeFilter({ filter, params }) {
-        if (filter) store.userFilter = Object.assign(store.userFilter, filter);
-
-        let userParams = Object.assign({}, store.userParams, params);
-        userParams = sanitizerParams(userParams, store?.exprBuilder);
-
-        store.userParams = userParams;
-        store.skip = 0;
-        await loadMore({ append: false });
+        await fetch({ append: false });
         return { filter, params };
     }
 
@@ -188,7 +168,6 @@ export function useArrayData(key, userOptions) {
 
     async function loadMore() {
         if (!hasMoreData.value) return;
-        console.error('loadMore', hasMoreData.value);
 
         store.skip = store.limit * page.value;
         page.value += 1;
@@ -207,7 +186,7 @@ export function useArrayData(key, userOptions) {
         if (store.skip) query.skip = store.skip;
         if (store.userParams && Object.keys(store.userParams).length !== 0)
             query.params = JSON.stringify(store.userParams);
-        // hasMoreData.value = true;
+
         if (router)
             router.replace({
                 path: route.path,
@@ -222,7 +201,6 @@ export function useArrayData(key, userOptions) {
         fetch,
         applyFilter,
         addFilter,
-        removeFilter,
         refresh,
         destroy,
         loadMore,
diff --git a/src/pages/Claim/Card/ClaimNotes.vue b/src/pages/Claim/Card/ClaimNotes.vue
index 35ecb0451..eeaffc85a 100644
--- a/src/pages/Claim/Card/ClaimNotes.vue
+++ b/src/pages/Claim/Card/ClaimNotes.vue
@@ -30,7 +30,7 @@ const body = {
 </script>
 <template>
     <div class="column items-center">
-        <VnNotes
+        <VnNotes style="overflow-y: scroll;"
             :add-note="$props.addNote"
             :id="id"
             url="claimObservations"
diff --git a/src/stores/useArrayDataStore.js b/src/stores/useArrayDataStore.js
index c8cd349e0..805e8bc53 100644
--- a/src/stores/useArrayDataStore.js
+++ b/src/stores/useArrayDataStore.js
@@ -19,8 +19,6 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
             order: '',
             data: ref(),
             isLoading: false,
-            loadMore: false,
-            pagination: false,
             userParamsChanged: true,
             exprBuilder: null,
         };

From 4d0a552dbf44dc728f7cbe34c53f9d964be53434 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 16 Jan 2024 12:15:08 +0100
Subject: [PATCH 36/86] refs #6704 test: fix

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

diff --git a/test/vitest/__tests__/components/Paginate.spec.js b/test/vitest/__tests__/components/Paginate.spec.js
index af9fb41a1..2a22ce438 100644
--- a/test/vitest/__tests__/components/Paginate.spec.js
+++ b/test/vitest/__tests__/components/Paginate.spec.js
@@ -119,7 +119,7 @@ describe('VnPaginate', () => {
             await vm.onLoad(index, done);
 
             expect(vm.pagination.page).toEqual(2);
-            expect(done).toHaveBeenCalledWith(true);
+            expect(done).toHaveBeenCalledWith(false);
         });
     });
 });

From 7a7622023cd5abcb98717068944b63703e46ce2d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 17 Jan 2024 08:29:51 +0100
Subject: [PATCH 37/86] refs #6694 perf: remove unnecessary api calls

---
 src/pages/Customer/CustomerCreate.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue
index 3afda7fac..b20554ee9 100644
--- a/src/pages/Customer/CustomerCreate.vue
+++ b/src/pages/Customer/CustomerCreate.vue
@@ -51,18 +51,18 @@ function handleLocation(data, { city, postcode, provinceFk, countryFk }) {
         auto-load
         url="Workers/search?departmentCodes"
     />
-    <FetchData
+    <!-- <FetchData
         ref="postcodeFetchDataRef"
         url="Postcodes/location"
         @on-fetch="(data) => (postcodesOptions = data)"
         auto-load
-    />
+    /> -->
     <FetchData
         @on-fetch="(data) => (businessTypesOptions = data)"
         auto-load
         url="BusinessTypes"
     />
-    <FetchData
+    <!-- <FetchData
         @on-fetch="(data) => (citiesLocationOptions = data)"
         auto-load
         url="Towns/location"
@@ -76,7 +76,7 @@ function handleLocation(data, { city, postcode, provinceFk, countryFk }) {
         @on-fetch="(data) => (countriesOptions = data)"
         auto-load
         url="Countries"
-    />
+    />-->
     <QPage>
         <VnSubToolbar />
         <FormModel

From c0005c0544deb57c6004f1b3a62d154b73356efa Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 17 Jan 2024 08:30:05 +0100
Subject: [PATCH 38/86] refs #6694 perf: add function for optionLabel

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

diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index c197f17ea..5b91caa1a 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -13,7 +13,7 @@ const $props = defineProps({
         default: () => [],
     },
     optionLabel: {
-        type: String,
+        type: [String, Function],
         default: '',
     },
     filterOptions: {

From 817a4e9e3f8ccb58a07e6f00d6e432e49c3a1592 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 17 Jan 2024 08:30:23 +0100
Subject: [PATCH 39/86] refs #6694 feat call new method for filter

---
 src/components/common/VnLocation.vue | 88 ++++++++++++++++++++--------
 1 file changed, 63 insertions(+), 25 deletions(-)

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index e91c78430..db6f49469 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -7,11 +7,12 @@ const emit = defineEmits(['update:modelValue', 'update:options']);
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
-const citiesLocationOptions = ref([]);
-const provincesLocationOptions = ref([]);
-const countriesOptions = ref([]);
+// const citiesLocationOptions = ref([]);
+// const provincesLocationOptions = ref([]);
+// const countriesOptions = ref([]);
+// const townsRef = ref([]);
 const postcodesOptions = ref([]);
-const postcodeFetchDataRef = ref(null);
+const postcodesRef = ref(null);
 
 const $props = defineProps({
     modelValue: {
@@ -66,25 +67,61 @@ watch(options, (newValue) => {
     setOptions(newValue);
 });
 
-function showLabel(data){
-    return `${data.code} - ${data.town.name}(${data.town.province.name}), ${data.town.province.country.country}`;
+function showLabel(data) {
+       return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
 }
 
-</script>
+function locationFilter(value) {
+    // if(value==='') return [];
+    let where = { limit: 30 };
+    const params = { value };
+    postcodesRef.value.fetch({ where: Object.assign(where, params) });
+//     postcodesRef.value.fetch({
+//   where: {
+//     or: [
+//       { code: { like: '%4660%' } },
+//       { 'town.name': { like: '%Alz%' } }
+//     ]
+//   }});
+    // const townParams = { name: { like: `%${val}%` } };
 
-<template>
-    <FetchData
-        ref="postcodeFetchDataRef"
-        url="Postcodes/location"
-        @on-fetch="(data) => (postcodesOptions = data)"
-        auto-load
-    />
-    <FetchData
-        @on-fetch="(data) => (citiesLocationOptions = data)"
+    // townsRef.value.fetch({ where: Object.assign(where, townParams) });
+}
+function handleFetch( data) {
+//     if (from === 'towns') {
+//         data = data.reduce((acc, town) => {
+//             for (const postcode of town.postcodes) {
+//                 console.log(postcode);
+//                 acc.push({ ...postcode, town:{name: town.name, province: town.province} });
+//             }
+
+//             return acc;
+//         }, []);
+//     }
+//     console.log(from, data);
+     postcodesOptions.value = data;
+}
+</script>
+<!-- let where = { limit: 30 };
+
+const params = { 'town': false, 'townsFk': {like: ``}  };
+where = Object.assign(where, params);
+postcodesRef.value.fetch({ where});
+} -->
+<!-- <FetchData
+        ref="townsRef"
+        @on-fetch="(data) => handleFetch('towns', data)"
         auto-load
         url="Towns/location"
-    />
+    /> -->
+<template>
     <FetchData
+        ref="postcodesRef"
+        url="Postcodes/filter"
+        @on-fetch="(data) =>handleFetch(data)"
+        auto-load
+    />
+    <!--  <FetchData
         @on-fetch="(data) => (provincesLocationOptions = data)"
         auto-load
         url="Provinces/location"
@@ -93,23 +130,26 @@ function showLabel(data){
         @on-fetch="(data) => (countriesOptions = data)"
         auto-load
         url="Countries"
-    />
+    /> -->
+    <!-- :filter-options="['code','town.name']"
+    :filter-rules="['val.length>2']" -->
     <VnSelectCreate
+        v-if="postcodesRef"
         v-model="value"
         :options="postcodesOptions"
         :label="t('Location')"
         :option-label="showLabel"
-        :placeholder="t('Search by postalCode or town (at least 3 characters')"
+        :placeholder="t('Search by postalCode, town, province or country')"
         v-bind="$attrs"
         emit-value
         map-options
         use-input
-        :filter-options="['code','town.name']"
-        :filter-rules="['val.length>2']"
         clearable
         hide-selected
         fill-input
         :class="{ required: $attrs.required }"
+        @input-value="locationFilter"
+        :default-filter="false"
     >
         <template #form>
             <CreateNewPostcode @on-data-saved="onPostcodeCreated($event)" />
@@ -118,9 +158,7 @@ function showLabel(data){
             <QItem v-bind="scope.itemProps">
                 <QItemSection v-if="scope.opt">
                     <QItemLabel>{{ scope.opt.code }}</QItemLabel>
-                    <QItemLabel caption
-                        >{{ showLabel(scope.opt)}}</QItemLabel
-                    >
+                    <QItemLabel caption>{{ showLabel(scope.opt) }}</QItemLabel>
                 </QItemSection>
             </QItem>
         </template>
@@ -137,5 +175,5 @@ function showLabel(data){
 <i18n>
 es:
     Location: Ubicación
-    Search by postalCode or town (at least 3 characters): Buscar por código postal o nombre ( al menos 3 letras)
+    Search by postalCode, town, province or country: Buscar por código postal, ciudad o país
 </i18n>

From d8e7f3acaa3b4b2ea6fcb190225f96c4e6d5a236 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 17 Jan 2024 08:31:28 +0100
Subject: [PATCH 40/86] refs #6694 perf: remove comments

---
 src/components/common/VnLocation.vue | 50 ----------------------------
 1 file changed, 50 deletions(-)

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index db6f49469..b321b731a 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -7,10 +7,6 @@ const emit = defineEmits(['update:modelValue', 'update:options']);
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
-// const citiesLocationOptions = ref([]);
-// const provincesLocationOptions = ref([]);
-// const countriesOptions = ref([]);
-// const townsRef = ref([]);
 const postcodesOptions = ref([]);
 const postcodesRef = ref(null);
 
@@ -72,48 +68,14 @@ function showLabel(data) {
 }
 
 function locationFilter(value) {
-    // if(value==='') return [];
     let where = { limit: 30 };
     const params = { value };
     postcodesRef.value.fetch({ where: Object.assign(where, params) });
-//     postcodesRef.value.fetch({
-//   where: {
-//     or: [
-//       { code: { like: '%4660%' } },
-//       { 'town.name': { like: '%Alz%' } }
-//     ]
-//   }});
-    // const townParams = { name: { like: `%${val}%` } };
-
-    // townsRef.value.fetch({ where: Object.assign(where, townParams) });
 }
 function handleFetch( data) {
-//     if (from === 'towns') {
-//         data = data.reduce((acc, town) => {
-//             for (const postcode of town.postcodes) {
-//                 console.log(postcode);
-//                 acc.push({ ...postcode, town:{name: town.name, province: town.province} });
-//             }
-
-//             return acc;
-//         }, []);
-//     }
-//     console.log(from, data);
      postcodesOptions.value = data;
 }
 </script>
-<!-- let where = { limit: 30 };
-
-const params = { 'town': false, 'townsFk': {like: ``}  };
-where = Object.assign(where, params);
-postcodesRef.value.fetch({ where});
-} -->
-<!-- <FetchData
-        ref="townsRef"
-        @on-fetch="(data) => handleFetch('towns', data)"
-        auto-load
-        url="Towns/location"
-    /> -->
 <template>
     <FetchData
         ref="postcodesRef"
@@ -121,18 +83,6 @@ postcodesRef.value.fetch({ where});
         @on-fetch="(data) =>handleFetch(data)"
         auto-load
     />
-    <!--  <FetchData
-        @on-fetch="(data) => (provincesLocationOptions = data)"
-        auto-load
-        url="Provinces/location"
-    />
-    <FetchData
-        @on-fetch="(data) => (countriesOptions = data)"
-        auto-load
-        url="Countries"
-    /> -->
-    <!-- :filter-options="['code','town.name']"
-    :filter-rules="['val.length>2']" -->
     <VnSelectCreate
         v-if="postcodesRef"
         v-model="value"

From c584eaf72363ac27bc919a60727287f6650bd91b Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 17 Jan 2024 14:59:16 +0100
Subject: [PATCH 41/86] refs #6694 feat change request params filters

---
 src/components/common/VnLocation.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index b321b731a..add5ff19b 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -67,10 +67,10 @@ function showLabel(data) {
        return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
 }
 
-function locationFilter(value) {
+function locationFilter(search) {
     let where = { limit: 30 };
-    const params = { value };
-    postcodesRef.value.fetch({ where: Object.assign(where, params) });
+    const params = { search };
+    postcodesRef.value.fetch({ where, args: params });
 }
 function handleFetch( data) {
      postcodesOptions.value = data;

From 655c8210751f819ad4aff1480f94e57f73e22931 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 17 Jan 2024 15:01:31 +0100
Subject: [PATCH 42/86] refs #6694 feat input-debounce

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

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index add5ff19b..072b08094 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -100,6 +100,7 @@ function handleFetch( data) {
         :class="{ required: $attrs.required }"
         @input-value="locationFilter"
         :default-filter="false"
+        :input-debounce="100"
     >
         <template #form>
             <CreateNewPostcode @on-data-saved="onPostcodeCreated($event)" />

From 0e506910327d341f9bd7bb762afd8c3f739a32b3 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 18 Jan 2024 07:32:04 +0100
Subject: [PATCH 43/86] refs #6694 perf: order VnLocation attrs

---
 src/components/common/VnLocation.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 072b08094..82dfd6d53 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -90,6 +90,10 @@ function handleFetch( data) {
         :label="t('Location')"
         :option-label="showLabel"
         :placeholder="t('Search by postalCode, town, province or country')"
+        @input-value="locationFilter"
+        :default-filter="false"
+        :input-debounce="100"
+        :class="{ required: $attrs.required }"
         v-bind="$attrs"
         emit-value
         map-options
@@ -97,19 +101,15 @@ function handleFetch( data) {
         clearable
         hide-selected
         fill-input
-        :class="{ required: $attrs.required }"
-        @input-value="locationFilter"
-        :default-filter="false"
-        :input-debounce="100"
     >
         <template #form>
             <CreateNewPostcode @on-data-saved="onPostcodeCreated($event)" />
         </template>
-        <template #option="scope">
-            <QItem v-bind="scope.itemProps">
-                <QItemSection v-if="scope.opt">
-                    <QItemLabel>{{ scope.opt.code }}</QItemLabel>
-                    <QItemLabel caption>{{ showLabel(scope.opt) }}</QItemLabel>
+        <template #option="{itemProps, opt}">
+            <QItem v-bind="itemProps">
+                <QItemSection v-if="opt">
+                    <QItemLabel>{{ opt.code }}</QItemLabel>
+                    <QItemLabel caption>{{ showLabel(opt) }}</QItemLabel>
                 </QItemSection>
             </QItem>
         </template>

From 4e1f4a184608b8cbb68e043744dd01af7a477b93 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 18 Jan 2024 07:32:24 +0100
Subject: [PATCH 44/86] add new rule for eslintrc.js

---
 .eslintrc.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index c8bdecb1a..1d09a896f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -58,7 +58,7 @@ module.exports = {
     rules: {
         'prefer-promise-reject-errors': 'off',
         'no-unused-vars': 'warn',
-
+        "vue/no-multiple-template-root": "off" ,
         // allow debugger during development only
         'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     },

From 94fb073d3f280cd2a1f0a16974d789ad03c7a3e9 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 18 Jan 2024 07:43:00 +0100
Subject: [PATCH 45/86] refs #6694 perf: remove comments

---
 src/pages/Customer/CustomerCreate.vue | 25 -------------------------
 1 file changed, 25 deletions(-)

diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue
index b20554ee9..4ce4b4520 100644
--- a/src/pages/Customer/CustomerCreate.vue
+++ b/src/pages/Customer/CustomerCreate.vue
@@ -28,12 +28,8 @@ const newClientForm = reactive({
     isEqualizated: false,
 });
 
-const postcodeFetchDataRef = ref(null);
 const workersOptions = ref([]);
 const businessTypesOptions = ref([]);
-const citiesLocationOptions = ref([]);
-const provincesLocationOptions = ref([]);
-const countriesOptions = ref([]);
 const postcodesOptions = ref([]);
 
 
@@ -51,32 +47,11 @@ function handleLocation(data, { city, postcode, provinceFk, countryFk }) {
         auto-load
         url="Workers/search?departmentCodes"
     />
-    <!-- <FetchData
-        ref="postcodeFetchDataRef"
-        url="Postcodes/location"
-        @on-fetch="(data) => (postcodesOptions = data)"
-        auto-load
-    /> -->
     <FetchData
         @on-fetch="(data) => (businessTypesOptions = data)"
         auto-load
         url="BusinessTypes"
     />
-    <!-- <FetchData
-        @on-fetch="(data) => (citiesLocationOptions = data)"
-        auto-load
-        url="Towns/location"
-    />
-    <FetchData
-        @on-fetch="(data) => (provincesLocationOptions = data)"
-        auto-load
-        url="Provinces/location"
-    />
-    <FetchData
-        @on-fetch="(data) => (countriesOptions = data)"
-        auto-load
-        url="Countries"
-    />-->
     <QPage>
         <VnSubToolbar />
         <FormModel

From 4e66f3c65d85b3a058620d4a695d32494203bc79 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 18 Jan 2024 07:43:30 +0100
Subject: [PATCH 46/86] refs #6694 feat: handle when postcodecreated

---
 src/components/common/VnLocation.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 82dfd6d53..d650211ad 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -73,8 +73,11 @@ function locationFilter(search) {
     postcodesRef.value.fetch({ where, args: params });
 }
 function handleFetch( data) {
-     postcodesOptions.value = data;
+    postcodesOptions.value = data;
 }
+async function onPostcodeCreated(){
+    postcodesRef.value.fetch();
+};
 </script>
 <template>
     <FetchData

From c38e76de88eea9f49ccad3dcad6a1d05b57a5abc Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 18 Jan 2024 07:45:17 +0100
Subject: [PATCH 47/86] refs #6694 feat: use VnLocation for WorkerCreate

---
 src/components/common/VnLocation.vue |   2 +-
 src/pages/Worker/WorkerCreate.vue    | 114 ++++-----------------------
 2 files changed, 17 insertions(+), 99 deletions(-)

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index d650211ad..6720e3920 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -129,5 +129,5 @@ async function onPostcodeCreated(){
 <i18n>
 es:
     Location: Ubicación
-    Search by postalCode, town, province or country: Buscar por código postal, ciudad o país
+    Search by postalcode, town, province or country: Buscar por código postal, ciudad o país
 </i18n>
diff --git a/src/pages/Worker/WorkerCreate.vue b/src/pages/Worker/WorkerCreate.vue
index accac7cf2..667111c6a 100644
--- a/src/pages/Worker/WorkerCreate.vue
+++ b/src/pages/Worker/WorkerCreate.vue
@@ -9,7 +9,7 @@ import VnInputDate from 'components/common/VnInputDate.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
 import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
-import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+import VnLocation from 'src/components/common/VnLocation.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
@@ -21,14 +21,6 @@ const workerConfigFilter = {
     field: ['payMethodFk'],
 };
 
-const provincesFilter = {
-    fields: ['id', 'name', 'countryFk'],
-};
-
-const townsFilter = {
-    fields: ['id', 'name', 'provinceFk'],
-};
-
 const newWorkerForm = ref({
     companyFk: null,
     payMethodFk: null,
@@ -49,9 +41,6 @@ const newWorkerForm = ref({
     bankEntityFk: null,
 });
 
-const postcodeFetchDataRef = ref(null);
-const provincesOptions = ref([]);
-const townsOptions = ref([]);
 const companiesOptions = ref([]);
 const workersOptions = ref([]);
 const payMethodsOptions = ref([]);
@@ -66,9 +55,13 @@ const onBankEntityCreated = (data) => {
     bankEntitiesOptions.value.push(data);
 };
 
-const onPostcodeCreated = async () => {
-    postcodeFetchDataRef.value.fetch();
-};
+
+function handleLocation(data, { city, postcode, provinceFk, countryFk }) {
+    data.postcode = postcode;
+    data.city = city;
+    data.provinceFk = provinceFk;
+    data.countryFk = countryFk;
+}
 
 onMounted(async () => {
     const userInfo = await useUserConfig().fetch();
@@ -83,24 +76,7 @@ onMounted(async () => {
         :filter="workerConfigFilter"
         auto-load
     />
-    <FetchData
-        ref="postcodeFetchDataRef"
-        url="Postcodes/location"
-        @on-fetch="(data) => (postcodesOptions = data)"
-        auto-load
-    />
-    <FetchData
-        url="Provinces/location"
-        @on-fetch="(data) => (provincesOptions = data)"
-        :filter="provincesFilter"
-        auto-load
-    />
-    <FetchData
-        url="Towns/location"
-        @on-fetch="(data) => (townsOptions = data)"
-        :filter="townsFilter"
-        auto-load
-    />
+
     <FetchData
         url="Companies"
         @on-fetch="(data) => (companiesOptions = data)"
@@ -178,77 +154,19 @@ onMounted(async () => {
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectCreate
-                            v-model="data.postcode"
-                            :label="t('worker.create.postcode')"
+                        <VnLocation
                             :rules="validate('Worker.postcode')"
                             :roles-allowed-to-create="['deliveryAssistant']"
                             :options="postcodesOptions"
-                            option-label="code"
-                            option-value="code"
-                            hide-selected
-                        >
-                            <template #form>
-                                <CustomerCreateNewPostcode
-                                    @on-data-saved="onPostcodeCreated($event)"
-                                />
-                            </template>
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection v-if="scope.opt">
-                                        <QItemLabel>{{ scope.opt.code }}</QItemLabel>
-                                        <QItemLabel caption
-                                            >{{ scope.opt.code }} -
-                                            {{ scope.opt.town.name }} ({{
-                                                scope.opt.town.province.name
-                                            }},
-                                            {{
-                                                scope.opt.town.province.country.country
-                                            }})</QItemLabel
-                                        >
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectCreate>
-                    </div>
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('worker.create.province')"
-                            v-model="data.provinceFk"
-                            :options="provincesOptions"
-                            option-value="id"
-                            option-label="name"
-                            hide-selected
-                            :rules="validate('Worker.provinceFk')"
-                        />
+                            v-model="data.location"
+                            @update:model-value="
+                                    (location) => handleLocation(data, location)
+                                    "
+                            >
+                        </VnLocation>
                     </div>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('worker.create.city')"
-                            v-model="data.city"
-                            :options="townsOptions"
-                            option-value="name"
-                            option-label="name"
-                            hide-selected
-                            :rules="validate('Worker.city')"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>{{ scope.opt.name }}</QItemLabel>
-                                        <QItemLabel caption
-                                            >{{ scope.opt.name }},
-                                            {{ scope.opt.province.name }} ({{
-                                                scope.opt.province.country.country
-                                            }})</QItemLabel
-                                        >
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectFilter>
-                    </div>
                     <div class="col">
                         <VnInput
                             :label="t('worker.create.street')"

From 339d6609aacbc3aa0bec3582db435576c99c8727 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Thu, 18 Jan 2024 13:33:14 +0100
Subject: [PATCH 48/86] refs #6339 clipboard

---
 src/components/ui/VnLv.vue                    | 25 +++++++++++++++++++
 src/i18n/en/index.js                          |  3 +++
 src/i18n/es/index.js                          |  3 +++
 src/pages/Customer/Card/CustomerSummary.vue   |  2 +-
 .../Department/Card/DepartmentDescriptor.vue  |  6 ++---
 src/pages/Worker/Card/WorkerDescriptor.vue    |  2 +-
 src/pages/Worker/Card/WorkerSummary.vue       |  2 +-
 7 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/components/ui/VnLv.vue b/src/components/ui/VnLv.vue
index 665404afc..6edfb8526 100644
--- a/src/components/ui/VnLv.vue
+++ b/src/components/ui/VnLv.vue
@@ -1,6 +1,8 @@
 <script setup>
 import { computed } from 'vue';
 import { dashIfEmpty } from 'src/filters';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
 
 const $props = defineProps({
     label: { type: String, default: null },
@@ -10,8 +12,20 @@ const $props = defineProps({
     },
     info: { type: String, default: null },
     dash: { type: Boolean, default: true },
+    copy: { type: Boolean, default: false },
 });
+const { t } = useI18n();
 const isBooleanValue = computed(() => typeof $props.value === 'boolean');
+const quasar = useQuasar();
+function copyText() {
+    navigator.clipboard.writeText($props.value);
+    quasar.notify({
+        type: 'positive',
+        message: t('components.VnLv.copyText', {
+            copyValue: $props.value,
+        }),
+    });
+}
 </script>
 <style scoped>
 .label,
@@ -48,5 +62,16 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
                 </QTooltip>
             </QIcon>
         </div>
+        <div class="copy" v-if="$props.copy && $props.value" @click="copyText()">
+            <QIcon name="Content_Copy" color="primary" />
+        </div>
     </div>
 </template>
+
+<style lang="scss" scoped>
+.copy {
+    &:hover {
+        cursor: pointer;
+    }
+}
+</style>
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 139977e32..0f380a968 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -936,5 +936,8 @@ export default {
             addToPinned: 'Add to pinned',
             removeFromPinned: 'Remove from pinned',
         },
+        VnLv: {
+            copyText: '{copyValue} has been copied to the clipboard',
+        },
     },
 };
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 43f624cb3..b145958de 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -935,5 +935,8 @@ export default {
             addToPinned: 'Añadir a fijados',
             removeFromPinned: 'Eliminar de fijados',
         },
+        VnLv: {
+            copyText: '{copyValue} se ha copiado al portapepeles',
+        },
     },
 };
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index 4ebd6efab..c46b8a8de 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -81,7 +81,7 @@ const creditWarning = computed(() => {
                         <VnLinkPhone :phone-number="entity.mobile" />
                     </template>
                 </VnLv>
-                <VnLv :label="t('customer.summary.email')" :value="entity.email" />
+                <VnLv :label="t('customer.summary.email')" :value="entity.email" copy />
                 <VnLv
                     :label="t('customer.summary.salesPerson')"
                     :value="entity?.salesPersonUser?.name"
diff --git a/src/pages/Department/Card/DepartmentDescriptor.vue b/src/pages/Department/Card/DepartmentDescriptor.vue
index 1f7e6dcbb..bd96812c9 100644
--- a/src/pages/Department/Card/DepartmentDescriptor.vue
+++ b/src/pages/Department/Card/DepartmentDescriptor.vue
@@ -90,17 +90,15 @@ const removeDepartment = () => {
             </QItem>
         </template>
         <template #body="{ entity }">
-            <VnLv :label="t('department.chat')" :value="entity.chatName" dash />
-            <VnLv :label="t('department.email')" :value="entity.notificationEmail" dash />
+            <VnLv :label="t('department.chat')" :value="entity.chatName" />
+            <VnLv :label="t('department.email')" :value="entity.notificationEmail" copy />
             <VnLv
                 :label="t('department.selfConsumptionCustomer')"
                 :value="entity.client?.name"
-                dash
             />
             <VnLv
                 :label="t('department.bossDepartment')"
                 :value="entity.worker?.user?.name"
-                dash
             />
         </template>
         <template #actions>
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index f089c0022..bec56bee7 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -101,7 +101,7 @@ const setData = (entity) => {
         </template>
         <template #body="{ entity }">
             <VnLv :label="t('worker.card.name')" :value="entity.user?.nickname" />
-            <VnLv :label="t('worker.card.email')" :value="entity.user?.email"> </VnLv>
+            <VnLv :label="t('worker.card.email')" :value="entity.user?.email" copy />
             <VnLv
                 :label="t('worker.list.department')"
                 :value="entity.department ? entity.department.department.name : null"
diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
index 26328b9cd..176d9adf4 100644
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -80,7 +80,7 @@ const filter = {
                     :label="t('worker.list.department')"
                     :value="worker.department.department.name"
                 />
-                <VnLv :label="t('worker.list.email')" :value="worker.user.email" />
+                <VnLv :label="t('worker.list.email')" :value="worker.user.email" copy />
                 <VnLv :label="t('worker.summary.boss')" link>
                     <template #value>
                         <VnUserLink

From 259902a7ea9c7cd57cde572a791a66296f05e3b4 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Thu, 18 Jan 2024 14:59:51 +0100
Subject: [PATCH 49/86] refs #6339 composable

---
 src/components/UserPanel.vue    | 36 ++++++++++++++++-----------------
 src/components/ui/VnLv.vue      | 20 +++++++++---------
 src/composables/useClipboard.js | 17 ++++++++++++++++
 3 files changed, 44 insertions(+), 29 deletions(-)
 create mode 100644 src/composables/useClipboard.js

diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue
index f512ac4c4..e0b6b86ed 100644
--- a/src/components/UserPanel.vue
+++ b/src/components/UserPanel.vue
@@ -1,19 +1,19 @@
 <script setup>
 import { onMounted, computed } from 'vue';
-import { Dark, Quasar, useQuasar } from 'quasar';
+import { Dark, Quasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
-import { localeEquivalence } from "src/i18n/index";
+import { localeEquivalence } from 'src/i18n/index';
 
 const state = useState();
 const session = useSession();
 const router = useRouter();
 const { t, locale } = useI18n();
-const quasar = useQuasar();
-
+import { useClipboard } from 'src/composables/useClipboard';
+const { copyText } = useClipboard();
 const userLocale = computed({
     get() {
         return locale.value;
@@ -21,14 +21,14 @@ const userLocale = computed({
     set(value) {
         locale.value = value;
 
-        value = localeEquivalence[value] ?? value
+        value = localeEquivalence[value] ?? value;
 
         try {
             /* @vite-ignore */
             import(`../../node_modules/quasar/lang/${value}.mjs`).then((lang) => {
                 Quasar.lang.set(lang.default);
             });
-       } catch (error) {
+        } catch (error) {
             //
         }
     },
@@ -81,12 +81,8 @@ function logout() {
     router.push('/login');
 }
 
-function copyUserToken(){
-    navigator.clipboard.writeText(session.getToken());
-    quasar.notify({
-        type: 'positive',
-        message: t('components.userPanel.copyToken'),
-    });
+function copyUserToken() {
+    copyText(session.getToken(), { label: 'components.userPanel.copyToken' });
 }
 </script>
 
@@ -129,8 +125,12 @@ function copyUserToken(){
                 <div class="text-subtitle1 q-mt-md">
                     <strong>{{ user.nickname }}</strong>
                 </div>
-                <div class="text-subtitle3 text-grey-7 q-mb-xs copyUserToken" @click="copyUserToken()" >@{{ user.name }}
-            </div>
+                <div
+                    class="text-subtitle3 text-grey-7 q-mb-xs copyText"
+                    @click="copyUserToken()"
+                >
+                    @{{ user.name }}
+                </div>
 
                 <QBtn
                     id="logout"
@@ -152,9 +152,9 @@ function copyUserToken(){
     width: 150px;
 }
 
-.copyUserToken {
-   &:hover{
-    cursor: alias;
-   }
+.copyText {
+    &:hover {
+        cursor: alias;
+    }
 }
 </style>
diff --git a/src/components/ui/VnLv.vue b/src/components/ui/VnLv.vue
index 6edfb8526..0e4a055eb 100644
--- a/src/components/ui/VnLv.vue
+++ b/src/components/ui/VnLv.vue
@@ -1,9 +1,8 @@
 <script setup>
 import { computed } from 'vue';
 import { dashIfEmpty } from 'src/filters';
-import { useQuasar } from 'quasar';
-import { useI18n } from 'vue-i18n';
 
+import { useClipboard } from 'src/composables/useClipboard';
 const $props = defineProps({
     label: { type: String, default: null },
     value: {
@@ -14,16 +13,15 @@ const $props = defineProps({
     dash: { type: Boolean, default: true },
     copy: { type: Boolean, default: false },
 });
-const { t } = useI18n();
 const isBooleanValue = computed(() => typeof $props.value === 'boolean');
-const quasar = useQuasar();
-function copyText() {
-    navigator.clipboard.writeText($props.value);
-    quasar.notify({
-        type: 'positive',
-        message: t('components.VnLv.copyText', {
+
+const { copyText } = useClipboard();
+
+function copyValueText() {
+    copyText($props.value, {
+        component: {
             copyValue: $props.value,
-        }),
+        },
     });
 }
 </script>
@@ -62,7 +60,7 @@ function copyText() {
                 </QTooltip>
             </QIcon>
         </div>
-        <div class="copy" v-if="$props.copy && $props.value" @click="copyText()">
+        <div class="copy" v-if="$props.copy && $props.value" @click="copyValueText()">
             <QIcon name="Content_Copy" color="primary" />
         </div>
     </div>
diff --git a/src/composables/useClipboard.js b/src/composables/useClipboard.js
new file mode 100644
index 000000000..008c24fa1
--- /dev/null
+++ b/src/composables/useClipboard.js
@@ -0,0 +1,17 @@
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+
+export function useClipboard() {
+    const quasar = useQuasar();
+    const { t } = useI18n();
+    /**
+     *
+     * @param {String} value Value to send to clipboardAPI
+     * @param {Object} {label, component} Refer to Quasar notify configuration. Label is the text to translate
+     */
+    function copyText(value, { label = 'components.VnLv.copyText', component = {} }) {
+        navigator.clipboard.writeText(value);
+        quasar.notify({ type: 'positive', message: t(label, component) });
+    }
+    return { copyText };
+}

From 9588ffb54bfb326390f8aaaa0fcf2f48893b6c3f Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 18 Jan 2024 11:20:21 -0300
Subject: [PATCH 50/86] remove log

---
 src/pages/Supplier/Card/SupplierFiscalData.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/Supplier/Card/SupplierFiscalData.vue b/src/pages/Supplier/Card/SupplierFiscalData.vue
index 28ad26961..d481d6205 100644
--- a/src/pages/Supplier/Card/SupplierFiscalData.vue
+++ b/src/pages/Supplier/Card/SupplierFiscalData.vue
@@ -288,7 +288,6 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
                     </div>
                 </div>
             </VnRow>
-            <pre> {{ data }}</pre>
         </template>
     </FormModel>
 </template>

From b3fc865c18f07a43d3b73baf735203e5400f7308 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 18 Jan 2024 15:45:44 +0100
Subject: [PATCH 51/86] refs #6718 fix: useArrayDataStore

---
 src/stores/useArrayDataStore.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/useArrayDataStore.js b/src/stores/useArrayDataStore.js
index 805e8bc53..115c161dd 100644
--- a/src/stores/useArrayDataStore.js
+++ b/src/stores/useArrayDataStore.js
@@ -19,7 +19,7 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
             order: '',
             data: ref(),
             isLoading: false,
-            userParamsChanged: true,
+            userParamsChanged: false,
             exprBuilder: null,
         };
     }

From 862dc20bcd38ec8d3595a120ce23a32107af2649 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 19 Jan 2024 10:48:23 -0300
Subject: [PATCH 52/86] Add translation to SupplierCard search-bar

---
 src/pages/Supplier/Card/SupplierCard.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/pages/Supplier/Card/SupplierCard.vue b/src/pages/Supplier/Card/SupplierCard.vue
index 6b6e8c7f7..1b9b858d3 100644
--- a/src/pages/Supplier/Card/SupplierCard.vue
+++ b/src/pages/Supplier/Card/SupplierCard.vue
@@ -62,3 +62,8 @@ const { t } = useI18n();
     }
 }
 </style>
+
+<i18n>
+    es:
+        Search suppliers: Buscar proveedores
+</i18n>

From c7b9f4ce5b230989582244e09376506b74f449df Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 19 Jan 2024 11:16:35 -0300
Subject: [PATCH 53/86] Change entry buys plural translation logic

---
 src/pages/Entry/Card/EntryBuys.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/pages/Entry/Card/EntryBuys.vue b/src/pages/Entry/Card/EntryBuys.vue
index 87d4b3826..990feb656 100644
--- a/src/pages/Entry/Card/EntryBuys.vue
+++ b/src/pages/Entry/Card/EntryBuys.vue
@@ -227,18 +227,20 @@ const openRemoveDialog = async () => {
             component: VnConfirm,
             componentProps: {
                 title: t('Confirm deletion'),
-                message:
-                    rowsSelected.value.length > 1
-                        ? t('Are you sure you want to delete this buys?')
-                        : t('Are you sure you want to delete this buy?'),
+                message: t(
+                    `Are you sure you want to delete this buy${
+                        rowsSelected.value.length > 1 ? 's' : ''
+                    }?`
+                ),
                 data: rowsSelected.value,
             },
         })
         .onOk(async () => {
             try {
                 await deleteBuys();
-                const notifyMessage =
-                    rowsSelected.value.length > 1 ? t('Buys deleted') : t('Buy deleted');
+                const notifyMessage = t(
+                    `Buy${rowsSelected.value.length > 1 ? 's' : ''} deleted`
+                );
                 notify(notifyMessage, 'positive');
             } catch (err) {
                 console.error('Error deleting buys');

From cae42486c86b2de340e0e74b556773993bd1da39 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 19 Jan 2024 11:25:19 -0300
Subject: [PATCH 54/86] apply nowrap to QTooltip

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

diff --git a/src/pages/Entry/Card/EntryBuys.vue b/src/pages/Entry/Card/EntryBuys.vue
index 990feb656..5eee14d29 100644
--- a/src/pages/Entry/Card/EntryBuys.vue
+++ b/src/pages/Entry/Card/EntryBuys.vue
@@ -383,7 +383,7 @@ const importBuys = () => {
     </VnPaginate>
     <QPageSticky :offset="[20, 20]">
         <QBtn fab icon="upload" color="primary" @click="importBuys()" />
-        <QTooltip>
+        <QTooltip class="text-no-wrap">
             {{ t('Import buys') }}
         </QTooltip>
     </QPageSticky>

From 5d0290f58546ffad4ef8cd4004a37dc30d316f2f Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 19 Jan 2024 11:29:43 -0300
Subject: [PATCH 55/86] Fix QFile label translation in entry buys

---
 src/i18n/en/index.js                     | 3 ++-
 src/i18n/es/index.js                     | 1 +
 src/pages/Entry/Card/EntryBuysImport.vue | 3 ++-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 742134ecd..e67f86f89 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -334,6 +334,7 @@ export default {
             grouping: 'Grouping',
             buyingValue: 'Buying value',
             packagingFk: 'Box',
+            file: 'File',
         },
         notes: {
             observationType: 'Observation type',
@@ -886,7 +887,7 @@ export default {
             RouteList: 'List',
             create: 'Create',
             basicData: 'Basic Data',
-            summary: 'Summary'
+            summary: 'Summary',
         },
         cmr: {
             list: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index ed6633bd9..cd0a0a2ad 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -333,6 +333,7 @@ export default {
             grouping: 'Grouping',
             buyingValue: 'Coste',
             packagingFk: 'Embalaje',
+            file: 'Fichero',
         },
         notes: {
             observationType: 'Tipo de observación',
diff --git a/src/pages/Entry/Card/EntryBuysImport.vue b/src/pages/Entry/Card/EntryBuysImport.vue
index 1495e968d..50f5aeae8 100644
--- a/src/pages/Entry/Card/EntryBuysImport.vue
+++ b/src/pages/Entry/Card/EntryBuysImport.vue
@@ -197,10 +197,11 @@ const redirectToBuysView = () => {
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <QFile
-                        label="Standard"
+                        :label="t('entry.buys.file')"
                         :multiple="false"
                         v-model="importData.file"
                         @update:model-value="onFileChange($event)"
+                        class="required"
                     >
                         <template #append>
                             <QIcon name="vn:attach" class="cursor-pointer">

From a888472ad226820412c3b37e6f0d52bf2a467df4 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 19 Jan 2024 11:34:07 -0300
Subject: [PATCH 56/86] Fix tooltip label in supplier agency term

---
 src/i18n/en/index.js                           | 1 +
 src/i18n/es/index.js                           | 1 +
 src/pages/Supplier/Card/SupplierAgencyTerm.vue | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index e67f86f89..1a7a4c27e 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -1017,6 +1017,7 @@ export default {
             m3Price: 'M3 Price',
             routePrice: 'Route price',
             minimumKm: 'Minimum Km',
+            addRow: 'Add row',
         },
         consumption: {
             entry: 'Entry',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index cd0a0a2ad..83de42ee0 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -1017,6 +1017,7 @@ export default {
             m3Price: 'Precio M3',
             routePrice: 'Precio ruta',
             minimumKm: 'Km mínimos',
+            addRow: 'Añadir fila',
         },
         consumption: {
             entry: 'Entrada',
diff --git a/src/pages/Supplier/Card/SupplierAgencyTerm.vue b/src/pages/Supplier/Card/SupplierAgencyTerm.vue
index a300ae8e7..769ff4dad 100644
--- a/src/pages/Supplier/Card/SupplierAgencyTerm.vue
+++ b/src/pages/Supplier/Card/SupplierAgencyTerm.vue
@@ -128,7 +128,7 @@ onMounted(() => {
     <QPageSticky :offset="[20, 20]">
         <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
         <QTooltip>
-            {{ t('supplier.list.newSupplier') }}
+            {{ t('supplier.agencyTerms.addRow') }}
         </QTooltip>
     </QPageSticky>
 </template>

From 533435c7ba1d4587e927c39ea964055b43f27cd6 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 19 Jan 2024 15:16:36 -0300
Subject: [PATCH 57/86] Remove pre tag in WorkerCreate component

---
 src/pages/Worker/WorkerCreate.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/Worker/WorkerCreate.vue b/src/pages/Worker/WorkerCreate.vue
index 91d4d454b..5cc3993ea 100644
--- a/src/pages/Worker/WorkerCreate.vue
+++ b/src/pages/Worker/WorkerCreate.vue
@@ -363,7 +363,6 @@ onMounted(async () => {
                         </template>
                     </VnSelectCreate>
                 </VnRow>
-                <pre>{{ data }}</pre>
             </template>
         </FormModel>
     </QPage>

From b226e59228086363d0e4b7fcd361597dd80c0876 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 22 Jan 2024 11:39:13 +0100
Subject: [PATCH 58/86] refs #6339 tests

---
 src/i18n/en/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 0f380a968..93672d10e 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -913,6 +913,7 @@ export default {
             totalEntries: 'Total entries',
         },
     },
+
     components: {
         topbar: {},
         userPanel: {

From 0df15b2d8898e02c7830e4af1d528cfce68c48c3 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 22 Jan 2024 12:45:07 +0100
Subject: [PATCH 59/86] refs #6733 remove alert

---
 src/components/FormModel.vue | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index a5560dfc0..405b895e7 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -176,13 +176,6 @@ watch(formUrl, async () => {
 });
 </script>
 <template>
-    <QBanner
-        v-if="$props.observeFormChanges && hasChanges"
-        class="text-white bg-warning full-width"
-    >
-        <QIcon name="warning" size="md" class="q-mr-md" />
-        <span>{{ t('globals.changesToSave') }}</span>
-    </QBanner>
     <div class="column items-center full-width">
         <QForm
             v-if="formData"

From 2400eca1e320cf7142cb10c06060a8ec8feb9f41 Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Mon, 22 Jan 2024 06:53:47 -0500
Subject: [PATCH 60/86] Se hace correccion solicitada en issuecomment-39495

---
 .../components/CustomerConsigneeCreate.vue    | 31 +++++++++----------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/pages/Customer/components/CustomerConsigneeCreate.vue b/src/pages/Customer/components/CustomerConsigneeCreate.vue
index aadf554b3..92ce47bf2 100644
--- a/src/pages/Customer/components/CustomerConsigneeCreate.vue
+++ b/src/pages/Customer/components/CustomerConsigneeCreate.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { onBeforeMount, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import axios from 'axios';
 
@@ -16,20 +16,9 @@ import CustomsNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCus
 
 const { t } = useI18n();
 const route = useRoute();
+const router = useRouter();
 
-const formInitialData = reactive({
-    isDefaultAddress: false,
-    nickname: null,
-    street: null,
-    postalCode: null,
-    city: null,
-    provinceFk: null,
-    agencyModeFk: null,
-    phone: null,
-    mobile: null,
-    incotermsFk: null,
-    customsAgentFk: null,
-});
+const formInitialData = reactive({ isDefaultAddress: false });
 
 const townsFetchDataRef = ref(null);
 const postcodeFetchDataRef = ref(null);
@@ -63,19 +52,28 @@ const getCustomsAgents = async () => {
 const refreshData = () => {
     getCustomsAgents();
 };
+
+const toCustomerConsignees = () => {
+    router.push({
+        name: 'CustomerConsignees',
+        params: {
+            id: route.params.id,
+        },
+    });
+};
 </script>
 
 <template>
     <FetchData
-        ref="postcodeFetchDataRef"
         @on-fetch="(data) => (postcodesOptions = data)"
         auto-load
+        ref="postcodeFetchDataRef"
         url="Postcodes/location"
     />
     <FetchData
-        ref="townsFetchDataRef"
         @on-fetch="(data) => (citiesLocationOptions = data)"
         auto-load
+        ref="townsFetchDataRef"
         url="Towns/location"
     />
     <FetchData
@@ -94,6 +92,7 @@ const refreshData = () => {
         :form-initial-data="formInitialData"
         :observe-form-changes="false"
         :url-create="urlCreate"
+        @on-data-saved="toCustomerConsignees()"
         model="client"
     >
         <template #form="{ data, validate }">

From 9c2267e116a9679dbb73251739daf95b7784ecd7 Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Mon, 22 Jan 2024 07:01:41 -0500
Subject: [PATCH 61/86] Se hace correccion solicitada en issuecomment-39487

---
 src/pages/Customer/Card/CustomerConsignees.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/pages/Customer/Card/CustomerConsignees.vue b/src/pages/Customer/Card/CustomerConsignees.vue
index bf61ea302..4ddf1dea1 100644
--- a/src/pages/Customer/Card/CustomerConsignees.vue
+++ b/src/pages/Customer/Card/CustomerConsignees.vue
@@ -91,7 +91,7 @@ const toCustomerConsigneeEdit = (consigneeId) => {
                     }"
                     @click="toCustomerConsigneeEdit(item.id)"
                 >
-                    <div class="consignees-card-icon">
+                    <div class="q-ml-xs q-mr-md flex items-center">
                         <QIcon name="star" size="md" color="primary" />
                     </div>
                     <div>
@@ -166,11 +166,6 @@ const toCustomerConsigneeEdit = (consigneeId) => {
         background-color: var(--vn-light-gray);
     }
 }
-.consignees-card-icon {
-    margin: 0 15px 0 5px;
-    display: flex;
-    align-items: center;
-}
 </style>
 
 <i18n>

From 9d4d3bf84dcf1bcf13a2369af89d52545a3d96cf Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Mon, 22 Jan 2024 07:55:30 -0500
Subject: [PATCH 62/86] Se hace correccion solicitada en issuecomment-39488

---
 src/pages/Customer/Card/CustomerCredits.vue | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/pages/Customer/Card/CustomerCredits.vue b/src/pages/Customer/Card/CustomerCredits.vue
index 13bc684b3..931cbf0cf 100644
--- a/src/pages/Customer/Card/CustomerCredits.vue
+++ b/src/pages/Customer/Card/CustomerCredits.vue
@@ -117,9 +117,10 @@ const toCustomerCreditCreate = () => {
                     <QTr :props="props" class="cursor-pointer">
                         <component
                             :is="tableColumnComponents[props.col.name].component"
-                            class="col-content"
-                            v-bind="tableColumnComponents[props.col.name].props(props)"
                             @click="tableColumnComponents[props.col.name].event(props)"
+                            class="rounded-borders q-pa-sm"
+                            style="border: 1px solid red"
+                            v-bind="tableColumnComponents[props.col.name].props(props)"
                         >
                             {{ props.value }}
                             <WorkerDescriptorProxy :id="workerId" />
@@ -138,13 +139,6 @@ const toCustomerCreditCreate = () => {
     </QPageSticky>
 </template>
 
-<style lang="scss" scoped>
-.col-content {
-    border-radius: 4px;
-    padding: 6px;
-}
-</style>
-
 <i18n>
 es:
     Since: Desde

From 676b178892cc1e7d000b6f276060b3b48350f703 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 22 Jan 2024 14:24:01 +0100
Subject: [PATCH 63/86] refs #6655 remove clickStop

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

diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index df9af4743..a11e1e886 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -87,7 +87,7 @@ function viewSummary(id) {
                         v-for="row of rows"
                     >
                         <template #list-items>
-                            <VnLv :label="t('claim.list.customer')" @click.stop>
+                            <VnLv :label="t('claim.list.customer')">
                                 <template #value>
                                     <span class="link" @click.stop>
                                         {{ row.clientName }}

From 30c90e534ce4140c0c961bd09f4ac00793dbcdf6 Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Mon, 22 Jan 2024 08:44:15 -0500
Subject: [PATCH 64/86] Se hace correccion solicitada en issuecomment-39493

---
 src/pages/Customer/Card/CustomerCredits.vue | 1 -
 src/pages/Customer/Card/CustomerNotes.vue   | 6 ++++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/pages/Customer/Card/CustomerCredits.vue b/src/pages/Customer/Card/CustomerCredits.vue
index 931cbf0cf..3124a18fc 100644
--- a/src/pages/Customer/Card/CustomerCredits.vue
+++ b/src/pages/Customer/Card/CustomerCredits.vue
@@ -119,7 +119,6 @@ const toCustomerCreditCreate = () => {
                             :is="tableColumnComponents[props.col.name].component"
                             @click="tableColumnComponents[props.col.name].event(props)"
                             class="rounded-borders q-pa-sm"
-                            style="border: 1px solid red"
                             v-bind="tableColumnComponents[props.col.name].props(props)"
                         >
                             {{ props.value }}
diff --git a/src/pages/Customer/Card/CustomerNotes.vue b/src/pages/Customer/Card/CustomerNotes.vue
index 303ea0980..09f5c0ce6 100644
--- a/src/pages/Customer/Card/CustomerNotes.vue
+++ b/src/pages/Customer/Card/CustomerNotes.vue
@@ -36,7 +36,9 @@ const toCustomerNoteCreate = () => {
                         v-for="(item, index) in rows"
                         :key="index"
                         :class="{
-                            'consignees-card': true,
+                            'q-pa-md': true,
+                            'q-rounded': true,
+                            'custom-border': true,
                             'q-mb-md': index < rows.length - 1,
                         }"
                     >
@@ -82,7 +84,7 @@ const toCustomerNoteCreate = () => {
 </template>
 
 <style lang="scss">
-.consignees-card {
+.custom-border {
     border: 2px solid var(--vn-light-gray);
     border-radius: 10px;
     padding: 10px;

From def175bee25ea1d7d4112c74e9b0bb76efbd0ee0 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 22 Jan 2024 12:11:51 -0300
Subject: [PATCH 65/86] move QList element and classes inside VnFilterPanel

---
 src/components/common/VnLogFilter.vue         |  42 +-
 src/components/common/VnSelectFilter.vue      |   6 +
 src/components/ui/VnFilterPanel.vue           |  10 +-
 src/pages/Claim/ClaimFilter.vue               | 263 +++---
 src/pages/Customer/CustomerFilter.vue         | 237 +++--
 .../Defaulter/CustomerDefaulterFilter.vue     | 275 +++---
 .../CustomerExtendedListFilter.vue            | 830 +++++++++---------
 .../CustomerNotificationsFilter.vue           | 143 ++-
 .../Payments/CustomerPaymentsFilter.vue       | 117 ++-
 src/pages/Entry/EntryFilter.vue               | 288 +++---
 src/pages/InvoiceIn/InvoiceInFilter.vue       | 281 +++---
 src/pages/InvoiceOut/InvoiceOutFilter.vue     | 138 ++-
 .../InvoiceOutNegativeBasesFilter.vue         | 148 ++--
 src/pages/Order/Card/OrderCatalogFilter.vue   | 330 ++++---
 src/pages/Order/Card/OrderFilter.vue          | 294 +++----
 src/pages/Route/Card/RouteFilter.vue          | 274 +++---
 src/pages/Route/Cmr/CmrFilter.vue             | 192 ++--
 src/pages/Shelving/Card/ShelvingFilter.vue    | 110 +--
 src/pages/Ticket/TicketFilter.vue             | 322 ++++---
 src/pages/Travel/ExtraCommunityFilter.vue     | 285 +++---
 src/pages/Travel/TravelFilter.vue             | 401 +++++----
 src/pages/Worker/WorkerFilter.vue             | 134 ++-
 22 files changed, 2476 insertions(+), 2644 deletions(-)

diff --git a/src/components/common/VnLogFilter.vue b/src/components/common/VnLogFilter.vue
index 5f4dbf717..b5941239c 100644
--- a/src/components/common/VnLogFilter.vue
+++ b/src/components/common/VnLogFilter.vue
@@ -38,28 +38,26 @@ const workers = ref();
                 minimal
             >
             </QDate>
-            <QList dense>
-                <QSeparator />
-                <QItem>
-                    <QItemSection v-if="!workers">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="workers">
-                        <QSelect
-                            :label="t('User')"
-                            v-model="params.userFk"
-                            @update:model-value="searchFn()"
-                            :options="workers"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                            use-input
-                            :input-debounce="0"
-                        />
-                    </QItemSection>
-                </QItem>
-            </QList>
+            <QSeparator />
+            <QItem>
+                <QItemSection v-if="!workers">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="workers">
+                    <QSelect
+                        :label="t('User')"
+                        v-model="params.userFk"
+                        @update:model-value="searchFn()"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
         </template>
     </VnFilterPanel>
 </template>
diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 244fb50bb..377a39a0e 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -116,3 +116,9 @@ watch(options, (newValue) => {
         </template>
     </QSelect>
 </template>
+
+<style scoped lang="scss">
+.q-field--outlined {
+    max-width: 100%;
+}
+</style>
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 0a306dc5f..708a170a2 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -216,7 +216,9 @@ function formatValue(value) {
             </QItem>
             <QSeparator />
         </QList>
-        <slot name="body" :params="userParams" :search-fn="search"></slot>
+        <QList dense class="list q-gutter-y-sm q-mt-sm">
+            <slot name="body" :params="userParams" :search-fn="search"></slot>
+        </QList>
         <template v-if="props.searchButton">
             <QItem>
                 <QItemSection class="q-py-sm">
@@ -242,6 +244,12 @@ function formatValue(value) {
     />
 </template>
 
+<style scoped lang="scss">
+.list {
+    width: 256px;
+}
+</style>
+
 <i18n>
 es:
     No filters applied: No se han aplicado filtros
diff --git a/src/pages/Claim/ClaimFilter.vue b/src/pages/Claim/ClaimFilter.vue
index b06f47653..ee702ffdd 100644
--- a/src/pages/Claim/ClaimFilter.vue
+++ b/src/pages/Claim/ClaimFilter.vue
@@ -36,123 +36,122 @@ const states = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense class="list">
-                <QItem class="q-my-sm">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('Customer ID')"
-                            v-model="params.clientFk"
-                            lazy-rules
-                            is-outlined
-                        >
-                            <template #prepend>
-                                <QIcon name="badge" size="xs"></QIcon> </template
-                        ></VnInput>
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-mb-sm">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('Client Name')"
-                            v-model="params.clientName"
-                            lazy-rules
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-mb-sm">
-                    <QItemSection v-if="!workers">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="workers">
-                        <VnSelectFilter
-                            :label="t('Salesperson')"
-                            v-model="params.salesPersonFk"
-                            @update:model-value="searchFn()"
-                            :options="workers"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                            use-input
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                            :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">
-                        <VnSelectFilter
-                            :label="t('Attender')"
-                            v-model="params.attenderFk"
-                            @update:model-value="searchFn()"
-                            :options="workers"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                            use-input
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                            :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">
-                        <VnSelectFilter
-                            :label="t('Responsible')"
-                            v-model="params.claimResponsibleFk"
-                            @update:model-value="searchFn()"
-                            :options="workers"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                            use-input
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                            :input-debounce="0"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-mb-sm">
-                    <QItemSection v-if="!states">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="states">
-                        <VnSelectFilter
-                            :label="t('State')"
-                            v-model="params.claimStateFk"
-                            @update:model-value="searchFn()"
-                            :options="states"
-                            option-value="id"
-                            option-label="description"
-                            emit-value
-                            map-options
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QSeparator />
-                <QExpansionItem :label="t('More options')" expand-separator>
-                    <!-- <QItem>
+            <QItem class="q-my-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('Customer ID')"
+                        v-model="params.clientFk"
+                        lazy-rules
+                        is-outlined
+                    >
+                        <template #prepend>
+                            <QIcon name="badge" size="xs"></QIcon> </template
+                    ></VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('Client Name')"
+                        v-model="params.clientName"
+                        lazy-rules
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!workers">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="workers">
+                    <VnSelectFilter
+                        :label="t('Salesperson')"
+                        v-model="params.salesPersonFk"
+                        @update:model-value="searchFn()"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                        :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">
+                    <VnSelectFilter
+                        :label="t('Attender')"
+                        v-model="params.attenderFk"
+                        @update:model-value="searchFn()"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                        :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">
+                    <VnSelectFilter
+                        :label="t('Responsible')"
+                        v-model="params.claimResponsibleFk"
+                        @update:model-value="searchFn()"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!states">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="states">
+                    <VnSelectFilter
+                        :label="t('State')"
+                        v-model="params.claimStateFk"
+                        @update:model-value="searchFn()"
+                        :options="states"
+                        option-value="id"
+                        option-label="description"
+                        emit-value
+                        map-options
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QSeparator />
+            <QExpansionItem :label="t('More options')" expand-separator>
+                <!-- <QItem>
                         <QItemSection>
                             <qSelect
                                 :label="t('Item')"
@@ -168,30 +167,20 @@ const states = ref();
                             />
                         </QItemSection>
                     </QItem> -->
-                    <QItem>
-                        <QItemSection>
-                            <VnInputDate
-                                v-model="params.created"
-                                :label="t('Created')"
-                                is-outlined
-                            />
-                        </QItemSection>
-                    </QItem>
-                </QExpansionItem>
-            </QList>
+                <QItem>
+                    <QItemSection>
+                        <VnInputDate
+                            v-model="params.created"
+                            :label="t('Created')"
+                            is-outlined
+                        />
+                    </QItemSection>
+                </QItem>
+            </QExpansionItem>
         </template>
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-</style>
-
 <i18n>
 en:
     params:
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index 36a9add89..593b45509 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -37,153 +37,134 @@ const zones = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense class="list">
-                <QItem class="q-my-sm">
+            <QItem class="q-my-sm">
+                <QItemSection>
+                    <VnInput :label="t('FI')" v-model="params.fi" is-outlined>
+                        <template #prepend>
+                            <QIcon name="badge" size="xs" />
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInput :label="t('Name')" v-model="params.name" is-outlined />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('Social Name')"
+                        v-model="params.socialName"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!workers">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="workers">
+                    <VnSelectFilter
+                        :label="t('Salesperson')"
+                        v-model="params.salesPersonFk"
+                        @update:model-value="searchFn()"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!provinces">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="provinces">
+                    <VnSelectFilter
+                        :label="t('Province')"
+                        v-model="params.provinceFk"
+                        @update:model-value="searchFn()"
+                        :options="provinces"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-md">
+                <QItemSection>
+                    <VnInput :label="t('City')" v-model="params.city" is-outlined />
+                </QItemSection>
+            </QItem>
+            <QSeparator />
+            <QExpansionItem :label="t('More options')" expand-separator>
+                <QItem>
                     <QItemSection>
-                        <VnInput :label="t('FI')" v-model="params.fi" is-outlined>
+                        <VnInput :label="t('Phone')" v-model="params.phone" is-outlined>
                             <template #prepend>
-                                <QIcon name="badge" size="xs" />
+                                <QIcon name="phone" size="xs" />
                             </template>
                         </VnInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
-                        <VnInput :label="t('Name')" v-model="params.name" is-outlined />
+                        <VnInput :label="t('Email')" v-model="params.email" is-outlined>
+                            <template #prepend>
+                                <QIcon name="email" size="sm" />
+                            </template>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
+                    <QItemSection v-if="!zones">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="zones">
+                        <VnSelectFilter
+                            :label="t('Zone')"
+                            v-model="params.zoneFk"
+                            @update:model-value="searchFn()"
+                            :options="zones"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
                     <QItemSection>
                         <VnInput
-                            :label="t('Social Name')"
-                            v-model="params.socialName"
+                            :label="t('Postcode')"
+                            v-model="params.postcode"
                             is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
-                    <QItemSection v-if="!workers">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="workers">
-                        <VnSelectFilter
-                            :label="t('Salesperson')"
-                            v-model="params.salesPersonFk"
-                            @update:model-value="searchFn()"
-                            :options="workers"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                            use-input
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                            :input-debounce="0"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-mb-sm">
-                    <QItemSection v-if="!provinces">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="provinces">
-                        <VnSelectFilter
-                            :label="t('Province')"
-                            v-model="params.provinceFk"
-                            @update:model-value="searchFn()"
-                            :options="provinces"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                            :input-debounce="0"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-mb-md">
-                    <QItemSection>
-                        <VnInput :label="t('City')" v-model="params.city" is-outlined />
-                    </QItemSection>
-                </QItem>
-                <QSeparator />
-                <QExpansionItem :label="t('More options')" expand-separator>
-                    <QItem>
-                        <QItemSection>
-                            <VnInput
-                                :label="t('Phone')"
-                                v-model="params.phone"
-                                is-outlined
-                            >
-                                <template #prepend>
-                                    <QIcon name="phone" size="xs" />
-                                </template>
-                            </VnInput>
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection>
-                            <VnInput
-                                :label="t('Email')"
-                                v-model="params.email"
-                                is-outlined
-                            >
-                                <template #prepend>
-                                    <QIcon name="email" size="sm" />
-                                </template>
-                            </VnInput>
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection v-if="!zones">
-                            <QSkeleton type="QInput" class="full-width" />
-                        </QItemSection>
-                        <QItemSection v-if="zones">
-                            <VnSelectFilter
-                                :label="t('Zone')"
-                                v-model="params.zoneFk"
-                                @update:model-value="searchFn()"
-                                :options="zones"
-                                option-value="id"
-                                option-label="name"
-                                emit-value
-                                map-options
-                                hide-selected
-                                dense
-                                outlined
-                                rounded
-                            />
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection>
-                            <VnInput
-                                :label="t('Postcode')"
-                                v-model="params.postcode"
-                                is-outlined
-                            />
-                        </QItemSection>
-                    </QItem>
-                </QExpansionItem>
-            </QList>
+            </QExpansionItem>
         </template>
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-</style>
-
 <i18n>
 en:
     params:
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue b/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
index 43ceb1bac..f26af5975 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
@@ -46,163 +46,148 @@ const authors = ref();
         </template>
 
         <template #body="{ params }">
-            <QList dense class="list">
-                <QItem class="q-mb-sm q-mt-sm">
-                    <QItemSection v-if="clients">
-                        <VnSelectFilter
-                            :input-debounce="0"
-                            :label="t('Client')"
-                            :options="clients"
-                            dense
-                            emit-value
-                            hide-selected
-                            map-options
-                            option-label="name"
-                            option-value="clientTypeFk"
-                            outlined
-                            rounded
-                            use-input
-                            v-model="params.clientFk"
-                        />
-                    </QItemSection>
-                    <QItemSection v-else>
-                        <QSkeleton class="full-width" type="QInput" />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm q-mt-sm">
+                <QItemSection v-if="clients">
+                    <VnSelectFilter
+                        :input-debounce="0"
+                        :label="t('Client')"
+                        :options="clients"
+                        dense
+                        emit-value
+                        hide-selected
+                        map-options
+                        option-label="name"
+                        option-value="clientTypeFk"
+                        outlined
+                        rounded
+                        use-input
+                        v-model="params.clientFk"
+                    />
+                </QItemSection>
+                <QItemSection v-else>
+                    <QSkeleton class="full-width" type="QInput" />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection v-if="salespersons">
-                        <VnSelectFilter
-                            :input-debounce="0"
-                            :label="t('Salesperson')"
-                            :options="salespersons"
-                            dense
-                            emit-value
-                            hide-selected
-                            map-options
-                            option-label="name"
-                            option-value="id"
-                            outlined
-                            rounded
-                            use-input
-                            v-model="params.salesPersonFk"
-                        />
-                    </QItemSection>
-                    <QItemSection v-else>
-                        <QSkeleton class="full-width" type="QInput" />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="salespersons">
+                    <VnSelectFilter
+                        :input-debounce="0"
+                        :label="t('Salesperson')"
+                        :options="salespersons"
+                        dense
+                        emit-value
+                        hide-selected
+                        map-options
+                        option-label="name"
+                        option-value="id"
+                        outlined
+                        rounded
+                        use-input
+                        v-model="params.salesPersonFk"
+                    />
+                </QItemSection>
+                <QItemSection v-else>
+                    <QSkeleton class="full-width" type="QInput" />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection v-if="countries">
-                        <VnSelectFilter
-                            :input-debounce="0"
-                            :label="t('Country')"
-                            :options="countries"
-                            dense
-                            emit-value
-                            hide-selected
-                            map-options
-                            option-label="country"
-                            option-value="id"
-                            outlined
-                            rounded
-                            use-input
-                            v-model="params.countryFk"
-                        />
-                    </QItemSection>
-                    <QItemSection v-else>
-                        <QSkeleton class="full-width" type="QInput" />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="countries">
+                    <VnSelectFilter
+                        :input-debounce="0"
+                        :label="t('Country')"
+                        :options="countries"
+                        dense
+                        emit-value
+                        hide-selected
+                        map-options
+                        option-label="country"
+                        option-value="id"
+                        outlined
+                        rounded
+                        use-input
+                        v-model="params.countryFk"
+                    />
+                </QItemSection>
+                <QItemSection v-else>
+                    <QSkeleton class="full-width" type="QInput" />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('P. Method')"
-                            is-outlined
-                            v-model="params.paymentMethod"
-                        />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('P. Method')"
+                        is-outlined
+                        v-model="params.paymentMethod"
+                    />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('Balance D.')"
-                            is-outlined
-                            v-model="params.balance"
-                        />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('Balance D.')"
+                        is-outlined
+                        v-model="params.balance"
+                    />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection v-if="authors">
-                        <VnSelectFilter
-                            :input-debounce="0"
-                            :label="t('Author')"
-                            :options="authors"
-                            dense
-                            emit-value
-                            hide-selected
-                            map-options
-                            option-label="name"
-                            option-value="id"
-                            outlined
-                            rounded
-                            use-input
-                            v-model="params.workerFk"
-                        />
-                    </QItemSection>
-                    <QItemSection v-else>
-                        <QSkeleton class="full-width" type="QInput" />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="authors">
+                    <VnSelectFilter
+                        :input-debounce="0"
+                        :label="t('Author')"
+                        :options="authors"
+                        dense
+                        emit-value
+                        hide-selected
+                        map-options
+                        option-label="name"
+                        option-value="id"
+                        outlined
+                        rounded
+                        use-input
+                        v-model="params.workerFk"
+                    />
+                </QItemSection>
+                <QItemSection v-else>
+                    <QSkeleton class="full-width" type="QInput" />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('L. O. Date')"
-                            is-outlined
-                            v-model="params.date"
-                        />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInput :label="t('L. O. Date')" is-outlined v-model="params.date" />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('Credit I.')"
-                            is-outlined
-                            v-model="params.credit"
-                        />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('Credit I.')"
+                        is-outlined
+                        v-model="params.credit"
+                    />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection>
-                        <VnInputDate
-                            :label="t('From')"
-                            is-outlined
-                            v-model="params.defaulterSinced"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QSeparator />
-            </QList>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInputDate
+                        :label="t('From')"
+                        is-outlined
+                        v-model="params.defaulterSinced"
+                    />
+                </QItemSection>
+            </QItem>
+            <QSeparator />
         </template>
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-</style>
-
 <i18n>
 en:
     params:
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue b/src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue
index 46b4e1e7b..df898e7c1 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue
@@ -145,27 +145,26 @@ const shouldRenderColumn = (colName) => {
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense class="list q-gutter-y-sm q-mt-sm">
-                <QItem v-if="shouldRenderColumn('id')">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('customer.extendedList.tableVisibleColumns.id')"
-                            v-model="params.id"
-                            is-outlined
-                            clearable
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('name')">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('customer.extendedList.tableVisibleColumns.name')"
-                            v-model="params.name"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <!-- <QItem class="q-mb-sm">
+            <QItem v-if="shouldRenderColumn('id')">
+                <QItemSection>
+                    <VnInput
+                        :label="t('customer.extendedList.tableVisibleColumns.id')"
+                        v-model="params.id"
+                        is-outlined
+                        clearable
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('name')">
+                <QItemSection>
+                    <VnInput
+                        :label="t('customer.extendedList.tableVisibleColumns.name')"
+                        v-model="params.name"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <!-- <QItem class="q-mb-sm">
                     <QItemSection v-if="!clients">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -188,429 +187,384 @@ const shouldRenderColumn = (colName) => {
                         />
                     </QItemSection>
                 </QItem> -->
-                <QItem v-if="shouldRenderColumn('fi')">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('customer.extendedList.tableVisibleColumns.fi')"
-                            v-model="params.fi"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('salesPersonFk')">
-                    <QItemSection v-if="!workers">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="workers">
-                        <VnSelectFilter
-                            :label="
-                                t(
-                                    'customer.extendedList.tableVisibleColumns.salesPersonFk'
-                                )
-                            "
-                            v-model="params.salesPersonFk"
-                            @update:model-value="searchFn()"
-                            :options="workers"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                            use-input
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                            :input-debounce="0"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('credit')">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('customer.extendedList.tableVisibleColumns.credit')"
-                            v-model="params.credit"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('creditInsurance')">
-                    <QItemSection>
-                        <VnInput
-                            :label="
-                                t(
-                                    'customer.extendedList.tableVisibleColumns.creditInsurance'
-                                )
-                            "
-                            v-model="params.creditInsurance"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('phone')">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('customer.extendedList.tableVisibleColumns.phone')"
-                            v-model="params.phone"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('mobile')">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('customer.extendedList.tableVisibleColumns.mobile')"
-                            v-model="params.mobile"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('street')">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('customer.extendedList.tableVisibleColumns.street')"
-                            v-model="params.street"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('countryFk')">
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="
-                                t('customer.extendedList.tableVisibleColumns.countryFk')
-                            "
-                            v-model="params.countryFk"
-                            @update:model-value="searchFn()"
-                            :options="countriesOptions"
-                            option-value="id"
-                            option-label="country"
-                            map-options
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('provinceFk')">
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="
-                                t('customer.extendedList.tableVisibleColumns.provinceFk')
-                            "
-                            v-model="params.provinceFk"
-                            @update:model-value="searchFn()"
-                            :options="provincesOptions"
-                            option-value="id"
-                            option-label="name"
-                            map-options
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('city')">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('customer.extendedList.tableVisibleColumns.city')"
-                            v-model="params.city"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('postcode')">
-                    <QItemSection>
-                        <VnInput
-                            :label="
-                                t('customer.extendedList.tableVisibleColumns.postcode')
-                            "
-                            v-model="params.postcode"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('email')">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('customer.extendedList.tableVisibleColumns.email')"
-                            v-model="params.email"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
+            <QItem v-if="shouldRenderColumn('fi')">
+                <QItemSection>
+                    <VnInput
+                        :label="t('customer.extendedList.tableVisibleColumns.fi')"
+                        v-model="params.fi"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('salesPersonFk')">
+                <QItemSection v-if="!workers">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="workers">
+                    <VnSelectFilter
+                        :label="
+                            t('customer.extendedList.tableVisibleColumns.salesPersonFk')
+                        "
+                        v-model="params.salesPersonFk"
+                        @update:model-value="searchFn()"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('credit')">
+                <QItemSection>
+                    <VnInput
+                        :label="t('customer.extendedList.tableVisibleColumns.credit')"
+                        v-model="params.credit"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('creditInsurance')">
+                <QItemSection>
+                    <VnInput
+                        :label="
+                            t('customer.extendedList.tableVisibleColumns.creditInsurance')
+                        "
+                        v-model="params.creditInsurance"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('phone')">
+                <QItemSection>
+                    <VnInput
+                        :label="t('customer.extendedList.tableVisibleColumns.phone')"
+                        v-model="params.phone"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('mobile')">
+                <QItemSection>
+                    <VnInput
+                        :label="t('customer.extendedList.tableVisibleColumns.mobile')"
+                        v-model="params.mobile"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('street')">
+                <QItemSection>
+                    <VnInput
+                        :label="t('customer.extendedList.tableVisibleColumns.street')"
+                        v-model="params.street"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('countryFk')">
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('customer.extendedList.tableVisibleColumns.countryFk')"
+                        v-model="params.countryFk"
+                        @update:model-value="searchFn()"
+                        :options="countriesOptions"
+                        option-value="id"
+                        option-label="country"
+                        map-options
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('provinceFk')">
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('customer.extendedList.tableVisibleColumns.provinceFk')"
+                        v-model="params.provinceFk"
+                        @update:model-value="searchFn()"
+                        :options="provincesOptions"
+                        option-value="id"
+                        option-label="name"
+                        map-options
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('city')">
+                <QItemSection>
+                    <VnInput
+                        :label="t('customer.extendedList.tableVisibleColumns.city')"
+                        v-model="params.city"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('postcode')">
+                <QItemSection>
+                    <VnInput
+                        :label="t('customer.extendedList.tableVisibleColumns.postcode')"
+                        v-model="params.postcode"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('email')">
+                <QItemSection>
+                    <VnInput
+                        :label="t('customer.extendedList.tableVisibleColumns.email')"
+                        v-model="params.email"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
 
-                <QItem v-if="shouldRenderColumn('created')">
-                    <QItemSection>
-                        <VnInputDate
-                            v-model="params.created"
-                            :label="
-                                t('customer.extendedList.tableVisibleColumns.created')
-                            "
-                            @update:model-value="searchFn()"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('businessTypeFk')">
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="
-                                t(
-                                    'customer.extendedList.tableVisibleColumns.businessTypeFk'
-                                )
-                            "
-                            v-model="params.businessTypeFk"
-                            :options="businessTypesOptions"
-                            @update:model-value="searchFn()"
-                            option-value="code"
-                            option-label="description"
-                            map-options
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('payMethodFk')">
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="
-                                t('customer.extendedList.tableVisibleColumns.payMethodFk')
-                            "
-                            v-model="params.payMethodFk"
-                            :options="paymethodsOptions"
-                            @update:model-value="searchFn()"
-                            option-value="id"
-                            option-label="name"
-                            map-options
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('sageTaxTypeFk')">
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="
-                                t(
-                                    'customer.extendedList.tableVisibleColumns.sageTaxTypeFk'
-                                )
-                            "
-                            v-model="params.sageTaxTypeFk"
-                            @update:model-value="searchFn()"
-                            :options="sageTaxTypesOptions"
-                            option-value="id"
-                            option-label="vat"
-                            map-options
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('sageTransactionTypeFk')">
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="
-                                t(
-                                    'customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'
-                                )
-                            "
-                            v-model="params.sageTransactionTypeFk"
-                            @update:model-value="searchFn()"
-                            :options="sageTransactionTypesOptions"
-                            option-value="id"
-                            option-label="transaction"
-                            map-options
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem
-                    v-if="shouldRenderColumn('isActive') || shouldRenderColumn('isVies')"
-                >
-                    <QItemSection v-if="shouldRenderColumn('isActive')">
-                        <QCheckbox
-                            v-model="params.isActive"
-                            @update:model-value="searchFn()"
-                            :label="
-                                t('customer.extendedList.tableVisibleColumns.isActive')
-                            "
-                            toggle-indeterminate
-                            :false-value="undefined"
-                        />
-                    </QItemSection>
-                    <QItemSection v-if="shouldRenderColumn('isVies')">
-                        <QCheckbox
-                            v-model="params.isVies"
-                            @update:model-value="searchFn()"
-                            :label="t('customer.extendedList.tableVisibleColumns.isVies')"
-                            toggle-indeterminate
-                            :false-value="undefined"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem
-                    v-if="
-                        shouldRenderColumn('isEqualizated') ||
-                        shouldRenderColumn('isTaxDataChecked')
-                    "
-                >
-                    <QItemSection v-if="shouldRenderColumn('isTaxDataChecked')">
-                        <QCheckbox
-                            v-model="params.isTaxDataChecked"
-                            @update:model-value="searchFn()"
-                            :label="
-                                t(
-                                    'customer.extendedList.tableVisibleColumns.isTaxDataChecked'
-                                )
-                            "
-                            toggle-indeterminate
-                            :false-value="undefined"
-                        />
-                    </QItemSection>
-                    <QItemSection v-if="shouldRenderColumn('isEqualizated')">
-                        <QCheckbox
-                            v-model="params.isEqualizated"
-                            @update:model-value="searchFn()"
-                            :label="
-                                t(
-                                    'customer.extendedList.tableVisibleColumns.isEqualizated'
-                                )
-                            "
-                            toggle-indeterminate
-                            :false-value="undefined"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem
-                    v-if="
-                        shouldRenderColumn('hasToInvoice') ||
-                        shouldRenderColumn('isFreezed')
-                    "
-                >
-                    <QItemSection v-if="shouldRenderColumn('isFreezed')">
-                        <QCheckbox
-                            v-model="params.isFreezed"
-                            @update:model-value="searchFn()"
-                            :label="
-                                t('customer.extendedList.tableVisibleColumns.isFreezed')
-                            "
-                            toggle-indeterminate
-                            :false-value="undefined"
-                        />
-                    </QItemSection>
-                    <QItemSection v-if="shouldRenderColumn('hasToInvoice')">
-                        <QCheckbox
-                            v-model="params.hasToInvoice"
-                            @update:model-value="searchFn()"
-                            :label="
-                                t(
-                                    'customer.extendedList.tableVisibleColumns.hasToInvoice'
-                                )
-                            "
-                            toggle-indeterminate
-                            :false-value="undefined"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem
-                    v-if="
-                        shouldRenderColumn('isToBeMailed') ||
-                        shouldRenderColumn('hasToInvoiceByAddress')
-                    "
-                >
-                    <QItemSection v-if="shouldRenderColumn('hasToInvoiceByAddress')">
-                        <QCheckbox
-                            v-model="params.hasToInvoiceByAddress"
-                            @update:model-value="searchFn()"
-                            :label="
-                                t(
-                                    'customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'
-                                )
-                            "
-                            toggle-indeterminate
-                            :false-value="undefined"
-                        />
-                    </QItemSection>
-                    <QItemSection v-if="shouldRenderColumn('isToBeMailed')">
-                        <QCheckbox
-                            v-model="params.isToBeMailed"
-                            @update:model-value="searchFn()"
-                            :label="
-                                t(
-                                    'customer.extendedList.tableVisibleColumns.isToBeMailed'
-                                )
-                            "
-                            toggle-indeterminate
-                            :false-value="undefined"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem
-                    v-if="
-                        shouldRenderColumn('hasLcr') || shouldRenderColumn('hasCoreVnl')
-                    "
-                >
-                    <QItemSection v-if="shouldRenderColumn('hasLcr')">
-                        <QCheckbox
-                            v-model="params.hasLcr"
-                            @update:model-value="searchFn()"
-                            :label="t('customer.extendedList.tableVisibleColumns.hasLcr')"
-                            toggle-indeterminate
-                            :false-value="undefined"
-                        />
-                    </QItemSection>
-                    <QItemSection v-if="shouldRenderColumn('hasCoreVnl')">
-                        <QCheckbox
-                            v-model="params.hasCoreVnl"
-                            @update:model-value="searchFn()"
-                            :label="
-                                t('customer.extendedList.tableVisibleColumns.hasCoreVnl')
-                            "
-                            toggle-indeterminate
-                            :false-value="undefined"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('hasSepaVnl')">
-                    <QItemSection>
-                        <QCheckbox
-                            v-model="params.hasSepaVnl"
-                            @update:model-value="searchFn()"
-                            :label="
-                                t('customer.extendedList.tableVisibleColumns.hasSepaVnl')
-                            "
-                            toggle-indeterminate
-                            :false-value="undefined"
-                        />
-                    </QItemSection>
-                </QItem>
+            <QItem v-if="shouldRenderColumn('created')">
+                <QItemSection>
+                    <VnInputDate
+                        v-model="params.created"
+                        :label="t('customer.extendedList.tableVisibleColumns.created')"
+                        @update:model-value="searchFn()"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('businessTypeFk')">
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="
+                            t('customer.extendedList.tableVisibleColumns.businessTypeFk')
+                        "
+                        v-model="params.businessTypeFk"
+                        :options="businessTypesOptions"
+                        @update:model-value="searchFn()"
+                        option-value="code"
+                        option-label="description"
+                        map-options
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('payMethodFk')">
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="
+                            t('customer.extendedList.tableVisibleColumns.payMethodFk')
+                        "
+                        v-model="params.payMethodFk"
+                        :options="paymethodsOptions"
+                        @update:model-value="searchFn()"
+                        option-value="id"
+                        option-label="name"
+                        map-options
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('sageTaxTypeFk')">
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="
+                            t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk')
+                        "
+                        v-model="params.sageTaxTypeFk"
+                        @update:model-value="searchFn()"
+                        :options="sageTaxTypesOptions"
+                        option-value="id"
+                        option-label="vat"
+                        map-options
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('sageTransactionTypeFk')">
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="
+                            t(
+                                'customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'
+                            )
+                        "
+                        v-model="params.sageTransactionTypeFk"
+                        @update:model-value="searchFn()"
+                        :options="sageTransactionTypesOptions"
+                        option-value="id"
+                        option-label="transaction"
+                        map-options
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('isActive') || shouldRenderColumn('isVies')">
+                <QItemSection v-if="shouldRenderColumn('isActive')">
+                    <QCheckbox
+                        v-model="params.isActive"
+                        @update:model-value="searchFn()"
+                        :label="t('customer.extendedList.tableVisibleColumns.isActive')"
+                        toggle-indeterminate
+                        :false-value="undefined"
+                    />
+                </QItemSection>
+                <QItemSection v-if="shouldRenderColumn('isVies')">
+                    <QCheckbox
+                        v-model="params.isVies"
+                        @update:model-value="searchFn()"
+                        :label="t('customer.extendedList.tableVisibleColumns.isVies')"
+                        toggle-indeterminate
+                        :false-value="undefined"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem
+                v-if="
+                    shouldRenderColumn('isEqualizated') ||
+                    shouldRenderColumn('isTaxDataChecked')
+                "
+            >
+                <QItemSection v-if="shouldRenderColumn('isTaxDataChecked')">
+                    <QCheckbox
+                        v-model="params.isTaxDataChecked"
+                        @update:model-value="searchFn()"
+                        :label="
+                            t(
+                                'customer.extendedList.tableVisibleColumns.isTaxDataChecked'
+                            )
+                        "
+                        toggle-indeterminate
+                        :false-value="undefined"
+                    />
+                </QItemSection>
+                <QItemSection v-if="shouldRenderColumn('isEqualizated')">
+                    <QCheckbox
+                        v-model="params.isEqualizated"
+                        @update:model-value="searchFn()"
+                        :label="
+                            t('customer.extendedList.tableVisibleColumns.isEqualizated')
+                        "
+                        toggle-indeterminate
+                        :false-value="undefined"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem
+                v-if="
+                    shouldRenderColumn('hasToInvoice') || shouldRenderColumn('isFreezed')
+                "
+            >
+                <QItemSection v-if="shouldRenderColumn('isFreezed')">
+                    <QCheckbox
+                        v-model="params.isFreezed"
+                        @update:model-value="searchFn()"
+                        :label="t('customer.extendedList.tableVisibleColumns.isFreezed')"
+                        toggle-indeterminate
+                        :false-value="undefined"
+                    />
+                </QItemSection>
+                <QItemSection v-if="shouldRenderColumn('hasToInvoice')">
+                    <QCheckbox
+                        v-model="params.hasToInvoice"
+                        @update:model-value="searchFn()"
+                        :label="
+                            t('customer.extendedList.tableVisibleColumns.hasToInvoice')
+                        "
+                        toggle-indeterminate
+                        :false-value="undefined"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem
+                v-if="
+                    shouldRenderColumn('isToBeMailed') ||
+                    shouldRenderColumn('hasToInvoiceByAddress')
+                "
+            >
+                <QItemSection v-if="shouldRenderColumn('hasToInvoiceByAddress')">
+                    <QCheckbox
+                        v-model="params.hasToInvoiceByAddress"
+                        @update:model-value="searchFn()"
+                        :label="
+                            t(
+                                'customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'
+                            )
+                        "
+                        toggle-indeterminate
+                        :false-value="undefined"
+                    />
+                </QItemSection>
+                <QItemSection v-if="shouldRenderColumn('isToBeMailed')">
+                    <QCheckbox
+                        v-model="params.isToBeMailed"
+                        @update:model-value="searchFn()"
+                        :label="
+                            t('customer.extendedList.tableVisibleColumns.isToBeMailed')
+                        "
+                        toggle-indeterminate
+                        :false-value="undefined"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem
+                v-if="shouldRenderColumn('hasLcr') || shouldRenderColumn('hasCoreVnl')"
+            >
+                <QItemSection v-if="shouldRenderColumn('hasLcr')">
+                    <QCheckbox
+                        v-model="params.hasLcr"
+                        @update:model-value="searchFn()"
+                        :label="t('customer.extendedList.tableVisibleColumns.hasLcr')"
+                        toggle-indeterminate
+                        :false-value="undefined"
+                    />
+                </QItemSection>
+                <QItemSection v-if="shouldRenderColumn('hasCoreVnl')">
+                    <QCheckbox
+                        v-model="params.hasCoreVnl"
+                        @update:model-value="searchFn()"
+                        :label="t('customer.extendedList.tableVisibleColumns.hasCoreVnl')"
+                        toggle-indeterminate
+                        :false-value="undefined"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('hasSepaVnl')">
+                <QItemSection>
+                    <QCheckbox
+                        v-model="params.hasSepaVnl"
+                        @update:model-value="searchFn()"
+                        :label="t('customer.extendedList.tableVisibleColumns.hasSepaVnl')"
+                        toggle-indeterminate
+                        :false-value="undefined"
+                    />
+                </QItemSection>
+            </QItem>
 
-                <QSeparator />
-            </QList>
+            <QSeparator />
         </template>
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-</style>
-
 <i18n>
 es:
     Social name: Razón social
diff --git a/src/pages/Customer/Notifications/CustomerNotificationsFilter.vue b/src/pages/Customer/Notifications/CustomerNotificationsFilter.vue
index 650158278..957abb7a3 100644
--- a/src/pages/Customer/Notifications/CustomerNotificationsFilter.vue
+++ b/src/pages/Customer/Notifications/CustomerNotificationsFilter.vue
@@ -36,91 +36,80 @@ const clients = ref();
         </template>
 
         <template #body="{ params, searchFn }">
-            <QList dense class="list">
-                <QItem class="q-mb-sm q-mt-sm">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('Identifier')"
-                            is-outlined
-                            v-model="params.identifier"
-                        />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm q-mt-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('Identifier')"
+                        is-outlined
+                        v-model="params.identifier"
+                    />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection v-if="!clients">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="clients">
-                        <VnSelectFilter
-                            :input-debounce="0"
-                            :label="t('Social name')"
-                            :options="clients"
-                            @update:model-value="searchFn()"
-                            dense
-                            emit-value
-                            hide-selected
-                            map-options
-                            option-label="socialName"
-                            option-value="socialName"
-                            outlined
-                            rounded
-                            use-input
-                            v-model="params.socialName"
-                        />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!clients">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="clients">
+                    <VnSelectFilter
+                        :input-debounce="0"
+                        :label="t('Social name')"
+                        :options="clients"
+                        @update:model-value="searchFn()"
+                        dense
+                        emit-value
+                        hide-selected
+                        map-options
+                        option-label="socialName"
+                        option-value="socialName"
+                        outlined
+                        rounded
+                        use-input
+                        v-model="params.socialName"
+                    />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection v-if="!cities">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="cities">
-                        <VnSelectFilter
-                            :input-debounce="0"
-                            :label="t('City')"
-                            :options="cities"
-                            @update:model-value="searchFn()"
-                            dense
-                            emit-value
-                            hide-selected
-                            map-options
-                            option-label="name"
-                            option-value="name"
-                            outlined
-                            rounded
-                            use-input
-                            v-model="params.city"
-                        />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!cities">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="cities">
+                    <VnSelectFilter
+                        :input-debounce="0"
+                        :label="t('City')"
+                        :options="cities"
+                        @update:model-value="searchFn()"
+                        dense
+                        emit-value
+                        hide-selected
+                        map-options
+                        option-label="name"
+                        option-value="name"
+                        outlined
+                        rounded
+                        use-input
+                        v-model="params.city"
+                    />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection>
-                        <VnInput :label="t('Phone')" is-outlined v-model="params.phone" />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInput :label="t('Phone')" is-outlined v-model="params.phone" />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection>
-                        <VnInput :label="t('Email')" is-outlined v-model="params.email" />
-                    </QItemSection>
-                </QItem>
-                <QSeparator />
-            </QList>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInput :label="t('Email')" is-outlined v-model="params.email" />
+                </QItemSection>
+            </QItem>
+            <QSeparator />
         </template>
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-</style>
-
 <i18n>
 en:
     params:
diff --git a/src/pages/Customer/Payments/CustomerPaymentsFilter.vue b/src/pages/Customer/Payments/CustomerPaymentsFilter.vue
index a19b35a20..74ea2c203 100644
--- a/src/pages/Customer/Payments/CustomerPaymentsFilter.vue
+++ b/src/pages/Customer/Payments/CustomerPaymentsFilter.vue
@@ -27,71 +27,60 @@ function isValidNumber(value) {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense class="q-gutter-y-sm q-mt-sm">
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('Order ID')"
-                            v-model="params.orderFk"
-                            is-outlined
-                        >
-                            <template #prepend>
-                                <QIcon name="vn:basket" size="xs" />
-                            </template>
-                        </VnInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('Customer ID')"
-                            v-model="params.clientFk"
-                            is-outlined
-                        >
-                            <template #prepend>
-                                <QIcon name="vn:client" size="xs" />
-                            </template>
-                        </VnInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('Amount')"
-                            v-model="params.amount"
-                            is-outlined
-                            @update:model-value="
-                                (value) => {
-                                    if (value.includes(','))
-                                        params.amount = params.amount.replace(',', '.');
-                                }
-                            "
-                            :rules="[
-                                (val) =>
-                                    isValidNumber(val) || !val || 'Please type a number',
-                            ]"
-                            lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="euro" size="sm" />
-                            </template>
-                        </VnInput>
-                    </QItemSection>
-                </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput :label="t('Order ID')" v-model="params.orderFk" is-outlined>
+                        <template #prepend>
+                            <QIcon name="vn:basket" size="xs" />
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('Customer ID')"
+                        v-model="params.clientFk"
+                        is-outlined
+                    >
+                        <template #prepend>
+                            <QIcon name="vn:client" size="xs" />
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('Amount')"
+                        v-model="params.amount"
+                        is-outlined
+                        @update:model-value="
+                            (value) => {
+                                if (value.includes(','))
+                                    params.amount = params.amount.replace(',', '.');
+                            }
+                        "
+                        :rules="[
+                            (val) => isValidNumber(val) || !val || 'Please type a number',
+                        ]"
+                        lazy-rules
+                    >
+                        <template #prepend>
+                            <QIcon name="euro" size="sm" />
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
 
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            v-model="params.from"
-                            :label="t('From')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                    <QItemSection>
-                        <VnInputDate v-model="params.to" :label="t('To')" is-outlined />
-                    </QItemSection>
-                </QItem>
-            </QList>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate v-model="params.from" :label="t('From')" is-outlined />
+                </QItemSection>
+                <QItemSection>
+                    <VnInputDate v-model="params.to" :label="t('To')" is-outlined />
+                </QItemSection>
+            </QItem>
         </template>
     </VnFilterPanel>
 </template>
diff --git a/src/pages/Entry/EntryFilter.vue b/src/pages/Entry/EntryFilter.vue
index 7eeffcee7..4b326c572 100644
--- a/src/pages/Entry/EntryFilter.vue
+++ b/src/pages/Entry/EntryFilter.vue
@@ -54,151 +54,149 @@ const suppliersOptions = ref([]);
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense class="list q-gutter-y-sm q-mt-sm">
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.search"
-                            :label="t('params.search')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.reference"
-                            :label="t('params.reference')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.invoiceNumber"
-                            :label="t('params.invoiceNumber')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.travelFk"
-                            :label="t('params.travelFk')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="t('params.companyFk')"
-                            v-model="params.companyFk"
-                            :options="companiesOptions"
-                            option-value="id"
-                            option-label="code"
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="t('params.currencyFk')"
-                            v-model="params.currencyFk"
-                            :options="currenciesOptions"
-                            option-value="id"
-                            option-label="name"
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="t('params.supplierFk')"
-                            v-model="params.supplierFk"
-                            :options="suppliersOptions"
-                            option-value="id"
-                            option-label="name"
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>{{
-                                            scope.opt?.name + ': ' + scope.opt?.nickname
-                                        }}</QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectFilter>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            :label="t('params.created')"
-                            is-outlined
-                            v-model="params.created"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            :label="t('params.from')"
-                            is-outlined
-                            v-model="params.from"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            :label="t('params.to')"
-                            is-outlined
-                            v-model="params.to"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <QCheckbox
-                            :label="t('params.isBooked')"
-                            v-model="params.isBooked"
-                            toggle-indeterminate
-                        />
-                    </QItemSection>
-                    <QItemSection>
-                        <QCheckbox
-                            :label="t('params.isConfirmed')"
-                            v-model="params.isConfirmed"
-                            toggle-indeterminate
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <QCheckbox
-                            :label="t('params.isOrdered')"
-                            v-model="params.isOrdered"
-                            toggle-indeterminate
-                        />
-                    </QItemSection>
-                </QItem>
-            </QList>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.search"
+                        :label="t('params.search')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.reference"
+                        :label="t('params.reference')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.invoiceNumber"
+                        :label="t('params.invoiceNumber')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.travelFk"
+                        :label="t('params.travelFk')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.companyFk')"
+                        v-model="params.companyFk"
+                        :options="companiesOptions"
+                        option-value="id"
+                        option-label="code"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.currencyFk')"
+                        v-model="params.currencyFk"
+                        :options="currenciesOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.supplierFk')"
+                        v-model="params.supplierFk"
+                        :options="suppliersOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{
+                                        scope.opt?.name + ': ' + scope.opt?.nickname
+                                    }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate
+                        :label="t('params.created')"
+                        is-outlined
+                        v-model="params.created"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate
+                        :label="t('params.from')"
+                        is-outlined
+                        v-model="params.from"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate
+                        :label="t('params.to')"
+                        is-outlined
+                        v-model="params.to"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('params.isBooked')"
+                        v-model="params.isBooked"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('params.isConfirmed')"
+                        v-model="params.isConfirmed"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('params.isOrdered')"
+                        v-model="params.isOrdered"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+            </QItem>
         </template>
     </VnFilterPanel>
 </template>
diff --git a/src/pages/InvoiceIn/InvoiceInFilter.vue b/src/pages/InvoiceIn/InvoiceInFilter.vue
index f8198d237..dec798906 100644
--- a/src/pages/InvoiceIn/InvoiceInFilter.vue
+++ b/src/pages/InvoiceIn/InvoiceInFilter.vue
@@ -36,55 +36,121 @@ const suppliersRef = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense class="list q-gutter-y-sm q-mt-sm">
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('Id or Supplier')"
+                        v-model="params.search"
+                        is-outlined
+                    >
+                        <template #prepend>
+                            <QIcon name="badge" size="sm"></QIcon>
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('params.supplierRef')"
+                        v-model="params.supplierRef"
+                        is-outlined
+                        lazy-rules
+                    >
+                        <template #prepend>
+                            <QIcon name="vn:client" size="sm"></QIcon>
+                        </template>
+                    </VnInput>
+                </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()"
+                        dense
+                        outlined
+                        rounded
+                    >
+                    </VnSelectFilter>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('params.fi')"
+                        v-model="params.fi"
+                        is-outlined
+                        lazy-rules
+                    >
+                        <template #prepend>
+                            <QIcon name="badge" size="sm"></QIcon>
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('params.serialNumber')"
+                        v-model="params.serialNumber"
+                        is-outlined
+                        lazy-rules
+                    >
+                        <template #prepend>
+                            <QIcon name="badge" size="sm"></QIcon>
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('params.serial')"
+                        v-model="params.serial"
+                        is-outlined
+                        lazy-rules
+                    >
+                        <template #prepend>
+                            <QIcon name="badge" size="sm"></QIcon>
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('Amount')"
+                        v-model="params.amount"
+                        is-outlined
+                        lazy-rules
+                    >
+                        <template #prepend>
+                            <QIcon name="euro" size="sm"></QIcon>
+                        </template>
+                    </VnInput>
+                </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>
                         <VnInput
-                            :label="t('Id or Supplier')"
-                            v-model="params.search"
-                            is-outlined
-                        >
-                            <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </VnInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('params.supplierRef')"
-                            v-model="params.supplierRef"
-                            is-outlined
-                            lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="vn:client" size="sm"></QIcon>
-                            </template>
-                        </VnInput>
-                    </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()"
-                            dense
-                            outlined
-                            rounded
-                        >
-                        </VnSelectFilter>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('params.fi')"
-                            v-model="params.fi"
+                            :label="t('params.awb')"
+                            v-model="params.awbCode"
                             is-outlined
                             lazy-rules
                         >
@@ -97,126 +163,45 @@ const suppliersRef = ref();
                 <QItem>
                     <QItemSection>
                         <VnInput
-                            :label="t('params.serialNumber')"
-                            v-model="params.serialNumber"
+                            :label="t('params.account')"
+                            v-model="params.account"
                             is-outlined
                             lazy-rules
                         >
                             <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
+                                <QIcon name="person" size="sm" />
                             </template>
                         </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <VnInput
-                            :label="t('params.serial')"
-                            v-model="params.serial"
+                        <VnInputDate
+                            :label="t('From')"
+                            v-model="params.from"
                             is-outlined
-                            lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </VnInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('Amount')"
-                            v-model="params.amount"
-                            is-outlined
-                            lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="euro" size="sm"></QIcon>
-                            </template>
-                        </VnInput>
-                    </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>
-                            <VnInput
-                                :label="t('params.awb')"
-                                v-model="params.awbCode"
-                                is-outlined
-                                lazy-rules
-                            >
-                                <template #prepend>
-                                    <QIcon name="badge" size="sm"></QIcon>
-                                </template>
-                            </VnInput>
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection>
-                            <VnInput
-                                :label="t('params.account')"
-                                v-model="params.account"
-                                is-outlined
-                                lazy-rules
-                            >
-                                <template #prepend>
-                                    <QIcon name="person" size="sm" />
-                                </template>
-                            </VnInput>
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection>
-                            <VnInputDate
-                                :label="t('From')"
-                                v-model="params.from"
-                                is-outlined
-                            />
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection>
-                            <VnInputDate
-                                :label="t('To')"
-                                v-model="params.to"
-                                is-outlined
-                            />
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection>
-                            <VnInputDate
-                                :label="t('Issued')"
-                                v-model="params.issued"
-                                is-outlined
-                            />
-                        </QItemSection>
-                    </QItem>
-                </QExpansionItem>
-            </QList>
+                <QItem>
+                    <QItemSection>
+                        <VnInputDate :label="t('To')" v-model="params.to" is-outlined />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInputDate
+                            :label="t('Issued')"
+                            v-model="params.issued"
+                            is-outlined
+                        />
+                    </QItemSection>
+                </QItem>
+            </QExpansionItem>
         </template>
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-</style>
-
 <i18n>
 en:
     params:
diff --git a/src/pages/InvoiceOut/InvoiceOutFilter.vue b/src/pages/InvoiceOut/InvoiceOutFilter.vue
index 124ea00d1..f8a430b51 100644
--- a/src/pages/InvoiceOut/InvoiceOutFilter.vue
+++ b/src/pages/InvoiceOut/InvoiceOutFilter.vue
@@ -41,95 +41,89 @@ function setWorkers(data) {
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense class="q-gutter-y-sm q-mt-sm">
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('Customer ID')"
+                        v-model="params.clientFk"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput v-model="params.fi" :label="t('FI')" is-outlined />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput :label="t('Amount')" v-model="params.amount" is-outlined />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QInput
+                        :label="t('Min')"
+                        dense
+                        lazy-rules
+                        outlined
+                        rounded
+                        type="number"
+                        v-model.number="params.min"
+                    />
+                </QItemSection>
+                <QItemSection>
+                    <QInput
+                        :label="t('Max')"
+                        dense
+                        lazy-rules
+                        outlined
+                        rounded
+                        type="number"
+                        v-model.number="params.max"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('Has PDF')"
+                        @update:model-value="searchFn()"
+                        toggle-indeterminate
+                        v-model="params.hasPdf"
+                    />
+                </QItemSection>
+            </QItem>
+            <QSeparator />
+            <QExpansionItem :label="t('More options')" expand-separator>
                 <QItem>
                     <QItemSection>
-                        <VnInput
-                            :label="t('Customer ID')"
-                            v-model="params.clientFk"
+                        <VnInputDate
+                            v-model="params.issued"
+                            :label="t('Issued')"
                             is-outlined
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <VnInput v-model="params.fi" :label="t('FI')" is-outlined />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('Amount')"
-                            v-model="params.amount"
+                        <VnInputDate
+                            v-model="params.created"
+                            :label="t('Created')"
                             is-outlined
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
-                            :label="t('Min')"
-                            dense
-                            lazy-rules
-                            outlined
-                            rounded
-                            type="number"
-                            v-model.number="params.min"
-                        />
-                    </QItemSection>
-                    <QItemSection>
-                        <QInput
-                            :label="t('Max')"
-                            dense
-                            lazy-rules
-                            outlined
-                            rounded
-                            type="number"
-                            v-model.number="params.max"
+                        <VnInputDate
+                            v-model="params.dued"
+                            :label="t('Dued')"
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
-                    <QItemSection>
-                        <QCheckbox
-                            :label="t('Has PDF')"
-                            @update:model-value="searchFn()"
-                            toggle-indeterminate
-                            v-model="params.hasPdf"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QSeparator />
-                <QExpansionItem :label="t('More options')" expand-separator>
-                    <QItem>
-                        <QItemSection>
-                            <VnInputDate
-                                v-model="params.issued"
-                                :label="t('Issued')"
-                                is-outlined
-                            />
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection>
-                            <VnInputDate
-                                v-model="params.created"
-                                :label="t('Created')"
-                                is-outlined
-                            />
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection>
-                            <VnInputDate
-                                v-model="params.dued"
-                                :label="t('Dued')"
-                                is-outlined
-                            />
-                        </QItemSection>
-                    </QItem>
-                </QExpansionItem>
-            </QList>
+            </QExpansionItem>
         </template>
     </VnFilterPanel>
 </template>
diff --git a/src/pages/InvoiceOut/InvoiceOutNegativeBasesFilter.vue b/src/pages/InvoiceOut/InvoiceOutNegativeBasesFilter.vue
index 028246aeb..3adfa1d13 100644
--- a/src/pages/InvoiceOut/InvoiceOutNegativeBasesFilter.vue
+++ b/src/pages/InvoiceOut/InvoiceOutNegativeBasesFilter.vue
@@ -27,87 +27,83 @@ const props = defineProps({
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense class="q-gutter-y-sm q-mt-sm">
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            v-model="params.from"
-                            :label="t('invoiceOut.negativeBases.from')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            v-model="params.to"
-                            :label="t('invoiceOut.negativeBases.to')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.company"
-                            :label="t('invoiceOut.negativeBases.company')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.country"
-                            :label="t('invoiceOut.negativeBases.country')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate
+                        v-model="params.from"
+                        :label="t('invoiceOut.negativeBases.from')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate
+                        v-model="params.to"
+                        :label="t('invoiceOut.negativeBases.to')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.company"
+                        :label="t('invoiceOut.negativeBases.company')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.country"
+                        :label="t('invoiceOut.negativeBases.country')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
 
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.clientId"
-                            :label="t('invoiceOut.negativeBases.clientId')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.clientSocialName"
-                            :label="t('invoiceOut.negativeBases.client')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.amount"
-                            :label="t('invoiceOut.negativeBases.amount')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.comercialName"
-                            :label="t('invoiceOut.negativeBases.comercial')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-            </QList>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.clientId"
+                        :label="t('invoiceOut.negativeBases.clientId')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.clientSocialName"
+                        :label="t('invoiceOut.negativeBases.client')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.amount"
+                        :label="t('invoiceOut.negativeBases.amount')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.comercialName"
+                        :label="t('invoiceOut.negativeBases.comercial')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
         </template>
     </VnFilterPanel>
 </template>
 
-<style scoped></style>
-
 <i18n>
 en:
     params:
diff --git a/src/pages/Order/Card/OrderCatalogFilter.vue b/src/pages/Order/Card/OrderCatalogFilter.vue
index c325a9b05..760c48726 100644
--- a/src/pages/Order/Card/OrderCatalogFilter.vue
+++ b/src/pages/Order/Card/OrderCatalogFilter.vue
@@ -219,183 +219,181 @@ const getCategoryClass = (category, params) => {
             </template>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense style="max-width: 256px">
-                <QItem class="category-filter q-mt-md">
-                    <div
-                        v-for="category in categoryList"
-                        :key="category.name"
-                        :class="['category', getCategoryClass(category, params)]"
-                    >
-                        <QIcon
-                            :name="category.icon"
-                            class="category-icon"
-                            @click="selectCategory(params, category, searchFn)"
-                        >
-                            <QTooltip>
-                                {{ t(category.name) }}
-                            </QTooltip>
-                        </QIcon>
-                    </div>
-                </QItem>
-                <QItem class="q-my-md">
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="t('params.type')"
-                            v-model="params.typeFk"
-                            :options="typeList"
-                            option-value="id"
-                            option-label="name"
-                            dense
-                            outlined
-                            rounded
-                            emit-value
-                            use-input
-                            :disable="!selectedCategoryFk"
-                            @update:model-value="
-                                (value) => {
-                                    selectedTypeFk = value;
-                                    searchFn();
-                                }
-                            "
-                        >
-                            <template #option="{ itemProps, opt }">
-                                <QItem v-bind="itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>{{ opt.name }}</QItemLabel>
-                                        <QItemLabel caption>
-                                            {{ opt.categoryName }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectFilter>
-                    </QItemSection>
-                </QItem>
-                <QSeparator />
-                <QItem class="q-my-md">
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="t('params.order')"
-                            v-model="selectedOrder"
-                            :options="orderList || []"
-                            option-value="way"
-                            option-label="name"
-                            dense
-                            outlined
-                            rounded
-                            :emit-value="false"
-                            use-input
-                            :is-clearable="false"
-                            @update:model-value="
-                                (value) => onOrderChange(value, params, searchFn)
-                            "
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-mb-md">
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="t('params.order')"
-                            v-model="selectedOrderField"
-                            :options="OrderFields || []"
-                            option-value="field"
-                            option-label="name"
-                            dense
-                            outlined
-                            rounded
-                            :emit-value="false"
-                            use-input
-                            :is-clearable="false"
-                            @update:model-value="
-                                (value) => onOrderFieldChange(value, params, searchFn)
-                            "
-                        />
-                    </QItemSection>
-                </QItem>
-                <QSeparator />
-                <QItem class="q-mt-md">
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="t('params.tag')"
-                            v-model="selectedTag"
-                            :options="props.tags || []"
-                            option-value="id"
-                            option-label="name"
-                            dense
-                            outlined
-                            rounded
-                            :emit-value="false"
-                            use-input
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem
-                    v-for="(value, index) in tagValues"
-                    :key="value"
-                    class="q-mt-md filter-value"
+            <QItem class="category-filter q-mt-md">
+                <div
+                    v-for="category in categoryList"
+                    :key="category.name"
+                    :class="['category', getCategoryClass(category, params)]"
                 >
-                    <VnInput
-                        v-if="selectedTag?.isFree"
-                        v-model="value.value"
-                        :label="t('params.value')"
-                        is-outlined
-                        class="filter-input"
-                    />
+                    <QIcon
+                        :name="category.icon"
+                        class="category-icon"
+                        @click="selectCategory(params, category, searchFn)"
+                    >
+                        <QTooltip>
+                            {{ t(category.name) }}
+                        </QTooltip>
+                    </QIcon>
+                </div>
+            </QItem>
+            <QItem class="q-my-md">
+                <QItemSection>
                     <VnSelectFilter
-                        v-else
-                        :label="t('params.value')"
-                        v-model="value.value"
-                        :options="tagOptions || []"
-                        option-value="value"
-                        option-label="value"
+                        :label="t('params.type')"
+                        v-model="params.typeFk"
+                        :options="typeList"
+                        option-value="id"
+                        option-label="name"
                         dense
                         outlined
                         rounded
                         emit-value
                         use-input
-                        :disable="!selectedTag"
-                        class="filter-input"
+                        :disable="!selectedCategoryFk"
+                        @update:model-value="
+                            (value) => {
+                                selectedTypeFk = value;
+                                searchFn();
+                            }
+                        "
+                    >
+                        <template #option="{ itemProps, opt }">
+                            <QItem v-bind="itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ opt.name }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        {{ opt.categoryName }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </QItemSection>
+            </QItem>
+            <QSeparator />
+            <QItem class="q-my-md">
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.order')"
+                        v-model="selectedOrder"
+                        :options="orderList || []"
+                        option-value="way"
+                        option-label="name"
+                        dense
+                        outlined
+                        rounded
+                        :emit-value="false"
+                        use-input
+                        :is-clearable="false"
+                        @update:model-value="
+                            (value) => onOrderChange(value, params, searchFn)
+                        "
                     />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-md">
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.order')"
+                        v-model="selectedOrderField"
+                        :options="OrderFields || []"
+                        option-value="field"
+                        option-label="name"
+                        dense
+                        outlined
+                        rounded
+                        :emit-value="false"
+                        use-input
+                        :is-clearable="false"
+                        @update:model-value="
+                            (value) => onOrderFieldChange(value, params, searchFn)
+                        "
+                    />
+                </QItemSection>
+            </QItem>
+            <QSeparator />
+            <QItem class="q-mt-md">
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.tag')"
+                        v-model="selectedTag"
+                        :options="props.tags || []"
+                        option-value="id"
+                        option-label="name"
+                        dense
+                        outlined
+                        rounded
+                        :emit-value="false"
+                        use-input
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem
+                v-for="(value, index) in tagValues"
+                :key="value"
+                class="q-mt-md filter-value"
+            >
+                <VnInput
+                    v-if="selectedTag?.isFree"
+                    v-model="value.value"
+                    :label="t('params.value')"
+                    is-outlined
+                    class="filter-input"
+                />
+                <VnSelectFilter
+                    v-else
+                    :label="t('params.value')"
+                    v-model="value.value"
+                    :options="tagOptions || []"
+                    option-value="value"
+                    option-label="value"
+                    dense
+                    outlined
+                    rounded
+                    emit-value
+                    use-input
+                    :disable="!selectedTag"
+                    class="filter-input"
+                />
 
-                    <FetchData
-                        v-if="selectedTag && !selectedTag.isFree"
-                        :url="`Tags/${selectedTag?.id}/filterValue`"
-                        limit="30"
-                        auto-load
-                        @on-fetch="(data) => (tagOptions = data)"
-                    />
+                <FetchData
+                    v-if="selectedTag && !selectedTag.isFree"
+                    :url="`Tags/${selectedTag?.id}/filterValue`"
+                    limit="30"
+                    auto-load
+                    @on-fetch="(data) => (tagOptions = data)"
+                />
 
-                    <QIcon
-                        name="delete"
-                        class="filter-icon"
-                        @click="(tagValues || []).splice(index, 1)"
+                <QIcon
+                    name="delete"
+                    class="filter-icon"
+                    @click="(tagValues || []).splice(index, 1)"
+                />
+            </QItem>
+            <QItem class="q-mt-lg">
+                <QIcon
+                    name="add_circle"
+                    class="filter-icon"
+                    @click="tagValues.push({})"
+                />
+            </QItem>
+            <QItem>
+                <QItemSection class="q-py-sm">
+                    <QBtn
+                        :label="t('Search')"
+                        class="full-width"
+                        color="primary"
+                        dense
+                        icon="search"
+                        rounded
+                        type="button"
+                        unelevated
+                        :disable="isButtonDisabled"
+                        @click.stop="applyTagFilter(params, searchFn)"
                     />
-                </QItem>
-                <QItem class="q-mt-lg">
-                    <QIcon
-                        name="add_circle"
-                        class="filter-icon"
-                        @click="tagValues.push({})"
-                    />
-                </QItem>
-                <QItem>
-                    <QItemSection class="q-py-sm">
-                        <QBtn
-                            :label="t('Search')"
-                            class="full-width"
-                            color="primary"
-                            dense
-                            icon="search"
-                            rounded
-                            type="button"
-                            unelevated
-                            :disable="isButtonDisabled"
-                            @click.stop="applyTagFilter(params, searchFn)"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QSeparator />
-            </QList>
+                </QItemSection>
+            </QItem>
+            <QSeparator />
         </template>
     </VnFilterPanel>
 </template>
diff --git a/src/pages/Order/Card/OrderFilter.vue b/src/pages/Order/Card/OrderFilter.vue
index b49f0b115..62bfe0e02 100644
--- a/src/pages/Order/Card/OrderFilter.vue
+++ b/src/pages/Order/Card/OrderFilter.vue
@@ -59,162 +59,152 @@ const sourceList = ref(null);
             </div>
         </template>
         <template #body="{ params }">
-            <QList id="orderFilter" dense>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            is-outlined
-                            :label="t('customerId')"
-                            v-model="params.clientFk"
-                            lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </VnInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection v-if="agencyList">
-                        <VnSelectFilter
-                            :label="t('agency')"
-                            v-model="params.agencyModeFk"
-                            :options="agencyList"
-                            option-value="id"
-                            option-label="name"
-                            dense
-                            outlined
-                            rounded
-                            emit-value
-                            map-options
-                            use-input
-                            :input-debounce="0"
-                        />
-                    </QItemSection>
-                    <QItemSection v-else>
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection v-if="salesPersonList">
-                        <VnSelectFilter
-                            :label="t('salesPerson')"
-                            v-model="params.workerFk"
-                            :options="salesPersonList"
-                            option-value="id"
-                            option-label="name"
-                            dense
-                            outlined
-                            rounded
-                            emit-value
-                            map-options
-                            use-input
-                            :input-debounce="0"
-                        >
-                            <template #option="{ itemProps, opt }">
-                                <QItem v-bind="itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>{{ opt.name }}</QItemLabel>
-                                        <QItemLabel caption>
-                                            {{ opt.nickname }},{{ opt.code }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectFilter>
-                    </QItemSection>
-                    <QItemSection v-else>
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            v-model="params.from"
-                            :label="t('fromLanded')"
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            v-model="params.to"
-                            :label="t('toLanded')"
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('orderId')"
-                            v-model="params.orderFk"
-                            lazy-rules
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection v-if="sourceList">
-                        <VnSelectFilter
-                            :label="t('application')"
-                            v-model="params.sourceApp"
-                            :options="sourceList"
-                            option-label="value"
-                            emit-value
-                            map-options
-                            use-input
-                            dense
-                            outlined
-                            rounded
-                            :input-debounce="0"
-                        />
-                    </QItemSection>
-                    <QItemSection v-else>
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <QCheckbox
-                            v-model="params.myTeam"
-                            :label="t('myTeam')"
-                            toggle-indeterminate
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <QCheckbox
-                            v-model="params.isConfirmed"
-                            :label="t('isConfirmed')"
-                            toggle-indeterminate
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <QCheckbox v-model="params.showEmpty" :label="t('showEmpty')" />
-                    </QItemSection>
-                </QItem>
-            </QList>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        is-outlined
+                        :label="t('customerId')"
+                        v-model="params.clientFk"
+                        lazy-rules
+                    >
+                        <template #prepend>
+                            <QIcon name="badge" size="sm"></QIcon>
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection v-if="agencyList">
+                    <VnSelectFilter
+                        :label="t('agency')"
+                        v-model="params.agencyModeFk"
+                        :options="agencyList"
+                        option-value="id"
+                        option-label="name"
+                        dense
+                        outlined
+                        rounded
+                        emit-value
+                        map-options
+                        use-input
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+                <QItemSection v-else>
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection v-if="salesPersonList">
+                    <VnSelectFilter
+                        :label="t('salesPerson')"
+                        v-model="params.workerFk"
+                        :options="salesPersonList"
+                        option-value="id"
+                        option-label="name"
+                        dense
+                        outlined
+                        rounded
+                        emit-value
+                        map-options
+                        use-input
+                        :input-debounce="0"
+                    >
+                        <template #option="{ itemProps, opt }">
+                            <QItem v-bind="itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ opt.name }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        {{ opt.nickname }},{{ opt.code }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </QItemSection>
+                <QItemSection v-else>
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate
+                        v-model="params.from"
+                        :label="t('fromLanded')"
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate
+                        v-model="params.to"
+                        :label="t('toLanded')"
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('orderId')"
+                        v-model="params.orderFk"
+                        lazy-rules
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection v-if="sourceList">
+                    <VnSelectFilter
+                        :label="t('application')"
+                        v-model="params.sourceApp"
+                        :options="sourceList"
+                        option-label="value"
+                        emit-value
+                        map-options
+                        use-input
+                        dense
+                        outlined
+                        rounded
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+                <QItemSection v-else>
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        v-model="params.myTeam"
+                        :label="t('myTeam')"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        v-model="params.isConfirmed"
+                        :label="t('isConfirmed')"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox v-model="params.showEmpty" :label="t('showEmpty')" />
+                </QItemSection>
+            </QItem>
         </template>
     </VnFilterPanel>
 </template>
 
-<style lang="scss">
-#orderFilter {
-    .q-item {
-        padding-top: 8px;
-    }
-}
-</style>
-
 <i18n>
 en:
     params:
diff --git a/src/pages/Route/Card/RouteFilter.vue b/src/pages/Route/Card/RouteFilter.vue
index 45580d913..4be1981ab 100644
--- a/src/pages/Route/Card/RouteFilter.vue
+++ b/src/pages/Route/Card/RouteFilter.vue
@@ -61,144 +61,142 @@ const warehouseList = ref([]);
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense>
-                <QItem class="q-my-sm">
-                    <QItemSection v-if="workerList">
-                        <VnSelectFilter
-                            :label="t('Worker')"
-                            v-model="params.workerFk"
-                            :options="workerList"
-                            option-value="id"
-                            option-label="nickname"
-                            dense
-                            outlined
-                            rounded
-                            emit-value
-                            map-options
-                            use-input
-                            :input-debounce="0"
-                        >
-                            <template #option="{ itemProps, opt }">
-                                <QItem v-bind="itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>{{ opt.name }}</QItemLabel>
-                                        <QItemLabel caption>
-                                            {{ opt.nickname }},{{ opt.code }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectFilter>
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-my-sm">
-                    <QItemSection v-if="agencyList">
-                        <VnSelectFilter
-                            :label="t('Agency')"
-                            v-model="params.agencyModeFk"
-                            :options="agencyList"
-                            option-value="id"
-                            option-label="name"
-                            dense
-                            outlined
-                            rounded
-                            emit-value
-                            map-options
-                            use-input
-                            :input-debounce="0"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-my-sm">
-                    <QItemSection>
-                        <VnInputDate
-                            v-model="params.from"
-                            :label="t('From')"
-                            is-outlined
-                            :disable="Boolean(params.scopeDays)"
-                            @update:model-value="params.scopeDays = null"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-my-sm">
-                    <QItemSection>
-                        <VnInputDate
-                            v-model="params.to"
-                            :label="t('To')"
-                            is-outlined
-                            :disable="Boolean(params.scopeDays)"
-                            @update:model-value="params.scopeDays = null"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-my-sm">
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.scopeDays"
-                            type="number"
-                            :label="t('Days Onward')"
-                            is-outlined
-                            clearable
-                            :disable="Boolean(params.from || params.to)"
-                            @update:model-value="
-                                params.to = null;
-                                params.from = null;
-                            "
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-my-sm">
-                    <QItemSection v-if="vehicleList">
-                        <VnSelectFilter
-                            :label="t('Vehicle')"
-                            v-model="params.vehicleFk"
-                            :options="vehicleList"
-                            option-value="id"
-                            option-label="numberPlate"
-                            dense
-                            outlined
-                            rounded
-                            emit-value
-                            map-options
-                            use-input
-                            :input-debounce="0"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-my-sm">
-                    <QItemSection>
-                        <VnInput v-model="params.m3" label="m³" is-outlined clearable />
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-my-sm">
-                    <QItemSection v-if="vehicleList">
-                        <VnSelectFilter
-                            :label="t('Warehouse')"
-                            v-model="params.warehouseFk"
-                            :options="warehouseList"
-                            option-value="id"
-                            option-label="name"
-                            dense
-                            outlined
-                            rounded
-                            emit-value
-                            map-options
-                            use-input
-                            :input-debounce="0"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-my-sm">
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.description"
-                            :label="t('Description')"
-                            is-outlined
-                            clearable
-                        />
-                    </QItemSection>
-                </QItem>
-            </QList>
+            <QItem class="q-my-sm">
+                <QItemSection v-if="workerList">
+                    <VnSelectFilter
+                        :label="t('Worker')"
+                        v-model="params.workerFk"
+                        :options="workerList"
+                        option-value="id"
+                        option-label="nickname"
+                        dense
+                        outlined
+                        rounded
+                        emit-value
+                        map-options
+                        use-input
+                        :input-debounce="0"
+                    >
+                        <template #option="{ itemProps, opt }">
+                            <QItem v-bind="itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ opt.name }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        {{ opt.nickname }},{{ opt.code }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </QItemSection>
+            </QItem>
+            <QItem class="q-my-sm">
+                <QItemSection v-if="agencyList">
+                    <VnSelectFilter
+                        :label="t('Agency')"
+                        v-model="params.agencyModeFk"
+                        :options="agencyList"
+                        option-value="id"
+                        option-label="name"
+                        dense
+                        outlined
+                        rounded
+                        emit-value
+                        map-options
+                        use-input
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-my-sm">
+                <QItemSection>
+                    <VnInputDate
+                        v-model="params.from"
+                        :label="t('From')"
+                        is-outlined
+                        :disable="Boolean(params.scopeDays)"
+                        @update:model-value="params.scopeDays = null"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-my-sm">
+                <QItemSection>
+                    <VnInputDate
+                        v-model="params.to"
+                        :label="t('To')"
+                        is-outlined
+                        :disable="Boolean(params.scopeDays)"
+                        @update:model-value="params.scopeDays = null"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-my-sm">
+                <QItemSection>
+                    <VnInput
+                        v-model="params.scopeDays"
+                        type="number"
+                        :label="t('Days Onward')"
+                        is-outlined
+                        clearable
+                        :disable="Boolean(params.from || params.to)"
+                        @update:model-value="
+                            params.to = null;
+                            params.from = null;
+                        "
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-my-sm">
+                <QItemSection v-if="vehicleList">
+                    <VnSelectFilter
+                        :label="t('Vehicle')"
+                        v-model="params.vehicleFk"
+                        :options="vehicleList"
+                        option-value="id"
+                        option-label="numberPlate"
+                        dense
+                        outlined
+                        rounded
+                        emit-value
+                        map-options
+                        use-input
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-my-sm">
+                <QItemSection>
+                    <VnInput v-model="params.m3" label="m³" is-outlined clearable />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-my-sm">
+                <QItemSection v-if="vehicleList">
+                    <VnSelectFilter
+                        :label="t('Warehouse')"
+                        v-model="params.warehouseFk"
+                        :options="warehouseList"
+                        option-value="id"
+                        option-label="name"
+                        dense
+                        outlined
+                        rounded
+                        emit-value
+                        map-options
+                        use-input
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-my-sm">
+                <QItemSection>
+                    <VnInput
+                        v-model="params.description"
+                        :label="t('Description')"
+                        is-outlined
+                        clearable
+                    />
+                </QItemSection>
+            </QItem>
         </template>
     </VnFilterPanel>
 </template>
diff --git a/src/pages/Route/Cmr/CmrFilter.vue b/src/pages/Route/Cmr/CmrFilter.vue
index a5bf5513b..553f19431 100644
--- a/src/pages/Route/Cmr/CmrFilter.vue
+++ b/src/pages/Route/Cmr/CmrFilter.vue
@@ -28,103 +28,101 @@ const countries = ref();
             </div>
         </template>
         <template #body="{ params }">
-            <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>
-                            </template>
-                        </VnInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <QCheckbox
-                            :label="t('route.cmr.list.hasCmrDms')"
-                            v-model="params.hasCmrDms"
-                            lazy-rules
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('route.cmr.list.ticketFk')"
-                            v-model="params.ticketFk"
-                            is-outlined
-                        >
-                            <template #prepend>
-                                <QIcon name="vn:ticket" size="sm"></QIcon>
-                            </template>
-                        </VnInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('route.cmr.list.routeFk')"
-                            v-model="params.routeFk"
-                            is-outlined
-                        >
-                            <template #prepend>
-                                <QIcon name="vn:delivery" size="sm"></QIcon>
-                            </template>
-                        </VnInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('route.cmr.list.clientFk')"
-                            v-model="params.clientFk"
-                            is-outlined
-                        >
-                            <template #prepend>
-                                <QIcon name="vn:client" size="sm"></QIcon>
-                            </template>
-                        </VnInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection v-if="!countries">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="countries" class="q-mb-sm">
-                        <QSelect
-                            :label="t('route.cmr.list.country')"
-                            v-model="params.country"
-                            :options="countries"
-                            option-value="country"
-                            option-label="country"
-                            transition-show="jump-down"
-                            transition-hide="jump-up"
-                            emit-value
-                            map-options
-                            dense
-                            outlined
-                            rounded
-                        >
-                            <template #prepend>
-                                <QIcon name="flag" size="sm"></QIcon>
-                            </template>
-                        </QSelect>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            v-model="params.shipped"
-                            :label="t('route.cmr.list.shipped')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-            </QList>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('route.cmr.list.cmrFk')"
+                        v-model="params.cmrFk"
+                        is-outlined
+                    >
+                        <template #prepend>
+                            <QIcon name="article" size="sm"></QIcon>
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('route.cmr.list.hasCmrDms')"
+                        v-model="params.hasCmrDms"
+                        lazy-rules
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('route.cmr.list.ticketFk')"
+                        v-model="params.ticketFk"
+                        is-outlined
+                    >
+                        <template #prepend>
+                            <QIcon name="vn:ticket" size="sm"></QIcon>
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('route.cmr.list.routeFk')"
+                        v-model="params.routeFk"
+                        is-outlined
+                    >
+                        <template #prepend>
+                            <QIcon name="vn:delivery" size="sm"></QIcon>
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('route.cmr.list.clientFk')"
+                        v-model="params.clientFk"
+                        is-outlined
+                    >
+                        <template #prepend>
+                            <QIcon name="vn:client" size="sm"></QIcon>
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection v-if="!countries">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="countries" class="q-mb-sm">
+                    <QSelect
+                        :label="t('route.cmr.list.country')"
+                        v-model="params.country"
+                        :options="countries"
+                        option-value="country"
+                        option-label="country"
+                        transition-show="jump-down"
+                        transition-hide="jump-up"
+                        emit-value
+                        map-options
+                        dense
+                        outlined
+                        rounded
+                    >
+                        <template #prepend>
+                            <QIcon name="flag" size="sm"></QIcon>
+                        </template>
+                    </QSelect>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate
+                        v-model="params.shipped"
+                        :label="t('route.cmr.list.shipped')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
         </template>
     </VnFilterPanel>
 </template>
diff --git a/src/pages/Shelving/Card/ShelvingFilter.vue b/src/pages/Shelving/Card/ShelvingFilter.vue
index 423402f89..6767f6d97 100644
--- a/src/pages/Shelving/Card/ShelvingFilter.vue
+++ b/src/pages/Shelving/Card/ShelvingFilter.vue
@@ -41,7 +41,11 @@ function setParkings(data) {
         @on-fetch="setWorkers"
         auto-load
     />
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true" @search="emit('search')">
+    <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>
@@ -49,59 +53,57 @@ function setParkings(data) {
             </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>
+            <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>
         </template>
     </VnFilterPanel>
 </template>
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index b0b584257..7b74117bb 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -56,66 +56,138 @@ const warehouses = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense class="q-gutter-y-sm q-mt-sm">
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.clientFk"
+                        :label="t('Customer ID')"
+                        is-outlined
+                    />
+                </QItemSection>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.orderFk"
+                        :label="t('Order ID')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate v-model="params.from" :label="t('From')" is-outlined />
+                </QItemSection>
+                <QItemSection>
+                    <VnInputDate v-model="params.to" :label="t('To')" is-outlined />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection v-if="!workers">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="workers">
+                    <QSelect
+                        :label="t('Salesperson')"
+                        v-model="params.salesPersonFk"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        dense
+                        outlined
+                        rounded
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection v-if="!states">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="states">
+                    <QSelect
+                        :label="t('State')"
+                        v-model="params.stateFk"
+                        @update:model-value="searchFn()"
+                        :options="states"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.refFk"
+                        :label="t('Invoice Ref.')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        v-model="params.myTeam"
+                        @update:model-value="searchFn()"
+                        :label="t('My team')"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+                <QItemSection>
+                    <QCheckbox
+                        v-model="params.pending"
+                        @update:model-value="searchFn()"
+                        :label="t('Pending')"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        v-model="params.hasInvoice"
+                        @update:model-value="searchFn()"
+                        :label="t('Invoiced')"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+                <QItemSection>
+                    <QCheckbox
+                        v-model="params.hasRoute"
+                        @update:model-value="searchFn()"
+                        :label="t('Routed')"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        v-model="params.problems"
+                        @update:model-value="searchFn()"
+                        :label="t('With problems')"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+            </QItem>
+            <QSeparator />
+            <QExpansionItem :label="t('More options')" expand-separator>
                 <QItem>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.clientFk"
-                            :label="t('Customer ID')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.orderFk"
-                            :label="t('Order ID')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            v-model="params.from"
-                            :label="t('From')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                    <QItemSection>
-                        <VnInputDate v-model="params.to" :label="t('To')" is-outlined />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection v-if="!workers">
+                    <QItemSection v-if="!provinces">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
-                    <QItemSection v-if="workers">
+                    <QItemSection v-if="provinces">
                         <QSelect
-                            :label="t('Salesperson')"
-                            v-model="params.salesPersonFk"
-                            :options="workers"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                            use-input
-                            dense
-                            outlined
-                            rounded
-                            :input-debounce="0"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection v-if="!states">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="states">
-                        <QSelect
-                            :label="t('State')"
-                            v-model="params.stateFk"
+                            :label="t('Province')"
+                            v-model="params.provinceFk"
                             @update:model-value="searchFn()"
-                            :options="states"
+                            :options="provinces"
                             option-value="id"
                             option-label="name"
                             emit-value
@@ -127,124 +199,46 @@ const warehouses = ref();
                     </QItemSection>
                 </QItem>
                 <QItem>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.refFk"
-                            :label="t('Invoice Ref.')"
-                            is-outlined
+                    <QItemSection v-if="!agencies">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="agencies">
+                        <QSelect
+                            :label="t('Agency')"
+                            v-model="params.agencyModeFk"
+                            @update:model-value="searchFn()"
+                            :options="agencies"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            dense
+                            outlined
+                            rounded
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
-                    <QItemSection>
-                        <QCheckbox
-                            v-model="params.myTeam"
-                            @update:model-value="searchFn()"
-                            :label="t('My team')"
-                            toggle-indeterminate
-                        />
+                    <QItemSection v-if="!warehouses">
+                        <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
-                    <QItemSection>
-                        <QCheckbox
-                            v-model="params.pending"
+                    <QItemSection v-if="warehouses">
+                        <QSelect
+                            :label="t('Warehouse')"
+                            v-model="params.warehouseFk"
                             @update:model-value="searchFn()"
-                            :label="t('Pending')"
-                            toggle-indeterminate
+                            :options="warehouses"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            dense
+                            outlined
+                            rounded
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
-                    <QItemSection>
-                        <QCheckbox
-                            v-model="params.hasInvoice"
-                            @update:model-value="searchFn()"
-                            :label="t('Invoiced')"
-                            toggle-indeterminate
-                        />
-                    </QItemSection>
-                    <QItemSection>
-                        <QCheckbox
-                            v-model="params.hasRoute"
-                            @update:model-value="searchFn()"
-                            :label="t('Routed')"
-                            toggle-indeterminate
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <QCheckbox
-                            v-model="params.problems"
-                            @update:model-value="searchFn()"
-                            :label="t('With problems')"
-                            toggle-indeterminate
-                        />
-                    </QItemSection>
-                </QItem>
-                <QSeparator />
-                <QExpansionItem :label="t('More options')" expand-separator>
-                    <QItem>
-                        <QItemSection v-if="!provinces">
-                            <QSkeleton type="QInput" class="full-width" />
-                        </QItemSection>
-                        <QItemSection v-if="provinces">
-                            <QSelect
-                                :label="t('Province')"
-                                v-model="params.provinceFk"
-                                @update:model-value="searchFn()"
-                                :options="provinces"
-                                option-value="id"
-                                option-label="name"
-                                emit-value
-                                map-options
-                                dense
-                                outlined
-                                rounded
-                            />
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection v-if="!agencies">
-                            <QSkeleton type="QInput" class="full-width" />
-                        </QItemSection>
-                        <QItemSection v-if="agencies">
-                            <QSelect
-                                :label="t('Agency')"
-                                v-model="params.agencyModeFk"
-                                @update:model-value="searchFn()"
-                                :options="agencies"
-                                option-value="id"
-                                option-label="name"
-                                emit-value
-                                map-options
-                                dense
-                                outlined
-                                rounded
-                            />
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection v-if="!warehouses">
-                            <QSkeleton type="QInput" class="full-width" />
-                        </QItemSection>
-                        <QItemSection v-if="warehouses">
-                            <QSelect
-                                :label="t('Warehouse')"
-                                v-model="params.warehouseFk"
-                                @update:model-value="searchFn()"
-                                :options="warehouses"
-                                option-value="id"
-                                option-label="name"
-                                emit-value
-                                map-options
-                                dense
-                                outlined
-                                rounded
-                            />
-                        </QItemSection>
-                    </QItem>
-                </QExpansionItem>
-            </QList>
+            </QExpansionItem>
         </template>
     </VnFilterPanel>
 </template>
diff --git a/src/pages/Travel/ExtraCommunityFilter.vue b/src/pages/Travel/ExtraCommunityFilter.vue
index 260b0fb42..cac8e093d 100644
--- a/src/pages/Travel/ExtraCommunityFilter.vue
+++ b/src/pages/Travel/ExtraCommunityFilter.vue
@@ -66,158 +66,149 @@ const decrement = (paramsObj, key) => {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense class="list q-gutter-y-sm q-mt-sm">
-                <QItem>
-                    <QItemSection>
-                        <VnInput label="id" v-model="params.id" is-outlined />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('params.reference')"
-                            v-model="params.reference"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <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>
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="t('params.agencyModeFk')"
-                            v-model="params.agencyModeFk"
-                            :options="agenciesOptions"
-                            option-value="agencyFk"
-                            option-label="name"
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            v-model="params.shippedFrom"
-                            :label="t('params.shippedFrom')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            v-model="params.landedTo"
-                            :label="t('params.landedTo')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="t('params.warehouseOutFk')"
-                            v-model="params.warehouseOutFk"
-                            :options="warehousesOptions"
-                            option-value="id"
-                            option-label="name"
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="t('params.warehouseInFk')"
-                            v-model="params.warehouseInFk"
-                            :options="warehousesOptions"
-                            option-value="id"
-                            option-label="name"
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="t('supplier.pageTitles.supplier')"
-                            v-model="params.cargoSupplierFk"
-                            :options="suppliersOptions"
-                            option-value="id"
-                            option-label="name"
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="t('params.continent')"
-                            v-model="params.continent"
-                            :options="continentsOptions"
-                            option-value="code"
-                            option-label="name"
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-            </QList>
+            <QItem>
+                <QItemSection>
+                    <VnInput label="id" v-model="params.id" is-outlined />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('params.reference')"
+                        v-model="params.reference"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <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>
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.agencyModeFk')"
+                        v-model="params.agencyModeFk"
+                        :options="agenciesOptions"
+                        option-value="agencyFk"
+                        option-label="name"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate
+                        v-model="params.shippedFrom"
+                        :label="t('params.shippedFrom')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate
+                        v-model="params.landedTo"
+                        :label="t('params.landedTo')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.warehouseOutFk')"
+                        v-model="params.warehouseOutFk"
+                        :options="warehousesOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.warehouseInFk')"
+                        v-model="params.warehouseInFk"
+                        :options="warehousesOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('supplier.pageTitles.supplier')"
+                        v-model="params.cargoSupplierFk"
+                        :options="suppliersOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.continent')"
+                        v-model="params.continent"
+                        :options="continentsOptions"
+                        option-value="code"
+                        option-label="name"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
         </template>
     </VnFilterPanel>
 </template>
 
 <style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-
 .input-number >>> input[type='number'] {
     -moz-appearance: textfield;
 }
diff --git a/src/pages/Travel/TravelFilter.vue b/src/pages/Travel/TravelFilter.vue
index 52a755c34..62439a2e4 100644
--- a/src/pages/Travel/TravelFilter.vue
+++ b/src/pages/Travel/TravelFilter.vue
@@ -61,216 +61,207 @@ const decrement = (paramsObj, key) => {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense class="list q-gutter-y-sm q-mt-sm">
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.search"
-                            :label="t('params.search')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="t('params.agencyModeFk')"
-                            v-model="params.agencyModeFk"
-                            :options="agenciesOptions"
-                            option-value="agencyFk"
-                            option-label="name"
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="t('params.warehouseOutFk')"
-                            v-model="params.warehouseOutFk"
-                            :options="warehousesOptions"
-                            option-value="id"
-                            option-label="name"
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="t('params.warehouseInFk')"
-                            v-model="params.warehouseInFk"
-                            :options="warehousesOptions"
-                            option-value="id"
-                            option-label="name"
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <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>
-                    <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>
-                    <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>
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="t('params.continent')"
-                            v-model="params.continent"
-                            :options="continentsOptions"
-                            option-value="code"
-                            option-label="name"
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <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>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.search"
+                        :label="t('params.search')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.agencyModeFk')"
+                        v-model="params.agencyModeFk"
+                        :options="agenciesOptions"
+                        option-value="agencyFk"
+                        option-label="name"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.warehouseOutFk')"
+                        v-model="params.warehouseOutFk"
+                        :options="warehousesOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.warehouseInFk')"
+                        v-model="params.warehouseInFk"
+                        :options="warehousesOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <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>
+                <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>
+                <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>
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.continent')"
+                        v-model="params.continent"
+                        :options="continentsOptions"
+                        option-value="code"
+                        option-label="name"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <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>
         </template>
     </VnFilterPanel>
 </template>
 
 <style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-
 .input-number >>> input[type='number'] {
     -moz-appearance: textfield;
 }
diff --git a/src/pages/Worker/WorkerFilter.vue b/src/pages/Worker/WorkerFilter.vue
index 680a17937..0853791ef 100644
--- a/src/pages/Worker/WorkerFilter.vue
+++ b/src/pages/Worker/WorkerFilter.vue
@@ -27,74 +27,72 @@ const departments = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense class="q-gutter-y-sm q-mt-sm">
-                <QItem>
-                    <QItemSection>
-                        <VnInput :label="t('FI')" v-model="params.fi" is-outlined
-                            ><template #prepend>
-                                <QIcon name="badge" size="xs"></QIcon> </template
-                        ></VnInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('First Name')"
-                            v-model="params.firstName"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('Last Name')"
-                            v-model="params.lastName"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('User Name')"
-                            v-model="params.userName"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection v-if="!departments">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="departments">
-                        <QSelect
-                            :label="t('Department')"
-                            v-model="params.departmentFk"
-                            @update:model-value="searchFn()"
-                            :options="departments"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                            use-input
-                            dense
-                            outlined
-                            rounded
-                            :input-debounce="0"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('Extension')"
-                            v-model="params.extension"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-            </QList>
+            <QItem>
+                <QItemSection>
+                    <VnInput :label="t('FI')" v-model="params.fi" is-outlined
+                        ><template #prepend>
+                            <QIcon name="badge" size="xs"></QIcon> </template
+                    ></VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('First Name')"
+                        v-model="params.firstName"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('Last Name')"
+                        v-model="params.lastName"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('User Name')"
+                        v-model="params.userName"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection v-if="!departments">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="departments">
+                    <QSelect
+                        :label="t('Department')"
+                        v-model="params.departmentFk"
+                        @update:model-value="searchFn()"
+                        :options="departments"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        dense
+                        outlined
+                        rounded
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('Extension')"
+                        v-model="params.extension"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
         </template>
     </VnFilterPanel>
 </template>

From 4731bdbabded9dc1647f178a91b47f2303f11008 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 22 Jan 2024 12:25:59 -0300
Subject: [PATCH 66/86] Make card-list a global class

---
 src/css/app.scss                              |  5 +++++
 src/pages/Claim/ClaimList.vue                 |  9 +-------
 src/pages/Claim/ClaimRmaList.vue              |  3 +--
 src/pages/Customer/CustomerList.vue           |  9 +-------
 .../Customer/Payments/CustomerPayments.vue    | 21 +++++++------------
 src/pages/Entry/EntryList.vue                 |  9 +-------
 src/pages/InvoiceIn/InvoiceInList.vue         |  9 +-------
 src/pages/InvoiceOut/InvoiceOutList.vue       |  9 +-------
 src/pages/Order/OrderCatalog.vue              | 12 ++++-------
 src/pages/Order/OrderLines.vue                |  7 +------
 src/pages/Order/OrderList.vue                 | 13 +++---------
 src/pages/Order/OrderVolume.vue               |  7 +------
 src/pages/Shelving/ShelvingList.vue           |  9 +-------
 src/pages/Supplier/Card/SupplierAddresses.vue |  9 +-------
 src/pages/Supplier/SupplierList.vue           |  9 +-------
 src/pages/Ticket/TicketList.vue               |  9 +-------
 src/pages/Travel/TravelList.vue               |  9 +-------
 src/pages/Wagon/Type/WagonTypeList.vue        |  9 +-------
 src/pages/Wagon/WagonList.vue                 |  9 +-------
 src/pages/Worker/WorkerList.vue               |  9 +-------
 20 files changed, 36 insertions(+), 149 deletions(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index f11ab865c..b742dae2f 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -58,6 +58,11 @@ body.body--dark {
     border-radius: 8px;
 }
 
+.vn-card-list {
+    width: 100%;
+    max-width: 60em;
+}
+
 /* Estilo para el asterisco en campos requeridos */
 .q-field.required .q-field__label:after {
     content: ' *';
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index b33854959..a0e38079d 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -71,7 +71,7 @@ function viewSummary(id) {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="ClaimList"
                 url="Claims/filter"
@@ -145,13 +145,6 @@ function viewSummary(id) {
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 es:
     Search claim: Buscar reclamación
diff --git a/src/pages/Claim/ClaimRmaList.vue b/src/pages/Claim/ClaimRmaList.vue
index 3774932e3..b906e32fa 100644
--- a/src/pages/Claim/ClaimRmaList.vue
+++ b/src/pages/Claim/ClaimRmaList.vue
@@ -84,7 +84,7 @@ async function remove({ id }) {
                 </QForm>
             </QCard>
         </QPageSticky>
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="ClaimRmaList"
                 url="ClaimRmas"
@@ -160,7 +160,6 @@ async function remove({ id }) {
     padding-top: 156px;
 }
 
-.card-list,
 .card {
     width: 100%;
     max-width: 60em;
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 540afcc4c..a78720d03 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -65,7 +65,7 @@ const redirectToCreateView = () => {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 auto-load
                 data-key="CustomerList"
@@ -116,13 +116,6 @@ const redirectToCreateView = () => {
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 es:
     Search customer: Buscar cliente
diff --git a/src/pages/Customer/Payments/CustomerPayments.vue b/src/pages/Customer/Payments/CustomerPayments.vue
index de774e63e..eedaaf137 100644
--- a/src/pages/Customer/Payments/CustomerPayments.vue
+++ b/src/pages/Customer/Payments/CustomerPayments.vue
@@ -122,7 +122,7 @@ function stateColor(row) {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md customer-payments">
-        <div class="card-list">
+        <div class="vn-card-list">
             <QToolbar class="q-pa-none justify-end">
                 <QBtn
                     @click="arrayData.refresh()"
@@ -278,18 +278,13 @@ function stateColor(row) {
 
 <style lang="scss">
 .customer-payments {
-    .card-list {
-        width: 100%;
-        max-width: 60em;
-
-        .q-table--dense .q-table th:first-child {
-            padding-left: 0;
-        }
-        td {
-            max-width: 130px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
+    .q-table--dense .q-table th:first-child {
+        padding-left: 0;
+    }
+    td {
+        max-width: 130px;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 }
 </style>
diff --git a/src/pages/Entry/EntryList.vue b/src/pages/Entry/EntryList.vue
index 40747178c..0cf707efa 100644
--- a/src/pages/Entry/EntryList.vue
+++ b/src/pages/Entry/EntryList.vue
@@ -47,7 +47,7 @@ onMounted(async () => {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="EntryList"
                 url="Entries/filter"
@@ -128,13 +128,6 @@ onMounted(async () => {
     </QPageSticky>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 es:
     Search entries: Buscar entradas
diff --git a/src/pages/InvoiceIn/InvoiceInList.vue b/src/pages/InvoiceIn/InvoiceInList.vue
index bf791c10e..2f508ec34 100644
--- a/src/pages/InvoiceIn/InvoiceInList.vue
+++ b/src/pages/InvoiceIn/InvoiceInList.vue
@@ -71,7 +71,7 @@ function viewSummary(id) {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="InvoiceInList"
                 url="InvoiceIns/filter"
@@ -157,13 +157,6 @@ function viewSummary(id) {
     </QPageSticky>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 es:
     Search invoice: Buscar factura emitida
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index 292fa2e0a..36d1d3aad 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -181,7 +181,7 @@ const downloadCsv = () => {
                     </div>
                 </QToolbar>
                 <div class="flex flex-center q-pa-md">
-                    <div class="card-list">
+                    <div class="vn-card-list">
                         <CardList
                             :element="row"
                             :id="row.id"
@@ -246,13 +246,6 @@ const downloadCsv = () => {
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 en:
     searchInvoice: Search issued invoice
diff --git a/src/pages/Order/OrderCatalog.vue b/src/pages/Order/OrderCatalog.vue
index 55f5e7da1..21442d10d 100644
--- a/src/pages/Order/OrderCatalog.vue
+++ b/src/pages/Order/OrderCatalog.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { useStateStore } from 'stores/useStateStore';
 import { useRoute } from 'vue-router';
-import {onMounted, onUnmounted, ref} from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
@@ -20,7 +20,7 @@ const catalogParams = {
     orderBy: JSON.stringify({ field: 'relevancy DESC, name', way: 'ASC', isTag: false }),
 };
 
-const tags = ref([])
+const tags = ref([]);
 
 function extractTags(items) {
     const resultTags = [];
@@ -34,7 +34,7 @@ function extractTags(items) {
             }
         });
     });
-    tags.value = resultTags
+    tags.value = resultTags;
 }
 </script>
 
@@ -70,7 +70,7 @@ function extractTags(items) {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="full-width">
             <VnPaginate
                 data-key="OrderCatalogList"
                 url="Orders/CatalogFilter"
@@ -93,10 +93,6 @@ function extractTags(items) {
 </template>
 
 <style lang="scss" scoped>
-.card-list {
-    width: 100%;
-}
-
 .catalog-list {
     display: flex;
     align-items: flex-start;
diff --git a/src/pages/Order/OrderLines.vue b/src/pages/Order/OrderLines.vue
index 0dce70831..a2ee42481 100644
--- a/src/pages/Order/OrderLines.vue
+++ b/src/pages/Order/OrderLines.vue
@@ -83,7 +83,7 @@ async function confirmOrder() {
         auto-load
     />
     <QPage :key="componentKey" class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <div v-if="!orderSummary.total" class="no-result">
                 {{ t('globals.noResults') }}
             </div>
@@ -228,11 +228,6 @@ async function confirmOrder() {
 }
 </style>
 <style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-
 .header {
     color: $primary;
     font-weight: bold;
diff --git a/src/pages/Order/OrderList.vue b/src/pages/Order/OrderList.vue
index 362a68b4d..8b6b53fbe 100644
--- a/src/pages/Order/OrderList.vue
+++ b/src/pages/Order/OrderList.vue
@@ -4,7 +4,7 @@ import { onMounted, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import { toCurrency, toDate } from 'src/filters';
-import {useQuasar} from "quasar";
+import { useQuasar } from 'quasar';
 import CardList from 'components/ui/CardList.vue';
 import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
@@ -12,7 +12,7 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
 import OrderFilter from 'pages/Order/Card/OrderFilter.vue';
-import OrderSummaryDialog from "pages/Order/Card/OrderSummaryDialog.vue";
+import OrderSummaryDialog from 'pages/Order/Card/OrderSummaryDialog.vue';
 
 const stateStore = useStateStore();
 const quasar = useQuasar();
@@ -63,7 +63,7 @@ function viewSummary(id) {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="OrderList"
                 url="Orders/filter"
@@ -153,10 +153,3 @@ function viewSummary(id) {
         </QPageSticky>
     </QPage>
 </template>
-
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
diff --git a/src/pages/Order/OrderVolume.vue b/src/pages/Order/OrderVolume.vue
index 4f4c269f6..5bb106edc 100644
--- a/src/pages/Order/OrderVolume.vue
+++ b/src/pages/Order/OrderVolume.vue
@@ -35,7 +35,7 @@ const loadVolumes = async (rows) => {
         auto-load
     />
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <div
                 v-if="!volumeSummary?.totalVolume && !volumeSummary?.totalBoxes"
                 class="no-result"
@@ -121,11 +121,6 @@ const loadVolumes = async (rows) => {
 }
 </style>
 <style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-
 .header {
     color: $primary;
     font-weight: bold;
diff --git a/src/pages/Shelving/ShelvingList.vue b/src/pages/Shelving/ShelvingList.vue
index 71b3a6ccf..c884dc5f4 100644
--- a/src/pages/Shelving/ShelvingList.vue
+++ b/src/pages/Shelving/ShelvingList.vue
@@ -74,7 +74,7 @@ function exprBuilder(param, value) {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="ShelvingList"
                 url="Shelvings"
@@ -129,10 +129,3 @@ function exprBuilder(param, value) {
         </QPageSticky>
     </QPage>
 </template>
-
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
diff --git a/src/pages/Supplier/Card/SupplierAddresses.vue b/src/pages/Supplier/Card/SupplierAddresses.vue
index df7cff932..c6b08075f 100644
--- a/src/pages/Supplier/Card/SupplierAddresses.vue
+++ b/src/pages/Supplier/Card/SupplierAddresses.vue
@@ -47,7 +47,7 @@ const redirectToUpdateView = (addressData) => {
 
 <template>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="SupplierAddress"
                 :url="`Suppliers/${route.params.id}/addresses`"
@@ -88,10 +88,3 @@ const redirectToUpdateView = (addressData) => {
         </QPageSticky>
     </QPage>
 </template>
-
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
diff --git a/src/pages/Supplier/SupplierList.vue b/src/pages/Supplier/SupplierList.vue
index ea7bc3cb0..d504e127a 100644
--- a/src/pages/Supplier/SupplierList.vue
+++ b/src/pages/Supplier/SupplierList.vue
@@ -44,7 +44,7 @@ const viewSummary = (id) => {
     </template>
 
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate data-key="SuppliersList" url="Suppliers/filter" auto-load>
                 <template #body="{ rows }">
                     <CardList
@@ -95,13 +95,6 @@ const viewSummary = (id) => {
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 en:
     Search suppliers: Search suppliers
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index 9186eb6ad..6f57ad0b9 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -74,7 +74,7 @@ function viewSummary(id) {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="TicketList"
                 url="Tickets/filter"
@@ -134,13 +134,6 @@ function viewSummary(id) {
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 es:
     Search ticket: Buscar ticket
diff --git a/src/pages/Travel/TravelList.vue b/src/pages/Travel/TravelList.vue
index 889f096aa..dbbdaca93 100644
--- a/src/pages/Travel/TravelList.vue
+++ b/src/pages/Travel/TravelList.vue
@@ -56,7 +56,7 @@ onMounted(async () => {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="TravelList"
                 url="Travels/filter"
@@ -132,13 +132,6 @@ onMounted(async () => {
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 en:
     addEntry: Add entry
diff --git a/src/pages/Wagon/Type/WagonTypeList.vue b/src/pages/Wagon/Type/WagonTypeList.vue
index 8e4ace744..a7c713039 100644
--- a/src/pages/Wagon/Type/WagonTypeList.vue
+++ b/src/pages/Wagon/Type/WagonTypeList.vue
@@ -42,7 +42,7 @@ async function remove(row) {
 
 <template>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="WagonTypeList"
                 url="/WagonTypes"
@@ -80,10 +80,3 @@ async function remove(row) {
         </QPageSticky>
     </QPage>
 </template>
-
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
diff --git a/src/pages/Wagon/WagonList.vue b/src/pages/Wagon/WagonList.vue
index 77d9da0bf..18417f433 100644
--- a/src/pages/Wagon/WagonList.vue
+++ b/src/pages/Wagon/WagonList.vue
@@ -48,7 +48,7 @@ async function remove(row) {
 
 <template>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="WagonList"
                 url="/Wagons"
@@ -99,10 +99,3 @@ async function remove(row) {
         </QPageSticky>
     </QPage>
 </template>
-
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index e7e86d16e..0e9868a04 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -64,7 +64,7 @@ const redirectToCreateView = () => {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="WorkerList"
                 url="Workers/filter"
@@ -114,13 +114,6 @@ const redirectToCreateView = () => {
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 es:
     Search worker: Buscar trabajador

From 23210600ac78e89925c22a2905dde02d5bd0c6f0 Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Mon, 22 Jan 2024 11:00:03 -0500
Subject: [PATCH 67/86] Se hace correccion solicitada en issuecomment-39539

---
 .../Customer/Card/CustomerBillingData.vue     | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/pages/Customer/Card/CustomerBillingData.vue b/src/pages/Customer/Card/CustomerBillingData.vue
index cee583f39..a455e6db2 100644
--- a/src/pages/Customer/Card/CustomerBillingData.vue
+++ b/src/pages/Customer/Card/CustomerBillingData.vue
@@ -1,8 +1,10 @@
 <script setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
+import axios from 'axios';
+
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
@@ -17,18 +19,17 @@ const route = useRoute();
 const payMethods = ref([]);
 const bankEntitiesOptions = ref([]);
 
-const onBankEntityCreated = (data) => {
-    bankEntitiesOptions.value.push(data);
+onMounted(() => getBankEntities());
+
+const getBankEntities = async () => {
+    const filter = { fields: ['id', 'bic', 'name'], order: 'bic ASC', limit: 30 };
+    const { data } = await axios.get('BankEntities', { filter });
+    bankEntitiesOptions.value = data;
 };
 </script>
 
 <template>
     <fetch-data @on-fetch="(data) => (payMethods = data)" auto-load url="PayMethods" />
-    <FetchData
-        @on-fetch="(data) => (bankEntitiesOptions = data)"
-        auto-load
-        url="BankEntities"
-    />
 
     <FormModel
         :url-update="`Clients/${route.params.id}`"
@@ -73,9 +74,7 @@ const onBankEntityCreated = (data) => {
                         v-model="data.bankEntityFk"
                     >
                         <template #form>
-                            <CreateBankEntityForm
-                                @on-data-saved="onBankEntityCreated($event)"
-                            />
+                            <CreateBankEntityForm @on-data-saved="getBankEntities()" />
                         </template>
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">

From 6809e9bddb37ba812c3e56a8f62f3beb255a051d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 23 Jan 2024 11:27:13 +0100
Subject: [PATCH 68/86] refs #6280 perf: same value as searchDelay in salix

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

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 6720e3920..827afe9ca 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -95,7 +95,7 @@ async function onPostcodeCreated(){
         :placeholder="t('Search by postalCode, town, province or country')"
         @input-value="locationFilter"
         :default-filter="false"
-        :input-debounce="100"
+        :input-debounce="300"
         :class="{ required: $attrs.required }"
         v-bind="$attrs"
         emit-value

From 5d888a29778f04d264352cfae6d97f98f5442c4d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 23 Jan 2024 11:33:34 +0100
Subject: [PATCH 69/86] refs #6280 perf: remove deepFind unused code

---
 src/components/common/VnSelectFilter.vue |  3 +--
 src/composables/deepFind.js              | 14 --------------
 2 files changed, 1 insertion(+), 16 deletions(-)
 delete mode 100644 src/composables/deepFind.js

diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 5b91caa1a..a7ac4a7cd 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { deepFind } from 'src/composables/deepFind';
 import { ref, toRefs, computed, watch } from 'vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 
@@ -69,7 +68,7 @@ const filter = (val, options) => {
     return options.filter((row) => {
         if ($props.filterOptions.length) {
             return $props.filterOptions.some((prop) => {
-                const propValue = String(deepFind(row,prop)).toLowerCase();
+                const propValue = String(row[prop]).toLowerCase();
                 return propValue.includes(search);
             });
         }
diff --git a/src/composables/deepFind.js b/src/composables/deepFind.js
deleted file mode 100644
index ec28fe387..000000000
--- a/src/composables/deepFind.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export async function deepFind(obj, path) {
-    const keys = path.split('.');
-    let current = obj;
-
-    for (const key of keys) {
-        if (current[key] !== undefined) {
-            current = current[key];
-        } else {
-            return undefined;
-        }
-    }
-
-    return current;
-}

From 37859892faad87197d25aa7488d588f4e18bbdf3 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 23 Jan 2024 12:53:21 +0100
Subject: [PATCH 70/86] refs #6280 perf: call locationFilter

---
 src/components/common/VnLocation.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 827afe9ca..ee879a62c 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, toRefs, computed, watch } from 'vue';
+import { ref, toRefs, computed, watch, onMounted } from 'vue';
 import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 import VnSelectCreate from 'components/common/VnSelectCreate.vue';
 import FetchData from 'components/FetchData.vue';
@@ -67,16 +67,19 @@ function showLabel(data) {
        return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
 }
 
+
+onMounted(() => {
+    locationFilter()
+})
 function locationFilter(search) {
-    let where = { limit: 30 };
-    const params = { search };
-    postcodesRef.value.fetch({ where, args: params });
+    let where = { search };
+    postcodesRef.value.fetch({ where, limit: 30});
 }
 function handleFetch( data) {
     postcodesOptions.value = data;
 }
 async function onPostcodeCreated(){
-    postcodesRef.value.fetch();
+    locationFilter()
 };
 </script>
 <template>
@@ -84,7 +87,6 @@ async function onPostcodeCreated(){
         ref="postcodesRef"
         url="Postcodes/filter"
         @on-fetch="(data) =>handleFetch(data)"
-        auto-load
     />
     <VnSelectCreate
         v-if="postcodesRef"

From 5ebeb7fe472c9bca7b29e9460732341716d40c84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javier=20Segarra=20Mart=C3=ADnez?= <jsegarra@verdnatura.es>
Date: Tue, 23 Jan 2024 23:23:51 +0100
Subject: [PATCH 71/86] refs #6280 perf locationFilter

---
 src/components/common/VnLocation.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index ee879a62c..674784849 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -72,8 +72,8 @@ onMounted(() => {
     locationFilter()
 })
 function locationFilter(search) {
-    let where = { search };
-    postcodesRef.value.fetch({ where, limit: 30});
+    let args = { filter:{limit: 30}, search};
+    postcodesRef.value.fetch({args});
 }
 function handleFetch( data) {
     postcodesOptions.value = data;

From 45dc9c355f4ab6342a82bb8e597a81cea2b96318 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 24 Jan 2024 08:30:09 +0100
Subject: [PATCH 72/86] refs #6280 perf: improve component

---
 src/components/common/VnLocation.vue        | 15 ++++++----
 src/pages/Customer/CustomerCreate.vue       |  7 +++--
 src/pages/Worker/WorkerCreate.vue           |  7 +++--
 test/cypress/integration/VnLocation.spec.js | 32 +++++++++++++++++++++
 4 files changed, 49 insertions(+), 12 deletions(-)
 create mode 100644 test/cypress/integration/VnLocation.spec.js

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 674784849..a7a58e2b8 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -54,11 +54,16 @@ const value = computed({
     },
 });
 
+onMounted(() => {
+    locationFilter()
+});
+
 function setOptions(data) {
     myOptions.value = JSON.parse(JSON.stringify(data));
     myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
 setOptions(options.value);
+
 watch(options, (newValue) => {
     setOptions(newValue);
 });
@@ -67,17 +72,15 @@ function showLabel(data) {
        return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
 }
 
-
-onMounted(() => {
-    locationFilter()
-})
 function locationFilter(search) {
-    let args = { filter:{limit: 30}, search};
-    postcodesRef.value.fetch({args});
+    let where = { search };
+    postcodesRef.value.fetch({filter:{ where}, limit: 30});
 }
+
 function handleFetch( data) {
     postcodesOptions.value = data;
 }
+
 async function onPostcodeCreated(){
     locationFilter()
 };
diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue
index 4ce4b4520..800279326 100644
--- a/src/pages/Customer/CustomerCreate.vue
+++ b/src/pages/Customer/CustomerCreate.vue
@@ -33,9 +33,10 @@ const businessTypesOptions = ref([]);
 const postcodesOptions = ref([]);
 
 
-function handleLocation(data, { city, postcode, provinceFk, countryFk }) {
-    data.postcode = postcode;
-    data.city = city;
+function handleLocation(data, location ) {
+    const { town, code, provinceFk, countryFk } = location ?? {}
+    data.postcode = code;
+    data.city = town;
     data.provinceFk = provinceFk;
     data.countryFk = countryFk;
 }
diff --git a/src/pages/Worker/WorkerCreate.vue b/src/pages/Worker/WorkerCreate.vue
index 490fd2086..3ded85584 100644
--- a/src/pages/Worker/WorkerCreate.vue
+++ b/src/pages/Worker/WorkerCreate.vue
@@ -57,9 +57,10 @@ const onBankEntityCreated = (data) => {
 };
 
 
-function handleLocation(data, { city, postcode, provinceFk, countryFk }) {
-    data.postcode = postcode;
-    data.city = city;
+function handleLocation(data, location ) {
+    const { town, postcode: code, provinceFk, countryFk } = location ?? {}
+    data.postcode = code;
+    data.city = town;
     data.provinceFk = provinceFk;
     data.countryFk = countryFk;
 }
diff --git a/test/cypress/integration/VnLocation.spec.js b/test/cypress/integration/VnLocation.spec.js
new file mode 100644
index 000000000..20b18700f
--- /dev/null
+++ b/test/cypress/integration/VnLocation.spec.js
@@ -0,0 +1,32 @@
+const inputLocation = ':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control';
+const locationOptions ='[role="listbox"] > div.q-virtual-scroll__content > .q-item'
+describe('VnLocation', () => {
+    beforeEach(() => {
+        cy.viewport(1280, 720);
+        cy.login('developer');
+        cy.visit('/#/worker/create');
+        cy.waitForElement('.q-card');
+    });
+
+    // it('Show all options', function() {
+    //   cy.get(inputLocation).click();
+    //   cy.get(locationOptions).should('have.length',5)
+    //   // cy.get(':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon').click()
+    // });
+
+    // it('input filter location as "al"', function() {
+    //     cy.get(inputLocation).click();
+    //     cy.get(inputLocation).clear();
+    //     cy.get(inputLocation).type('al');
+    //     cy.get(locationOptions).should('have.length',3);
+    // });
+    it('input filter location as "ecuador"', function() {
+        cy.get(inputLocation).click();
+        cy.get(inputLocation).clear();
+        cy.get(inputLocation).type('ecuador');
+        cy.get(locationOptions).should('have.length',1);
+        cy.get(`${locationOptions}:nth-child(1)`).click();
+        cy.get(':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon').click();
+
+    });
+})

From e47561df868d9da935d9b69975948e7017212399 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Wed, 24 Jan 2024 13:50:04 +0100
Subject: [PATCH 73/86] refs #6664 disable

---
 src/pages/Claim/Card/ClaimAction.vue | 37 ++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index 76f76903c..b2c99bcb6 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -232,10 +232,10 @@ async function importToNewRefundTicket() {
         show-if-above
         v-if="claim"
     >
-        <QCard class="totalClaim vn-card q-my-md q-pa-sm">
+        <QCard class="totalClaim q-my-md q-pa-sm no-box-shadow">
             {{ `${t('Total claimed')}: ${toCurrency(totalClaimed)}` }}
         </QCard>
-        <QCard class="vn-card q-mb-md q-pa-sm">
+        <QCard class="q-mb-md q-pa-sm no-box-shadow">
             <QItem class="justify-between">
                 <QItemLabel class="slider-container">
                     <p class="text-primary">
@@ -256,13 +256,31 @@ async function importToNewRefundTicket() {
                 </QItemLabel>
             </QItem>
         </QCard>
-        <QItemLabel class="mana q-mb-md">
-            <QCheckbox
-                v-model="claim.isChargedToMana"
-                @update:model-value="(value) => save({ isChargedToMana: value })"
+        <QCard class="q-mb-md q-pa-sm no-box-shadow" style="margin-bottom: 1em">
+            <QItemLabel class="mana q-mb-md">
+                <QCheckbox
+                    v-model="claim.isChargedToMana"
+                    @update:model-value="(value) => save({ isChargedToMana: value })"
+                />
+                <span>{{ t('mana') }}</span>
+            </QItemLabel>
+        </QCard>
+        <QCard class="q-mb-md q-pa-sm no-box-shadow" style="position: static">
+            <QInput
+                :label="t('confirmGreuges')"
+                class="q-field__native text-grey-2"
+                type="number"
+                placeholder="0"
+                id="multiplicatorValue"
+                name="multiplicatorValue"
+                min="0"
+                max="50"
+                disable="
+                    claim.value.responsibility >=
+                    Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2
+                "
             />
-            <span>{{ t('mana') }}</span>
-        </QItemLabel>
+        </QCard>
     </QDrawer>
     <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport>
     <CrudModel
@@ -470,6 +488,9 @@ async function importToNewRefundTicket() {
 .mana {
     float: inline-start;
 }
+.vn-card {
+    background-color: blue($color: #000000);
+}
 </style>
 <i18n>
 en:

From 8ae7756e9abf61a5b96a8d0f131dd86d2f300526 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Wed, 24 Jan 2024 14:58:33 +0100
Subject: [PATCH 74/86] refs #6664 btn

---
 src/pages/Claim/Card/ClaimAction.vue | 40 +++++++++++++++-------------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index b2c99bcb6..85a30600c 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -135,21 +135,21 @@ async function regularizeClaim() {
         message: t('globals.dataSaved'),
         type: 'positive',
     });
-    if (claim.value.responsibility >= Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2) {
-        quasar
-            .dialog({
-                component: VnConfirm,
-                componentProps: {
-                    title: t('confirmGreuges'),
-                    message: `
-                    <input class="q-field__native text-grey-2" type="number" placeholder="1" id="multiplicatorValue" name="multiplicatorValue" min="0" max="50"/>
-                     `,
-                    data: { inputId: 'multiplicatorValue' },
-                    promise: onUpdateGreugeAccept,
-                },
-            })
-            .onOk(async () => await onUpdateGreugeAccept());
-    }
+    // if (claim.value.responsibility >= Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2) {
+    //     quasar
+    //         .dialog({
+    //             component: VnConfirm,
+    //             componentProps: {
+    //                 title: t('confirmGreuges'),
+    //                 message: `
+    //                 <input class="q-field__native text-grey-2" type="number" placeholder="1" id="multiplicatorValue" name="multiplicatorValue" min="0" max="50"/>
+    //                  `,
+    //                 data: { inputId: 'multiplicatorValue' },
+    //                 promise: onUpdateGreugeAccept,
+    //             },
+    //         })
+    //         .onOk(async () => await onUpdateGreugeAccept());
+    // }
 }
 
 async function onUpdateGreugeAccept({ return: multiplicatorValue }) {
@@ -275,11 +275,12 @@ async function importToNewRefundTicket() {
                 name="multiplicatorValue"
                 min="0"
                 max="50"
-                disable="
-                    claim.value.responsibility >=
-                    Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2
-                "
+                v-model="multiplicatorValue"
             />
+            <QBtn
+                @click="onUpdateGreugeAccept(multiplicatorValue)"
+                :label="t('Apply Greuges')"
+            ></QBtn>
         </QCard>
     </QDrawer>
     <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport>
@@ -521,4 +522,5 @@ es:
     Id item: Id artículo
     confirmGreuges: ¿Desea insertar greuges?
     confirmGreugesMessage: Insertar greuges en la ficha del cliente
+    Apply Greuges: Aplicar Greuges
 </i18n>

From 47fd0b2dfde8874374d2956da8b436cbe0d4d744 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 25 Jan 2024 08:46:51 +0100
Subject: [PATCH 75/86] refs #6745 fix(claimDescriptor= claimRatio label.
 fix(TicketSummary): state can be null

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

diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index afd22c340..deaed94f8 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -145,7 +145,7 @@ const setData = (entity) => {
             />
             <VnLv :label="t('claim.card.zone')" :value="entity.ticket?.zone?.name" />
             <VnLv
-                :label="t('claim.card.zone')"
+                :label="t('claimRate')"
                 :value="toPercentage(entity.client?.claimsRatio?.claimingRate)"
             />
         </template>
@@ -176,3 +176,9 @@ const setData = (entity) => {
     margin-top: 0;
 }
 </style>
+<i18n>
+    en:
+        claimRate: Claming rate
+    es:
+        claimRate: Ratio de reclamación
+</i18n>
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index 65523bb82..fe7dcee9a 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -58,7 +58,7 @@ function formattedAddress() {
 
 function isEditable() {
     try {
-        return !ticket.value.ticketState.state.alertLevel;
+        return !ticket.value.ticketState?.state?.alertLevel;
     } catch (e) {
         console.error(e);
     }
@@ -153,8 +153,8 @@ async function changeState(value) {
                 </a>
                 <VnLv :label="t('ticket.summary.state')">
                     <template #value>
-                        <QChip :color="ticket.ticketState.state.classColor ?? 'dark'">
-                            {{ ticket.ticketState.state.name }}
+                        <QChip :color="ticket.ticketState?.state?.classColor ?? 'dark'">
+                            {{ ticket.ticketState?.state?.name }}
                         </QChip>
                     </template>
                 </VnLv>

From 35aa0ba20a769006396747d6a58ef10f41d480ec Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Thu, 25 Jan 2024 13:48:42 +0100
Subject: [PATCH 76/86] refs #6664 claimPortes

---
 src/pages/Claim/Card/ClaimAction.vue          | 29 +++++--------------
 .../integration/claim/claimAction.spec.js     |  1 -
 2 files changed, 7 insertions(+), 23 deletions(-)

diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index 85a30600c..371cb015f 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -37,7 +37,7 @@ const marker_labels = [
     { value: DEFAULT_MIN_RESPONSABILITY, label: t('claim.summary.company') },
     { value: DEFAULT_MAX_RESPONSABILITY, label: t('claim.summary.person') },
 ];
-const portesMultiplicator = ref();
+const multiplicatorValue = ref();
 
 const columns = computed(() => [
     {
@@ -135,24 +135,10 @@ async function regularizeClaim() {
         message: t('globals.dataSaved'),
         type: 'positive',
     });
-    // if (claim.value.responsibility >= Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2) {
-    //     quasar
-    //         .dialog({
-    //             component: VnConfirm,
-    //             componentProps: {
-    //                 title: t('confirmGreuges'),
-    //                 message: `
-    //                 <input class="q-field__native text-grey-2" type="number" placeholder="1" id="multiplicatorValue" name="multiplicatorValue" min="0" max="50"/>
-    //                  `,
-    //                 data: { inputId: 'multiplicatorValue' },
-    //                 promise: onUpdateGreugeAccept,
-    //             },
-    //         })
-    //         .onOk(async () => await onUpdateGreugeAccept());
-    // }
+    await onUpdateGreugeAccept();
 }
 
-async function onUpdateGreugeAccept({ return: multiplicatorValue }) {
+async function onUpdateGreugeAccept() {
     const greugeTypeFreightId = (
         await axios.get(`GreugeTypes/findOne`, {
             filter: { where: { code: 'freightPickUp' } },
@@ -160,7 +146,7 @@ async function onUpdateGreugeAccept({ return: multiplicatorValue }) {
     ).data.id;
     const freightPickUpPrice =
         (await axios.get(`GreugeConfigs/findOne`)).data.freightPickUpPrice *
-        +multiplicatorValue;
+        +multiplicatorValue.value;
     console.log(freightPickUpPrice);
     await axios.post(`Greuges`, {
         clientFk: claim.value.clientFk,
@@ -267,6 +253,9 @@ async function importToNewRefundTicket() {
         </QCard>
         <QCard class="q-mb-md q-pa-sm no-box-shadow" style="position: static">
             <QInput
+                :disable="
+                    !(claim.responsibility >= Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2)
+                "
                 :label="t('confirmGreuges')"
                 class="q-field__native text-grey-2"
                 type="number"
@@ -277,10 +266,6 @@ async function importToNewRefundTicket() {
                 max="50"
                 v-model="multiplicatorValue"
             />
-            <QBtn
-                @click="onUpdateGreugeAccept(multiplicatorValue)"
-                :label="t('Apply Greuges')"
-            ></QBtn>
         </QCard>
     </QDrawer>
     <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport>
diff --git a/test/cypress/integration/claim/claimAction.spec.js b/test/cypress/integration/claim/claimAction.spec.js
index f181722fa..685e120ce 100644
--- a/test/cypress/integration/claim/claimAction.spec.js
+++ b/test/cypress/integration/claim/claimAction.spec.js
@@ -31,7 +31,6 @@ describe('ClaimAction', () => {
 
     it('should regularize', () => {
         cy.get('[title="Regularize"]').click();
-        cy.clickConfirm();
     });
 
     it('should remove the line', () => {

From 67d95f9ad0d296b9704ccaa63a0ef7989da0af22 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Thu, 25 Jan 2024 14:44:41 +0100
Subject: [PATCH 77/86] refs #6664 vnConfirm og

---
 src/components/ui/VnConfirm.vue | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/components/ui/VnConfirm.vue b/src/components/ui/VnConfirm.vue
index 0ce18cadb..f8715f685 100644
--- a/src/components/ui/VnConfirm.vue
+++ b/src/components/ui/VnConfirm.vue
@@ -2,7 +2,6 @@
 import { ref } from 'vue';
 import { useDialogPluginComponent } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { onMounted } from 'vue';
 
 const { t } = useI18n();
 
@@ -29,7 +28,6 @@ const props = defineProps({
         required: false,
         default: null,
     },
-    callbackFn: Function,
 });
 
 defineEmits(['confirm', ...useDialogPluginComponent.emits]);
@@ -39,17 +37,12 @@ const { dialogRef, onDialogOK } = useDialogPluginComponent();
 const title = props.title || t('Confirm');
 const message = props.message || t('Are you sure you want to continue?');
 const isLoading = ref(false);
-onMounted(() => {
-    if (props.callbackFn) props.callbackFn();
-});
+
 async function confirm() {
-    let html = null;
-    html = document.getElementById(props.data.inputId);
     isLoading.value = true;
     if (props.promise) {
         try {
-            if (html) await props.promise({ ...props.data, return: html.value });
-            else await props.promise(props.data);
+            await props.promise(props.data);
         } finally {
             isLoading.value = false;
         }
@@ -72,8 +65,8 @@ async function confirm() {
                 <QSpace />
                 <QBtn icon="close" :disable="isLoading" flat round dense v-close-popup />
             </QCardSection>
-            <QCardSection class="row justify-center items-center">
-                <span id="spanHTML" v-html="message"></span>
+            <QCardSection class="row items-center">
+                <span v-html="message"></span>
             </QCardSection>
             <QCardActions align="right">
                 <QBtn

From 9f9835b7ab8d1a1d21945c82ff94ae2eb7e33352 Mon Sep 17 00:00:00 2001
From: JAVIER SEGARRA MARTINEZ <jsegarra@verdnatura.es>
Date: Fri, 26 Jan 2024 07:56:41 +0000
Subject: [PATCH 78/86] refs #6280: remove related code to filter-rules

---
 src/components/common/VnSelectFilter.vue | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index a7ac4a7cd..7f10f5efe 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -12,15 +12,11 @@ const $props = defineProps({
         default: () => [],
     },
     optionLabel: {
-        type: [String, Function],
+        type: [String],
         default: '',
     },
     filterOptions: {
-        type: [Array, Function],
-        default: () => [],
-    },
-    filterRules: {
-        type: [Array, Function],
+        type: [Array],
         default: () => [],
     },
     isClearable: {
@@ -57,13 +53,6 @@ const filter = (val, options) => {
     const search = val.toString().toLowerCase();
 
     if (!search) return options;
-    if($props.filterRules.length) {
-        const passSomeRule = $props.filterRules.some((rule) => {
-            const cond = eval(rule)
-            return cond;
-        });
-        if(!passSomeRule) return options
-    }
 
     return options.filter((row) => {
         if ($props.filterOptions.length) {

From c731b5b9893bc5443cb8b48c106c19a049f3fcc4 Mon Sep 17 00:00:00 2001
From: JAVIER SEGARRA MARTINEZ <jsegarra@verdnatura.es>
Date: Fri, 26 Jan 2024 08:04:08 +0000
Subject: [PATCH 79/86] refs #6280: replace function event

---
 src/components/common/VnLocation.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index a7a58e2b8..0b30faaa7 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -81,9 +81,6 @@ function handleFetch( data) {
     postcodesOptions.value = data;
 }
 
-async function onPostcodeCreated(){
-    locationFilter()
-};
 </script>
 <template>
     <FetchData
@@ -111,7 +108,7 @@ async function onPostcodeCreated(){
         fill-input
     >
         <template #form>
-            <CreateNewPostcode @on-data-saved="onPostcodeCreated($event)" />
+            <CreateNewPostcode @on-data-saved="locationFilter()" />
         </template>
         <template #option="{itemProps, opt}">
             <QItem v-bind="itemProps">

From 9a23bb2ed24b984e4fd000964a3878fbc96b6e20 Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Fri, 26 Jan 2024 11:08:45 -0500
Subject: [PATCH 80/86] Se corrige comentario 39968

---
 .../Customer/Card/CustomerBillingData.vue     | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/pages/Customer/Card/CustomerBillingData.vue b/src/pages/Customer/Card/CustomerBillingData.vue
index a455e6db2..1543eac7a 100644
--- a/src/pages/Customer/Card/CustomerBillingData.vue
+++ b/src/pages/Customer/Card/CustomerBillingData.vue
@@ -18,18 +18,28 @@ const route = useRoute();
 
 const payMethods = ref([]);
 const bankEntitiesOptions = ref([]);
+const bankEntitiesRef = ref(null);
 
-onMounted(() => getBankEntities());
+const filter = {
+    fields: ['id', 'bic', 'name'],
+    order: 'bic ASC',
+    limit: 30,
+};
 
-const getBankEntities = async () => {
-    const filter = { fields: ['id', 'bic', 'name'], order: 'bic ASC', limit: 30 };
-    const { data } = await axios.get('BankEntities', { filter });
-    bankEntitiesOptions.value = data;
+const getBankEntities = () => {
+    bankEntitiesRef.value.fetch();
 };
 </script>
 
 <template>
     <fetch-data @on-fetch="(data) => (payMethods = data)" auto-load url="PayMethods" />
+    <fetch-data
+        ref="bankEntitiesRef"
+        @on-fetch="(data) => (bankEntitiesOptions = data)"
+        :filter="filter"
+        auto-load
+        url="BankEntities"
+    />
 
     <FormModel
         :url-update="`Clients/${route.params.id}`"

From 8c9db8b3ae320127aa2eac99bb7571c6481d79fc Mon Sep 17 00:00:00 2001
From: JAVIER SEGARRA MARTINEZ <jsegarra@verdnatura.es>
Date: Mon, 29 Jan 2024 07:16:39 +0000
Subject: [PATCH 81/86] refs #6280 test: remove comments

---
 test/cypress/integration/VnLocation.spec.js | 22 ++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/test/cypress/integration/VnLocation.spec.js b/test/cypress/integration/VnLocation.spec.js
index 20b18700f..15226b166 100644
--- a/test/cypress/integration/VnLocation.spec.js
+++ b/test/cypress/integration/VnLocation.spec.js
@@ -8,18 +8,18 @@ describe('VnLocation', () => {
         cy.waitForElement('.q-card');
     });
 
-    // it('Show all options', function() {
-    //   cy.get(inputLocation).click();
-    //   cy.get(locationOptions).should('have.length',5)
-    //   // cy.get(':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon').click()
-    // });
+    it('Show all options', function() {
+      cy.get(inputLocation).click();
+      cy.get(locationOptions).should('have.length',5)
+      // cy.get(':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon').click()
+    });
 
-    // it('input filter location as "al"', function() {
-    //     cy.get(inputLocation).click();
-    //     cy.get(inputLocation).clear();
-    //     cy.get(inputLocation).type('al');
-    //     cy.get(locationOptions).should('have.length',3);
-    // });
+    it('input filter location as "al"', function() {
+        cy.get(inputLocation).click();
+        cy.get(inputLocation).clear();
+        cy.get(inputLocation).type('al');
+        cy.get(locationOptions).should('have.length',3);
+    });
     it('input filter location as "ecuador"', function() {
         cy.get(inputLocation).click();
         cy.get(inputLocation).clear();

From a02b534cfa6ff64ba69aa711aa6eb35ab5859736 Mon Sep 17 00:00:00 2001
From: JAVIER SEGARRA MARTINEZ <jsegarra@verdnatura.es>
Date: Mon, 29 Jan 2024 07:20:40 +0000
Subject: [PATCH 82/86] refs #6280 test: remove comments

---
 test/cypress/integration/VnLocation.spec.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/test/cypress/integration/VnLocation.spec.js b/test/cypress/integration/VnLocation.spec.js
index 15226b166..fe0ecee68 100644
--- a/test/cypress/integration/VnLocation.spec.js
+++ b/test/cypress/integration/VnLocation.spec.js
@@ -10,8 +10,7 @@ describe('VnLocation', () => {
 
     it('Show all options', function() {
       cy.get(inputLocation).click();
-      cy.get(locationOptions).should('have.length',5)
-      // cy.get(':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon').click()
+      cy.get(locationOptions).should('have.length',5);
     });
 
     it('input filter location as "al"', function() {

From 70e912fc924e2a8260807b74968f509ea3dbea26 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 29 Jan 2024 08:38:55 +0100
Subject: [PATCH 84/86] refs #6681 try fix jenkins

---
 Jenkinsfile | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/Jenkinsfile b/Jenkinsfile
index 437332c4e..f6382d62b 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -31,7 +31,7 @@ pipeline {
                 NODE_ENV = ""
             }
             steps {
-                nodejs('node-v18') {
+                nodejs('node-v20') {
                     sh 'npm install --no-audit --prefer-offline'
                 }
             }
@@ -47,7 +47,7 @@ pipeline {
             parallel {
                 stage('Frontend') {
                     steps {
-                        nodejs('node-v18') {
+                        nodejs('node-v20') {
                             sh 'npm run test:unit:ci'
                         }
                     }
@@ -63,7 +63,7 @@ pipeline {
                 CREDENTIALS = credentials('docker-registry')
             }
             steps {
-                nodejs('node-v18') {
+                nodejs('node-v20') {
                     sh 'quasar build'
                 }
                 dockerBuild()
@@ -96,4 +96,4 @@ pipeline {
             }
         }
     }
-}
\ No newline at end of file
+}

From 935211a71f4f7c3a41c0799e9b4ce8ae9880762d Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 29 Jan 2024 08:41:38 +0100
Subject: [PATCH 85/86] refs #6681 try fix jenkins

---
 Jenkinsfile | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Jenkinsfile b/Jenkinsfile
index f6382d62b..9dd72ccc3 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -31,7 +31,7 @@ pipeline {
                 NODE_ENV = ""
             }
             steps {
-                nodejs('node-v20') {
+                nodejs('node-v18') {
                     sh 'npm install --no-audit --prefer-offline'
                 }
             }
@@ -47,7 +47,7 @@ pipeline {
             parallel {
                 stage('Frontend') {
                     steps {
-                        nodejs('node-v20') {
+                        nodejs('node-v18') {
                             sh 'npm run test:unit:ci'
                         }
                     }
@@ -63,7 +63,7 @@ pipeline {
                 CREDENTIALS = credentials('docker-registry')
             }
             steps {
-                nodejs('node-v20') {
+                nodejs('node-v18') {
                     sh 'quasar build'
                 }
                 dockerBuild()

From 324d6da3a3320d5167593b8e4608699daa0a6fc2 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 29 Jan 2024 11:48:18 +0100
Subject: [PATCH 86/86] refs #6664 claimfix

---
 src/pages/Claim/Card/ClaimAction.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index 371cb015f..59409e432 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -146,8 +146,7 @@ async function onUpdateGreugeAccept() {
     ).data.id;
     const freightPickUpPrice =
         (await axios.get(`GreugeConfigs/findOne`)).data.freightPickUpPrice *
-        +multiplicatorValue.value;
-    console.log(freightPickUpPrice);
+        multiplicatorValue.value;
     await axios.post(`Greuges`, {
         clientFk: claim.value.clientFk,
         description: `${t('ClaimGreugeDescription')} ${claimId}`.toUpperCase(),
@@ -474,9 +473,6 @@ async function importToNewRefundTicket() {
 .mana {
     float: inline-start;
 }
-.vn-card {
-    background-color: blue($color: #000000);
-}
 </style>
 <i18n>
 en: