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 1/2] 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 2/2] 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