diff --git a/package.json b/package.json
index 71d80d401..0a66ddb4f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "24.30.1",
+    "version": "24.32.0",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",
diff --git a/src/components/CreateBankEntityForm.vue b/src/components/CreateBankEntityForm.vue
index b2c5226e6..c46ac7752 100644
--- a/src/components/CreateBankEntityForm.vue
+++ b/src/components/CreateBankEntityForm.vue
@@ -52,7 +52,7 @@ onMounted(async () => {
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('name')"
                     v-model="data.name"
@@ -67,7 +67,7 @@ onMounted(async () => {
                     :rules="validate('bankEntity.bic')"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnSelect
                         :label="t('country')"
diff --git a/src/components/CreateManualInvoiceForm.vue b/src/components/CreateManualInvoiceForm.vue
index 1aa95011f..da006e024 100644
--- a/src/components/CreateManualInvoiceForm.vue
+++ b/src/components/CreateManualInvoiceForm.vue
@@ -59,7 +59,7 @@ const onDataSaved = async (formData, requestResponse) => {
                 <QIcon name="warning" class="fill-icon q-mr-sm" size="md" />
                 {{ t('Invoicing in progress...') }}
             </span>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('Ticket')"
                     :options="ticketsOptions"
@@ -99,7 +99,7 @@ const onDataSaved = async (formData, requestResponse) => {
                 />
                 <VnInputDate :label="t('Max date')" v-model="data.maxShipped" />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('Serial')"
                     :options="invoiceOutSerialsOptions"
@@ -117,7 +117,7 @@ const onDataSaved = async (formData, requestResponse) => {
                     v-model="data.taxArea"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('Reference')"
                     type="textarea"
diff --git a/src/components/CreateNewCityForm.vue b/src/components/CreateNewCityForm.vue
index 45fa61dff..48e76d885 100644
--- a/src/components/CreateNewCityForm.vue
+++ b/src/components/CreateNewCityForm.vue
@@ -39,7 +39,7 @@ const onDataSaved = (dataSaved) => {
         @on-data-saved="onDataSaved($event)"
     >
         <template #form-inputs="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('Name')"
                     v-model="data.name"
diff --git a/src/components/CreateNewPostcodeForm.vue b/src/components/CreateNewPostcodeForm.vue
index 25a61a0ca..7ea171e53 100644
--- a/src/components/CreateNewPostcodeForm.vue
+++ b/src/components/CreateNewPostcodeForm.vue
@@ -91,7 +91,7 @@ const onProvinceCreated = async ({ name }, formData) => {
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('Postcode')"
                     v-model="data.code"
diff --git a/src/components/CreateNewProvinceForm.vue b/src/components/CreateNewProvinceForm.vue
index 2d626ed99..32a0675eb 100644
--- a/src/components/CreateNewProvinceForm.vue
+++ b/src/components/CreateNewProvinceForm.vue
@@ -39,7 +39,7 @@ const onDataSaved = (dataSaved) => {
         @on-data-saved="onDataSaved($event)"
     >
         <template #form-inputs="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('Name')"
                     v-model="data.name"
diff --git a/src/components/CreateThermographForm.vue b/src/components/CreateThermographForm.vue
index 061c47712..65a1c2679 100644
--- a/src/components/CreateThermographForm.vue
+++ b/src/components/CreateThermographForm.vue
@@ -53,7 +53,7 @@ const onDataSaved = (dataSaved) => {
         @on-data-saved="onDataSaved($event)"
     >
         <template #form-inputs="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('Identifier')"
                     v-model="data.thermographId"
diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index 74c4a9bc0..33c831e3f 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -1,7 +1,7 @@
 <script setup>
 import axios from 'axios';
 import { computed, ref, watch } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRouter, onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useValidator } from 'src/composables/useValidator';
@@ -97,6 +97,19 @@ defineExpose({
     vnPaginateRef,
 });
 
+onBeforeRouteLeave((to, from, next) => {
+    if (hasChanges.value)
+        quasar.dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('globals.unsavedPopup.title'),
+                message: t('globals.unsavedPopup.subtitle'),
+                promise: () => next(),
+            },
+        });
+    else next();
+});
+
 async function fetch(data) {
     resetData(data);
     emit('onFetch', data);
diff --git a/src/components/EditPictureForm.vue b/src/components/EditPictureForm.vue
index 8a22debda..cd6107aca 100644
--- a/src/components/EditPictureForm.vue
+++ b/src/components/EditPictureForm.vue
@@ -245,14 +245,14 @@ const makeRequest = async () => {
                 </div>
 
                 <div class="column">
-                    <VnRow class="row q-gutter-md q-mb-md">
+                    <VnRow>
                         <QOptionGroup
                             :options="uploadMethodsOptions"
                             type="radio"
                             v-model="uploadMethodSelected"
                         />
                     </VnRow>
-                    <VnRow class="row q-gutter-md q-mb-md">
+                    <VnRow>
                         <QFile
                             v-if="uploadMethodSelected === 'computer'"
                             ref="inputFileRef"
@@ -287,7 +287,7 @@ const makeRequest = async () => {
                             placeholder="https://"
                         />
                     </VnRow>
-                    <VnRow class="row q-gutter-md q-mb-md">
+                    <VnRow>
                         <VnSelect
                             :label="t('Orientation')"
                             :options="viewportTypes"
diff --git a/src/components/EditTableCellValueForm.vue b/src/components/EditTableCellValueForm.vue
index 9d56ba738..14709e884 100644
--- a/src/components/EditTableCellValueForm.vue
+++ b/src/components/EditTableCellValueForm.vue
@@ -82,7 +82,7 @@ const closeForm = () => {
             <span class="title">{{ t('Edit') }}</span>
             <span class="countLines">{{ ` ${rows.length} ` }}</span>
             <span class="title">{{ t('buy(s)') }}</span>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('Field to edit')"
                     :options="fieldsOptions"
diff --git a/src/components/FilterItemForm.vue b/src/components/FilterItemForm.vue
index 956acb7ea..1cf36deeb 100644
--- a/src/components/FilterItemForm.vue
+++ b/src/components/FilterItemForm.vue
@@ -151,7 +151,7 @@ const selectItem = ({ id }) => {
                 <QIcon name="close" size="sm" />
             </span>
             <h1 class="title">{{ t('Filter item') }}</h1>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput :label="t('entry.buys.name')" v-model="itemFilterParams.name" />
                 <VnInput :label="t('entry.buys.size')" v-model="itemFilterParams.size" />
                 <VnSelect
diff --git a/src/components/FilterTravelForm.vue b/src/components/FilterTravelForm.vue
index d1d0f5e8f..c84772d9b 100644
--- a/src/components/FilterTravelForm.vue
+++ b/src/components/FilterTravelForm.vue
@@ -144,7 +144,7 @@ const selectTravel = ({ id }) => {
                 <QIcon name="close" size="sm" />
             </span>
             <h1 class="title">{{ t('Filter travels') }}</h1>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('entry.basicData.agency')"
                     :options="agenciesOptions"
diff --git a/src/components/RegularizeStockForm.vue b/src/components/RegularizeStockForm.vue
index 4c23bd660..f34386fc4 100644
--- a/src/components/RegularizeStockForm.vue
+++ b/src/components/RegularizeStockForm.vue
@@ -49,7 +49,7 @@ const onDataSaved = (data) => {
         @on-data-saved="onDataSaved($event)"
     >
         <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QInput
                     :label="t('Type the visible quantity')"
                     v-model.number="data.quantity"
@@ -57,7 +57,7 @@ const onDataSaved = (data) => {
                     autofocus
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnSelect
                         :label="t('Warehouse')"
diff --git a/src/components/TransferInvoiceForm.vue b/src/components/TransferInvoiceForm.vue
index f307aa1f4..17c11d87e 100644
--- a/src/components/TransferInvoiceForm.vue
+++ b/src/components/TransferInvoiceForm.vue
@@ -118,13 +118,13 @@ const makeInvoice = async () => {
     />
     <QDialog ref="dialogRef">
         <FormPopup
-        @on-submit="makeInvoice()"
-        :title="t('Transfer invoice')"
-        :custom-submit-button-label="t('Transfer client')"
-        :default-cancel-button="false"
+            @on-submit="makeInvoice()"
+            :title="t('Transfer invoice')"
+            :custom-submit-button-label="t('Transfer client')"
+            :default-cancel-button="false"
         >
-        <template #form-inputs>
-                <VnRow class="row q-gutter-md q-mb-md">
+            <template #form-inputs>
+                <VnRow>
                     <VnSelect
                         :label="t('Client')"
                         :options="clientsOptions"
@@ -160,7 +160,7 @@ const makeInvoice = async () => {
                         :required="true"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :label="t('Class')"
                         :options="siiTypeInvoiceOutsOptions"
@@ -191,9 +191,12 @@ const makeInvoice = async () => {
                         :required="true"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div>
-                        <QCheckbox :label="t('Bill destination client')" v-model="checked" />
+                        <QCheckbox
+                            :label="t('Bill destination client')"
+                            v-model="checked"
+                        />
                         <QIcon name="info" class="cursor-info q-ml-sm" size="sm">
                             <QTooltip>{{ t('transferInvoiceInfo') }}</QTooltip>
                         </QIcon>
diff --git a/src/components/VnTable/VnChip.vue b/src/components/VnTable/VnChip.vue
index 74207b943..f70ba7423 100644
--- a/src/components/VnTable/VnChip.vue
+++ b/src/components/VnTable/VnChip.vue
@@ -35,7 +35,9 @@ function stopEventPropagation(event) {
             dense
             square
         >
-            <span v-if="!col.chip.icon">{{ row[col.name] }}</span>
+            <span v-if="!col.chip.icon">
+                {{ col.format ? col.format(row) : row[col.name] }}
+            </span>
             <QIcon v-else :name="col.chip.icon" color="primary-light" />
         </QChip>
     </span>
diff --git a/src/components/VnTable/VnColumn.vue b/src/components/VnTable/VnColumn.vue
index 3af58226f..9f6c6d53d 100644
--- a/src/components/VnTable/VnColumn.vue
+++ b/src/components/VnTable/VnColumn.vue
@@ -147,7 +147,7 @@ const col = computed(() => {
     }
     if (
         (newColumn.name.startsWith('is') || newColumn.name.startsWith('has')) &&
-        !newColumn.component
+        newColumn.component == null
     )
         newColumn.component = 'checkbox';
     if ($props.default && !newColumn.component) newColumn.component = $props.default;
diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index b30cb6af4..cb93e8229 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -75,6 +75,7 @@ const components = {
         attrs: {
             ...defaultAttrs,
             clearable: true,
+            type: 'number',
         },
         forceAttrs,
     },
diff --git a/src/components/VnTable/VnOrder.vue b/src/components/VnTable/VnOrder.vue
index 1e1dc9e01..98c7ab392 100644
--- a/src/components/VnTable/VnOrder.vue
+++ b/src/components/VnTable/VnOrder.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue';
 import { useArrayData } from 'composables/useArrayData';
-const model = defineModel({ type: Object, required: true });
+const model = defineModel({ type: Object });
 const $props = defineProps({
     name: {
         type: String,
@@ -56,7 +56,7 @@ defineExpose({ orderBy });
         <span :title="label">{{ label }}</span>
         <QChip
             v-if="name"
-            :label="!vertical && model?.index"
+            :label="!vertical ? model?.index : ''"
             :icon="
                 (model?.index || hover) && !vertical
                     ? model?.direction == 'DESC'
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index dead8a933..c01b946ed 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -96,9 +96,9 @@ const route = useRoute();
 const router = useRouter();
 const quasar = useQuasar();
 
-const DEFAULT_MODE = 'card';
+const CARD_MODE = 'card';
 const TABLE_MODE = 'table';
-const mode = ref(DEFAULT_MODE);
+const mode = ref(CARD_MODE);
 const selected = ref([]);
 const hasParams = ref(false);
 const routeQuery = JSON.parse(route?.query[$props.searchUrl] ?? '{}');
@@ -118,7 +118,7 @@ const tableModes = [
     {
         icon: 'grid_view',
         title: t('grid view'),
-        value: DEFAULT_MODE,
+        value: CARD_MODE,
         disable: $props.disableOption?.card,
     },
 ];
@@ -128,7 +128,10 @@ onBeforeMount(() => {
 });
 
 onMounted(() => {
-    mode.value = quasar.platform.is.mobile ? DEFAULT_MODE : $props.defaultMode;
+    mode.value =
+        quasar.platform.is.mobile && !$props.disableOption?.card
+            ? CARD_MODE
+            : $props.defaultMode;
     stateStore.rightDrawer = true;
     columnsVisibilitySkiped.value = [
         ...splittedColumns.value.columns
@@ -230,6 +233,7 @@ function stopEventPropagation(event) {
 }
 
 function reload(params) {
+    selected.value = [];
     CrudModelRef.value.reload(params);
 }
 
@@ -281,7 +285,9 @@ defineExpose({
                 <template #body>
                     <div
                         class="row no-wrap flex-center"
-                        v-for="col of splittedColumns.columns"
+                        v-for="col of splittedColumns.columns.filter(
+                            (c) => c.columnFilter ?? true
+                        )"
                         :key="col.id"
                     >
                         <VnTableFilter
@@ -378,7 +384,7 @@ defineExpose({
                         />
                     </template>
                     <template #header-cell="{ col }">
-                        <QTh v-if="col.visible ?? true" auto-width>
+                        <QTh v-if="col.visible ?? true">
                             <div
                                 class="column self-start q-ml-xs ellipsis"
                                 :class="`text-${col?.align ?? 'left'}`"
@@ -403,6 +409,7 @@ defineExpose({
                                     :data-key="$attrs['data-key']"
                                     v-model="params[columnName(col)]"
                                     :search-url="searchUrl"
+                                    class="full-width"
                                 />
                             </div>
                         </QTh>
@@ -427,7 +434,7 @@ defineExpose({
                         <QTd
                             auto-width
                             class="no-margin q-px-xs"
-                            :class="[getColAlign(col), col.class, col.columnField?.class]"
+                            :class="[getColAlign(col), col.columnClass]"
                             v-if="col.visible ?? true"
                             @click.ctrl="
                                 ($event) =>
@@ -455,6 +462,7 @@ defineExpose({
                         >
                             <QBtn
                                 v-for="(btn, index) of col.actions"
+                                v-show="btn.show ? btn.show(row) : true"
                                 :key="index"
                                 :title="btn.title"
                                 :icon="btn.icon"
diff --git a/src/components/common/VnComponent.vue b/src/components/common/VnComponent.vue
index d7719034a..f512b846a 100644
--- a/src/components/common/VnComponent.vue
+++ b/src/components/common/VnComponent.vue
@@ -17,15 +17,17 @@ const $props = defineProps({
     },
 });
 
+let mixed;
 const componentArray = computed(() => {
     if (typeof $props.prop === 'object') return [$props.prop];
     return $props.prop;
 });
 
 function mix(toComponent) {
+    if (mixed) return mixed;
     const { component, attrs, event } = toComponent;
     const customComponent = $props.components[component];
-    return {
+    mixed = {
         component: customComponent?.component ?? component,
         attrs: {
             ...toValueAttrs(attrs),
@@ -35,6 +37,7 @@ function mix(toComponent) {
         },
         event: event ?? customComponent?.event,
     };
+    return mixed;
 }
 
 function toValueAttrs(attrs) {
diff --git a/src/components/common/VnInputTime.vue b/src/components/common/VnInputTime.vue
index adb6ef68c..a59f0e9e8 100644
--- a/src/components/common/VnInputTime.vue
+++ b/src/components/common/VnInputTime.vue
@@ -50,7 +50,7 @@ const formattedTime = computed({
             }
             if (!props.timeOnly) {
                 const [hh, mm] = time.split(':');
-                const date = new Date(model.value ? model.value : null);
+                const date = model.value ?? Date.vnNew();
                 date.setHours(hh, mm, 0);
                 time = date?.toISOString();
             }
@@ -62,7 +62,7 @@ const formattedTime = computed({
 function dateToTime(newDate) {
     return date.formatDate(new Date(newDate), dateFormat);
 }
-
+const timeField = ref();
 watch(
     () => model.value,
     (val) => (formattedTime.value = val),
diff --git a/src/pages/Account/AccountMain.vue b/src/components/common/VnSectionMain.vue
similarity index 69%
rename from src/pages/Account/AccountMain.vue
rename to src/components/common/VnSectionMain.vue
index f0dc2e500..0c1641ce1 100644
--- a/src/pages/Account/AccountMain.vue
+++ b/src/components/common/VnSectionMain.vue
@@ -1,8 +1,16 @@
 <script setup>
 import { useStateStore } from 'stores/useStateStore';
 import LeftMenu from 'components/LeftMenu.vue';
+import { onMounted } from 'vue';
 
 const stateStore = useStateStore();
+const $props = defineProps({
+    leftDrawer: {
+        type: Boolean,
+        default: true,
+    },
+});
+onMounted(() => (stateStore.leftDrawer = $props.leftDrawer));
 </script>
 
 <template>
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 3cba466a3..34bbd475e 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -27,7 +27,7 @@ const $props = defineProps({
     },
     url: {
         type: String,
-        default: '',
+        default: null,
     },
     filterOptions: {
         type: [Array],
@@ -113,7 +113,7 @@ function setOptions(data) {
 }
 
 function filter(val, options) {
-    const search = val.toString().toLowerCase();
+    const search = val?.toString()?.toLowerCase();
 
     if (!search) return options;
 
@@ -196,8 +196,8 @@ async function filterHandler(val, update) {
         map-options
         use-input
         @filter="filterHandler"
-        hide-selected
-        fill-input
+        :hide-selected="$attrs['hide-selected'] ?? true"
+        :fill-input="$attrs['fill-input'] ?? true"
         ref="vnSelectRef"
         lazy-rules
         :class="{ required: $attrs.required }"
diff --git a/src/components/common/VnSelectCache.vue b/src/components/common/VnSelectCache.vue
index a9acd7b9f..29cf22dc5 100644
--- a/src/components/common/VnSelectCache.vue
+++ b/src/components/common/VnSelectCache.vue
@@ -10,6 +10,7 @@ const $props = defineProps({
     find: {
         type: [String, Object],
         default: null,
+        description: 'search in row to add default options',
     },
 });
 const options = ref([]);
diff --git a/src/components/common/VnTitle.vue b/src/components/common/VnTitle.vue
index 29b4059f8..1fbd43972 100644
--- a/src/components/common/VnTitle.vue
+++ b/src/components/common/VnTitle.vue
@@ -7,7 +7,7 @@ defineProps({
 </script>
 <template>
     <div :class="$q.screen.gt.md ? 'q-pb-lg' : 'q-pb-md'">
-        <div class="header-link">
+        <div class="header-link" :style="{ cursor: url ? 'pointer' : 'default' }">
             <a :href="url" :class="url ? 'link' : 'color-vn-text'">
                 {{ text }}
                 <QIcon v-if="url" :name="icon" />
diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 7792ed2cd..90ac856e5 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -120,7 +120,7 @@ const toModule = computed(() =>
                         :icon="iconModule"
                         color="white"
                         class="link"
-                        :to="toModule"
+                        :to="$attrs['to-module'] ?? toModule"
                     >
                         <QTooltip>
                             {{ t('globals.goToModuleIndex') }}
diff --git a/src/components/ui/QCalendarMonthWrapper.vue b/src/components/ui/QCalendarMonthWrapper.vue
index bced893fe..07ca18bef 100644
--- a/src/components/ui/QCalendarMonthWrapper.vue
+++ b/src/components/ui/QCalendarMonthWrapper.vue
@@ -52,8 +52,8 @@ const containerClasses = computed(() => {
     --calendar-border-current: #84d0e2 2px solid;
     --calendar-current-color-dark: #84d0e2;
     // Colores de fondo del calendario en dark mode
-    --calendar-outside-background-dark: #222;
-    --calendar-background-dark: #222;
+    --calendar-outside-background-dark: var(--vn-section-color);
+    --calendar-background-dark: var(--vn-section-color);
 }
 
 // Clases para modificar el color de fecha seleccionada en componente QCalendarMonth
@@ -70,8 +70,27 @@ const containerClasses = computed(() => {
     text-transform: capitalize;
 }
 
+.q-calendar-month__head--workweek,
+.q-calendar-month__head--weekday,
+// .q-calendar-month__workweek.q-past-day,
+.q-calendar-month__week :nth-child(6),
+:nth-child(7) {
+    color: var(--vn-label-color);
+}
+
+.q-calendar-month__head--weekdays > div[aria-label='miércoles'] > span {
+    /* color: transparent; */
+    visibility: hidden;
+    // position: absolute;
+}
+.q-calendar-month__head--weekdays > div[aria-label='miércoles'] > span:after {
+    content: 'X';
+    visibility: visible;
+    left: 33%;
+    position: absolute;
+}
 .transparent-background {
-    --calendar-background-dark: transparent;
+    // --calendar-background-dark: transparent;
     --calendar-background: transparent;
     --calendar-outside-background-dark: transparent;
 }
@@ -110,11 +129,6 @@ const containerClasses = computed(() => {
             cursor: pointer;
         }
     }
-    .q-calendar-month__week--days > div:nth-child(6),
-    .q-calendar-month__week--days > div:nth-child(7) {
-        // Cambia el color de los días sábado y domingo
-        color: #777777;
-    }
 
     .q-calendar-month__week--wrapper {
         margin-bottom: 4px;
@@ -124,6 +138,7 @@ const containerClasses = computed(() => {
         height: 32px;
         display: flex;
         justify-content: center;
+        color: var(--vn-label-color);
     }
 
     .q-calendar__button--bordered {
@@ -147,7 +162,7 @@ const containerClasses = computed(() => {
     .q-calendar-month__head--workweek,
     .q-calendar-month__head--weekday.q-calendar__center.q-calendar__ellipsis {
         text-transform: capitalize;
-        color: $color-font-secondary;
+        color: var(--vn-label-color);
         font-weight: bold;
         font-size: 0.8rem;
         text-align: center;
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index b93ca7121..27b6e7b34 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -110,9 +110,11 @@ async function search(evt) {
 
     store.filter.where = {};
     isLoading.value = true;
-    const filter = { ...userParams.value };
+    const filter = { ...userParams.value, ...$props.modelValue };
     store.userParamsChanged = true;
-    const { params: newParams } = await arrayData.addFilter({ params: userParams.value });
+    const { params: newParams } = await arrayData.addFilter({
+        params: filter,
+    });
     userParams.value = newParams;
 
     if (!$props.showAll && !Object.values(filter).length) store.data = [];
diff --git a/src/components/ui/VnRow.vue b/src/components/ui/VnRow.vue
index a2f89ff3f..f68052455 100644
--- a/src/components/ui/VnRow.vue
+++ b/src/components/ui/VnRow.vue
@@ -1,5 +1,8 @@
+<script setup>
+defineProps({ wrap: { type: Boolean, default: false } });
+</script>
 <template>
-    <div class="vn-row q-gutter-md q-mb-md">
+    <div class="vn-row q-gutter-md q-mb-md" :class="{ wrap }">
         <slot></slot>
     </div>
 </template>
diff --git a/src/css/app.scss b/src/css/app.scss
index 9e1537472..401fa8a72 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -153,6 +153,12 @@ select:-webkit-autofill {
     background-color: var(--vn-section-color);
 }
 
+.q-table td[shrink] {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 80px;
+}
+
 .tr-header {
     color: var(--vn-label-color);
 }
@@ -235,27 +241,23 @@ input::-webkit-inner-spin-button {
 }
 
 .q-table {
-    thead,
-    tbody {
-        th {
-            .q-select {
-                max-width: 120px;
-            }
-        }
-        td {
-            padding: 1px 10px 1px 10px;
-            max-width: 100px;
-            div span {
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
+    th,
+    td {
+        padding: 1px 10px 1px 10px;
+        max-width: 100px;
+        div span {
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
         }
-        .expand {
-            max-width: 400px;
-        }
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    .shrink {
+        max-width: 75px;
+    }
+    .expand {
+        max-width: 400px;
     }
 }
diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 6943252c9..e4e06ffac 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -254,6 +254,9 @@ globals:
     comment: Comment
     observations: Observations
     goToModuleIndex: Go to module index
+    unsavedPopup:
+        title: Unsaved changes will be lost
+        subtitle: Are you sure exit without saving?
 errors:
     statusUnauthorized: Access denied
     statusInternalServerError: An internal server error has ocurred
@@ -386,8 +389,8 @@ customer:
     extendedList:
         tableVisibleColumns:
             id: Identifier
-            name: Comercial name
-            socialName: Business name
+            name: Name
+            socialName: Social name
             fi: Tax number
             salesPersonFk: Salesperson
             credit: Credit
@@ -997,18 +1000,6 @@ route:
             shipped: Preparation date
             viewCmr: View CMR
             downloadCmrs: Download CMRs
-    columnLabels:
-        Id: Id
-        vehicle: Vehicle
-        description: Description
-        isServed: Served
-        worker: Worker
-        date: Date
-        started: Started
-        actions: Actions
-        agency: Agency
-        volume: Volume
-        finished: Finished
 supplier:
     list:
         payMethod: Pay method
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index f32562313..4cdc13f92 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -256,6 +256,9 @@ globals:
     comment: Comentario
     observations: Observaciones
     goToModuleIndex: Ir al índice del módulo
+    unsavedPopup:
+        title: Los cambios que no haya guardado se perderán
+        subtitle: ¿Seguro que quiere salir sin guardar?
 errors:
     statusUnauthorized: Acceso denegado
     statusInternalServerError: Ha ocurrido un error interno del servidor
@@ -385,7 +388,7 @@ customer:
     extendedList:
         tableVisibleColumns:
             id: Identificador
-            name: Nombre Comercial
+            name: Nombre
             socialName: Razón social
             fi: NIF / CIF
             salesPersonFk: Comercial
@@ -978,18 +981,6 @@ route:
             shipped: Fecha preparación
             viewCmr: Ver CMR
             downloadCmrs: Descargar CMRs
-    columnLabels:
-        Id: Id
-        vehicle: Vehículo
-        description: Descripción
-        isServed: Servida
-        worker: Trabajador
-        date: Fecha
-        started: Iniciada
-        actions: Acciones
-        agency: Agencia
-        volume: Volumen
-        finished: Finalizada
 supplier:
     list:
         payMethod: Método de pago
diff --git a/src/pages/Account/Alias/AliasCreateForm.vue b/src/pages/Account/Alias/AliasCreateForm.vue
index d4d61a804..b21099555 100644
--- a/src/pages/Account/Alias/AliasCreateForm.vue
+++ b/src/pages/Account/Alias/AliasCreateForm.vue
@@ -34,12 +34,12 @@ const onDataSaved = ({ id }) => {
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnInput v-model="data.alias" :label="t('mailAlias.name')" />
                 </div>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnInput
                         v-model="data.description"
diff --git a/src/pages/Account/Card/AccountMailAliasCreateForm.vue b/src/pages/Account/Card/AccountMailAliasCreateForm.vue
index 8f6d57091..f0f69dcba 100644
--- a/src/pages/Account/Card/AccountMailAliasCreateForm.vue
+++ b/src/pages/Account/Card/AccountMailAliasCreateForm.vue
@@ -33,7 +33,7 @@ const aliasOptions = ref([]);
         @on-submit="emit('onSubmitCreateAlias', aliasFormData)"
     >
         <template #form-inputs>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnSelect
                         :label="t('account.card.alias')"
diff --git a/src/pages/Account/Role/Card/RoleBasicData.vue b/src/pages/Account/Role/Card/RoleBasicData.vue
index 1f3b3b6da..cddf755f0 100644
--- a/src/pages/Account/Role/Card/RoleBasicData.vue
+++ b/src/pages/Account/Role/Card/RoleBasicData.vue
@@ -10,12 +10,12 @@ const { t } = useI18n();
 <template>
     <FormModel :url="`VnRoles/${route.params.id}`" model="VnRole" auto-load>
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnInput v-model="data.name" :label="t('role.card.name')" />
                 </div>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnInput
                         v-model="data.description"
@@ -23,7 +23,7 @@ const { t } = useI18n();
                     />
                 </div>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <QCheckbox :label="t('mailAlias.isPublic')" v-model="data.isPublic" />
                 </div>
diff --git a/src/pages/Account/Role/Card/RoleForm.vue b/src/pages/Account/Role/Card/RoleForm.vue
index d6fc16598..7f4a1da34 100644
--- a/src/pages/Account/Role/Card/RoleForm.vue
+++ b/src/pages/Account/Role/Card/RoleForm.vue
@@ -21,12 +21,12 @@ const { t } = useI18n();
         "
     >
         <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnInput v-model="data.name" :label="t('role.card.name')" />
                 </div>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnInput
                         v-model="data.description"
diff --git a/src/pages/Account/Role/Card/SubRoleCreateForm.vue b/src/pages/Account/Role/Card/SubRoleCreateForm.vue
index 89eceed62..a22f70812 100644
--- a/src/pages/Account/Role/Card/SubRoleCreateForm.vue
+++ b/src/pages/Account/Role/Card/SubRoleCreateForm.vue
@@ -33,7 +33,7 @@ const rolesOptions = ref([]);
         @on-submit="emit('onSubmitCreateSubrole', subRoleFormData)"
     >
         <template #form-inputs>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnSelect
                         :label="t('account.card.role')"
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index de0dc50c3..d29ed139e 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -74,7 +74,7 @@ const statesFilter = {
         :reload="true"
     >
         <template #form="{ data, validate, filter }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="data.client.name"
                     :label="t('claim.customer')"
@@ -82,7 +82,7 @@ const statesFilter = {
                 />
                 <VnInputDate v-model="data.created" :label="t('claim.created')" />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('claim.assignedTo')"
                     v-model="data.workerFk"
@@ -120,7 +120,7 @@ const statesFilter = {
                 >
                 </QSelect>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QInput
                     v-model.number="data.packages"
                     :label="t('globals.packages')"
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 05698debe..8c5c6a3d0 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -44,7 +44,7 @@ const columns = computed(() => [
                 fields: ['id', 'name'],
             },
         },
-        class: 'expand',
+        columnClass: 'expand',
     },
     {
         align: 'left',
diff --git a/src/pages/Claim/ClaimMain.vue b/src/pages/Claim/ClaimMain.vue
deleted file mode 100644
index f0dc2e500..000000000
--- a/src/pages/Claim/ClaimMain.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 6f37544e8..cd1ce9ebd 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -67,7 +67,7 @@ const filterOptions = {
 
     <FormModel :url="`Clients/${route.params.id}`" auto-load model="customer">
         <template #form="{ data, validate, filter }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('globals.name')"
                     :rules="validate('client.socialName')"
@@ -88,7 +88,7 @@ const filterOptions = {
                     v-model="data.businessTypeFk"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('customer.basicData.contact')"
                     :rules="validate('client.contact')"
@@ -111,7 +111,7 @@ const filterOptions = {
                     </template>
                 </VnInput>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('customer.basicData.phone')"
                     :rules="validate('client.phone')"
@@ -125,7 +125,7 @@ const filterOptions = {
                     v-model="data.mobile"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QSelect
                     :input-debounce="0"
                     :label="t('customer.basicData.salesPerson')"
@@ -162,7 +162,7 @@ const filterOptions = {
                     :input-debounce="0"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QSelect
                     :input-debounce="0"
                     :label="t('customer.basicData.previousClient')"
diff --git a/src/pages/Customer/Card/CustomerBillingData.vue b/src/pages/Customer/Card/CustomerBillingData.vue
index 63bbd872c..b01dc4523 100644
--- a/src/pages/Customer/Card/CustomerBillingData.vue
+++ b/src/pages/Customer/Card/CustomerBillingData.vue
@@ -47,7 +47,7 @@ const getBankEntities = (data, formData) => {
         model="customer"
     >
         <template #form="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('Billing data')"
                     :options="payMethods"
@@ -59,7 +59,7 @@ const getBankEntities = (data, formData) => {
                 <VnInput :label="t('Due day')" clearable v-model="data.dueDay" />
             </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput :label="t('IBAN')" clearable v-model="data.iban">
                     <template #append>
                         <QIcon name="info" class="cursor-info">
@@ -94,7 +94,7 @@ const getBankEntities = (data, formData) => {
                 </VnSelectDialog>
             </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QCheckbox :label="t('Received LCR')" v-model="data.hasLcr" />
                 <QCheckbox :label="t('VNL core received')" v-model="data.hasCoreVnl" />
                 <QCheckbox :label="t('VNL B2B received')" v-model="data.hasSepaVnl" />
diff --git a/src/pages/Customer/Card/CustomerConsumption.vue b/src/pages/Customer/Card/CustomerConsumption.vue
index 1ee771bf8..98a3115da 100644
--- a/src/pages/Customer/Card/CustomerConsumption.vue
+++ b/src/pages/Customer/Card/CustomerConsumption.vue
@@ -1,13 +1,14 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-
+import CustomerConsumptionFilter from './CustomerConsumptionFilter.vue';
+import { useStateStore } from 'src/stores/useStateStore';
 const { t } = useI18n();
 </script>
 
 <template>
-    <h5 class="flex justify-center color-vn-label">
-        {{ t('Enter a new search') }}
-    </h5>
+    <Teleport to="#right-panel" v-if="useStateStore().isHeaderMounted()">
+        <CustomerConsumptionFilter data-key="CustomerConsumption" />
+    </Teleport>
 </template>
 
 <i18n>
diff --git a/src/pages/Customer/Card/CustomerConsumptionFilter.vue b/src/pages/Customer/Card/CustomerConsumptionFilter.vue
new file mode 100644
index 000000000..4d2c5ff3c
--- /dev/null
+++ b/src/pages/Customer/Card/CustomerConsumptionFilter.vue
@@ -0,0 +1,91 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import { QItem } from 'quasar';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import { QItemSection } from 'quasar';
+
+const { t } = useI18n();
+defineProps({ dataKey: { type: String, required: true } });
+</script>
+<template>
+    <VnFilterPanel :data-key="dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params }">
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('params.item')"
+                        v-model="params.itemId"
+                        is-outlined
+                        lazy-rules
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        v-model="params.buyerId"
+                        url="TicketRequests/getItemTypeWorker"
+                        :label="t('params.buyer')"
+                        option-value="id"
+                        option-label="nickname"
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <!--It's required to include the relation category !! There's 413 records in production-->
+                <QItemSection>
+                    <VnSelect
+                        v-model="params.typeId"
+                        url="ItemTypes"
+                        :label="t('params.type')"
+                        option-label="name"
+                        option-value="id"
+                        dense
+                        outlined
+                        rounded
+                    >
+                    </VnSelect>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        url="ItemCategories"
+                        :label="t('params.category')"
+                        option-label="name"
+                        option-value="id"
+                        v-model="params.categoryId"
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnFilterPanel>
+</template>
+<i18n>
+en:
+    params:
+        item: Item id
+        buyer: Buyer
+        type: Type
+        category: Category
+es:
+    params:
+        item: Id artículo
+        buyer: Comprador
+        type: Tipo
+        category: Categoría
+</i18n>
diff --git a/src/pages/Customer/Card/CustomerCreditOpinion.vue b/src/pages/Customer/Card/CustomerCreditOpinion.vue
index 5d8e5727b..9c060b1a5 100644
--- a/src/pages/Customer/Card/CustomerCreditOpinion.vue
+++ b/src/pages/Customer/Card/CustomerCreditOpinion.vue
@@ -88,7 +88,7 @@ watch(
         :url-create="`Clients/${route.params.id}/setRating`"
     >
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnInput
                         :label="t('Rating')"
diff --git a/src/pages/Customer/Card/CustomerCredits.vue b/src/pages/Customer/Card/CustomerCredits.vue
index 755ba3b9a..b93e1f340 100644
--- a/src/pages/Customer/Card/CustomerCredits.vue
+++ b/src/pages/Customer/Card/CustomerCredits.vue
@@ -1,20 +1,14 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
-
+import { useRoute } from 'vue-router';
 import { QBtn } from 'quasar';
-
 import { toCurrency, toDateHourMin } from 'src/filters';
-
-import FetchData from 'components/FetchData.vue';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnTable from 'components/VnTable/VnTable.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
 
 const { t } = useI18n();
 const route = useRoute();
-const router = useRouter();
-
-const rows = ref([]);
 
 const filter = {
     include: [
@@ -26,113 +20,63 @@ const filter = {
             },
         },
     ],
-    where: { clientFk: route.params.id },
+    where: { clientFk: +route.params.id },
     order: ['created DESC'],
     limit: 20,
 };
 
-const tableColumnComponents = {
-    created: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    employee: {
-        component: QBtn,
-        props: () => ({ flat: true, color: 'blue', noCaps: true }),
-        event: () => {},
-    },
-    amount: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-};
-
 const columns = computed(() => [
     {
         align: 'left',
-        field: 'created',
-        label: t('Since'),
         name: 'created',
-        format: (value) => toDateHourMin(value),
+        label: t('Since'),
+        format: ({ created }) => toDateHourMin(created),
     },
     {
         align: 'left',
-        field: (value) => value.worker.user.name,
         label: t('Employee'),
         name: 'employee',
     },
     {
         align: 'left',
-        field: 'amount',
         label: t('Credit'),
         name: 'amount',
-        format: (value) => toCurrency(value),
+        format: ({ amount }) => toCurrency(amount),
     },
 ]);
-
-const toCustomerCreditCreate = () => {
-    router.push({ name: 'CustomerCreditCreate' });
-};
 </script>
-
 <template>
-    <FetchData
-        :filter="filter"
-        @on-fetch="(data) => (rows = data)"
-        auto-load
+    <!-- Column titles are missing -->
+    <VnTable
+        ref="tableRef"
+        data-key="ClientCredit"
         url="ClientCredits"
-    />
-
-    <div class="full-width flex justify-center">
-        <QCard class="card-width q-pa-lg">
-            <QTable
-                :columns="columns"
-                :pagination="{ rowsPerPage: 12 }"
-                :rows="rows"
-                class="full-width q-mt-md"
-                row-key="id"
-                v-if="rows?.length"
-            >
-                <template #body-cell="props">
-                    <QTd :props="props">
-                        <QTr :props="props" class="cursor-pointer">
-                            <component
-                                :is="tableColumnComponents[props.col.name].component"
-                                @click="
-                                    tableColumnComponents[props.col.name].event(props)
-                                "
-                                class="rounded-borders q-pa-sm"
-                                v-bind="
-                                    tableColumnComponents[props.col.name].props(props)
-                                "
-                            >
-                                {{ props.value }}
-                                <WorkerDescriptorProxy
-                                    :id="props.row.workerFk"
-                                    v-if="props.col.name === 'employee'"
-                                />
-                            </component>
-                        </QTr>
-                    </QTd>
-                </template>
-            </QTable>
-
-            <h5 class="flex justify-center color-vn-label" v-else>
-                {{ t('globals.noResults') }}
-            </h5>
-        </QCard>
-    </div>
-
+        :filter="filter"
+        :columns="columns"
+        default-mode="table"
+        auto-load
+        :right-search="false"
+        :is-editable="false"
+        :use-model="true"
+        :column-search="false"
+        :disable-option="{ card: true }"
+    >
+        <template #column-employee="{ row }">
+            <VnUserLink :name="row?.worker?.user?.name" :worker-id="row.worker?.id" />
+        </template>
+    </VnTable>
     <QPageSticky :offset="[18, 18]">
-        <QBtn @click.stop="toCustomerCreditCreate()" color="primary" fab icon="add" />
+        <QBtn
+            @click.stop="$router.push({ name: 'CustomerCreditCreate' })"
+            color="primary"
+            fab
+            icon="add"
+        />
         <QTooltip>
             {{ t('New credit') }}
         </QTooltip>
     </QPageSticky>
 </template>
-
 <i18n>
 es:
     Since: Desde
diff --git a/src/pages/Customer/Card/CustomerFiscalData.vue b/src/pages/Customer/Card/CustomerFiscalData.vue
index a7cdfafc5..8263b68cc 100644
--- a/src/pages/Customer/Card/CustomerFiscalData.vue
+++ b/src/pages/Customer/Card/CustomerFiscalData.vue
@@ -40,7 +40,7 @@ function handleLocation(data, location) {
         model="customer"
     >
         <template #form="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('Social name')"
                     :required="true"
@@ -57,11 +57,11 @@ function handleLocation(data, location) {
                 <VnInput :label="t('Tax number')" clearable v-model="data.fi" />
             </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput :label="t('Street')" clearable v-model="data.street" />
             </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('Sage tax type')"
                     :options="typesTaxes"
@@ -91,7 +91,7 @@ function handleLocation(data, location) {
                 </VnSelect>
             </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnLocation
                     :rules="validate('Worker.postcode')"
                     :roles-allowed-to-create="['deliveryAssistant']"
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index 86de5217e..15bf19b48 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -9,7 +9,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import CustomerSummaryTable from 'src/pages/Customer/components/CustomerSummaryTable.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
-
+import VnRow from 'src/components/ui/VnRow.vue';
 const route = useRoute();
 const { t } = useI18n();
 
@@ -131,41 +131,33 @@ const creditWarning = computed(() => {
                     :url="`#/customer/${entityId}/fiscal-data`"
                     :text="t('customer.summary.fiscalData')"
                 />
-                <QCheckbox
-                    :label="t('customer.summary.isEqualizated')"
-                    v-model="entity.isEqualizated"
-                    :disable="true"
-                />
-                <QCheckbox
-                    :label="t('customer.summary.isActive')"
-                    v-model="entity.isActive"
-                    :disable="true"
-                />
-                <QCheckbox
-                    :label="t('customer.summary.invoiceByAddress')"
-                    v-model="entity.hasToInvoiceByAddress"
-                    :disable="true"
-                />
-                <QCheckbox
-                    :label="t('customer.summary.verifiedData')"
-                    v-model="entity.isTaxDataChecked"
-                    :disable="true"
-                />
-                <QCheckbox
-                    :label="t('customer.summary.hasToInvoice')"
-                    v-model="entity.hasToInvoice"
-                    :disable="true"
-                />
-                <QCheckbox
-                    :label="t('customer.summary.notifyByEmail')"
-                    v-model="entity.isToBeMailed"
-                    :disable="true"
-                />
-                <QCheckbox
-                    :label="t('customer.summary.vies')"
-                    v-model="entity.isVies"
-                    :disable="true"
-                />
+                <VnRow>
+                    <VnLv
+                        :label="t('customer.summary.isEqualizated')"
+                        :value="entity.isEqualizated"
+                    />
+                    <VnLv
+                        :label="t('customer.summary.isActive')"
+                        :value="entity.isActive"
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnLv
+                        :label="t('customer.summary.verifiedData')"
+                        :value="entity.isTaxDataChecked"
+                    />
+                    <VnLv
+                        :label="t('customer.summary.hasToInvoice')"
+                        :value="entity.hasToInvoice"
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnLv
+                        :label="t('customer.summary.notifyByEmail')"
+                        :value="entity.isToBeMailed"
+                    />
+                    <VnLv :label="t('customer.summary.vies')" :value="entity.isVies" />
+                </VnRow>
             </QCard>
             <QCard class="vn-one">
                 <VnTitle
@@ -178,23 +170,18 @@ const creditWarning = computed(() => {
                 />
                 <VnLv :label="t('customer.summary.bankAccount')" :value="entity.iban" />
                 <VnLv :label="t('customer.summary.dueDay')" :value="entity.dueDay" />
-                <QCheckbox
-                    style="padding: 0"
-                    :label="t('customer.summary.hasLcr')"
-                    v-model="entity.hasLcr"
-                    :disable="true"
-                />
-                <QCheckbox
-                    :label="t('customer.summary.hasCoreVnl')"
-                    v-model="entity.hasCoreVnl"
-                    :disable="true"
-                />
+                <VnRow class="q-mt-sm" wrap>
+                    <VnLv :label="t('customer.summary.hasLcr')" :value="entity.hasLcr" />
+                    <VnLv
+                        :label="t('customer.summary.hasCoreVnl')"
+                        :value="entity.hasCoreVnl"
+                    />
 
-                <QCheckbox
-                    :label="t('customer.summary.hasB2BVnl')"
-                    v-model="entity.hasSepaVnl"
-                    :disable="true"
-                />
+                    <VnLv
+                        :label="t('customer.summary.hasB2BVnl')"
+                        :value="entity.hasSepaVnl"
+                    />
+                </VnRow>
             </QCard>
             <QCard class="vn-one" v-if="entity.defaultAddress">
                 <VnTitle
diff --git a/src/pages/Customer/Card/CustomerUnpaid.vue b/src/pages/Customer/Card/CustomerUnpaid.vue
index a9d4a3d66..5b9a6cde2 100644
--- a/src/pages/Customer/Card/CustomerUnpaid.vue
+++ b/src/pages/Customer/Card/CustomerUnpaid.vue
@@ -134,7 +134,7 @@ watch(
     <div class="full-width flex justify-center">
         <QCard class="card-width q-pa-lg">
             <QForm>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <QCheckbox :label="t('Unpaid client')" v-model="unpaidClient" />
                     </div>
diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue
index 80bfd1efe..b0de842f9 100644
--- a/src/pages/Customer/CustomerCreate.vue
+++ b/src/pages/Customer/CustomerCreate.vue
@@ -48,7 +48,7 @@ function handleLocation(data, location) {
             url-create="Clients/createWithUser"
         >
             <template #form="{ data, validate }">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <QInput :label="t('Comercial name')" v-model="data.name" />
                     <VnSelect
                         :label="t('Salesperson')"
@@ -59,7 +59,7 @@ function handleLocation(data, location) {
                         v-model="data.salesPersonFk"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :label="t('Business type')"
                         :options="businessTypesOptions"
@@ -70,21 +70,21 @@ function handleLocation(data, location) {
                     />
                     <QInput v-model="data.fi" :label="t('Tax number')" />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <QInput
                         :label="t('Business name')"
                         :rules="validate('client.socialName')"
                         v-model="data.socialName"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <QInput
                         :label="t('Street')"
                         :rules="validate('client.street')"
                         v-model="data.street"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnLocation
                         :rules="validate('Worker.postcode')"
                         :roles-allowed-to-create="['deliveryAssistant']"
@@ -95,7 +95,7 @@ function handleLocation(data, location) {
                     </VnLocation>
                 </VnRow>
 
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <QInput v-model="data.userName" :label="t('Web user')" />
                     <QInput
                         :label="t('Email')"
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index a9e4d978e..a82f1fc0e 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -42,9 +42,7 @@ const columns = computed(() => [
         name: 'name',
         isTitle: true,
         create: true,
-        columnField: {
-            class: 'expand',
-        },
+        columnClass: 'expand',
     },
     {
         align: 'left',
@@ -52,9 +50,7 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.socialName'),
         isTitle: true,
         create: true,
-        columnField: {
-            class: 'expand',
-        },
+        columnClass: 'expand',
     },
     {
         align: 'left',
@@ -136,9 +132,7 @@ const columns = computed(() => [
         columnFilter: {
             inWhere: true,
         },
-        columnField: {
-            class: 'expand',
-        },
+        columnClass: 'expand',
     },
     {
         align: 'left',
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
deleted file mode 100644
index f0dc2e500..000000000
--- a/src/pages/Customer/CustomerMain.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulter.vue b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
index 693b016fb..11f6362f8 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
@@ -1,9 +1,8 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { QBtn, QCheckbox, useQuasar } from 'quasar';
+import { useQuasar } from 'quasar';
 import { toCurrency, toDate, dateRange } from 'filters/index';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import CustomerNotificationsFilter from './CustomerDefaulterFilter.vue';
 import CustomerBalanceDueTotal from './CustomerBalanceDueTotal.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
@@ -11,8 +10,9 @@ import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.v
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import CustomerDefaulterAddObservation from './CustomerDefaulterAddObservation.vue';
-import axios from 'axios';
+import DepartmentDescriptorProxy from 'src/pages/Department/Card/DepartmentDescriptorProxy.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
 
 const { t } = useI18n();
 const quasar = useQuasar();
@@ -21,175 +21,139 @@ const dataRef = ref(null);
 const balanceDueTotal = ref(0);
 const selected = ref([]);
 
-const tableColumnComponents = {
-    clientFk: {
-        component: QBtn,
-        props: () => ({ flat: true, class: 'link', noCaps: true }),
-        event: () => {},
-    },
-    isWorker: {
-        component: QCheckbox,
-        props: (prop) => ({
-            disable: true,
-            'model-value': Boolean(prop.value),
-        }),
-        event: () => {},
-    },
-    salesPerson: {
-        component: QBtn,
-        props: () => ({ flat: true, class: 'link', noCaps: true }),
-        event: () => {},
-    },
-    departmentName: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    country: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    payMethod: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    balance: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    author: {
-        component: QBtn,
-        props: () => ({ flat: true, class: 'link', noCaps: true }),
-        event: () => {},
-    },
-    lastObservation: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    date: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    credit: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    from: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    finished: {
-        component: QCheckbox,
-
-        props: (prop) => ({
-            disable: true,
-            'model-value': prop.value,
-        }),
-        event: () => {},
-    },
-};
-
 const columns = computed(() => [
     {
         align: 'left',
-        field: 'clientName',
-        label: t('Client'),
         name: 'clientFk',
-        sortable: true,
+        label: t('Client'),
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Clients',
+                fields: ['id', 'name'],
+            },
+        },
     },
     {
         align: 'left',
-        field: ({ isWorker }) => Boolean(isWorker),
-        label: t('Is worker'),
         name: 'isWorker',
+        label: t('Is worker'),
     },
     {
         align: 'left',
-        field: 'salesPersonName',
+        name: 'salesPersonFk',
         label: t('Salesperson'),
-        name: 'salesPerson',
-        sortable: true,
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Workers/activeWithInheritedRole',
+                fields: ['id', 'name'],
+                where: { role: 'salesPerson' },
+                useLike: false,
+                optionValue: 'id',
+                optionLabel: 'name',
+                optionFilter: 'firstName',
+            },
+        },
     },
     {
         align: 'left',
-        field: 'departmentName',
+        name: 'departmentFk',
         label: t('Department'),
-        name: 'departmentName',
-        sortable: true,
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Departments',
+                fields: ['id', 'name'],
+            },
+        },
     },
     {
         align: 'left',
-        field: 'country',
+        name: 'countryFk',
         label: t('Country'),
-        name: 'country',
-        sortable: true,
+        format: ({ country }) => country,
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Countries',
+                fields: ['id', 'name'],
+            },
+        },
     },
     {
         align: 'left',
-        field: 'payMethod',
-        label: t('P. Method'),
         name: 'payMethod',
-        sortable: true,
-        tooltip: t('Pay method'),
+        label: t('P. Method'),
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Paymethods',
+            },
+        },
     },
     {
         align: 'left',
-        field: ({ amount }) => toCurrency(amount),
+        name: 'amount',
         label: t('Balance D.'),
-        name: 'balance',
-        sortable: true,
-        tooltip: t('Balance due'),
+        format: ({ amount }) => toCurrency(amount),
     },
     {
         align: 'left',
-        field: 'workerName',
+        name: 'workerFk',
         label: t('Author'),
-        name: 'author',
-        sortable: true,
         tooltip: t('Worker who made the last observation'),
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Workers/activeWithInheritedRole',
+                fields: ['id', 'name'],
+                useLike: false,
+                optionValue: 'id',
+                optionLabel: 'name',
+                optionFilter: 'firstName',
+            },
+        },
     },
     {
         align: 'left',
-        field: 'observation',
+        name: 'observation',
         label: t('Last observation'),
-        name: 'lastObservation',
-        sortable: true,
+        columnClass: 'expand',
     },
     {
         align: 'left',
-        field: ({ created }) => toDate(created),
+        name: 'created',
         label: t('L. O. Date'),
-        name: 'date',
-        sortable: true,
+        format: ({ created }) => toDate(created),
         tooltip: t('Last observation date'),
+        columnFilter: {
+            component: 'date',
+        },
     },
     {
         align: 'left',
-        field: ({ creditInsurance }) => toCurrency(creditInsurance),
+        name: 'creditInsurance',
+        format: ({ creditInsurance }) => toCurrency(creditInsurance),
         label: t('Credit I.'),
-        name: 'credit',
-        sortable: true,
         tooltip: t('Credit insurance'),
+        columnFilter: {
+            component: 'number',
+        },
     },
     {
         align: 'left',
-        field: ({ defaulterSinced }) => toDate(defaulterSinced),
+        name: 'defaulterSinced',
+        format: ({ defaulterSinced }) => toDate(defaulterSinced),
         label: t('From'),
-        name: 'from',
-        sortable: true,
+        columnFilter: {
+            component: 'date',
+        },
     },
     {
         align: 'left',
-        field: 'finished',
-        label: t('Has recover'),
-        name: 'finished',
+        label: t('Has recovery'),
+        name: 'hasRecovery',
     },
 ]);
 
@@ -198,22 +162,12 @@ const viewAddObservation = (rowsSelected) => {
         component: CustomerDefaulterAddObservation,
         componentProps: {
             clients: rowsSelected,
-            promise: async () => await dataRef.value.fetch(),
+            promise: async () => await dataRef.value.reload(),
         },
     });
 };
 
 const onFetch = async (data) => {
-    const recoveryData = await axios.get('Recoveries');
-    const recoveries = recoveryData.data.map(({ clientFk, finished }) => ({
-        clientFk,
-        finished,
-    }));
-
-    data.forEach((item) => {
-        const recovery = recoveries.find(({ clientFk }) => clientFk === item.clientFk);
-        item.finished = recovery?.finished === null;
-    });
     balanceDueTotal.value = data.reduce((acc, { amount = 0 }) => acc + amount, 0);
 };
 
@@ -229,7 +183,7 @@ function exprBuilder(param, value) {
         case 'payMethod':
         case 'salesPersonFk':
             return { [`d.${param}`]: value };
-        case 'date':
+        case 'created':
             return { 'd.created': { between: dateRange(value) } };
         case 'defaulterSinced':
             return { 'd.defaulterSinced': { between: dateRange(value) } };
@@ -246,123 +200,64 @@ function exprBuilder(param, value) {
     <VnSubToolbar>
         <template #st-data>
             <CustomerBalanceDueTotal :amount="balanceDueTotal" />
-            <div class="flex items-center q-ml-lg">
-                <QBtn
-                    color="primary"
-                    icon="vn:notes"
-                    :disabled="!selected.length"
-                    @click.stop="viewAddObservation(selected)"
-                >
-                    <QTooltip>{{ t('Add observation') }}</QTooltip>
-                </QBtn>
-            </div>
+        </template>
+        <template #st-actions>
+            <QBtn
+                color="primary"
+                icon="vn:notes"
+                :disabled="!selected.length"
+                @click.stop="viewAddObservation(selected)"
+            >
+                <QTooltip>{{ t('Add observation') }}</QTooltip>
+            </QBtn>
         </template>
     </VnSubToolbar>
-    <QPage class="column items-center q-pa-md">
-        <VnPaginate
-            ref="dataRef"
-            @on-fetch="onFetch"
-            data-key="CustomerDefaulter"
-            :filter="filter"
-            :expr-builder="exprBuilder"
-            auto-load
-            url="Defaulters/filter"
-        >
-            <template #body="{ rows }">
-                <div class="q-pa-md">
-                    <QTable
-                        :columns="columns"
-                        :rows="rows"
-                        class="full-width"
-                        row-key="clientFk"
-                        selection="multiple"
-                        v-model:selected="selected"
-                    >
-                        <template #header="props">
-                            <QTr :props="props" class="bg" style="min-height: 200px">
-                                <QTh>
-                                    <QCheckbox v-model="props.selected" />
-                                </QTh>
-                                <QTh
-                                    v-for="col in props.cols"
-                                    :key="col.name"
-                                    :props="props"
-                                >
-                                    {{ t(col.label) }}
-                                    <QTooltip v-if="col.tooltip">{{
-                                        col.tooltip
-                                    }}</QTooltip>
-                                </QTh>
-                            </QTr>
-                        </template>
-
-                        <template #body-cell="props">
-                            <QTd :props="props">
-                                <QTr :props="props" class="cursor-pointer">
-                                    <component
-                                        :is="
-                                            tableColumnComponents[props.col.name]
-                                                .component
-                                        "
-                                        class="col-content"
-                                        v-bind="
-                                            tableColumnComponents[props.col.name].props(
-                                                props
-                                            )
-                                        "
-                                        @click="
-                                            tableColumnComponents[props.col.name].event(
-                                                props
-                                            )
-                                        "
-                                    >
-                                        <template v-if="typeof props.value !== 'boolean'">
-                                            <div
-                                                v-if="
-                                                    props.col.name === 'lastObservation'
-                                                "
-                                            >
-                                                <VnInput
-                                                    type="textarea"
-                                                    v-model="props.value"
-                                                    readonly
-                                                    dense
-                                                    rows="2"
-                                                />
-                                            </div>
-                                            <div v-else>{{ props.value }}</div>
-                                        </template>
-
-                                        <WorkerDescriptorProxy
-                                            :id="props.row.salesPersonFk"
-                                            v-if="props.col.name === 'salesPerson'"
-                                        />
-                                        <WorkerDescriptorProxy
-                                            :id="props.row.workerFk"
-                                            v-if="props.col.name === 'author'"
-                                        />
-                                        <CustomerDescriptorProxy
-                                            :id="props.row.clientFk"
-                                            v-if="props.col.name === 'client'"
-                                        />
-                                    </component>
-                                </QTr>
-                            </QTd>
-                        </template>
-                    </QTable>
-                </div>
-            </template>
-        </VnPaginate>
-    </QPage>
+    <VnTable
+        ref="dataRef"
+        data-key="CustomerDefaulter"
+        url="Defaulters/filter"
+        :expr-builder="exprBuilder"
+        :columns="columns"
+        @on-fetch="onFetch"
+        :use-model="true"
+        :table="{
+            'row-key': 'clientFk',
+            selection: 'multiple',
+        }"
+        v-model:selected="selected"
+        :disable-option="{ card: true }"
+        auto-load
+        :order="['amount DESC']"
+    >
+        <template #column-clientFk="{ row }">
+            <span class="link" @click.stop>
+                {{ row.clientName }}
+                <CustomerDescriptorProxy :id="row.clientFk" />
+            </span>
+        </template>
+        <template #column-observation="{ row }">
+            <VnInput type="textarea" v-model="row.observation" readonly dense rows="2" />
+        </template>
+        <template #column-salesPersonFk="{ row }">
+            <span class="link" @click.stop>
+                {{ row.salesPersonName }}
+                <WorkerDescriptorProxy :id="row.salesPersonFk" />
+            </span>
+        </template>
+        <template #column-departmentFk="{ row }">
+            <span class="link" @click.stop>
+                {{ row.departmentName }}
+                <DepartmentDescriptorProxy :id="row.departmentFk" />
+            </span>
+        </template>
+        <template #column-workerFk="{ row }">
+            <span class="link" @click.stop>
+                {{ row.workerName }}
+                <WorkerDescriptorProxy :id="row.workerFk" />
+            </span>
+        </template>
+    </VnTable>
 </template>
-
-<style lang="scss" scoped>
-.col-content {
-    border-radius: 4px;
-    padding: 6px;
-}
-</style>
-
 <i18n>
 es:
     Add observation:  Añadir observación
@@ -383,4 +278,5 @@ es:
     Credit I.: Crédito A.
     Credit insurance: Crédito asegurado
     From: Desde
+    Has recovery: Tiene recobro
 </i18n>
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue b/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue
index ef1e17e83..5798e7512 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue
@@ -60,7 +60,7 @@ const onSubmit = async () => {
                             })
                         }}
                     </div>
-                    <VnRow class="row q-gutter-md q-mb-md">
+                    <VnRow>
                         <QInput
                             :label="t('Message')"
                             type="textarea"
diff --git a/src/pages/Customer/Notifications/CustomerNotifications.vue b/src/pages/Customer/Notifications/CustomerNotifications.vue
index 2b816b5d0..ce18739b4 100644
--- a/src/pages/Customer/Notifications/CustomerNotifications.vue
+++ b/src/pages/Customer/Notifications/CustomerNotifications.vue
@@ -1,92 +1,92 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { QBtn } from 'quasar';
-import CustomerNotificationsFilter from './CustomerNotificationsFilter.vue';
 import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import CustomerNotificationsCampaignConsumption from './CustomerNotificationsCampaignConsumption.vue';
-import RightMenu from 'src/components/common/RightMenu.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
 
 const { t } = useI18n();
+const dataKey = 'CustomerNotifications';
 const selected = ref([]);
-const selectedCustomerId = ref(0);
-
-const tableColumnComponents = {
-    id: {
-        component: QBtn,
-        props: () => ({ flat: true, color: 'blue' }),
-        event: (prop) => selectCustomerId(prop.row.id),
-    },
-    socialName: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    city: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    phone: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    email: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-};
-
 const columns = computed(() => [
     {
         align: 'left',
-        field: 'id',
         label: t('Identifier'),
         name: 'id',
+        columnClass: 'shrink',
     },
     {
         align: 'left',
-        field: 'socialName',
         label: t('Social name'),
         name: 'socialName',
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Clients',
+                fields: ['id', 'socialName'],
+                optionLabel: 'socialName',
+            },
+        },
+        columnClass: 'expand',
+        isTitle: true,
     },
     {
         align: 'left',
-        field: 'city',
         label: t('City'),
         name: 'city',
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Towns',
+            },
+        },
+        cardVisible: true,
     },
     {
         align: 'left',
-        field: 'phone',
         label: t('Phone'),
         name: 'phone',
+        cardVisible: true,
     },
     {
         align: 'left',
-        field: 'email',
         label: t('Email'),
         name: 'email',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'fi',
+        label: t('Fi'),
+        visible: false,
+    },
+    {
+        align: 'left',
+        name: 'postcode',
+        label: t('Postcode'),
+        visible: false,
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
+        name: 'salesPersonFk',
+        component: 'select',
+        attrs: {
+            url: 'Workers/activeWithInheritedRole',
+            fields: ['id', 'name'],
+            where: { role: 'salesPerson' },
+            optionFilter: 'firstName',
+            useLike: false,
+        },
+        visible: false,
     },
 ]);
-
-const selectCustomerId = (id) => {
-    selectedCustomerId.value = id;
-};
 </script>
 
 <template>
-    <RightMenu>
-        <template #right-panel>
-            <CustomerNotificationsFilter data-key="CustomerNotifications" />
-        </template>
-    </RightMenu>
     <VnSubToolbar class="justify-end">
-        <template #st-data>
+        <template #st-actions>
             <CustomerNotificationsCampaignConsumption
                 :selected-rows="selected.length > 0"
                 :clients="selected"
@@ -94,51 +94,26 @@ const selectCustomerId = (id) => {
             />
         </template>
     </VnSubToolbar>
-    <QPage class="column items-center q-pa-md">
-        <VnPaginate data-key="CustomerNotifications" url="Clients" auto-load>
-            <template #body="{ rows }">
-                <div class="q-pa-md">
-                    <QTable
-                        :columns="columns"
-                        :rows="rows"
-                        class="full-width q-mt-md"
-                        row-key="id"
-                        selection="multiple"
-                        v-model:selected="selected"
-                    >
-                        <template #body-cell="props">
-                            <QTd :props="props">
-                                <QTr :props="props" class="cursor-pointer">
-                                    <component
-                                        :is="
-                                            tableColumnComponents[props.col.name]
-                                                .component
-                                        "
-                                        class="col-content"
-                                        v-bind="
-                                            tableColumnComponents[props.col.name].props(
-                                                props
-                                            )
-                                        "
-                                        @click="
-                                            tableColumnComponents[props.col.name].event(
-                                                props
-                                            )
-                                        "
-                                    >
-                                        {{ props.value }}
-                                        <CustomerDescriptorProxy
-                                            :id="selectedCustomerId"
-                                        />
-                                    </component>
-                                </QTr>
-                            </QTd>
-                        </template>
-                    </QTable>
-                </div>
-            </template>
-        </VnPaginate>
-    </QPage>
+    <VnTable
+        :data-key="dataKey"
+        url="Clients"
+        :table="{
+            'row-key': 'id',
+            selection: 'multiple',
+        }"
+        v-model:selected="selected"
+        :right-search="true"
+        :columns="columns"
+        :use-model="true"
+        auto-load
+    >
+        <template #column-id="{ row }">
+            <span class="link">
+                {{ row.id }}
+                <CustomerDescriptorProxy :id="row.id" />
+            </span>
+        </template>
+    </VnTable>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Customer/Notifications/CustomerNotificationsCampaignConsumption.vue b/src/pages/Customer/Notifications/CustomerNotificationsCampaignConsumption.vue
index 6d8e00966..6952379ca 100644
--- a/src/pages/Customer/Notifications/CustomerNotificationsCampaignConsumption.vue
+++ b/src/pages/Customer/Notifications/CustomerNotificationsCampaignConsumption.vue
@@ -99,7 +99,7 @@ onMounted(async () => {
         <QPopupProxy ref="popupProxyRef">
             <QCard class="column q-pa-md">
                 <span class="text-body1 q-mb-sm">{{ t('Campaign consumption') }}</span>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :options="moreFields"
                         option-value="code"
@@ -109,7 +109,7 @@ onMounted(async () => {
                         @update:model-value="campaignChange"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInputDate v-model="campaignParams.from" :label="t('From')" />
                     <VnInputDate v-model="campaignParams.to" :label="t('To')" />
                 </VnRow>
diff --git a/src/pages/Customer/Notifications/CustomerNotificationsFilter.vue b/src/pages/Customer/Notifications/CustomerNotificationsFilter.vue
deleted file mode 100644
index a7c8635e7..000000000
--- a/src/pages/Customer/Notifications/CustomerNotificationsFilter.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import FetchData from 'components/FetchData.vue';
-import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import VnSelect from 'components/common/VnSelect.vue';
-
-const { t } = useI18n();
-const props = defineProps({
-    dataKey: {
-        type: String,
-        required: true,
-    },
-});
-
-const cities = ref();
-const clients = ref();
-</script>
-
-<template>
-    <FetchData
-        :filter="{ where: { role: 'socialName' } }"
-        @on-fetch="(data) => (clients = data)"
-        auto-load
-        url="Clients"
-    />
-    <FetchData @on-fetch="(data) => (cities = data)" auto-load url="Towns" />
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
-        <template #tags="{ tag, formatFn }">
-            <div class="q-gutter-x-xs">
-                <strong>{{ t(`params.${tag.label}`) }}: </strong>
-                <span>{{ formatFn(tag.value) }}</span>
-            </div>
-        </template>
-
-        <template #body="{ params, searchFn }">
-            <QItem class="q-mb-sm q-mt-sm">
-                <QItemSection>
-                    <VnInput
-                        :label="t('Identifier')"
-                        clearable
-                        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">
-                    <VnSelect
-                        :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">
-                    <VnSelect
-                        :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')"
-                        clearable
-                        is-outlined
-                        v-model="params.phone"
-                    />
-                </QItemSection>
-            </QItem>
-
-            <QItem class="q-mb-sm">
-                <QItemSection>
-                    <VnInput
-                        :label="t('Email')"
-                        clearable
-                        is-outlined
-                        type="email"
-                        v-model="params.email"
-                    />
-                </QItemSection>
-            </QItem>
-            <QSeparator />
-        </template>
-    </VnFilterPanel>
-</template>
-
-<i18n>
-en:
-    params:
-        identifier: Identifier
-        socialName: Social name
-        city: City
-        phone: Phone
-        email: Email
-es:
-    params:
-        identifier: Identificador
-        socialName: Razón social
-        city: Población
-        phone: Teléfono
-        email: Email
-    Identifier: Identificador
-    Social name: Razón social
-    City: Población
-    Phone: Teléfono
-    Email: Email
-</i18n>
diff --git a/src/pages/Customer/Payments/CustomerPayments.vue b/src/pages/Customer/Payments/CustomerPayments.vue
index cd2642c57..25dfcc58a 100644
--- a/src/pages/Customer/Payments/CustomerPayments.vue
+++ b/src/pages/Customer/Payments/CustomerPayments.vue
@@ -1,19 +1,18 @@
 <script setup>
 import axios from 'axios';
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
-import { useArrayData } from 'composables/useArrayData';
-import VnPaginate from 'components/ui/VnPaginate.vue';
+import { toDate, toCurrency } from 'filters/index';
+
+import VnTable from 'src/components/VnTable/VnTable.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
-import { toDate, toCurrency } from 'filters/index';
 import CustomerPaymentsFilter from './CustomerPaymentsFilter.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
 
 const quasar = useQuasar();
 const { t } = useI18n();
-const arrayData = useArrayData('CustomerTransactions');
 
 async function confirm(transaction) {
     quasar
@@ -36,59 +35,73 @@ async function confirmTransaction({ id }) {
     });
 }
 
-const grid = ref(false);
 const columns = computed(() => [
     {
         name: 'id',
         label: t('Transaction ID'),
-        field: (row) => row.id,
-        sortable: true,
-    },
-    {
-        name: 'customerId',
-        label: t('Customer ID'),
-        field: (row) => row.clientFk,
-        align: 'right',
-        sortable: true,
-    },
-    {
-        name: 'customer',
-        label: t('Customer Name'),
-        field: (row) => row.customerName,
-    },
-    {
-        name: 'state',
-        label: t('State'),
-        field: (row) => row.isConfirmed,
-        format: (value) => (value ? t('Confirmed') : t('Unconfirmed')),
+        isTitle: true,
         align: 'left',
-        sortable: true,
+        columnFilter: {
+            inWhere: true,
+            alias: 't',
+        },
+        columnClass: 'shrink',
     },
     {
-        name: 'dated',
+        align: 'left',
+        name: 'clientFk',
+        label: t('Customer'),
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Clients',
+                fields: ['id', 'name'],
+            },
+        },
+        columnClass: 'expand',
+        cardVisible: true,
+    },
+    {
+        name: 'isConfirmed',
+        label: t('State'),
+        align: 'left',
+        format: ({ isConfirmed }) => (isConfirmed ? t('Confirmed') : t('Unconfirmed')),
+        chip: {
+            condition: () => true,
+            color: ({ isConfirmed }) => (isConfirmed ? 'bg-positive' : 'bg-primary'),
+        },
+        visible: false,
+    },
+    {
+        name: 'created',
         label: t('Dated'),
-        field: (row) => toDate(row.created),
-        sortable: true,
+        format: ({ created }) => toDate(created),
+        columnFilter: false,
+        cardVisible: true,
     },
     {
         name: 'amount',
         label: t('Amount'),
-        field: (row) => row.amount,
-        format: (value) => toCurrency(value),
-        sortable: true,
+        format: ({ amount }) => toCurrency(amount),
+        columnFilter: {
+            component: 'number',
+        },
+        cardVisible: true,
     },
     {
-        name: 'actions',
-        label: t('Actions'),
-        grid: false,
+        align: 'right',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('Confirm transaction'),
+                icon: 'check',
+                action: (row) => confirm(row),
+                show: ({ isConfirmed }) => !isConfirmed,
+                isPrimary: true,
+            },
+        ],
     },
 ]);
-const isLoading = computed(() => arrayData.isLoading.value);
-
-function stateColor(row) {
-    if (row.isConfirmed) return 'positive';
-    return 'primary';
-}
 </script>
 
 <template>
@@ -97,158 +110,22 @@ function stateColor(row) {
             <CustomerPaymentsFilter data-key="CustomerTransactions" />
         </template>
     </RightMenu>
-    <QPage class="column items-center q-pa-md customer-payments">
-        <div class="vn-card-list">
-            <QToolbar class="q-pa-none justify-end">
-                <QBtn
-                    @click="arrayData.refresh()"
-                    :loading="isLoading"
-                    icon="refresh"
-                    color="primary"
-                    class="q-mr-sm"
-                    round
-                    dense
-                />
-                <QBtn @click="grid = !grid" icon="list" color="primary" round dense>
-                    <QTooltip>{{ t('Change view') }}</QTooltip>
-                </QBtn>
-            </QToolbar>
-            <VnPaginate
-                data-key="CustomerTransactions"
-                url="Clients/transactions"
-                order="created DESC"
-                :limit="20"
-                :offset="50"
-                :auto-load="!!$route?.query.params"
-            >
-                <template #body="{ rows }">
-                    <QTable
-                        :dense="$q.screen.lt.md"
-                        :columns="columns"
-                        :rows="rows"
-                        row-key="id"
-                        :grid="grid || $q.screen.lt.sm"
-                        class="q-mt-xs custom-table"
-                    >
-                        <template #body-cell-actions="{ row }">
-                            <QTd auto-width class="text-center">
-                                <QBtn
-                                    v-if="!row.isConfirmed"
-                                    icon="check"
-                                    @click="confirm(row)"
-                                    color="primary"
-                                    size="md"
-                                    round
-                                    flat
-                                    dense
-                                >
-                                    <QTooltip>{{ t('Confirm transaction') }}</QTooltip>
-                                </QBtn>
-                            </QTd>
-                        </template>
-                        <template #body-cell-id="{ row }">
-                            <QTd auto-width align="right">
-                                <span>
-                                    {{ row.id }}
-                                </span>
-                            </QTd>
-                        </template>
-                        <template #body-cell-customerId="{ row }">
-                            <QTd align="right">
-                                <span class="link">
-                                    {{ row.clientFk }}
-                                    <CustomerDescriptorProxy :id="row.clientFk" />
-                                </span>
-                            </QTd>
-                        </template>
-                        <template #body-cell-customer="{ row }">
-                            <QTd auto-width align="left" :title="row.customerName">
-                                <span>
-                                    {{ row.customerName }}
-                                </span>
-                            </QTd>
-                        </template>
-                        <template #body-cell-state="{ row }">
-                            <QTd auto-width class="text-center">
-                                <QBadge text-color="black" :color="stateColor(row)">
-                                    {{
-                                        row.isConfirmed
-                                            ? t('Confirmed')
-                                            : t('Unconfirmed')
-                                    }}
-                                </QBadge>
-                            </QTd>
-                        </template>
-                        <template #item="{ cols, row }">
-                            <div class="q-mb-md col-12">
-                                <QCard class="q-pa-none">
-                                    <QItem class="q-pa-none items-start">
-                                        <QItemSection class="q-pa-none">
-                                            <QList>
-                                                <template
-                                                    v-for="col of cols"
-                                                    :key="col.name"
-                                                >
-                                                    <QItem
-                                                        v-if="col.grid !== false"
-                                                        class="q-pa-none"
-                                                    >
-                                                        <QItemSection>
-                                                            <QItemLabel caption>
-                                                                {{ col.label }}
-                                                            </QItemLabel>
-                                                            <QItemLabel
-                                                                v-if="col.name == 'state'"
-                                                            >
-                                                                <QBadge
-                                                                    text-color="black"
-                                                                    :color="
-                                                                        stateColor(row)
-                                                                    "
-                                                                >
-                                                                    {{ col.value }}
-                                                                </QBadge>
-                                                            </QItemLabel>
-                                                            <QItemLabel
-                                                                v-if="col.name != 'state'"
-                                                            >
-                                                                {{ col.value }}
-                                                            </QItemLabel>
-                                                        </QItemSection>
-                                                    </QItem>
-                                                </template>
-                                            </QList>
-                                        </QItemSection>
-                                        <template v-if="!row.isConfirmed">
-                                            <QSeparator vertical />
-                                            <QCardActions
-                                                vertical
-                                                class="justify-between"
-                                            >
-                                                <QBtn
-                                                    icon="check"
-                                                    @click="confirm(row)"
-                                                    color="primary"
-                                                    size="md"
-                                                    round
-                                                    flat
-                                                    dense
-                                                >
-                                                    <QTooltip>
-                                                        {{ t('Confirm transaction') }}
-                                                    </QTooltip>
-                                                </QBtn>
-                                            </QCardActions>
-                                        </template>
-                                    </QItem>
-                                </QCard>
-                            </div>
-                        </template>
-                    </QTable>
-                </template>
-            </VnPaginate>
-        </div>
-    </QPage>
+    <VnTable
+        data-key="CustomerTransactions"
+        url="Clients/transactions"
+        order="created DESC"
+        :columns="columns"
+        :right-search="false"
+        auto-load
+    >
+        <template #column-clientFk="{ row }">
+            <span class="link">
+                {{ row.clientFk }} -
+                {{ row.customerName }}
+                <CustomerDescriptorProxy :id="row.clientFk" />
+            </span>
+        </template>
+    </VnTable>
 </template>
 
 <style lang="scss">
@@ -269,14 +146,11 @@ es:
     Web Payments: Pagos Web
     Confirm transaction: Confirmar transacción
     Transaction ID: ID transacción
-    Customer ID: ID cliente
-    Customer Name: Nombre cliente
+    Customer: cliente
     State: Estado
     Dated: Fecha
     Amount: Importe
-    Actions: Acciones
     Confirmed: Confirmada
     Unconfirmed: Sin confirmar
-    Change view: Cambiar vista
     Payment confirmed: Pago confirmado
 </i18n>
diff --git a/src/pages/Customer/components/CustomerAddressCreate.vue b/src/pages/Customer/components/CustomerAddressCreate.vue
index 57997fb01..5f8162745 100644
--- a/src/pages/Customer/components/CustomerAddressCreate.vue
+++ b/src/pages/Customer/components/CustomerAddressCreate.vue
@@ -85,7 +85,7 @@ function handleLocation(data, location) {
         <template #form="{ data, validate }">
             <QCheckbox :label="t('Default')" v-model="data.isDefaultAddress" />
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput :label="t('Consignee')" clearable v-model="data.nickname" />
 
                 <VnInput :label="t('Street address')" clearable v-model="data.street" />
@@ -119,7 +119,7 @@ function handleLocation(data, location) {
                 />
             </div>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('Incoterms')"
                     :options="incoterms"
diff --git a/src/pages/Customer/components/CustomerAddressEdit.vue b/src/pages/Customer/components/CustomerAddressEdit.vue
index 2d14b571e..ccc2265e7 100644
--- a/src/pages/Customer/components/CustomerAddressEdit.vue
+++ b/src/pages/Customer/components/CustomerAddressEdit.vue
@@ -146,7 +146,7 @@ function handleLocation(data, location) {
         </template>
 
         <template #form="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <QCheckbox :label="t('Enabled')" v-model="data.isActive" />
                 </div>
@@ -164,7 +164,7 @@ function handleLocation(data, location) {
                 </div>
             </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnInput :label="t('Consignee')" clearable v-model="data.nickname" />
                 </div>
@@ -173,7 +173,7 @@ function handleLocation(data, location) {
                 </div>
             </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnLocation
                         :rules="validate('Worker.postcode')"
@@ -185,7 +185,7 @@ function handleLocation(data, location) {
                 </div>
             </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnSelect
                         :label="t('Agency')"
@@ -204,7 +204,7 @@ function handleLocation(data, location) {
                     <VnInput :label="t('Mobile')" clearable v-model="data.mobile" />
                 </div>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnSelect
                         :label="t('Incoterms')"
diff --git a/src/pages/Customer/components/CustomerCreditContractsCreate.vue b/src/pages/Customer/components/CustomerCreditContractsCreate.vue
index d902e7a97..c4434e870 100644
--- a/src/pages/Customer/components/CustomerCreditContractsCreate.vue
+++ b/src/pages/Customer/components/CustomerCreditContractsCreate.vue
@@ -39,7 +39,7 @@ const toCustomerCreditContracts = () => {
         </template>
 
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnInput
                         :label="t('Credit')"
diff --git a/src/pages/Customer/components/CustomerFileManagementCreate.vue b/src/pages/Customer/components/CustomerFileManagementCreate.vue
index bc218d1b2..7c15e0b71 100644
--- a/src/pages/Customer/components/CustomerFileManagementCreate.vue
+++ b/src/pages/Customer/components/CustomerFileManagementCreate.vue
@@ -143,7 +143,7 @@ const toCustomerFileManagement = () => {
     <QCard class="q-pa-lg">
         <QCardSection>
             <QForm>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <VnInput
                             :label="t('Reference')"
@@ -163,7 +163,7 @@ const toCustomerFileManagement = () => {
                     </div>
                 </VnRow>
 
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <VnSelect
                             :label="t('Warehouse')"
@@ -184,7 +184,7 @@ const toCustomerFileManagement = () => {
                     </div>
                 </VnRow>
 
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <VnInput
                             :label="t('Description')"
@@ -196,7 +196,7 @@ const toCustomerFileManagement = () => {
                     </div>
                 </VnRow>
 
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <QFile
                             ref="inputFileRef"
diff --git a/src/pages/Customer/components/CustomerFileManagementEdit.vue b/src/pages/Customer/components/CustomerFileManagementEdit.vue
index d21305e32..80eaa44f9 100644
--- a/src/pages/Customer/components/CustomerFileManagementEdit.vue
+++ b/src/pages/Customer/components/CustomerFileManagementEdit.vue
@@ -119,7 +119,7 @@ const toCustomerFileManagement = () => {
     <QCard class="q-pa-lg">
         <QCardSection>
             <QForm>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <VnInput
                             :label="t('Reference')"
@@ -139,7 +139,7 @@ const toCustomerFileManagement = () => {
                     </div>
                 </VnRow>
 
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <VnSelect
                             :label="t('Warehouse')"
@@ -160,7 +160,7 @@ const toCustomerFileManagement = () => {
                     </div>
                 </VnRow>
 
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <VnInput
                             :label="t('Description')"
@@ -172,7 +172,7 @@ const toCustomerFileManagement = () => {
                     </div>
                 </VnRow>
 
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <QFile
                             ref="inputFileRef"
diff --git a/src/pages/Customer/components/CustomerGreugeCreate.vue b/src/pages/Customer/components/CustomerGreugeCreate.vue
index fc315d808..06b1b2124 100644
--- a/src/pages/Customer/components/CustomerGreugeCreate.vue
+++ b/src/pages/Customer/components/CustomerGreugeCreate.vue
@@ -55,7 +55,7 @@ const toCustomerGreuges = () => {
         </template>
 
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('Amount')"
                     clearable
@@ -65,7 +65,7 @@ const toCustomerGreuges = () => {
                 <VnInputDate :label="t('Date')" v-model="data.shipped" />
             </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput :label="t('Comment')" clearable v-model="data.description" />
                 <VnSelect
                     :label="t('Type')"
diff --git a/src/pages/Customer/components/CustomerNewCustomsAgent.vue b/src/pages/Customer/components/CustomerNewCustomsAgent.vue
index 3c95dcae6..ec9806334 100644
--- a/src/pages/Customer/components/CustomerNewCustomsAgent.vue
+++ b/src/pages/Customer/components/CustomerNewCustomsAgent.vue
@@ -22,7 +22,7 @@ const onDataSaved = (dataSaved) => {
         url-create="CustomsAgents"
     >
         <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('NIF')"
                     :required="true"
@@ -36,7 +36,7 @@ const onDataSaved = (dataSaved) => {
                     v-model="data.fiscalName"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput :label="t('Street')" clearable v-model="data.street" />
                 <VnInput :label="t('Phone')" clearable v-model="data.phone" />
             </VnRow>
diff --git a/src/pages/Customer/components/CustomerNewPayment.vue b/src/pages/Customer/components/CustomerNewPayment.vue
index cc92d7907..cfa3acea8 100644
--- a/src/pages/Customer/components/CustomerNewPayment.vue
+++ b/src/pages/Customer/components/CustomerNewPayment.vue
@@ -11,10 +11,12 @@ import VnRow from 'components/ui/VnRow.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-
+import { useState } from 'src/composables/useState';
 const { t } = useI18n();
 const route = useRoute();
 const { dialogRef } = useDialogPluginComponent();
+const state = useState();
+const user = state.getUser();
 
 const $props = defineProps({
     companyId: {
@@ -55,12 +57,12 @@ const filterClientFindOne = {
         id: route.params.id,
     },
 };
-
 const initialData = reactive({
     amountPaid: $props.totalCredit,
     clientFk: route.params.id,
     companyFk: $props.companyId,
     email: clientFindOne.value.email,
+    bankFk: user.value.localBankFk,
 });
 
 onBeforeMount(() => {
@@ -134,7 +136,7 @@ const onDataSaved = async () => {
 
                 <h5 class="q-mt-none">{{ t('New payment') }}</h5>
 
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInputDate
                         :label="t('Date')"
                         :required="true"
@@ -152,7 +154,7 @@ const onDataSaved = async () => {
                     />
                 </VnRow>
 
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :label="t('Bank')"
                         :options="bankOptions"
@@ -187,7 +189,7 @@ const onDataSaved = async () => {
                     {{ t('Compensation') }}
                 </div>
 
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col" v-if="data.bankFk === 3 || data.bankFk === 3117">
                         <VnInput
                             :label="t('Compensation account')"
@@ -206,7 +208,7 @@ const onDataSaved = async () => {
                 <div class="q-mt-lg" v-if="data.bankFk === 2">
                     <div class="text-h6">{{ t('Cash') }}</div>
 
-                    <VnRow class="row q-gutter-md q-mb-md">
+                    <VnRow>
                         <VnInput
                             :label="t('Delivered amount')"
                             @update:model-value="calculateFromDeliveredAmount($event)"
@@ -223,7 +225,7 @@ const onDataSaved = async () => {
                         />
                     </VnRow>
 
-                    <VnRow class="row q-gutter-md q-mb-md">
+                    <VnRow>
                         <QCheckbox v-model="viewRecipt" />
                         <QCheckbox v-model="sendEmail" />
                     </VnRow>
diff --git a/src/pages/Customer/components/CustomerNoteCreate.vue b/src/pages/Customer/components/CustomerNoteCreate.vue
index ef9982195..fa1045023 100644
--- a/src/pages/Customer/components/CustomerNoteCreate.vue
+++ b/src/pages/Customer/components/CustomerNoteCreate.vue
@@ -44,7 +44,7 @@ const toCustomerNotes = () => {
         </template>
 
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QInput :label="t('Note')" type="textarea" v-model="data.text" />
             </VnRow>
         </template>
diff --git a/src/pages/Customer/components/CustomerRecoverieCreate.vue b/src/pages/Customer/components/CustomerRecoverieCreate.vue
index e70f85308..593b9c5b3 100644
--- a/src/pages/Customer/components/CustomerRecoverieCreate.vue
+++ b/src/pages/Customer/components/CustomerRecoverieCreate.vue
@@ -49,12 +49,12 @@ const toCustomerRecoveries = () => {
         </template>
 
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInputDate :label="t('Since')" v-model="data.started" />
                 <VnInputDate :label="t('To')" v-model="data.finished" />
             </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('Amount')"
                     clearable
diff --git a/src/pages/Customer/components/CustomerSamplesCreate.vue b/src/pages/Customer/components/CustomerSamplesCreate.vue
index be614aa0b..0470dc176 100644
--- a/src/pages/Customer/components/CustomerSamplesCreate.vue
+++ b/src/pages/Customer/components/CustomerSamplesCreate.vue
@@ -264,7 +264,7 @@ const toCustomerSamples = () => {
                     />
                 </div>
 
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <VnInput
                             :label="t('Recipient')"
diff --git a/src/pages/Department/Card/DepartmentBasicData.vue b/src/pages/Department/Card/DepartmentBasicData.vue
index 165a959d0..4573f7b66 100644
--- a/src/pages/Department/Card/DepartmentBasicData.vue
+++ b/src/pages/Department/Card/DepartmentBasicData.vue
@@ -29,7 +29,7 @@ const clientsOptions = ref([]);
         class="full-width"
     >
         <template #form="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('department.name')"
                     v-model="data.name"
@@ -44,7 +44,7 @@ const clientsOptions = ref([]);
                     clearable
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('department.chat')"
                     v-model="data.chatName"
@@ -58,7 +58,7 @@ const clientsOptions = ref([]);
                     clearable
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('department.bossDepartment')"
                     v-model="data.workerFk"
@@ -80,7 +80,7 @@ const clientsOptions = ref([]);
                     :rules="validate('department.clientFk')"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QCheckbox
                     :label="t('department.telework')"
                     v-model="data.isTeleworking"
@@ -92,7 +92,7 @@ const clientsOptions = ref([]);
                     :true-value="1"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QCheckbox
                     :label="t('department.worksInProduction')"
                     v-model="data.isProduction"
@@ -102,7 +102,7 @@ const clientsOptions = ref([]);
                     v-model="data.hasToRefill"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QCheckbox
                     :label="t('department.hasToSendMail')"
                     v-model="data.hasToSendMail"
diff --git a/src/pages/Department/Card/DepartmentDescriptor.vue b/src/pages/Department/Card/DepartmentDescriptor.vue
index b49f5f9e2..e914f6af6 100644
--- a/src/pages/Department/Card/DepartmentDescriptor.vue
+++ b/src/pages/Department/Card/DepartmentDescriptor.vue
@@ -24,7 +24,7 @@ const $props = defineProps({
 
 const route = useRoute();
 const router = useRouter();
-
+const DepartmentDescriptorRef = ref();
 const { t } = useI18n();
 const { notify } = useNotify();
 
@@ -55,18 +55,20 @@ const { openConfirmationModal } = useVnConfirm();
 </script>
 <template>
     <CardDescriptor
+        ref="DepartmentDescriptorRef"
         module="Department"
-        data-key="departmentData"
         :url="`Departments/${entityId}`"
         :title="data.title"
         :subtitle="data.subtitle"
         :summary="$props.summary"
+        :to-module="{ name: 'WorkerDepartment' }"
         @on-fetch="
             (data) => {
                 department = data;
                 setData(data);
             }
         "
+        data-key="department"
     >
         <template #menu="{}">
             <QItem
diff --git a/src/pages/Entry/Card/EntryBasicData.vue b/src/pages/Entry/Card/EntryBasicData.vue
index 2640d72e4..e5d6f50d9 100644
--- a/src/pages/Entry/Card/EntryBasicData.vue
+++ b/src/pages/Entry/Card/EntryBasicData.vue
@@ -67,7 +67,7 @@ const onFilterTravelSelected = (formData, id) => {
         :clear-store-on-unmount="false"
     >
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('entry.basicData.supplier')"
                     v-model="data.supplierFk"
@@ -121,13 +121,13 @@ const onFilterTravelSelected = (formData, id) => {
                     </template>
                 </VnSelectDialog>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="data.reference"
                     :label="t('entry.basicData.reference')"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="data.invoiceNumber"
                     :label="t('entry.basicData.invoiceNumber')"
@@ -143,7 +143,7 @@ const onFilterTravelSelected = (formData, id) => {
                     :required="true"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('entry.basicData.currency')"
                     v-model="data.currencyFk"
@@ -159,7 +159,7 @@ const onFilterTravelSelected = (formData, id) => {
                     min="0"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QInput
                     :label="t('entry.basicData.observation')"
                     type="textarea"
@@ -169,7 +169,7 @@ const onFilterTravelSelected = (formData, id) => {
                     fill-input
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QCheckbox
                     v-model="data.isOrdered"
                     :label="t('entry.basicData.ordered')"
diff --git a/src/pages/Entry/Card/EntryBuysImport.vue b/src/pages/Entry/Card/EntryBuysImport.vue
index e0da663f0..8431e1096 100644
--- a/src/pages/Entry/Card/EntryBuysImport.vue
+++ b/src/pages/Entry/Card/EntryBuysImport.vue
@@ -197,7 +197,7 @@ const redirectToBuysView = () => {
             </div>
         </Teleport>
         <QCard class="q-pa-lg">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QFile
                     ref="inputFileRef"
                     :label="t('entry.buys.file')"
@@ -219,13 +219,13 @@ const redirectToBuysView = () => {
                 </QFile>
             </VnRow>
             <div v-if="importData.file">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInput
                         :label="t('entry.buys.reference')"
                         v-model="importData.ref"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInput
                         :label="t('entry.buys.observations')"
                         v-model="importData.observation"
diff --git a/src/pages/Entry/Card/EntryDescriptor.vue b/src/pages/Entry/Card/EntryDescriptor.vue
index 3efdf1bf7..b22d6ba53 100644
--- a/src/pages/Entry/Card/EntryDescriptor.vue
+++ b/src/pages/Entry/Card/EntryDescriptor.vue
@@ -115,7 +115,6 @@ watch;
         :subtitle="data.subtitle"
         @on-fetch="setData"
         data-key="entry"
-        :summary="$attrs"
     >
         <template #menu="{ entity }">
             <QItem v-ripple clickable @click="showEntryReport(entity)">
diff --git a/src/pages/Entry/EntryCreate.vue b/src/pages/Entry/EntryCreate.vue
index 4f2d13643..1e8490158 100644
--- a/src/pages/Entry/EntryCreate.vue
+++ b/src/pages/Entry/EntryCreate.vue
@@ -78,7 +78,7 @@ const redirectToEntryBasicData = (_, { id }) => {
             @on-data-saved="redirectToEntryBasicData"
         >
             <template #form="{ data, validate }">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :label="t('Supplier')"
                         class="full-width"
@@ -102,7 +102,7 @@ const redirectToEntryBasicData = (_, { id }) => {
                         </template>
                     </VnSelect>
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :label="t('Travel')"
                         class="full-width"
@@ -131,7 +131,7 @@ const redirectToEntryBasicData = (_, { id }) => {
                         </template>
                     </VnSelect>
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :label="t('Company')"
                         class="full-width"
diff --git a/src/pages/Entry/EntryMain.vue b/src/pages/Entry/EntryMain.vue
deleted file mode 100644
index c1f2a31db..000000000
--- a/src/pages/Entry/EntryMain.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup>
-import LeftMenu from 'src/components/LeftMenu.vue';
-
-import { useStateStore } from 'stores/useStateStore';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInCard.vue b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
index 912713f23..a95f289b0 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInCard.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
@@ -2,6 +2,7 @@
 import VnCard from 'components/common/VnCard.vue';
 import InvoiceInDescriptor from './InvoiceInDescriptor.vue';
 import InvoiceInFilter from '../InvoiceInFilter.vue';
+import InvoiceInSearchbar from '../InvoiceInSearchbar.vue';
 
 const filter = {
     include: [
@@ -28,8 +29,9 @@ const filter = {
         :descriptor="InvoiceInDescriptor"
         :filter-panel="InvoiceInFilter"
         search-data-key="InvoiceInList"
-        search-url="InvoiceIns/filter"
-        searchbar-label="Search invoice"
-        searchbar-info="You can search by invoice reference"
-    />
+    >
+        <template #searchbar>
+            <InvoiceInSearchbar />
+        </template>
+    </VnCard>
 </template>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
index 0d279de06..da24e50fa 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, reactive, computed, onBeforeMount } from 'vue';
-import { useRouter, onBeforeRouteLeave } from 'vue-router';
+import { useRouter, onBeforeRouteUpdate } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import axios from 'axios';
@@ -129,33 +129,23 @@ onBeforeMount(async () => {
     totalAmount.value = data.totalDueDay;
 });
 
-onBeforeRouteLeave(async (to, from) => {
+onBeforeRouteUpdate(async (to, from) => {
     invoiceInCorrection.correcting.length = 0;
     invoiceInCorrection.corrected = null;
-    if (to.params.id !== from.params.id) await setInvoiceCorrection(entityId.value);
+    if (to.params.id !== from.params.id) {
+        await setInvoiceCorrection(to.params.id);
+        const { data } = await axios.get(`InvoiceIns/${to.params.id}/getTotals`);
+        totalAmount.value = data.totalDueDay;
+    }
 });
 
 async function setInvoiceCorrection(id) {
-    const [{ data: correctingData }, { data: correctedData }] = await Promise.all([
-        axios.get('InvoiceInCorrections', {
-            params: {
-                filter: {
-                    where: {
-                        correctingFk: id,
-                    },
-                },
-            },
-        }),
-        axios.get('InvoiceInCorrections', {
-            params: {
-                filter: {
-                    where: {
-                        correctedFk: id,
-                    },
-                },
-            },
-        }),
-    ]);
+    const { data: correctingData } = await axios.get('InvoiceInCorrections', {
+        params: { filter: { where: { correctingFk: id } } },
+    });
+    const { data: correctedData } = await axios.get('InvoiceInCorrections', {
+        params: { filter: { where: { correctedFk: id } } },
+    });
 
     if (correctingData[0]) invoiceInCorrection.corrected = correctingData[0].correctedFk;
 
@@ -380,7 +370,7 @@ const createInvoiceInCorrection = async () => {
                 </template>
             </VnLv>
         </template>
-        <template #action="{ entity }">
+        <template #actions="{ entity }">
             <QCardActions>
                 <QBtn
                     size="md"
@@ -448,7 +438,7 @@ const createInvoiceInCorrection = async () => {
                             readonly
                         />
                         <VnSelect
-                            :label="`${useCapitalize(t('globals.class'))}*`"
+                            :label="`${useCapitalize(t('globals.class'))}`"
                             v-model="correctionFormData.invoiceClass"
                             :options="siiTypeInvoiceOuts"
                             option-value="id"
@@ -458,7 +448,7 @@ const createInvoiceInCorrection = async () => {
                     </QItemSection>
                     <QItemSection>
                         <VnSelect
-                            :label="`${useCapitalize(t('globals.type'))}*`"
+                            :label="`${useCapitalize(t('globals.type'))}`"
                             v-model="correctionFormData.invoiceType"
                             :options="cplusRectificationTypes"
                             option-value="id"
@@ -466,7 +456,7 @@ const createInvoiceInCorrection = async () => {
                             :required="true"
                         />
                         <VnSelect
-                            :label="`${useCapitalize(t('globals.reason'))}*`"
+                            :label="`${useCapitalize(t('globals.reason'))}`"
                             v-model="correctionFormData.invoiceReason"
                             :options="invoiceCorrectionTypes"
                             option-value="id"
@@ -494,6 +484,9 @@ const createInvoiceInCorrection = async () => {
     .q-card {
         max-width: 45em;
     }
+    .q-field:nth-child(1) {
+        padding-bottom: 20px;
+    }
 }
 
 @media (max-width: $breakpoint-xs) {
diff --git a/src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue b/src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue
index a7b9110f5..3e4d7d615 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue
@@ -72,7 +72,13 @@ const columns = computed(() => [
 ]);
 
 const getTotal = (data, key) =>
-    data.reduce((acc, cur) => acc + +String(cur[key]).replace(',', '.'), 0);
+    data.reduce((acc, cur) => acc + +String(cur[key] || 0).replace(',', '.'), 0);
+
+const formatOpt = (row, { model, options }, prop) => {
+    const obj = row[model];
+    const option = options.find(({ id }) => id == obj);
+    return option ? `${obj}:${option[prop]}` : '';
+};
 </script>
 <template>
     <FetchData
@@ -92,7 +98,7 @@ const getTotal = (data, key) =>
             ref="invoiceInFormRef"
             data-key="InvoiceInIntrastats"
             url="InvoiceInIntrastats"
-            :auto-load="!currency"
+            auto-load
             :data-required="{ invoiceInFk: invoiceInId }"
             :filter="filter"
             v-model:selected="rowsSelected"
@@ -124,6 +130,9 @@ const getTotal = (data, key) =>
                                 option-value="id"
                                 option-label="description"
                                 :filter-options="['id', 'description']"
+                                :hide-selected="false"
+                                :fill-input="false"
+                                :display-value="formatOpt(row, col, 'description')"
                             >
                                 <template #option="scope">
                                     <QItem v-bind="scope.itemProps">
@@ -247,7 +256,11 @@ const getTotal = (data, key) =>
     }
 }
 </style>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep(.q-table tr .q-td:nth-child(2) input) {
+    display: none;
+}
+</style>
 <i18n>
     en:
         amount: Amount
diff --git a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
index cdf012b2a..5973913b2 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
@@ -66,7 +66,7 @@ const vatColumns = ref([
         field: (row) => taxRate(row.taxableBase, row.taxTypeSage?.rate),
         format: (value) => toCurrency(value, currency.value),
         sortable: true,
-        align: 'center',
+        align: 'left',
     },
     {
         name: 'currency',
@@ -339,6 +339,16 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                             </QTh>
                         </QTr>
                     </template>
+                    <template #body-cell-vat="{ value: vatCell }">
+                        <QTd :title="vatCell" shrink>
+                            {{ vatCell }}
+                        </QTd>
+                    </template>
+                    <template #body-cell-transaction="{ value: transactionCell }">
+                        <QTd :title="transactionCell" shrink>
+                            {{ transactionCell }}
+                        </QTd>
+                    </template>
                     <template #bottom-row>
                         <QTr class="bg">
                             <QTd></QTd>
@@ -347,7 +357,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                             }}</QTd>
                             <QTd></QTd>
                             <QTd></QTd>
-                            <QTd class="text-center">{{
+                            <QTd>{{
                                 toCurrency(getTotalTax(entity.invoiceInTax, currency))
                             }}</QTd>
                             <QTd></QTd>
@@ -423,6 +433,10 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
 .bg {
     background-color: var(--vn-accent-color);
 }
+.q-chip {
+    color: var(--vn-text-color);
+}
+
 @media (min-width: $breakpoint-md) {
     .summaryBody {
         .vat {
diff --git a/src/pages/InvoiceIn/Card/InvoiceInVat.vue b/src/pages/InvoiceIn/Card/InvoiceInVat.vue
index 58f6e0d01..63a84b855 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInVat.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInVat.vue
@@ -162,8 +162,14 @@ async function addExpense() {
     }
 }
 const getTotalTaxableBase = (rows) =>
-    rows.reduce((acc, { taxableBase }) => acc + +taxableBase, 0);
+    rows.reduce((acc, { taxableBase }) => acc + +(taxableBase || 0), 0);
 const getTotalRate = (rows) => rows.reduce((acc, cur) => acc + +taxRate(cur), 0);
+
+const formatOpt = (row, { model, options }, prop) => {
+    const obj = row[model];
+    const option = options.find(({ id }) => id == obj);
+    return option ? `${obj}:${option[prop]}` : '';
+};
 </script>
 <template>
     <FetchData
@@ -254,8 +260,9 @@ const getTotalRate = (rows) => rows.reduce((acc, cur) => acc + +taxRate(cur), 0)
                             :option-value="col.optionValue"
                             :option-label="col.optionLabel"
                             :filter-options="['id', 'vat']"
-                            :autofocus="col.tabIndex == 1"
-                            input-debounce="0"
+                            :hide-selected="false"
+                            :fill-input="false"
+                            :display-value="formatOpt(row, col, 'vat')"
                         >
                             <template #option="scope">
                                 <QItem v-bind="scope.itemProps">
@@ -280,6 +287,9 @@ const getTotalRate = (rows) => rows.reduce((acc, cur) => acc + +taxRate(cur), 0)
                             :filter-options="['id', 'transaction']"
                             :autofocus="col.tabIndex == 1"
                             input-debounce="0"
+                            :hide-selected="false"
+                            :fill-input="false"
+                            :display-value="formatOpt(row, col, 'transaction')"
                         >
                             <template #option="scope">
                                 <QItem v-bind="scope.itemProps">
@@ -474,11 +484,16 @@ const getTotalRate = (rows) => rows.reduce((acc, cur) => acc + +taxRate(cur), 0)
         />
     </QPageSticky>
 </template>
+
 <style lang="scss" scoped>
 .bg {
     background-color: var(--vn-light-gray);
 }
 
+:deep(.q-table tr td:nth-child(n + 4):nth-child(-n + 5) input) {
+    display: none;
+}
+
 @media (max-width: $breakpoint-xs) {
     .q-dialog {
         .q-card {
diff --git a/src/pages/InvoiceIn/InvoiceInFilter.vue b/src/pages/InvoiceIn/InvoiceInFilter.vue
index 57aaeab54..52ea55204 100644
--- a/src/pages/InvoiceIn/InvoiceInFilter.vue
+++ b/src/pages/InvoiceIn/InvoiceInFilter.vue
@@ -7,13 +7,19 @@ import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnCurrency from 'src/components/common/VnCurrency.vue';
+import FetchData from 'components/FetchData.vue';
 
 const { t } = useI18n();
 defineProps({ dataKey: { type: String, required: true } });
-const suppliers = ref([]);
+const activities = ref([]);
 </script>
 
 <template>
+    <FetchData
+        url="SupplierActivities"
+        auto-load
+        @on-fetch="(data) => (activities = data)"
+    />
     <VnFilterPanel :data-key="dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
@@ -29,11 +35,7 @@ const suppliers = ref([]);
                         v-model="params.supplierRef"
                         is-outlined
                         lazy-rules
-                    >
-                        <template #prepend>
-                            <QIcon name="vn:client" size="sm"></QIcon>
-                        </template>
-                    </VnInput>
+                    />
                 </QItemSection>
             </QItem>
             <QItem>
@@ -43,11 +45,7 @@ const suppliers = ref([]);
                         v-model="params.fi"
                         is-outlined
                         lazy-rules
-                    >
-                        <template #prepend>
-                            <QIcon name="badge" size="sm"></QIcon>
-                        </template>
-                    </VnInput>
+                    />
                 </QItemSection>
             </QItem>
             <QItem>
@@ -59,12 +57,11 @@ const suppliers = ref([]);
                         :label="t('params.supplierFk')"
                         option-value="id"
                         option-label="nickname"
-                        :options="suppliers"
                         dense
                         outlined
                         rounded
-                    >
-                    </VnSelect>
+                        :filter-options="['id', 'name']"
+                    />
                 </QItemSection>
             </QItem>
             <QItem>
@@ -74,11 +71,7 @@ const suppliers = ref([]);
                         v-model="params.account"
                         is-outlined
                         lazy-rules
-                    >
-                        <template #prepend>
-                            <QIcon name="person" size="sm" />
-                        </template>
-                    </VnInput>
+                    />
                 </QItemSection>
             </QItem>
             <QItem>
@@ -105,7 +98,21 @@ const suppliers = ref([]);
                     />
                 </QItemSection>
             </QItem>
-            <QItem class="q-mb-md">
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        :label="t('params.supplierActivityFk')"
+                        v-model="params.supplierActivityFk"
+                        dense
+                        outlined
+                        rounded
+                        option-value="code"
+                        option-label="name"
+                        :options="activities"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
                 <QItemSection>
                     <QCheckbox
                         :label="t('params.isBooked')"
@@ -114,6 +121,14 @@ const suppliers = ref([]);
                         toggle-indeterminate
                     />
                 </QItemSection>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('params.correctingFk')"
+                        v-model="params.correctingFk"
+                        @update:model-value="searchFn()"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
             </QItem>
             <QExpansionItem :label="t('More options')" expand-separator>
                 <QItem>
@@ -123,11 +138,7 @@ const suppliers = ref([]);
                             v-model="params.serialNumber"
                             is-outlined
                             lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </VnInput>
+                        />
                     </QItemSection>
                 </QItem>
                 <QItem>
@@ -137,11 +148,7 @@ const suppliers = ref([]);
                             v-model="params.serial"
                             is-outlined
                             lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </VnInput>
+                        />
                     </QItemSection>
                 </QItem>
                 <QItem>
@@ -151,11 +158,7 @@ const suppliers = ref([]);
                             v-model="params.awbCode"
                             is-outlined
                             lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </VnInput>
+                        />
                     </QItemSection>
                 </QItem>
             </QExpansionItem>
@@ -166,7 +169,7 @@ const suppliers = ref([]);
 <i18n>
 en:
     params:
-        search: ID
+        search: Id or supplier name
         supplierRef: Supplier ref.
         supplierFk: Supplier
         fi: Supplier fiscal id
@@ -177,12 +180,17 @@ en:
         dued: Dued
         serialNumber: Serial Number
         serial: Serial
-        account: Account
+        account: Ledger account
         isBooked: is booked
-        correctedFk: Rectificatives
+        correctedFk: Rectified
+        issued: Issued
+        to: To
+        awbCode: AWB
+        correctingFk: Rectificative
+        supplierActivityFk: Supplier activity
 es:
     params:
-        search: Contiene
+        search: Id o nombre proveedor
         supplierRef: Ref. proveedor
         supplierFk: Proveedor
         clientFk: Cliente
@@ -193,10 +201,12 @@ es:
         amount: Importe
         issued: Emitida
         isBooked: Conciliada
-        account: Cuenta
+        account: Cuenta contable
         created: Creada
         dued: Vencida
-        correctedFk: Rectificativas
+        correctedFk: Rectificada
+        correctingFk: Rectificativa
+        supplierActivityFk: Actividad proveedor
     From: Desde
     To: Hasta
     Amount: Importe
diff --git a/src/pages/InvoiceIn/InvoiceInList.vue b/src/pages/InvoiceIn/InvoiceInList.vue
index 0e5216314..192d0ccc7 100644
--- a/src/pages/InvoiceIn/InvoiceInList.vue
+++ b/src/pages/InvoiceIn/InvoiceInList.vue
@@ -1,44 +1,29 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import { downloadFile } from 'src/composables/downloadFile';
 import { toDate, toCurrency } from 'src/filters/index';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import InvoiceInFilter from './InvoiceInFilter.vue';
-import { getUrl } from 'src/composables/getUrl';
 import InvoiceInSummary from './Card/InvoiceInSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import InvoiceInSearchbar from 'src/pages/InvoiceIn/InvoiceInSearchbar.vue';
 
 const stateStore = useStateStore();
-const router = useRouter();
 const { viewSummary } = useSummaryDialog();
-let url = ref();
 const { t } = useI18n();
 
-onMounted(async () => {
-    stateStore.rightDrawer = true;
-    url.value = await getUrl('');
-});
+onMounted(async () => (stateStore.rightDrawer = true));
 onUnmounted(() => (stateStore.rightDrawer = false));
-
-function navigate(id) {
-    router.push({ path: `/invoice-in/${id}` });
-}
 </script>
 
 <template>
-    <VnSearchbar
-        data-key="InvoiceInList"
-        :label="t('Search invoice')"
-        :info="t('You can search by invoice reference')"
-    />
+    <InvoiceInSearchbar />
     <RightMenu>
         <template #right-panel>
             <InvoiceInFilter data-key="InvoiceInList" />
@@ -54,10 +39,10 @@ function navigate(id) {
             >
                 <template #body="{ rows }">
                     <CardList
-                        v-for="row of rows"
-                        :key="row.id"
+                        v-for="(row, index) of rows"
+                        :key="index"
                         :title="row.supplierRef"
-                        @click="navigate(row.id)"
+                        @click="$router.push({ path: `/invoice-in/${row.id}` })"
                         :id="row.id"
                     >
                         <template #list-items>
@@ -102,7 +87,9 @@ function navigate(id) {
                         <template #actions>
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
-                                @click.stop="navigate(row.id)"
+                                @click.stop="
+                                    $router.push({ path: `/invoice-in/${row.id}` })
+                                "
                                 outline
                                 type="reset"
                             />
@@ -115,7 +102,7 @@ function navigate(id) {
                                 class="q-mt-sm"
                             />
                             <QBtn
-                                :label="t('Download')"
+                                :label="t('globals.download')"
                                 class="q-mt-sm"
                                 @click.stop="downloadFile(row.dmsFk)"
                                 type="submit"
@@ -131,10 +118,3 @@ function navigate(id) {
         <QBtn color="primary" icon="add" size="lg" round :href="`/#/invoice-in/create`" />
     </QPageSticky>
 </template>
-
-<i18n>
-es:
-    Search invoice: Buscar factura recibida
-    You can search by invoice reference: Puedes buscar por referencia de la factura
-    Download: Descargar
-</i18n>
diff --git a/src/pages/InvoiceIn/InvoiceInMain.vue b/src/pages/InvoiceIn/InvoiceInMain.vue
deleted file mode 100644
index 66ce78f23..000000000
--- a/src/pages/InvoiceIn/InvoiceInMain.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'src/components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/InvoiceIn/InvoiceInSearchbar.vue b/src/pages/InvoiceIn/InvoiceInSearchbar.vue
new file mode 100644
index 000000000..f2731b005
--- /dev/null
+++ b/src/pages/InvoiceIn/InvoiceInSearchbar.vue
@@ -0,0 +1,18 @@
+<script setup>
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+</script>
+<template>
+    <VnSearchbar
+        data-key="InvoiceInList"
+        :label="t('Search invoice')"
+        :info="t('Search invoices in by id or supplier fiscal name')"
+        url="InvoiceIns/filter"
+    />
+</template>
+<i18n>
+es:
+    Search invoice: Buscar factura recibida
+    Search invoices in by id or supplier fiscal name: Buscar facturas recibidas por id o por nombre fiscal del proveedor
+</i18n>
diff --git a/src/pages/InvoiceIn/locale/es.yml b/src/pages/InvoiceIn/locale/es.yml
deleted file mode 100644
index d7e38d7fa..000000000
--- a/src/pages/InvoiceIn/locale/es.yml
+++ /dev/null
@@ -1,2 +0,0 @@
-Search invoice: Buscar factura recibida
-You can search by invoice reference: Puedes buscar por referencia de la factura
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue b/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
index 42b8d92d9..bd52e5b02 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
@@ -84,7 +84,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.
             />
         </template>
         <template #actions="{ entity }">
-            <QCardActions>
+            <QCardActions class="flex justify-center">
                 <QBtn
                     v-if="entity.client"
                     size="md"
diff --git a/src/pages/InvoiceOut/InvoiceOutMain.vue b/src/pages/InvoiceOut/InvoiceOutMain.vue
deleted file mode 100644
index 66ce78f23..000000000
--- a/src/pages/InvoiceOut/InvoiceOutMain.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'src/components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Item/Card/CreateGenusForm.vue b/src/pages/Item/Card/CreateGenusForm.vue
index 637a1137e..66f5130d4 100644
--- a/src/pages/Item/Card/CreateGenusForm.vue
+++ b/src/pages/Item/Card/CreateGenusForm.vue
@@ -31,7 +31,7 @@ onMounted(async () => {
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     ref="genusInputRef"
                     :label="t('Latin genus name')"
diff --git a/src/pages/Item/Card/CreateIntrastatForm.vue b/src/pages/Item/Card/CreateIntrastatForm.vue
index 3fd1ffe22..5fe254759 100644
--- a/src/pages/Item/Card/CreateIntrastatForm.vue
+++ b/src/pages/Item/Card/CreateIntrastatForm.vue
@@ -33,7 +33,7 @@ onMounted(async () => {
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     ref="identifierInputRef"
                     :label="t('createIntrastatForm.identifier')"
diff --git a/src/pages/Item/Card/CreateSpecieForm.vue b/src/pages/Item/Card/CreateSpecieForm.vue
index 2731820ba..120544fd9 100644
--- a/src/pages/Item/Card/CreateSpecieForm.vue
+++ b/src/pages/Item/Card/CreateSpecieForm.vue
@@ -31,7 +31,7 @@ onMounted(async () => {
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     ref="specieInputRef"
                     :label="t('Latin species name')"
diff --git a/src/pages/Item/Card/ItemBasicData.vue b/src/pages/Item/Card/ItemBasicData.vue
index eb486f551..ca2fbc7a7 100644
--- a/src/pages/Item/Card/ItemBasicData.vue
+++ b/src/pages/Item/Card/ItemBasicData.vue
@@ -71,7 +71,7 @@ const onIntrastatCreated = (response, formData) => {
         :clear-store-on-unmount="false"
     >
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('basicData.type')"
                     v-model="data.typeFk"
@@ -95,7 +95,7 @@ const onIntrastatCreated = (response, formData) => {
                 <VnInput :label="t('basicData.reference')" v-model="data.comment" />
                 <VnInput :label="t('basicData.relevancy')" v-model="data.relevancy" />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput :label="t('basicData.stems')" v-model="data.stems" />
                 <VnInput
                     :label="t('basicData.multiplier')"
@@ -127,7 +127,7 @@ const onIntrastatCreated = (response, formData) => {
                     </template>
                 </VnSelectDialog>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelectDialog
                     :label="t('basicData.intrastat')"
                     v-model="data.intrastatFk"
@@ -166,7 +166,7 @@ const onIntrastatCreated = (response, formData) => {
                     />
                 </div>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('basicData.weightByPiece')"
                     v-model.number="data.weightByPiece"
@@ -192,7 +192,7 @@ const onIntrastatCreated = (response, formData) => {
                     type="number"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QCheckbox v-model="data.isActive" :label="t('basicData.isActive')" />
                 <QCheckbox v-model="data.hasKgPrice" :label="t('basicData.hasKgPrice')" />
                 <div>
diff --git a/src/pages/Item/Card/ItemBotanical.vue b/src/pages/Item/Card/ItemBotanical.vue
index 15492de9f..416c7f78b 100644
--- a/src/pages/Item/Card/ItemBotanical.vue
+++ b/src/pages/Item/Card/ItemBotanical.vue
@@ -67,7 +67,7 @@ onMounted(async () => {
         :clear-store-on-unmount="false"
     >
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelectDialog
                     :label="t('Genus')"
                     v-model="data.genusFk"
diff --git a/src/pages/Item/ItemCreate.vue b/src/pages/Item/ItemCreate.vue
index baa51414c..6b6234b70 100644
--- a/src/pages/Item/ItemCreate.vue
+++ b/src/pages/Item/ItemCreate.vue
@@ -85,7 +85,7 @@ onBeforeMount(async () => {
             @on-data-saved="redirectToItemBasicData"
         >
             <template #form="{ data }">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInput
                         v-model="data.provisionalName"
                         :label="t('item.create.name')"
@@ -107,7 +107,7 @@ onBeforeMount(async () => {
                         hide-selected
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :label="t('item.create.type')"
                         v-model="data.typeFk"
@@ -154,7 +154,7 @@ onBeforeMount(async () => {
                         </template>
                     </VnSelect>
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :label="t('item.create.origin')"
                         v-model="data.originFk"
diff --git a/src/pages/Item/ItemMain.vue b/src/pages/Item/ItemMain.vue
deleted file mode 100644
index c1f2a31db..000000000
--- a/src/pages/Item/ItemMain.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup>
-import LeftMenu from 'src/components/LeftMenu.vue';
-
-import { useStateStore } from 'stores/useStateStore';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Item/ItemRequestDenyForm.vue b/src/pages/Item/ItemRequestDenyForm.vue
index f26edb845..be70fb799 100644
--- a/src/pages/Item/ItemRequestDenyForm.vue
+++ b/src/pages/Item/ItemRequestDenyForm.vue
@@ -36,7 +36,7 @@ onMounted(async () => {
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnInput
                         ref="textAreaRef"
diff --git a/src/pages/Item/ItemTypeCreate.vue b/src/pages/Item/ItemTypeCreate.vue
index af3dc34ea..b7b06bbe6 100644
--- a/src/pages/Item/ItemTypeCreate.vue
+++ b/src/pages/Item/ItemTypeCreate.vue
@@ -53,11 +53,11 @@ const redirectToItemTypeBasicData = (_, { id }) => {
             @on-data-saved="redirectToItemTypeBasicData"
         >
             <template #form="{ data }">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInput v-model="data.code" :label="t('itemType.shared.code')" />
                     <VnInput v-model="data.name" :label="t('itemType.shared.name')" />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         v-model="data.workerFk"
                         :label="t('itemType.shared.worker')"
@@ -75,7 +75,7 @@ const redirectToItemTypeBasicData = (_, { id }) => {
                         hide-selected
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         v-model="data.temperatureFk"
                         :label="t('itemType.shared.temperature')"
diff --git a/src/pages/ItemType/Card/ItemTypeBasicData.vue b/src/pages/ItemType/Card/ItemTypeBasicData.vue
index 0bdfab951..51e24272d 100644
--- a/src/pages/ItemType/Card/ItemTypeBasicData.vue
+++ b/src/pages/ItemType/Card/ItemTypeBasicData.vue
@@ -42,11 +42,11 @@ const temperaturesOptions = ref([]);
         auto-load
     >
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput v-model="data.code" :label="t('shared.code')" />
                 <VnInput v-model="data.name" :label="t('shared.name')" />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     v-model="data.workerFk"
                     :label="t('shared.worker')"
@@ -64,7 +64,7 @@ const temperaturesOptions = ref([]);
                     hide-selected
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     v-model="data.temperatureFk"
                     :label="t('shared.temperature')"
diff --git a/src/pages/Monitor/MonitorList.vue b/src/pages/Monitor/MonitorList.vue
index 1b1ccb5b3..4906247e8 100644
--- a/src/pages/Monitor/MonitorList.vue
+++ b/src/pages/Monitor/MonitorList.vue
@@ -14,10 +14,10 @@ const stateStore = useStateStore();
 const expanded = ref(true);
 
 onMounted(async () => {
-    stateStore.rightDrawer = true;
+    stateStore.leftDrawer = false;
 });
 
-onUnmounted(() => (stateStore.rightDrawer = false));
+onUnmounted(() => (stateStore.leftDrawer = true));
 </script>
 
 <template>
@@ -63,13 +63,15 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 </template>
             </QExpansionItem>
         </QCard>
-        <QCard class="full-width q-mb-lg">
+        <QCard class="full-width">
             <QItem class="justify-between">
-                <QItemLabel class="slider-container">
+                <QItemLabel class="col slider-container">
                     <span class="text-body1"
                         >{{ t('salesMonitor.ticketsMonitor') }}
                     </span>
-                    <QCardSection class="col"><SalesTicketsTable /> </QCardSection>
+                    <QCardSection class="col" style="padding-inline: 0"
+                        ><SalesTicketsTable />
+                    </QCardSection>
                 </QItemLabel>
             </QItem>
         </QCard>
diff --git a/src/pages/Monitor/MonitorMain.vue b/src/pages/Monitor/MonitorMain.vue
deleted file mode 100644
index c1f2a31db..000000000
--- a/src/pages/Monitor/MonitorMain.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup>
-import LeftMenu from 'src/components/LeftMenu.vue';
-
-import { useStateStore } from 'stores/useStateStore';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Monitor/SalesClientsTable.vue b/src/pages/Monitor/SalesClientsTable.vue
index 8008b1fda..2fb9e8e2f 100644
--- a/src/pages/Monitor/SalesClientsTable.vue
+++ b/src/pages/Monitor/SalesClientsTable.vue
@@ -3,14 +3,11 @@ import { ref, computed, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
-import VnInputDate from 'src/components/common/VnInputDate.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
-import VnPaginate from 'components/ui/VnPaginate.vue';
 
 import { toDateFormat } from 'src/filters/date.js';
-import { dashIfEmpty } from 'src/filters';
+import VnTable from 'src/components/VnTable/VnTable.vue';
 
 const { t } = useI18n();
 
@@ -37,9 +34,11 @@ const filter = reactive({
     },
 });
 
+const refetch = async () => await paginateRef.value.fetch();
+
 watch(dateRange, (val) => {
     filter.where['v.stamp'].between = val;
-    paginateRef.value.fetch();
+    refetch();
 });
 
 function exprBuilder(param, value) {
@@ -53,25 +52,15 @@ function exprBuilder(param, value) {
 
 const params = reactive({});
 
-const applyColumnFilter = async (col) => {
-    try {
-        const paramKey = col.columnFilter?.filterParamKey || col.field;
-        params[paramKey] = col.columnFilter.filterValue;
-        await paginateRef.value.addFilter(null, params);
-    } catch (err) {
-        console.error('Error applying column filter', err);
-    }
-};
-
 const columns = computed(() => [
     {
         label: t('salesClientsTable.date'),
-        name: 'date',
+        name: 'dated',
         field: 'dated',
         align: 'left',
         columnFilter: null,
         sortable: true,
-        format: (val) => toDateFormat(val),
+        format: (row) => toDateFormat(row.dated),
     },
     {
         label: t('salesClientsTable.hour'),
@@ -86,19 +75,9 @@ const columns = computed(() => [
         field: 'salesPerson',
         align: 'left',
         sortable: true,
-        columnFilter: {
-            component: VnSelect,
-            filterParamKey: 'salesPersonFk',
-            type: 'select',
-            filterValue: null,
-            attrs: {
-                options: workersActiveOptions.value,
-                'option-value': 'id',
-                'option-label': 'name',
-                dense: true,
-            },
+        columnField: {
+            component: null,
         },
-        format: (val) => dashIfEmpty(val),
     },
     {
         label: t('salesClientsTable.client'),
@@ -106,19 +85,9 @@ const columns = computed(() => [
         name: 'client',
         align: 'left',
         sortable: true,
-        columnFilter: {
-            component: VnSelect,
-            filterParamKey: 'clientFk',
-            type: 'select',
-            filterValue: null,
-            attrs: {
-                options: clientsOptions.value,
-                'option-value': 'id',
-                'option-label': 'name',
-                dense: true,
-            },
+        columnField: {
+            component: null,
         },
-        format: (val) => dashIfEmpty(val),
     },
 ]);
 </script>
@@ -144,7 +113,7 @@ const columns = computed(() => [
         @on-fetch="(data) => (clientsOptions = data)"
     />
     <QCard style="max-height: 380px; overflow-y: scroll">
-        <VnPaginate
+        <VnTable
             ref="paginateRef"
             data-key="SalesMonitorClients"
             url="SalesMonitors/clientsFilter"
@@ -155,63 +124,24 @@ const columns = computed(() => [
             :filter="filter"
             :offset="50"
             auto-load
+            :columns="columns"
+            :right-search="false"
+            default-mode="table"
+            dense
+            :without-header="true"
         >
-            <template #body="{ rows }">
-                <QTable
-                    :rows="rows"
-                    :columns="columns"
-                    row-key="id"
-                    :pagination="{ rowsPerPage: 0 }"
-                    class="full-width"
-                    :no-data-label="t('globals.noResults')"
-                >
-                    <template #top>
-                        <VnInputDate
-                            :label="t('salesClientsTable.from')"
-                            dense
-                            v-model="from"
-                            class="q-mr-lg"
-                            style="width: 150px"
-                        />
-                        <VnInputDate
-                            :label="t('salesClientsTable.to')"
-                            dense
-                            v-model="to"
-                            style="width: 150px"
-                        />
-                    </template>
-                    <template #top-row="{ cols }">
-                        <QTr>
-                            <QTd
-                                v-for="(col, index) in cols"
-                                :key="index"
-                                style="max-width: 100px"
-                            >
-                                <VnSelect
-                                    :is="col.columnFilter.component"
-                                    v-if="col.columnFilter"
-                                    v-model="col.columnFilter.filterValue"
-                                    v-bind="col.columnFilter.attrs"
-                                    @update:model-value="applyColumnFilter(col)"
-                                    dense
-                                />
-                            </QTd>
-                        </QTr>
-                    </template>
-                    <template #body-cell-salesPerson="{ row }">
-                        <QTd>
-                            <span class="link">{{ row.salesPerson }}</span>
-                            <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
-                        </QTd>
-                    </template>
-                    <template #body-cell-client="{ row }">
-                        <QTd>
-                            <span class="link">{{ row.clientName }}</span>
-                            <CustomerDescriptorProxy :id="row.clientFk" />
-                        </QTd>
-                    </template>
-                </QTable>
+            <template #column-salesPerson="{ row }">
+                <QTd>
+                    <span class="link">{{ row.salesPerson }}</span>
+                    <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
+                </QTd>
             </template>
-        </VnPaginate>
+            <template #column-client="{ row }">
+                <QTd>
+                    <span class="link">{{ row.clientName }}</span>
+                    <CustomerDescriptorProxy :id="row.clientFk" />
+                </QTd>
+            </template>
+        </VnTable>
     </QCard>
 </template>
diff --git a/src/pages/Monitor/SalesOrdersTable.vue b/src/pages/Monitor/SalesOrdersTable.vue
index 0ba900393..f0c389aa6 100644
--- a/src/pages/Monitor/SalesOrdersTable.vue
+++ b/src/pages/Monitor/SalesOrdersTable.vue
@@ -5,7 +5,8 @@ import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
-import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnTable from 'components/VnTable/VnTable.vue';
 
 import { toDateFormat, toDateTimeFormat } from 'src/filters/date.js';
 import { toCurrency } from 'src/filters';
@@ -50,19 +51,22 @@ const columns = computed(() => [
         name: 'date',
         field: 'dated',
         align: 'left',
-        columnFilter: null,
+        sortable: true,
+        cardVisible: true,
     },
     {
         label: t('salesOrdersTable.client'),
         name: 'client',
         align: 'left',
         sortable: true,
+        cardVisible: true,
     },
     {
         label: t('salesOrdersTable.salesPerson'),
         name: 'salesPerson',
         align: 'left',
         sortable: true,
+        cardVisible: true,
     },
 ]);
 
@@ -119,79 +123,78 @@ const redirectToOrderSummary = (orderId) => {
         @on-fetch="(data) => (clientsOptions = data)"
     />
 
+    <VnSubToolbar />
     <QCard style="max-height: 380px; overflow-y: scroll">
-        <VnPaginate
+        <VnTable
             ref="paginateRef"
             data-key="SalesMonitorOrders"
             url="SalesMonitors/ordersFilter"
             order="date_make DESC"
             :limit="6"
+            :right-search="false"
             :expr-builder="exprBuilder"
             auto-load
+            :columns="columns"
+            :table="{
+                'row-key': 'id',
+                selection: 'multiple',
+                'hide-bottom': true,
+            }"
+            default-mode="table"
+            :without-header="false"
+            @row-click="(_, row) => redirectToOrderSummary(row.id)"
+            v-model:selected="selectedRows"
         >
-            <template #body="{ rows }">
-                <QTable
-                    :rows="rows"
-                    :columns="columns"
-                    row-key="id"
-                    selection="multiple"
-                    v-model:selected="selectedRows"
-                    :pagination="{ rowsPerPage: 0 }"
-                    :no-data-label="t('globals.noResults')"
-                    @row-click="(_, row) => redirectToOrderSummary(row.id)"
+            <template #top-left>
+                <QBtn
+                    v-if="selectedRows.length > 0"
+                    icon="delete"
+                    size="md"
+                    color="primary"
+                    @click="
+                        openConfirmationModal(
+                            t('salesOrdersTable.deleteConfirmTitle'),
+                            t('salesOrdersTable.deleteConfirmMessage'),
+                            removeOrders
+                        )
+                    "
                 >
-                    <template #top>
-                        <QBtn
-                            v-if="selectedRows.length > 0"
-                            icon="delete"
-                            size="md"
-                            color="primary"
-                            @click="
-                                openConfirmationModal(
-                                    t('salesOrdersTable.deleteConfirmTitle'),
-                                    t('salesOrdersTable.deleteConfirmMessage'),
-                                    removeOrders
-                                )
-                            "
-                        >
-                            <QTooltip>{{ t('salesOrdersTable.delete') }}</QTooltip>
-                        </QBtn>
-                    </template>
-                    <template #body-cell-date="{ row }">
-                        <QTd>
-                            <QBadge
-                                :color="getBadgeColor(row.date_send)"
-                                text-color="black"
-                                class="q-ma-none q-mb-md"
-                                dense
-                                style="font-size: 14px"
-                            >
-                                {{ toDateFormat(row.date_send) }}
-                            </QBadge>
-                            <div>{{ toDateTimeFormat(row.date_make) }}</div>
-                        </QTd>
-                    </template>
-                    <template #body-cell-client="{ row }">
-                        <QTd>
-                            <div class="q-mb-md">
-                                <span class="link">{{ row.clientName }}</span>
-                                <CustomerDescriptorProxy :id="row.clientFk" />
-                            </div>
-                            <span> {{ row.agencyName }}</span>
-                        </QTd>
-                    </template>
-                    <template #body-cell-salesPerson="{ row }">
-                        <QTd>
-                            <div class="q-mb-md">
-                                <span class="link">{{ row.salesPerson }}</span>
-                                <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
-                            </div>
-                            <span>{{ toCurrency(row.import) }}</span>
-                        </QTd>
-                    </template>
-                </QTable>
+                    <QTooltip>{{ t('salesOrdersTable.delete') }}</QTooltip>
+                </QBtn>
             </template>
-        </VnPaginate>
+            <template #column-date="{ row }">
+                <QTd>
+                    <QBadge
+                        :color="getBadgeColor(row.date_send)"
+                        text-color="black"
+                        class="q-pa-sm q-mb-md"
+                        style="font-size: 14px"
+                    >
+                        {{ toDateFormat(row.date_send) }}
+                    </QBadge>
+                    <div>{{ toDateTimeFormat(row.date_make) }}</div>
+                </QTd>
+            </template>
+            <template #column-client="{ row }">
+                <QTd>
+                    <div class="q-mb-md">
+                        <span class="link">{{ row.clientName }}</span>
+                        <CustomerDescriptorProxy :id="row.clientFk" />
+                    </div>
+                    <span> {{ row.agencyName }}</span>
+                </QTd>
+            </template>
+
+            <template #column-salesPerson="{ row }">
+                <QTd>
+                    <div class="q-mb-md">
+                        <span class="link">{{ row.salesPerson }}</span>
+                        <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
+                    </div>
+                    <span>{{ toCurrency(row.import) }}</span>
+                </QTd>
+            </template>
+        </VnTable>
     </QCard>
 </template>
 <style lang="scss" scoped>
diff --git a/src/pages/Monitor/SalesTicketsTable.vue b/src/pages/Monitor/SalesTicketsTable.vue
index 222ccb9d0..1ca68240b 100644
--- a/src/pages/Monitor/SalesTicketsTable.vue
+++ b/src/pages/Monitor/SalesTicketsTable.vue
@@ -6,7 +6,6 @@ import { useRouter } from 'vue-router';
 import FetchData from 'components/FetchData.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
-import VnPaginate from 'components/ui/VnPaginate.vue';
 import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
@@ -15,6 +14,7 @@ import TicketSummary from 'src/pages/Ticket/Card/TicketSummary.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnTable from 'components/VnTable/VnTable.vue';
 
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { toDateFormat, toTimeFormat } from 'src/filters/date.js';
@@ -103,7 +103,10 @@ const columns = computed(() => [
         name: 'problems',
         align: 'left',
         sortable: true,
-        columnFilter: null,
+        columnFilter: false,
+        attrs: {
+            dense: true,
+        },
     },
     {
         label: t('salesTicketsTable.identifier'),
@@ -111,11 +114,10 @@ const columns = computed(() => [
         field: 'id',
         align: 'left',
         sortable: true,
+
         columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
+            component: 'input',
+            name: 'id',
             attrs: {
                 dense: true,
             },
@@ -128,10 +130,8 @@ const columns = computed(() => [
         field: 'nickname',
         sortable: true,
         columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
+            component: 'input',
+            name: 'nickname',
             attrs: {
                 dense: true,
             },
@@ -144,11 +144,8 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnSelect,
-            filterParamKey: 'salesPersonFk',
-            type: 'select',
-            filterValue: null,
-            event: getInputEvents,
+            component: 'select',
+            name: 'salesPersonFk',
             attrs: {
                 options: workersActiveOptions.value,
                 'option-value': 'id',
@@ -160,14 +157,12 @@ const columns = computed(() => [
     {
         label: t('salesTicketsTable.date'),
         name: 'date',
+        style: { 'max-width': '100px' },
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnInputDate,
-            filterParamKey: 'shippedDate',
-            type: 'date',
-            filterValue: null,
-            event: getInputEvents,
+            component: 'date',
+            name: 'shippedDate',
             attrs: {
                 dense: true,
             },
@@ -180,6 +175,13 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         format: (val) => toTimeFormat(val),
+        columnFilter: {
+            component: 'input',
+            name: 'theoreticalHour',
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('salesTicketsTable.practical'),
@@ -188,10 +190,8 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
+            component: 'input',
+            name: 'practicalHour',
             attrs: {
                 dense: true,
             },
@@ -204,6 +204,13 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         format: (val) => toTimeFormat(val),
+        columnFilter: {
+            component: 'input',
+            name: 'shippedDate',
+            attrs: {
+                dense: true,
+            },
+        },
     },
 
     {
@@ -211,13 +218,11 @@ const columns = computed(() => [
         name: 'province',
         field: 'province',
         align: 'left',
+        style: { 'max-width': '100px' },
         sortable: true,
         columnFilter: {
-            component: VnSelect,
-            filterParamKey: 'provinceFk',
-            type: 'select',
-            filterValue: null,
-            event: getInputEvents,
+            component: 'select',
+            name: 'provinceFk',
             attrs: {
                 options: provincesOptions.value,
                 'option-value': 'id',
@@ -230,13 +235,11 @@ const columns = computed(() => [
         label: t('salesTicketsTable.state'),
         name: 'state',
         align: 'left',
+        style: { 'max-width': '100px' },
         sortable: true,
         columnFilter: {
-            component: VnSelect,
-            filterParamKey: 'stateFk',
-            type: 'select',
-            filterValue: null,
-            event: getInputEvents,
+            component: 'select',
+            name: 'stateFk',
             attrs: {
                 options: statesOptions.value,
                 'option-value': 'id',
@@ -252,13 +255,13 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
+            inWhere: true,
+        },
+        attrs: {
+            'checked-icon': 'local_bar',
+            'unchecked-icon': 'local_bar',
+            'false-value': 0,
+            'true-value': 1,
         },
     },
     {
@@ -267,11 +270,8 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnSelect,
-            filterParamKey: 'zoneFk',
-            type: 'select',
-            filterValue: null,
-            event: getInputEvents,
+            component: 'select',
+            name: 'zoneFk',
             attrs: {
                 options: zonesOptions.value,
                 'option-value': 'id',
@@ -285,21 +285,44 @@ const columns = computed(() => [
         name: 'total',
         field: 'totalWithVat',
         align: 'left',
+        style: { 'max-width': '75px' },
         sortable: true,
         columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
+            component: 'input',
+            name: 'totalWithVat',
             attrs: {
                 dense: true,
             },
         },
     },
     {
-        name: 'rowActions',
-        align: 'left',
-        sortable: true,
+        align: 'right',
+        name: 'tableActions',
+        label: '',
+        actions: [
+            {
+                title: t('salesTicketsTable.goToLines'),
+                icon: 'vn:lines',
+                color: 'priamry',
+                action: (row) => redirectToSales(row.id),
+                isPrimary: true,
+                attrs: {
+                    flat: true,
+                    dense: true,
+                },
+            },
+            {
+                title: t('salesTicketsTable.preview'),
+                icon: 'preview',
+                color: 'priamry',
+                action: (row) => viewSummary(row.id, TicketSummary),
+                isPrimary: true,
+                attrs: {
+                    flat: true,
+                    dense: true,
+                },
+            },
+        ],
     },
 ]);
 
@@ -315,7 +338,9 @@ const getBadgeAttrs = (date) => {
     if (comparation < 0) return { color: 'success', 'text-color': 'black' };
     return { color: 'transparent', 'text-color': 'white' };
 };
+
 let refreshTimer = null;
+
 const autoRefreshHandler = (value) => {
     if (value)
         refreshTimer = setInterval(() => paginateRef.value.fetch(), DEFAULT_AUTO_REFRESH);
@@ -324,8 +349,10 @@ const autoRefreshHandler = (value) => {
         refreshTimer = null;
     }
 };
+
 const redirectToTicketSummary = (id) => {
-    router.push({ name: 'TicketSummary', params: { id } });
+    const url = `#/ticket/${id}/summary`;
+    window.open(url, '_blank');
 };
 
 const stateColors = {
@@ -348,12 +375,17 @@ const formatShippedDate = (date) => {
     return toDateFormat(_date);
 };
 
-onMounted(async () => {
-    const filteredColumns = columns.value.filter((col) => col.name !== 'rowActions');
-    allColumnNames.value = filteredColumns.map((col) => col.name);
-    params = fetchParams();
-    await paginateRef.value.addFilter(null, params);
-});
+const redirectToSales = (id) => {
+    const url = `#/ticket/${id}/sale`;
+    window.open(url, '_blank');
+};
+
+// onMounted(async () => {
+//     const filteredColumns = columns.value.filter((col) => col.name !== 'rowActions');
+//     allColumnNames.value = filteredColumns.map((col) => col.name);
+//     params = fetchParams();
+//     await paginateRef.value.addFilter(null, params);
+// });
 </script>
 
 <template>
@@ -394,7 +426,7 @@ onMounted(async () => {
         auto-load
         @on-fetch="(data) => (zonesOptions = data)"
     />
-    <VnPaginate
+    <VnTable
         ref="paginateRef"
         data-key="SalesMonitorTickets"
         url="SalesMonitors/salesFilter"
@@ -403,221 +435,153 @@ onMounted(async () => {
         :expr-builder="exprBuilder"
         :user-params="params"
         :offset="50"
+        :columns="columns"
+        :visible-columns="visibleColumns"
+        :right-search="false"
+        default-mode="table"
+        auto-load
+        @row-click="(_, row) => redirectToTicketSummary(row.id)"
     >
-        <template #body="{ rows }">
-            <QTable
-                :rows="rows"
-                :columns="columns"
-                row-key="id"
-                :pagination="{ rowsPerPage: 0 }"
-                :visible-columns="visibleColumns"
-                :no-data-label="t('globals.noResults')"
-                @row-click="(_, row) => redirectToTicketSummary(row.id)"
-            >
-                <template #top>
-                    <TableVisibleColumns
-                        :all-columns="allColumnNames"
-                        table-code="ticketsMonitor"
-                        labels-traductions-path="salesTicketsTable"
-                        @on-config-saved="visibleColumns = [...$event, 'rowActions']"
-                    />
-                    <QCheckbox
-                        v-model="autoRefresh"
-                        :label="t('salesTicketsTable.autoRefresh')"
-                        @update:model-value="autoRefreshHandler"
-                    />
-                </template>
-                <template #top-row="{ cols }">
-                    <QTr>
-                        <QTd
-                            v-for="(col, index) in cols"
-                            :key="index"
-                            style="max-width: 100px"
-                        >
-                            <component
-                                :is="col.columnFilter.component"
-                                v-if="col.columnFilter"
-                                v-model="col.columnFilter.filterValue"
-                                v-bind="col.columnFilter.attrs"
-                                v-on="col.columnFilter.event(col)"
-                                dense
-                                style="padding-bottom: 0"
-                            />
-                        </QTd>
-                    </QTr>
-                </template>
-                <template #body-cell-problems="{ row }">
-                    <QTd class="q-gutter-x-sm">
-                        <QIcon
-                            v-if="row.isTaxDataChecked === 0"
-                            name="vn:no036"
-                            color="primary"
-                            size="xs"
-                        >
-                            <QTooltip>{{
-                                t('salesTicketsTable.noVerifiedData')
-                            }}</QTooltip>
-                        </QIcon>
-                        <QIcon
-                            v-if="row.hasTicketRequest"
-                            name="vn:buyrequest"
-                            color="primary"
-                            size="xs"
-                        >
-                            <QTooltip>{{
-                                t('salesTicketsTable.purchaseRequest')
-                            }}</QTooltip>
-                        </QIcon>
-                        <QIcon
-                            v-if="row.itemShortage"
-                            name="vn:unavailable"
-                            color="primary"
-                            size="xs"
-                        >
-                            <QTooltip>{{ t('salesTicketsTable.notVisible') }}</QTooltip>
-                        </QIcon>
-                        <QIcon
-                            v-if="row.isFreezed"
-                            name="vn:frozen"
-                            color="primary"
-                            size="xs"
-                        >
-                            <QTooltip>{{ t('salesTicketsTable.clientFrozen') }}</QTooltip>
-                        </QIcon>
-                        <QIcon
-                            v-if="row.risk"
-                            name="vn:risk"
-                            :color="row.hasHighRisk ? 'negative' : 'primary'"
-                            size="xs"
-                        >
-                            <QTooltip
-                                >{{ t('salesTicketsTable.risk') }}:
-                                {{ row.risk }}</QTooltip
-                            >
-                        </QIcon>
-                        <QIcon
-                            v-if="row.hasComponentLack"
-                            name="vn:components"
-                            color="primary"
-                            size="xs"
-                        >
-                            <QTooltip>{{
-                                t('salesTicketsTable.componentLack')
-                            }}</QTooltip>
-                        </QIcon>
-                        <QIcon
-                            v-if="row.isTooLittle"
-                            name="vn:isTooLittle"
-                            color="primary"
-                            size="xs"
-                        >
-                            <QTooltip>{{ t('salesTicketsTable.tooLittle') }}</QTooltip>
-                        </QIcon>
-                    </QTd>
-                </template>
-                <template #body-cell-identifier="{ row }">
-                    <QTd>
-                        <span class="link" @click.stop.prevent>{{ row.id }}</span>
-                        <TicketDescriptorProxy :id="row.id" />
-                    </QTd>
-                </template>
-                <template #body-cell-client="{ row }">
-                    <QTd @click.stop.prevent>
-                        <span class="link">{{ row.nickname }}</span>
-                        <CustomerDescriptorProxy :id="row.clientFk" />
-                    </QTd>
-                </template>
-                <template #body-cell-salesPerson="{ row }">
-                    <QTd @click.stop.prevent>
-                        <span class="link">{{ row.userName }}</span>
-                        <WorkerDescriptorProxy :id="row.salesPersonFk" />
-                    </QTd>
-                </template>
-                <template #body-cell-date="{ row }">
-                    <QTd>
-                        <QBadge
-                            v-bind="getBadgeAttrs(row.shippedDate)"
-                            class="q-ma-none"
-                            dense
-                            style="font-size: 14px"
-                        >
-                            {{ formatShippedDate(row.shippedDate) }}
-                        </QBadge>
-                    </QTd>
-                </template>
-                <template #body-cell-state="{ row }">
-                    <QTd @click.stop.prevent>
-                        <div v-if="row.refFk">
-                            <span class="link">{{ row.refFk }}</span>
-                            <InvoiceOutDescriptorProxy :id="row.invoiceOutId" />
-                        </div>
-                        <QBadge
-                            v-else
-                            :color="stateColors[row.classColor] || 'transparent'"
-                            :text-color="stateColors[row.classColor] ? 'black' : 'white'"
-                            dense
-                            style="font-size: 14px"
-                        >
-                            {{ row.state }}
-                        </QBadge>
-                    </QTd>
-                </template>
-                <template #body-cell-isFragile="{ row }">
-                    <QTd>
-                        <QIcon
-                            v-if="row.isFragile"
-                            name="local_bar"
-                            color="primary"
-                            size="sm"
-                        >
-                            <QTooltip>{{ t('salesTicketsTable.isFragile') }}</QTooltip>
-                        </QIcon>
-                    </QTd>
-                </template>
-                <template #body-cell-zone="{ row }">
-                    <QTd @click.stop.prevent>
-                        <span class="link">{{ row.zoneName }}</span>
-                        <ZoneDescriptorProxy :id="row.zoneFk" />
-                    </QTd>
-                </template>
-                <template #body-cell-total="{ row }">
-                    <QTd>
-                        <QBadge
-                            :color="totalPriceColor(row) || 'transparent'"
-                            :text-color="totalPriceColor(row) ? 'black' : 'white'"
-                            dense
-                            style="font-size: 14px"
-                        >
-                            {{ toCurrency(row.totalWithVat) }}
-                        </QBadge>
-                    </QTd>
-                </template>
-                <template #body-cell-rowActions="{ row }">
-                    <QTd @click.stop.prevent>
-                        <QBtn
-                            icon="vn:lines"
-                            color="primary"
-                            size="md"
-                            class="q-mr-sm"
-                            flat
-                            dense
-                            :to="{ name: 'TicketSale', params: { id: row.id } }"
-                        >
-                            <QTooltip>{{ t('salesTicketsTable.goToLines') }}</QTooltip>
-                        </QBtn>
-                        <QBtn
-                            icon="preview"
-                            color="primary"
-                            size="md"
-                            dense
-                            flat
-                            @click="viewSummary(row.id, TicketSummary)"
-                        >
-                            <QTooltip>{{ t('salesTicketsTable.preview') }}</QTooltip>
-                        </QBtn>
-                    </QTd>
-                </template>
-            </QTable>
+        <template #top-left>
+            <TableVisibleColumns
+                :all-columns="allColumnNames"
+                table-code="ticketsMonitor"
+                labels-traductions-path="salesTicketsTable"
+                @on-config-saved="visibleColumns = [...$event, 'rowActions']"
+            />
+            <QCheckbox
+                v-model="autoRefresh"
+                :label="t('salesTicketsTable.autoRefresh')"
+                @update:model-value="autoRefreshHandler"
+            />
         </template>
-    </VnPaginate>
+        <template #column-problems="{ row }">
+            <QTd class="no-padding" style="max-width: 50px">
+                <QIcon
+                    v-if="row.isTaxDataChecked === 0"
+                    name="vn:no036"
+                    color="primary"
+                    size="xs"
+                >
+                    <QTooltip>{{ t('salesTicketsTable.noVerifiedData') }}</QTooltip>
+                </QIcon>
+                <QIcon
+                    v-if="row.hasTicketRequest"
+                    name="vn:buyrequest"
+                    color="primary"
+                    size="xs"
+                >
+                    <QTooltip>{{ t('salesTicketsTable.purchaseRequest') }}</QTooltip>
+                </QIcon>
+                <QIcon
+                    v-if="row.itemShortage"
+                    name="vn:unavailable"
+                    color="primary"
+                    size="xs"
+                >
+                    <QTooltip>{{ t('salesTicketsTable.notVisible') }}</QTooltip>
+                </QIcon>
+                <QIcon v-if="row.isFreezed" name="vn:frozen" color="primary" size="xs">
+                    <QTooltip>{{ t('salesTicketsTable.clientFrozen') }}</QTooltip>
+                </QIcon>
+                <QIcon
+                    v-if="row.risk"
+                    name="vn:risk"
+                    :color="row.hasHighRisk ? 'negative' : 'primary'"
+                    size="xs"
+                >
+                    <QTooltip>{{ t('salesTicketsTable.risk') }}: {{ row.risk }}</QTooltip>
+                </QIcon>
+                <QIcon
+                    v-if="row.hasComponentLack"
+                    name="vn:components"
+                    color="primary"
+                    size="xs"
+                >
+                    <QTooltip>{{ t('salesTicketsTable.componentLack') }}</QTooltip>
+                </QIcon>
+                <QIcon
+                    v-if="row.isTooLittle"
+                    name="vn:isTooLittle"
+                    color="primary"
+                    size="xs"
+                >
+                    <QTooltip>{{ t('salesTicketsTable.tooLittle') }}</QTooltip>
+                </QIcon>
+            </QTd>
+        </template>
+        <template #column-identifier="{ row }">
+            <QTd class="no-padding">
+                <span class="link" @click.stop.prevent>
+                    {{ row.id }}
+                    <TicketDescriptorProxy :id="row.id" />
+                </span>
+            </QTd>
+        </template>
+        <template #column-client="{ row }">
+            <QTd class="no-padding" @click.stop.prevent>
+                <span class="link">{{ row.nickname }}</span>
+                <CustomerDescriptorProxy :id="row.clientFk" />
+            </QTd>
+        </template>
+        <template #column-salesPerson="{ row }">
+            <QTd class="no-padding" @click.stop.prevent>
+                <span class="link">{{ row.userName }}</span>
+                <WorkerDescriptorProxy :id="row.salesPersonFk" />
+            </QTd>
+        </template>
+        <template #column-date="{ row }">
+            <QTd class="no-padding">
+                <QBadge
+                    v-bind="getBadgeAttrs(row.shippedDate)"
+                    class="q-pa-sm"
+                    style="font-size: 14px"
+                >
+                    {{ formatShippedDate(row.shippedDate) }}
+                </QBadge>
+            </QTd>
+        </template>
+        <template #column-state="{ row }">
+            <QTd class="no-padding" @click.stop.prevent>
+                <div v-if="row.refFk">
+                    <span class="link">{{ row.refFk }}</span>
+                    <InvoiceOutDescriptorProxy :id="row.invoiceOutId" />
+                </div>
+                <QBadge
+                    v-else
+                    :color="stateColors[row.classColor] || 'transparent'"
+                    :text-color="stateColors[row.classColor] ? 'black' : 'white'"
+                    class="q-pa-sm"
+                    style="font-size: 14px"
+                >
+                    {{ row.state }}
+                </QBadge>
+            </QTd>
+        </template>
+        <template #column-isFragile="{ row }">
+            <QTd class="no-padding">
+                <QIcon v-if="row.isFragile" name="local_bar" color="primary" size="sm">
+                    <QTooltip>{{ t('salesTicketsTable.isFragile') }}</QTooltip>
+                </QIcon>
+            </QTd>
+        </template>
+        <template #column-zone="{ row }">
+            <QTd class="no-padding" @click.stop.prevent>
+                <span class="link">{{ row.zoneName }}</span>
+                <ZoneDescriptorProxy :id="row.zoneFk" />
+            </QTd>
+        </template>
+        <template #column-total="{ row }">
+            <QTd class="no-padding">
+                <QBadge
+                    :color="totalPriceColor(row) || 'transparent'"
+                    :text-color="totalPriceColor(row) ? 'black' : 'white'"
+                    class="q-pa-sm"
+                    style="font-size: 14px"
+                >
+                    {{ toCurrency(row.totalWithVat) }}
+                </QBadge>
+            </QTd>
+        </template>
+    </VnTable>
 </template>
diff --git a/src/pages/Order/Card/OrderForm.vue b/src/pages/Order/Card/OrderForm.vue
index e4dfcd0e0..f447950d2 100644
--- a/src/pages/Order/Card/OrderForm.vue
+++ b/src/pages/Order/Card/OrderForm.vue
@@ -125,7 +125,7 @@ async function onDataSaved({ id }) {
             auto-load
         >
             <template #form="{ data }">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         url="Clients"
                         :label="t('order.form.clientFk')"
@@ -171,7 +171,7 @@ async function onDataSaved({ id }) {
                         </template>
                     </VnSelect>
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInputDate
                         placeholder="dd-mm-aaa"
                         :label="t('order.form.landed')"
@@ -181,7 +181,7 @@ async function onDataSaved({ id }) {
                         "
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :label="t('order.form.agencyModeFk')"
                         v-model="data.agencyModeFk"
diff --git a/src/pages/Order/OrderMain.vue b/src/pages/Order/OrderMain.vue
deleted file mode 100644
index 66ce78f23..000000000
--- a/src/pages/Order/OrderMain.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'src/components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Route/Agency/Card/AgencyWorkcenter.vue b/src/pages/Route/Agency/Card/AgencyWorkcenter.vue
index f5beaab53..3531ad288 100644
--- a/src/pages/Route/Agency/Card/AgencyWorkcenter.vue
+++ b/src/pages/Route/Agency/Card/AgencyWorkcenter.vue
@@ -98,7 +98,7 @@ async function deleteWorCenter(id) {
                     @on-data-saved="paginate.fetch()"
                 >
                     <template #form-inputs="{ data }">
-                        <VnRow class="row q-gutter-md q-mb-md">
+                        <VnRow>
                             <VnSelect
                                 v-model="data.workCenterFk"
                                 option-value="id"
diff --git a/src/pages/Route/Card/RouteDescriptor.vue b/src/pages/Route/Card/RouteDescriptor.vue
index 2fa0e77e0..cbabaf648 100644
--- a/src/pages/Route/Card/RouteDescriptor.vue
+++ b/src/pages/Route/Card/RouteDescriptor.vue
@@ -76,7 +76,6 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
         :subtitle="data.subtitle"
         data-key="routeData"
         @on-fetch="setData"
-        :summary="$attrs"
     >
         <template #body="{ entity }">
             <VnLv :label="t('Date')" :value="toDate(entity?.created)" />
diff --git a/src/pages/Route/Card/RouteDescriptorMenu.vue b/src/pages/Route/Card/RouteDescriptorMenu.vue
index b661d1cd7..6092bcd95 100644
--- a/src/pages/Route/Card/RouteDescriptorMenu.vue
+++ b/src/pages/Route/Card/RouteDescriptorMenu.vue
@@ -3,6 +3,7 @@ import axios from 'axios';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import { useSession } from 'src/composables/useSession';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 
 const props = defineProps({
@@ -11,10 +12,20 @@ const props = defineProps({
         required: true,
     },
 });
-
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
+const routeId = props.route.id;
+
+async function openRouteReport() {
+    const url = new URL(window.location).origin;
+    const { getTokenMultimedia } = useSession();
+    const token = getTokenMultimedia();
+    window.open(
+        `${url}/api/Routes/${routeId}/driver-route-pdf?access_token=${token}`,
+        '_blank'
+    );
+}
 
 function confirmRemove() {
     quasar
@@ -29,20 +40,50 @@ function confirmRemove() {
         .onOk(async () => await router.push({ name: 'RouteList' }));
 }
 
+async function sendMail() {
+    const params = {
+        id: routeId,
+        recipient: props?.route?.worker?.user?.emailUser?.email,
+    };
+    await axios.post(`Routes/${routeId}/driver-route-email`, params);
+}
+
+async function actualizeVolume() {
+    const params = { isOk: true };
+    await axios.post(`Routes/${routeId}/updateVolume`, params);
+    quasar.notify({
+        message: t('globals.dataUpdated'),
+        type: 'positive',
+    });
+}
+
 async function remove() {
-    if (!props.route.id) {
-        return;
-    }
-    await axios.delete(`Routes/${props.route.id}`);
+    await axios.delete(`Routes/${routeId}`);
     quasar.notify({
         message: t('globals.dataDeleted'),
         type: 'positive',
     });
 }
-
-//  TODO: Add reports
 </script>
 <template>
+    <QItem @click="openRouteReport" v-ripple clickable>
+        <QItemSection avatar>
+            <QIcon name="description" />
+        </QItemSection>
+        <QItemSection>{{ t('seeReport') }}</QItemSection>
+    </QItem>
+    <QItem @click="sendMail" v-ripple clickable>
+        <QItemSection avatar>
+            <QIcon name="outgoing_mail" />
+        </QItemSection>
+        <QItemSection>{{ t('sendMail') }}</QItemSection>
+    </QItem>
+    <QItem @click="actualizeVolume" v-ripple clickable>
+        <QItemSection avatar>
+            <QIcon name="package_2" />
+        </QItemSection>
+        <QItemSection>{{ t('actualizeVolume') }}</QItemSection>
+    </QItem>
     <QItem @click="confirmRemove" v-ripple clickable>
         <QItemSection avatar>
             <QIcon name="delete" />
@@ -56,8 +97,14 @@ en:
     confirmDeletion: Confirm deletion
     confirmDeletionMessage: Are you sure you want to delete this route?
     deleteRoute: Delete route
+    seeReport: See route report
+    sendMail: Send route report
+    actualizeVolume: Actualize volume
 es:
     confirmDeletion: Confirmar eliminación,
     confirmDeletionMessage: Seguro que quieres eliminar esta ruta?
     deleteRoute: Eliminar ruta
+    seeReport: Ver informe de ruta
+    sendMail: Enviar informe de ruta
+    actualizeVolume: Actualizar volumen
 </i18n>
diff --git a/src/pages/Route/Card/RouteForm.vue b/src/pages/Route/Card/RouteForm.vue
index a1bae8b02..db7dede1e 100644
--- a/src/pages/Route/Card/RouteForm.vue
+++ b/src/pages/Route/Card/RouteForm.vue
@@ -120,7 +120,7 @@ const onSave = (data, response) => {
         @on-data-saved="onSave"
     >
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('Worker')"
                     v-model="data.workerFk"
@@ -155,7 +155,7 @@ const onSave = (data, response) => {
                     :input-debounce="0"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('Agency')"
                     v-model="data.agencyModeFk"
@@ -170,7 +170,7 @@ const onSave = (data, response) => {
                 <VnInputDate v-model="data.created" :label="t('Created')" />
             </VnRow>
             <template v-if="!isNew">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInput v-model="data.kmStart" :label="t('Km Start')" clearable />
                     <QInput
                         v-model.number="data.kmEnd"
@@ -184,7 +184,7 @@ const onSave = (data, response) => {
                         type="number"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInputTime
                         v-model="data.started"
                         :label="t('Hour started')"
@@ -205,15 +205,13 @@ const onSave = (data, response) => {
                     </div>
                 </VnRow>
             </template>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <VnInput
-                    v-model="data.description"
-                    :label="t('Description')"
-                    type="textarea"
-                    :rows="3"
-                    clearable
-                />
-            </VnRow>
+            <VnInput
+                v-model="data.description"
+                :label="t('Description')"
+                type="textarea"
+                :rows="3"
+                clearable
+            />
         </template>
     </FormModel>
 </template>
diff --git a/src/pages/Route/Cmr/CmrList.vue b/src/pages/Route/Cmr/CmrList.vue
index 42d0b1c20..ede271960 100644
--- a/src/pages/Route/Cmr/CmrList.vue
+++ b/src/pages/Route/Cmr/CmrList.vue
@@ -3,7 +3,7 @@ import { onBeforeMount, onMounted, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Notify } from 'quasar';
 import { useSession } from 'src/composables/useSession';
-import { toDate, toDateHourMin } from 'filters/index';
+import { toDateHourMin } from 'filters/index';
 import { useStateStore } from 'src/stores/useStateStore';
 
 import axios from 'axios';
diff --git a/src/pages/Route/Roadmap/RoadmapBasicData.vue b/src/pages/Route/Roadmap/RoadmapBasicData.vue
index 19b6a1b3d..e1611ed61 100644
--- a/src/pages/Route/Roadmap/RoadmapBasicData.vue
+++ b/src/pages/Route/Roadmap/RoadmapBasicData.vue
@@ -38,12 +38,12 @@ const onSave = (data, response) => {
         @on-data-saved="onSave"
     >
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput v-model="data.name" :label="t('Roadmap')" clearable />
                 <VnInputDate v-model="data.etd" :label="t('ETD date')" />
                 <VnInputTime v-model="data.etd" :label="t('ETD hour')" />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="data.tractorPlate"
                     :label="t('Tractor plate')"
@@ -55,7 +55,7 @@ const onSave = (data, response) => {
                     clearable
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('Carrier')"
                     v-model="data.supplierFk"
@@ -84,11 +84,11 @@ const onSave = (data, response) => {
                     clearable
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput v-model="data.driverName" :label="t('Driver name')" clearable />
                 <VnInput v-model="data.phone" :label="t('Phone')" clearable />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="data.observations"
                     :label="t('Observations')"
diff --git a/src/pages/Route/RouteMain.vue b/src/pages/Route/RouteMain.vue
deleted file mode 100644
index aace646fb..000000000
--- a/src/pages/Route/RouteMain.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'src/components/LeftMenu.vue';
-import { onMounted } from 'vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-const stateStore = useStateStore();
-onMounted(() => (stateStore.leftDrawer = false));
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Shelving/Card/ShelvingDescriptor.vue b/src/pages/Shelving/Card/ShelvingDescriptor.vue
index 52b4896ad..6beca6d88 100644
--- a/src/pages/Shelving/Card/ShelvingDescriptor.vue
+++ b/src/pages/Shelving/Card/ShelvingDescriptor.vue
@@ -51,7 +51,6 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
         :subtitle="data.subtitle"
         data-key="Shelvings"
         @on-fetch="setData"
-        :summary="$attrs"
     >
         <template #body="{ entity }">
             <VnLv :label="t('shelving.summary.code')" :value="entity.code" />
diff --git a/src/pages/Shelving/Card/ShelvingForm.vue b/src/pages/Shelving/Card/ShelvingForm.vue
index d9b6ede0d..dd1c4e4a2 100644
--- a/src/pages/Shelving/Card/ShelvingForm.vue
+++ b/src/pages/Shelving/Card/ShelvingForm.vue
@@ -85,7 +85,7 @@ const onSave = (shelving, newShelving) => {
         @on-data-saved="onSave"
     >
         <template #form="{ data, validate, filter }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="data.code"
                     :label="t('shelving.basicData.code')"
@@ -107,7 +107,7 @@ const onSave = (shelving, newShelving) => {
                     :input-debounce="0"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="data.priority"
                     type="number"
diff --git a/src/pages/Shelving/ShelvingMain.vue b/src/pages/Shelving/ShelvingMain.vue
deleted file mode 100644
index 66ce78f23..000000000
--- a/src/pages/Shelving/ShelvingMain.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'src/components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Supplier/Card/SupplierAddressesCreate.vue b/src/pages/Supplier/Card/SupplierAddressesCreate.vue
index eccf06204..0b071c3a4 100644
--- a/src/pages/Supplier/Card/SupplierAddressesCreate.vue
+++ b/src/pages/Supplier/Card/SupplierAddressesCreate.vue
@@ -71,7 +71,7 @@ function handleLocation(data, location) {
             @on-data-saved="onDataSaved()"
         >
             <template #form="{ data, validate }">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInput
                         v-model="data.nickname"
                         :label="t('supplier.addresses.name')"
@@ -81,7 +81,7 @@ function handleLocation(data, location) {
                         :label="t('supplier.addresses.street')"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnLocation
                         :rules="validate('Worker.postcode')"
                         :roles-allowed-to-create="['deliveryAssistant']"
@@ -91,7 +91,7 @@ function handleLocation(data, location) {
                     >
                     </VnLocation>
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInput
                         v-model="data.phone"
                         :label="t('supplier.addresses.phone')"
diff --git a/src/pages/Supplier/Card/SupplierAgencyTermCreate.vue b/src/pages/Supplier/Card/SupplierAgencyTermCreate.vue
index 5eb64233f..a87ea502b 100644
--- a/src/pages/Supplier/Card/SupplierAgencyTermCreate.vue
+++ b/src/pages/Supplier/Card/SupplierAgencyTermCreate.vue
@@ -45,7 +45,7 @@ const onDataSaved = () => {
             @on-data-saved="onDataSaved()"
         >
             <template #form="{ data }">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :label="t('supplier.agencyTerms.agencyFk')"
                         v-model="data.agencyFk"
@@ -61,7 +61,7 @@ const onDataSaved = () => {
                         type="number"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <QInput
                         :label="t('supplier.agencyTerms.packagePrice')"
                         v-model.number="data.packagePrice"
@@ -78,7 +78,7 @@ const onDataSaved = () => {
                         type="number"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <QInput
                         :label="t('supplier.agencyTerms.routePrice')"
                         v-model.number="data.routePrice"
diff --git a/src/pages/Supplier/Card/SupplierBasicData.vue b/src/pages/Supplier/Card/SupplierBasicData.vue
index f8f99ef9a..52964557d 100644
--- a/src/pages/Supplier/Card/SupplierBasicData.vue
+++ b/src/pages/Supplier/Card/SupplierBasicData.vue
@@ -21,7 +21,7 @@ const workersOptions = ref([]);
         :clear-store-on-unmount="false"
     >
         <template #form="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="data.nickname"
                     :label="t('supplier.basicData.alias')"
@@ -59,7 +59,7 @@ const workersOptions = ref([]);
                     </template>
                 </VnSelect>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QCheckbox
                     v-model="data.isSerious"
                     :label="t('supplier.basicData.isSerious')"
@@ -73,7 +73,7 @@ const workersOptions = ref([]);
                     :label="t('supplier.basicData.isPayMethodChecked')"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QInput
                     :label="t('supplier.basicData.note')"
                     type="textarea"
diff --git a/src/pages/Supplier/Card/SupplierBillingData.vue b/src/pages/Supplier/Card/SupplierBillingData.vue
index 62ca91a54..7200bbba6 100644
--- a/src/pages/Supplier/Card/SupplierBillingData.vue
+++ b/src/pages/Supplier/Card/SupplierBillingData.vue
@@ -36,7 +36,7 @@ const formatPayDems = (data) => {
         :clear-store-on-unmount="false"
     >
         <template #form="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('supplier.billingData.payMethodFk')"
                     v-model="data.payMethodFk"
@@ -56,7 +56,7 @@ const formatPayDems = (data) => {
                     :rules="validate('supplier.payDemFk')"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QInput
                     :label="t('supplier.billingData.payDay')"
                     type="number"
diff --git a/src/pages/Supplier/Card/SupplierFiscalData.vue b/src/pages/Supplier/Card/SupplierFiscalData.vue
index 179c6f5e6..8af8ef876 100644
--- a/src/pages/Supplier/Card/SupplierFiscalData.vue
+++ b/src/pages/Supplier/Card/SupplierFiscalData.vue
@@ -56,7 +56,7 @@ function handleLocation(data, location) {
         :clear-store-on-unmount="false"
     >
         <template #form="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="data.name"
                     :label="t('supplier.fiscalData.name')"
@@ -68,7 +68,7 @@ function handleLocation(data, location) {
                     clearable
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="data.account"
                     :label="t('supplier.fiscalData.account')"
@@ -84,7 +84,7 @@ function handleLocation(data, location) {
                     map-options
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('supplier.fiscalData.sageWithholdingFk')"
                     v-model="data.sageWithholdingFk"
@@ -104,7 +104,7 @@ function handleLocation(data, location) {
                     map-options
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('supplier.fiscalData.supplierActivityFk')"
                     v-model="data.supplierActivityFk"
@@ -120,14 +120,14 @@ function handleLocation(data, location) {
                     clearable
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="data.street"
                     :label="t('supplier.fiscalData.street')"
                     clearable
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnLocation
                     :rules="validate('Worker.postcode')"
                     :roles-allowed-to-create="['deliveryAssistant']"
@@ -137,7 +137,7 @@ function handleLocation(data, location) {
                 >
                 </VnLocation>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col flex justify-around">
                     <QCheckbox
                         v-model="data.isTrucker"
diff --git a/src/pages/Supplier/SupplierCreate.vue b/src/pages/Supplier/SupplierCreate.vue
index 7d45bac97..9024f4804 100644
--- a/src/pages/Supplier/SupplierCreate.vue
+++ b/src/pages/Supplier/SupplierCreate.vue
@@ -44,13 +44,11 @@ const redirectToSupplierFiscalData = (_, responseData) => {
             @on-data-saved="redirectToSupplierFiscalData"
         >
             <template #form="{ data }">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInput
                         v-model="data.name"
                         :label="t('supplier.create.supplierName')"
-                        @keyup="
-                            newSupplierForm.name = newSupplierForm.name.toUpperCase()
-                        "
+                        @keyup="newSupplierForm.name = newSupplierForm.name.toUpperCase()"
                     />
                 </VnRow>
             </template>
diff --git a/src/pages/Supplier/SupplierList.vue b/src/pages/Supplier/SupplierList.vue
index 5d9942536..e97a8edf1 100644
--- a/src/pages/Supplier/SupplierList.vue
+++ b/src/pages/Supplier/SupplierList.vue
@@ -19,59 +19,60 @@ const columns = computed(() => [
         label: t('supplier.list.tableVisibleColumns.name'),
         name: 'socialName',
         create: true,
-        component: 'input',
-        columnField: {
-            component: null,
+        columnFilter: {
+            name: 'nickname',
         },
     },
     {
         align: 'left',
         label: t('supplier.list.tableVisibleColumns.nif'),
         name: 'nif',
-        component: 'input',
-        columnField: {
-            component: null,
-        },
     },
     {
         align: 'left',
         label: t('supplier.list.tableVisibleColumns.nickname'),
         name: 'alias',
-        component: 'input',
-        columnField: {
-            component: null,
+        columnFilter: {
+            name: 'nickname',
         },
     },
     {
         align: 'left',
         label: t('supplier.list.tableVisibleColumns.account'),
         name: 'account',
-        component: 'input',
-        columnField: {
-            component: null,
-        },
+        columnFilter: false,
     },
     {
         align: 'left',
         label: t('supplier.list.tableVisibleColumns.payMethod'),
         name: 'payMethod',
-        component: 'select',
-        attrs: {
-            url: 'payMethods',
-            fields: ['id', 'name'],
-        },
-        columnField: {
-            component: null,
-        },
+        columnFilter: false,
     },
     {
         align: 'left',
         label: t('supplier.list.tableVisibleColumns.payDay'),
-        name: 'payDat',
-        component: 'input',
-        columnField: {
-            component: null,
+        name: 'payDay',
+        columnFilter: false,
+    },
+    {
+        align: 'left',
+        name: 'countryFk',
+        label: t('customer.extendedList.tableVisibleColumns.countryFk'),
+        component: 'select',
+        attrs: {
+            url: 'Countries',
         },
+        visible: false,
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.provinceFk'),
+        name: 'provinceFk',
+        component: 'select',
+        attrs: {
+            url: 'Provinces',
+        },
+        visible: false,
     },
 ]);
 </script>
@@ -82,7 +83,6 @@ const columns = computed(() => [
         ref="tableRef"
         data-key="SuppliersList"
         url="Suppliers/filter"
-        save-url="Suppliers/crud"
         redirect="supplier"
         :create="{
             urlCreate: 'Suppliers/newSupplier',
diff --git a/src/pages/Supplier/SupplierMain.vue b/src/pages/Supplier/SupplierMain.vue
deleted file mode 100644
index 66ce78f23..000000000
--- a/src/pages/Supplier/SupplierMain.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'src/components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
index c8a8e85c9..2d937346a 100644
--- a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
+++ b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
@@ -311,7 +311,7 @@ onMounted(() => onFormModelInit());
         auto-load
     />
     <QForm>
-        <VnRow class="row q-gutter-md q-mb-md">
+        <VnRow>
             <VnSelect
                 :label="t('basicData.client')"
                 v-model="clientId"
@@ -343,7 +343,7 @@ onMounted(() => onFormModelInit());
                 :required="true"
             />
         </VnRow>
-        <VnRow class="row q-gutter-md q-mb-md">
+        <VnRow>
             <VnSelect
                 :label="t('basicData.address')"
                 v-model="addressId"
@@ -447,7 +447,7 @@ onMounted(() => onFormModelInit());
                 </template>
             </VnSelect>
         </VnRow>
-        <VnRow class="row q-gutter-md q-mb-md">
+        <VnRow>
             <VnInputDate
                 :label="t('basicData.shipped')"
                 v-model="formData.shipped"
diff --git a/src/pages/Ticket/Card/ExpeditionNewTicket.vue b/src/pages/Ticket/Card/ExpeditionNewTicket.vue
index da775a368..55ca700bc 100644
--- a/src/pages/Ticket/Card/ExpeditionNewTicket.vue
+++ b/src/pages/Ticket/Card/ExpeditionNewTicket.vue
@@ -63,10 +63,10 @@ const createTicket = async () => {
         :save-fn="createTicket"
     >
         <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInputDate :label="t('expedition.landed')" v-model="data.landed" />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-if="withRoute"
                     :label="t('expedition.routeId')"
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 689a717e6..8c9745c02 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -11,18 +11,14 @@ const { t } = useI18n();
 const route = useRoute();
 
 const routeName = computed(() => route.name);
-const searchBarDataKeys = {
-    TicketSummary: 'TicketSummary',
-    TicketSale: 'TicketSale',
-    TicketPurchaseRequest: 'TicketPurchaseRequest',
-};
 </script>
 <template>
     <VnCard
         data-key="Ticket"
+        base-url="Tickets"
         :filter-panel="TicketFilter"
         :descriptor="TicketDescriptor"
-        :search-data-key="searchBarDataKeys[routeName]"
+        search-data-key="TicketList"
         :search-custom-route-redirect="routeName"
         :searchbar-label="t('card.search')"
         :searchbar-info="t('card.searchInfo')"
diff --git a/src/pages/Ticket/Card/TicketCreateRequest.vue b/src/pages/Ticket/Card/TicketCreateRequest.vue
index 6b436621f..ffe009516 100644
--- a/src/pages/Ticket/Card/TicketCreateRequest.vue
+++ b/src/pages/Ticket/Card/TicketCreateRequest.vue
@@ -31,7 +31,7 @@ const attendersOptions = ref([]);
         @on-data-saved="() => emit('onRequestCreated')"
     >
         <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="data.description"
                     :label="t('purchaseRequest.description')"
@@ -45,7 +45,7 @@ const attendersOptions = ref([]);
                     option-value="id"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="data.quantity"
                     :label="t('purchaseRequest.quantity')"
diff --git a/src/pages/Ticket/Card/TicketCreateServiceType.vue b/src/pages/Ticket/Card/TicketCreateServiceType.vue
index d392ec206..067d7dee8 100644
--- a/src/pages/Ticket/Card/TicketCreateServiceType.vue
+++ b/src/pages/Ticket/Card/TicketCreateServiceType.vue
@@ -31,7 +31,7 @@ onMounted(async () => {
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     ref="nameInputRef"
                     :label="t('service.description')"
diff --git a/src/pages/Ticket/Card/TicketCreateTracking.vue b/src/pages/Ticket/Card/TicketCreateTracking.vue
index 399663571..87ca8dd3f 100644
--- a/src/pages/Ticket/Card/TicketCreateTracking.vue
+++ b/src/pages/Ticket/Card/TicketCreateTracking.vue
@@ -44,7 +44,7 @@ const onStateFkChange = (formData) => (formData.userFk = user.value.id);
         @on-data-saved="() => emit('onRequestCreated')"
     >
         <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     v-model="data.stateFk"
                     :label="t('tracking.state')"
diff --git a/src/pages/Ticket/Card/TicketDmsImportForm.vue b/src/pages/Ticket/Card/TicketDmsImportForm.vue
index 869e166ca..4b6b9c6cd 100644
--- a/src/pages/Ticket/Card/TicketDmsImportForm.vue
+++ b/src/pages/Ticket/Card/TicketDmsImportForm.vue
@@ -54,7 +54,7 @@ const importDms = async () => {
         :save-fn="importDms"
     >
         <template #form-inputs>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('Document')"
                     :options="dmsOptions"
diff --git a/src/pages/Ticket/Card/TicketExpedition.vue b/src/pages/Ticket/Card/TicketExpedition.vue
index bddfa2bfd..a7eb9e27e 100644
--- a/src/pages/Ticket/Card/TicketExpedition.vue
+++ b/src/pages/Ticket/Card/TicketExpedition.vue
@@ -65,7 +65,7 @@ const ticketData = computed(() => ticketStore.data);
 
 const refetchExpeditions = async () => {
     await expeditionsArrayData.applyFilter({
-        params: { filter: JSON.stringify(expeditionsFilter.value) },
+        filter: expeditionsFilter.value,
     });
 };
 
@@ -81,7 +81,7 @@ const applyColumnFilter = async (col) => {
     try {
         const paramKey = col.columnFilter?.filterParamKey || col.field;
         params[paramKey] = col.columnFilter.filterValue;
-        await expeditionsArrayData.addFilter({ params });
+        await expeditionsArrayData.addFilter({ filter: expeditionsFilter.value, params });
     } catch (err) {
         console.error('Error applying column filter', err);
     }
diff --git a/src/pages/Ticket/TicketAdvance.vue b/src/pages/Ticket/TicketAdvance.vue
index bb9a8c8a8..bf4000fdf 100644
--- a/src/pages/Ticket/TicketAdvance.vue
+++ b/src/pages/Ticket/TicketAdvance.vue
@@ -626,7 +626,7 @@ onMounted(async () => {
             </template>
             <template #body-cell-ticketId="{ row }">
                 <QTd>
-                    <QBtn flat color="primary">
+                    <QBtn flat class="link">
                         {{ row.id }}
                         <TicketDescriptorProxy :id="row.id" />
                     </QBtn>
@@ -658,7 +658,7 @@ onMounted(async () => {
             </template>
             <template #body-cell-futureId="{ row }">
                 <QTd class="vertical-separator">
-                    <QBtn flat color="primary" dense>
+                    <QBtn flat class="link" dense>
                         {{ row.futureId }}
                         <TicketDescriptorProxy :id="row.futureId" />
                     </QBtn>
diff --git a/src/pages/Ticket/TicketCreate.vue b/src/pages/Ticket/TicketCreate.vue
index 16f5a2a40..3cc486122 100644
--- a/src/pages/Ticket/TicketCreate.vue
+++ b/src/pages/Ticket/TicketCreate.vue
@@ -131,7 +131,7 @@ const redirectToTicketList = (_, { id }) => {
             @on-data-saved="redirectToTicketList"
         >
             <template #form="{ data }">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <VnSelect
                             :label="t('ticket.create.client')"
@@ -157,7 +157,7 @@ const redirectToTicketList = (_, { id }) => {
                         </VnSelect>
                     </div>
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <VnSelect
                             :label="t('ticket.create.address')"
@@ -184,7 +184,7 @@ const redirectToTicketList = (_, { id }) => {
                         </VnSelect>
                     </div>
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <VnInputDate
                             placeholder="dd-mm-aaa"
@@ -194,7 +194,7 @@ const redirectToTicketList = (_, { id }) => {
                         />
                     </div>
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <VnSelect
                             :label="t('ticket.create.warehouse')"
@@ -207,7 +207,7 @@ const redirectToTicketList = (_, { id }) => {
                         />
                     </div>
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <div class="col">
                         <VnSelect
                             :label="t('ticket.create.agency')"
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index 3570cfc03..3b9833ce2 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -15,11 +15,11 @@ const props = defineProps({
     },
 });
 
-const workers = ref();
-const provinces = ref();
-const states = ref();
-const agencies = ref();
-const warehouses = ref();
+const workers = ref([]);
+const provinces = ref([]);
+const states = ref([]);
+const agencies = ref([]);
+const warehouses = ref([]);
 </script>
 
 <template>
@@ -33,7 +33,7 @@ const warehouses = ref();
         @on-fetch="(data) => (workers = data)"
         auto-load
     />
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true" search-url="table">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>
diff --git a/src/pages/Ticket/TicketFuture.vue b/src/pages/Ticket/TicketFuture.vue
index 4db32de75..2fec6dc18 100644
--- a/src/pages/Ticket/TicketFuture.vue
+++ b/src/pages/Ticket/TicketFuture.vue
@@ -442,7 +442,7 @@ onMounted(async () => {
             </template>
             <template #body-cell-ticketId="{ row }">
                 <QTd>
-                    <QBtn flat color="primary">
+                    <QBtn flat class="link">
                         {{ row.id }}
                         <TicketDescriptorProxy :id="row.id" />
                     </QBtn>
@@ -489,7 +489,7 @@ onMounted(async () => {
             </template>
             <template #body-cell-futureId="{ row }">
                 <QTd class="vertical-separator">
-                    <QBtn flat color="primary" dense>
+                    <QBtn flat class="link" dense>
                         {{ row.futureId }}
                         <TicketDescriptorProxy :id="row.futureId" />
                     </QBtn>
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index 6090bdbef..ad53935bc 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -1,118 +1,311 @@
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
+import axios from 'axios';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import { useStateStore } from 'stores/useStateStore';
 import { toDate, toCurrency } from 'src/filters/index';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import TicketSummary from './Card/TicketSummary.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import TicketFilter from './TicketFilter.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import CardList from 'src/components/ui/CardList.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import RightMenu from 'src/components/common/RightMenu.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 
-const router = useRouter();
 const { t } = useI18n();
-const stateStore = useStateStore();
 const { viewSummary } = useSummaryDialog();
+const tableRef = ref();
+const clientsOptions = ref([]);
+const addressesOptions = ref([]);
+const agenciesOptions = ref([]);
+const selectedClient = ref();
 
-onMounted(() => (stateStore.rightDrawer = true));
-onUnmounted(() => (stateStore.rightDrawer = false));
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'stateFk',
+        label: t('ticketList.state'),
+        columnFilter: {
+            name: 'stateFk',
+            component: 'select',
+            attrs: {
+                url: 'States',
+                fields: ['id', 'name'],
+            },
+        },
+    },
+    {
+        align: 'left',
+        name: 'id',
+        label: t('ticketList.id'),
+        chip: {
+            condition: () => true,
+        },
+        isId: true,
+    },
+    {
+        align: 'left',
+        name: 'nickname',
+        label: t('ticketList.nickname'),
+        isTitle: true,
+    },
 
-const from = Date.vnNew();
-const to = Date.vnNew();
-to.setDate(to.getDate() + 1);
+    {
+        align: 'left',
+        name: 'shipped',
+        cardVisible: true,
+        label: t('ticketList.shipped'),
+        columnFilter: {
+            component: 'date',
+            alias: 't',
+            inWhere: true,
+        },
+        format: ({ shipped }) => toDate(shipped),
+    },
+    {
+        align: 'left',
+        name: 'zoneFk',
+        label: t('ticketList.zone'),
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Zones',
+                fields: ['id', 'name'],
+            },
+            alias: 't',
+            inWhere: true,
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.zoneName),
+    },
+    {
+        align: 'left',
+        label: t('ticketList.salesPerson'),
+        name: 'salesPersonFk',
+        component: 'select',
+        attrs: {
+            url: 'Workers/activeWithInheritedRole',
+            fields: ['id', 'name'],
+            where: { role: 'salesPerson' },
+            optionFilter: 'firstName',
+            useLike: false,
+        },
+        columnField: {
+            component: null,
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.salesPerson),
+    },
+    {
+        align: 'left',
+        name: 'totalWithVat',
+        label: t('ticketList.totalWithVat'),
+        cardVisible: true,
+        columnFilter: {
+            component: 'number',
+            inWhere: true,
+        },
+        format: (row) => toCurrency(row.totalWithVat),
+    },
+    {
+        align: 'right',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('ticketList.summary'),
+                icon: 'preview',
+                action: (row) => viewSummary(row.id, TicketSummary),
+            },
+        ],
+    },
+]);
 
-const userParams = {
-    from: from.toISOString(),
-    to: to.toISOString(),
+const onClientSelected = async (formData) => {
+    await fetchClient(formData);
+    await fetchAddresses(formData);
 };
 
-function navigate(id) {
-    router.push({ path: `/ticket/${id}` });
-}
+const fetchAvailableAgencies = async (formData) => {
+    if (!formData.warehouseId || !formData.addressId || !formData.landed) return;
+    let params = {
+        warehouseFk: formData.warehouseId,
+        addressFk: formData.addressId,
+        landed: formData.landed,
+    };
+
+    const { data } = await axios.get('Agencies/getAgenciesWithWarehouse', { params });
+
+    agenciesOptions.value = data;
+
+    const defaultAgency = agenciesOptions.value.find(
+        (agency) =>
+            agency.agencyModeFk === selectedClient.value.defaultAddress.agencyModeFk
+    );
+
+    if (defaultAgency) formData.agencyModeId = defaultAgency.agencyModeFk;
+};
+
+const fetchClient = async (formData) => {
+    try {
+        const filter = {
+            include: {
+                relation: 'defaultAddress',
+                scope: {
+                    fields: ['id', 'agencyModeFk'],
+                },
+            },
+            where: { id: formData.clientId },
+        };
+        const params = { filter: JSON.stringify(filter) };
+        const { data } = await axios.get('Clients', { params });
+        const [client] = data;
+        selectedClient.value = client;
+    } catch (err) {
+        console.error('Error fetching client');
+    }
+};
+
+const fetchAddresses = async (formData) => {
+    try {
+        if (!formData.clientId) return;
+
+        const filter = {
+            fields: ['nickname', 'street', 'city', 'id'],
+            where: { isActive: true },
+            order: 'nickname ASC',
+        };
+        const params = { filter: JSON.stringify(filter) };
+        const { data } = await axios.get(`Clients/${formData.clientId}/addresses`, {
+            params,
+        });
+        addressesOptions.value = data;
+
+        const { defaultAddress } = selectedClient.value;
+        formData.addressId = defaultAddress.id;
+    } catch (err) {
+        console.error(`Error fetching addresses`, err);
+        return err.response;
+    }
+};
+const getColor = (row) => {
+    return row?.classColor ? `bg-${row.classColor}` : 'bg-orange';
+};
 </script>
 
 <template>
     <VnSearchbar
-        data-key="TicketList"
+        data-key="Tickets"
         :label="t('Search ticket')"
         :info="t('You can search by ticket id or alias')"
     />
-    <RightMenu>
-        <template #right-panel>
-            <TicketFilter data-key="TicketList" />
+    <VnTable
+        ref="tableRef"
+        data-key="Tickets"
+        url="Tickets/filter"
+        :create="{
+            urlCreate: 'Tickets/new',
+            title: t('ticketList.createTicket'),
+            onDataSaved: ({ id }) => tableRef.redirect(id),
+            formInitialData: {},
+        }"
+        default-mode="table"
+        :columns="columns"
+        redirect="ticket"
+        auto-load
+    >
+        <template #more-create-dialog="{ data }">
+            <VnRow>
+                <VnSelect
+                    url="Clients"
+                    :label="t('ticketList.client')"
+                    v-model="data.clientId"
+                    :options="clientsOptions"
+                    option-value="id"
+                    option-label="name"
+                    hide-selected
+                    @update:model-value="(client) => onClientSelected(data)"
+                >
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            <QItemSection>
+                                <QItemLabel>
+                                    {{ scope.opt.name }}
+                                </QItemLabel>
+                                <QItemLabel caption>
+                                    {{ `#${scope.opt.id}` }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelect>
+            </VnRow>
+            <VnRow>
+                <VnSelect
+                    url="Addresses"
+                    :label="t('ticket.create.address')"
+                    v-model="data.addressId"
+                    :options="addressesOptions"
+                    option-value="id"
+                    option-label="nickname"
+                    hide-selected
+                    :disable="!data.clientId"
+                    @update:model-value="() => fetchAvailableAgencies(data)"
+                >
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            <QItemSection>
+                                <QItemLabel>
+                                    {{ scope.opt.nickname }}
+                                </QItemLabel>
+                                <QItemLabel caption>
+                                    {{ `${scope.opt.street}, ${scope.opt.city}` }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelect>
+            </VnRow>
+            <VnRow>
+                <div class="col">
+                    <VnInputDate
+                        placeholder="dd-mm-aaa"
+                        :label="t('ticket.create.landed')"
+                        v-model="data.landed"
+                        @update:model-value="() => fetchAvailableAgencies(data)"
+                    />
+                </div>
+            </VnRow>
+            <VnRow>
+                <div class="col">
+                    <VnSelect
+                        url="Warehouses"
+                        :label="t('ticket.create.warehouse')"
+                        v-model="data.warehouseId"
+                        :options="warehousesOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        @update:model-value="() => fetchAvailableAgencies(data)"
+                    />
+                </div>
+            </VnRow>
+            <VnRow>
+                <div class="col">
+                    <VnSelect
+                        :label="t('ticket.create.agency')"
+                        v-model="data.agencyModeId"
+                        :options="agenciesOptions"
+                        option-value="agencyModeFk"
+                        option-label="agencyMode"
+                        hide-selected
+                        :disable="!data.clientId || !data.landed || !data.warehouseId"
+                    />
+                </div>
+            </VnRow>
         </template>
-    </RightMenu>
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
-                data-key="TicketList"
-                url="Tickets/filter"
-                :user-params="userParams"
-                order="id DESC"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <CardList
-                        v-for="row of rows"
-                        :key="row.id"
-                        :id="row.id"
-                        :title="`${row.nickname}`"
-                        @click="navigate(row.id)"
-                    >
-                        <template #list-items>
-                            <VnLv
-                                :label="t('ticket.list.nickname')"
-                                :value="row.nickname"
-                            />
-                            <VnLv :label="t('ticket.list.state')">
-                                <template #value>
-                                    <QBadge
-                                        text-color="black"
-                                        :color="row.classColor ?? 'orange'"
-                                        class="q-ma-none"
-                                        dense
-                                    >
-                                        {{ row.state }}
-                                    </QBadge>
-                                </template>
-                            </VnLv>
-                            <VnLv
-                                :label="t('ticket.list.shipped')"
-                                :value="toDate(row.shipped)"
-                            />
-                            <VnLv :label="t('Zone')" :value="row.zoneName" />
-                            <VnLv
-                                :label="t('ticket.list.salesPerson')"
-                                :value="row.salesPerson"
-                            />
-                            <VnLv
-                                :label="t('ticket.list.total')"
-                                :value="toCurrency(row.totalWithVat)"
-                            />
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, TicketSummary)"
-                                color="primary"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-        <QPageSticky :offset="[20, 20]">
-            <QBtn :to="{ name: 'TicketCreate' }" fab icon="add" color="primary">
-                <QTooltip>
-                    {{ t('New ticket') }}
-                </QTooltip>
-            </QBtn>
-        </QPageSticky>
-    </QPage>
+        <template #column-stateFk="{ row }">
+            <QChip :class="getColor(row)" dense square>
+                {{ row.state }}
+            </QChip>
+        </template>
+    </VnTable>
 </template>
 
 <i18n>
diff --git a/src/pages/Ticket/TicketMain.vue b/src/pages/Ticket/TicketMain.vue
deleted file mode 100644
index f0dc2e500..000000000
--- a/src/pages/Ticket/TicketMain.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Ticket/TicketWeekly.vue b/src/pages/Ticket/TicketWeekly.vue
index 5dbc99d22..61532ee51 100644
--- a/src/pages/Ticket/TicketWeekly.vue
+++ b/src/pages/Ticket/TicketWeekly.vue
@@ -1,40 +1,28 @@
 <script setup>
-import { onMounted, ref, computed, reactive, onUnmounted } from 'vue';
+import { onMounted, ref, computed, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-
-import FetchData from 'components/FetchData.vue';
-import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
-import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
+import VnSelectCache from 'src/components/common/VnSelectCache.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
-import VnPaginate from 'components/ui/VnPaginate.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-
 import { useStateStore } from 'stores/useStateStore';
-import { dashIfEmpty } from 'src/filters';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import { useArrayData } from 'composables/useArrayData';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
+import VnTable from 'src/components/VnTable/VnTable.vue';
 
-const router = useRouter();
 const stateStore = useStateStore();
 const { t } = useI18n();
-const { openConfirmationModal } = useVnConfirm();
 const { notify } = useNotify();
-
-const paginateRef = ref(null);
-const agencyModesOptions = ref([]);
-const visibleColumns = ref([]);
+const { openConfirmationModal } = useVnConfirm();
 const allColumnNames = ref([]);
 
 const arrayData = useArrayData('WeeklyTickets');
 const { store } = arrayData;
-
+const tableRef = ref();
 const weekdays = [
     { id: 0, name: t('weekdays.mon') },
     { id: 1, name: t('weekdays.tue') },
@@ -45,113 +33,132 @@ const weekdays = [
     { id: 6, name: t('weekdays.sun') },
 ];
 
-const exprBuilder = (param, value) => {
-    switch (param) {
-        case 'clientName':
-            return { 'c.name': value };
-        case 'nickName':
-            return { 'u.name': value };
-    }
-};
-
-const params = reactive({});
-
-const applyColumnFilter = async (col) => {
-    try {
-        const paramKey = col.columnFilter?.filterParamKey || col.field;
-        params[paramKey] = col.columnFilter.filterValue;
-        await paginateRef.value.addFilter(null, params);
-    } catch (err) {
-        console.error('Error applying column filter', err);
-    }
-};
-
-const getInputEvents = (col) => ({ 'keyup.enter': () => applyColumnFilter(col) });
-
 const columns = computed(() => [
     {
+        align: 'left',
+        name: 'ticketFk',
         label: t('weeklyTickets.id'),
-        name: 'id',
-        field: 'ticketFk',
-        align: 'left',
-        sortable: true,
-        columnFilter: null,
+        chip: {
+            condition: () => true,
+        },
+        isId: true,
+        cardVisible: true,
     },
     {
+        align: 'left',
+        name: 'clientFk',
         label: t('weeklyTickets.client'),
-        name: 'client',
-        field: 'clientName',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
+        isTitle: true,
+        cardVisible: true,
+        component: 'select',
+        attrs: {
+            url: 'Clients',
+            optionLabel: 'name',
+            optionValue: 'id',
+            isWhere: true,
         },
-        format: (val) => dashIfEmpty(val),
+        columnField: {
+            component: null,
+        },
+        format: (row) => row.clientName,
     },
     {
+        align: 'left',
+        name: 'weekDay',
         label: t('weeklyTickets.shipment'),
-        name: 'shipment',
-        field: 'weekDay',
-        align: 'left',
-        sortable: true,
-        columnFilter: null,
-    },
-    {
-        label: t('weeklyTickets.agency'),
-        name: 'agency',
-        field: 'agencyModeFk',
-        align: 'left',
-        sortable: true,
-        columnFilter: null,
-    },
-    {
-        label: t('weeklyTickets.warehouse'),
-        name: 'warehouse',
-        field: 'warehouseName',
-        align: 'left',
-        sortable: true,
-        columnFilter: null,
-    },
-    {
-        label: t('weeklyTickets.salesperson'),
-        field: 'salesperson',
-        name: 'salesperson',
-        align: 'left',
-        sortable: true,
+        cardVisible: true,
         columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            filterParamKey: 'nickName',
+            component: 'select',
             attrs: {
-                dense: true,
+                options: weekdays,
+                optionLabel: weekdays.name,
+                optionValue: weekdays.id,
             },
+            inWhere: true,
         },
     },
     {
-        label: '',
-        name: 'actions',
         align: 'left',
-        columnFilter: null,
+        label: t('weeklyTickets.agency'),
+        name: 'agencyModeFk',
+        cardVisible: true,
+        columnFilter: {
+            component: 'select',
+            alias: 'tw',
+            attrs: {
+                url: 'AgencyModes',
+                fields: ['id', 'name'],
+            },
+            inWhere: true,
+        },
+    },
+    {
+        align: 'left',
+        name: 'warehouseFk',
+        label: t('weeklyTickets.warehouse'),
+        cardVisible: true,
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Warehouses',
+                fields: ['id', 'name'],
+            },
+            inWhere: true,
+        },
+        columnField: {
+            component: null,
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.warehouseName),
+    },
+    {
+        align: 'left',
+        name: 'id',
+        label: t('weeklyTickets.salesperson'),
+        columnFilter: {
+            component: 'select',
+            alias: 'u',
+            attrs: {
+                url: 'Workers/activeWithInheritedRole',
+                fields: ['id', 'name'],
+                where: { role: 'salesperson' },
+            },
+            inWhere: true,
+        },
+        columnField: {
+            component: null,
+        },
+        cardVisible: true,
+        format: (row) => row.userName,
+    },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('ticketWeekly.delete'),
+                icon: 'delete',
+                action: (row) =>
+                    openConfirmationModal(
+                        t('You are going to delete this weekly ticket'),
+                        t(
+                            'This ticket will be removed from weekly tickets! Continue anyway?'
+                        ),
+                        () => deleteWeekly(row.ticketFk)
+                    ),
+                isPrimary: true,
+            },
+        ],
     },
 ]);
 
-const redirectToTicketSummary = (ticketFk) =>
-    router.push({ name: 'TicketSummary', params: { id: ticketFk } });
-
 const deleteWeekly = async (ticketFk) => {
     try {
         await axios.delete(`TicketWeeklies/${ticketFk}`);
         notify(t('globals.dataSaved'), 'positive');
         const ticketIndex = store.data.findIndex((e) => e.ticketFk == ticketFk);
         store.data.splice(ticketIndex, 1);
+        location.reload();
     } catch (err) {
         console.error('Error deleting weekly', err);
     }
@@ -176,147 +183,61 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 </script>
 
 <template>
-    <FetchData
-        url="AgencyModes/isActive"
-        :filter="{ fields: ['id', 'name'], order: 'name' }"
-        auto-load
-        @on-fetch="(data) => (agencyModesOptions = data)"
-    />
     <VnSearchbar
         data-key="WeeklyTickets"
         :label="t('weeklyTickets.search')"
         :info="t('weeklyTickets.searchInfo')"
     />
-    <VnSubToolbar>
-        <template #st-data>
-            <TableVisibleColumns
-                :all-columns="allColumnNames"
-                table-code="itemsIndex"
-                labels-traductions-path="weeklyTickets"
-                @on-config-saved="visibleColumns = [...$event, 'actions']"
+    <VnTable
+        ref="tableRef"
+        data-key="WeeklyTickets"
+        url="TicketWeeklies/filter"
+        :columns="columns"
+        default-mode="table"
+        :use-model="true"
+        :disable-option="{ card: true }"
+        auto-load
+    >
+        <template #column-ticketFk="{ row }">
+            <span class="link" @click.stop>
+                {{ row.ticketFk }}
+                <TicketDescriptorProxy :id="row.ticketFk" />
+            </span>
+        </template>
+        <template #column-weekDay="{ row }">
+            <VnSelect
+                :options="weekdays"
+                hide-selected
+                option-label="name"
+                option-value="id"
+                v-model="row.weekDay"
+                @update:model-value="onUpdate(row.ticketFk, 'weekDay', $event)"
             />
         </template>
-    </VnSubToolbar>
-    <QPage class="column items-center q-pa-md">
-        <VnPaginate
-            ref="paginateRef"
-            data-key="WeeklyTickets"
-            url="TicketWeeklies/filter"
-            :order="['weekDay', 'ticketFk']"
-            :limit="20"
-            :expr-builder="exprBuilder"
-            :user-params="params"
-            :offset="50"
-            auto-load
-        >
-            <template #body="{ rows }">
-                <QTable
-                    :rows="rows"
-                    :columns="columns"
-                    row-key="id"
-                    :pagination="{ rowsPerPage: 0 }"
-                    class="full-width q-mt-md"
-                    :visible-columns="visibleColumns"
-                    :no-data-label="t('globals.noResults')"
-                    @row-click="(_, row) => redirectToTicketSummary(row.ticketFk)"
-                >
-                    <template #top-row="{ cols }">
-                        <QTr>
-                            <QTd
-                                v-for="(col, index) in cols"
-                                :key="index"
-                                style="max-width: 100px"
-                            >
-                                <component
-                                    :is="col.columnFilter.component"
-                                    v-if="col.columnFilter"
-                                    v-model="col.columnFilter.filterValue"
-                                    v-bind="col.columnFilter.attrs"
-                                    v-on="col.columnFilter.event(col)"
-                                    dense
-                                />
-                            </QTd>
-                        </QTr>
-                    </template>
-                    <template #body-cell-id="{ row }">
-                        <QTd @click.stop>
-                            <QBtn flat color="primary">
-                                {{ row.ticketFk }}
-                                <TicketDescriptorProxy :id="row.ticketFk" />
-                            </QBtn>
-                        </QTd>
-                    </template>
-                    <template #body-cell-salesperson="{ row }">
-                        <QTd @click.stop>
-                            <QBtn flat color="primary">
-                                {{ row.userName }}
-                                <WorkerDescriptorProxy :id="row.workerFk" />
-                            </QBtn>
-                        </QTd>
-                    </template>
-                    <template #body-cell-client="{ row }">
-                        <QTd @click.stop>
-                            <QBtn flat color="primary" dense>
-                                {{ row.clientName }}
-                                <CustomerDescriptorProxy :id="row.clientFk" />
-                            </QBtn>
-                        </QTd>
-                    </template>
-                    <template #body-cell-shipment="{ row }">
-                        <QTd @click.stop>
-                            <VnSelect
-                                :options="weekdays"
-                                hide-selected
-                                option-label="name"
-                                option-value="id"
-                                v-model="row.weekDay"
-                                @update:model-value="
-                                    onUpdate(row.ticketFk, 'weekDay', $event)
-                                "
-                            />
-                        </QTd>
-                    </template>
-                    <template #body-cell-agency="{ row }">
-                        <QTd @click.stop>
-                            <VnSelect
-                                :options="agencyModesOptions"
-                                hide-selected
-                                option-label="name"
-                                option-value="id"
-                                v-model="row.agencyModeFk"
-                                @update:model-value="
-                                    onUpdate(row.ticketFk, 'agencyModeFk', $event)
-                                "
-                            />
-                        </QTd>
-                    </template>
-                    <template #body-cell-actions="{ row }">
-                        <QTd>
-                            <QIcon
-                                @click.stop="
-                                    openConfirmationModal(
-                                        t('You are going to delete this weekly ticket'),
-                                        t(
-                                            'This ticket will be removed from weekly tickets! Continue anyway?'
-                                        ),
-                                        () => deleteWeekly(row.ticketFk)
-                                    )
-                                "
-                                class="q-ml-sm cursor-pointer"
-                                color="primary"
-                                name="delete"
-                                size="sm"
-                            >
-                                <QTooltip>
-                                    {{ t('globals.delete') }}
-                                </QTooltip>
-                            </QIcon>
-                        </QTd>
-                    </template>
-                </QTable>
-            </template>
-        </VnPaginate>
-    </QPage>
+        <template #column-agencyModeFk="{ row }">
+            <VnSelectCache
+                url="AgencyModes/isActive"
+                :row="row"
+                :find="['agencyModeFk', 'agencyModeName']"
+                v-model="row.agencyModeFk"
+                @update:model-value="onUpdate(row.ticketFk, 'agencyModeFk', $event)"
+            >
+                {{ console.log('row: ', row) }}
+            </VnSelectCache>
+        </template>
+        <template #column-clientFk="{ row }">
+            <span class="link" @click.stop>
+                {{ row.clientName }}
+                <CustomerDescriptorProxy :id="row.clientFk" />
+            </span>
+        </template>
+        <template #column-id="{ row }">
+            <span class="link" @click.stop>
+                {{ row.userName }}
+                <WorkerDescriptorProxy :id="row.workerFk" />
+            </span>
+        </template>
+    </VnTable>
 </template>
 
 <i18n>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index d5530926f..10a8e1fa4 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -225,3 +225,14 @@ package:
     added: Added
     addPackage: Add package
     removePackage: Remove package
+ticketList:
+    id: Id
+    nickname: Nickname
+    state: State
+    shipped: Shipped
+    zone: Zone
+    salesPerson: Sales person
+    totalWithVat: Total with VAT
+    summary: Summary
+    client: Customer
+    createTicket: Create ticket
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 132c61928..a80692bfe 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -228,3 +228,14 @@ ticketSaleTracking:
 Search ticket: Buscar tickets
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket
 Select lines to see the options: Selecciona líneas para ver las opciones
+ticketList:
+    id: Id
+    nickname: Alias
+    state: Estado
+    shipped: F. Envío
+    zone: Zona
+    salesPerson: Comercial
+    totalWithVat: Total con IVA
+    summary: Resumen
+    client: Cliente
+    createTicket: Crear ticket
diff --git a/src/pages/Travel/Card/TravelBasicData.vue b/src/pages/Travel/Card/TravelBasicData.vue
index 1eb9bbc0f..8a369a0dd 100644
--- a/src/pages/Travel/Card/TravelBasicData.vue
+++ b/src/pages/Travel/Card/TravelBasicData.vue
@@ -28,7 +28,7 @@ const agenciesOptions = ref([]);
         auto-load
     >
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput v-model="data.ref" :label="t('travel.basicData.reference')" />
                 <VnSelect
                     :label="t('travel.basicData.agency')"
@@ -40,7 +40,7 @@ const agenciesOptions = ref([]);
                     hide-selected
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInputDate
                     v-model="data.shipped"
                     :label="t('travel.basicData.shipped')"
@@ -50,7 +50,7 @@ const agenciesOptions = ref([]);
                     :label="t('travel.basicData.landed')"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     :label="t('travel.basicData.warehouseOut')"
                     v-model="data.warehouseOutFk"
@@ -70,7 +70,7 @@ const agenciesOptions = ref([]);
                     hide-selected
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <QCheckbox
                     :label="t('travel.basicData.delivered')"
                     v-model="data.isDelivered"
diff --git a/src/pages/Travel/Card/TravelThermographsForm.vue b/src/pages/Travel/Card/TravelThermographsForm.vue
index 33b56e745..7f40873b1 100644
--- a/src/pages/Travel/Card/TravelThermographsForm.vue
+++ b/src/pages/Travel/Card/TravelThermographsForm.vue
@@ -235,7 +235,7 @@ const onThermographCreated = async (data) => {
                 </div>
             </Teleport>
             <QCard class="q-pa-lg">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelectDialog
                         :label="t('travel.thermographs.thermograph')"
                         v-model="thermographForm.thermographId"
@@ -256,7 +256,7 @@ const onThermographCreated = async (data) => {
                         :label="t('travel.thermographs.state')"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInput
                         v-model="thermographForm.reference"
                         :label="t('travel.thermographs.reference')"
@@ -269,7 +269,7 @@ const onThermographCreated = async (data) => {
                         option-label="name"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :label="t('travel.thermographs.company')"
                         v-model="thermographForm.companyId"
@@ -293,7 +293,7 @@ const onThermographCreated = async (data) => {
                         fill-input
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <QFile
                         ref="inputFileRef"
                         :label="t('travel.thermographs.file')"
diff --git a/src/pages/Travel/TravelCreate.vue b/src/pages/Travel/TravelCreate.vue
index 09bf58765..6fb3274e4 100644
--- a/src/pages/Travel/TravelCreate.vue
+++ b/src/pages/Travel/TravelCreate.vue
@@ -57,7 +57,7 @@ const redirectToTravelBasicData = (_, { id }) => {
             @on-data-saved="redirectToTravelBasicData"
         >
             <template #form="{ data }">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInput v-model="data.ref" :label="t('globals.reference')" />
                     <VnSelect
                         :label="t('globals.agency')"
@@ -68,11 +68,11 @@ const redirectToTravelBasicData = (_, { id }) => {
                         hide-selected
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInputDate v-model="data.shipped" :label="t('globals.shipped')" />
                     <VnInputDate :label="t('globals.landed')" v-model="data.landed" />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :label="t('globals.wareHouseOut')"
                         v-model="data.warehouseOutFk"
diff --git a/src/pages/Travel/TravelMain.vue b/src/pages/Travel/TravelMain.vue
deleted file mode 100644
index 66ce78f23..000000000
--- a/src/pages/Travel/TravelMain.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'src/components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Wagon/WagonMain.vue b/src/pages/Wagon/WagonMain.vue
deleted file mode 100644
index 66ce78f23..000000000
--- a/src/pages/Wagon/WagonMain.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'src/components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Worker/Card/WorkerCard.vue b/src/pages/Worker/Card/WorkerCard.vue
index fb9ab9666..1a5bacf2f 100644
--- a/src/pages/Worker/Card/WorkerCard.vue
+++ b/src/pages/Worker/Card/WorkerCard.vue
@@ -5,7 +5,7 @@ import WorkerFilter from '../WorkerFilter.vue';
 </script>
 <template>
     <VnCard
-        data-key="Worker"
+        data-key="Workers"
         base-url="Workers"
         :descriptor="WorkerDescriptor"
         :filter-panel="WorkerFilter"
diff --git a/src/pages/Worker/Card/WorkerChangePasswordForm.vue b/src/pages/Worker/Card/WorkerChangePasswordForm.vue
index ef75ba55a..20132f21e 100644
--- a/src/pages/Worker/Card/WorkerChangePasswordForm.vue
+++ b/src/pages/Worker/Card/WorkerChangePasswordForm.vue
@@ -61,7 +61,7 @@ onMounted(async () => await getPassRequirements());
 <template>
     <FormPopup :title="t('Reset password')" @on-submit="setPassword()">
         <template #form-inputs>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('New password')"
                     v-model="formData.newPassword"
@@ -78,7 +78,7 @@ onMounted(async () => await getPassRequirements());
                     "
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('Repeat password')"
                     v-model="formData.repeatPassword"
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index 17b9b7b23..e8dc7d878 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -111,7 +111,6 @@ const refetch = async () => await cardDescriptorRef.value.getData();
         :filter="filter"
         :title="data.title"
         :subtitle="data.subtitle"
-        :summary="$attrs"
         @on-fetch="
             (data) => {
                 worker = data;
@@ -145,7 +144,12 @@ const refetch = async () => await cardDescriptorRef.value.getData();
             </QItem>
         </template>
         <template #before>
-            <VnImg :id="entityId" collection="user" size="520x520" class="photo">
+            <VnImg
+                :id="parseInt(entityId)"
+                collection="user"
+                size="520x520"
+                class="photo"
+            >
                 <template #error>
                     <div
                         class="absolute-full picture text-center q-pa-md flex flex-center"
@@ -182,6 +186,32 @@ const refetch = async () => await cardDescriptorRef.value.getData();
                 </template>
             </VnLv>
         </template>
+        <template #actions="{ entity }">
+            <QCardActions class="flex justify-center">
+                <QBtn
+                    :to="{
+                        name: 'CustomerCard',
+                        params: { id: entity.id },
+                    }"
+                    size="md"
+                    icon="vn:Person"
+                    color="primary"
+                >
+                    <QTooltip>{{ t('Go to client') }}</QTooltip>
+                </QBtn>
+                <QBtn
+                    :to="{
+                        name: 'AccountCard',
+                        params: { id: entity.user.id },
+                    }"
+                    size="md"
+                    icon="face"
+                    color="primary"
+                >
+                    <QTooltip>{{ t('Go to user') }}</QTooltip>
+                </QBtn>
+            </QCardActions>
+        </template>
     </CardDescriptor>
 </template>
 
diff --git a/src/pages/Worker/Card/WorkerPBX.vue b/src/pages/Worker/Card/WorkerPBX.vue
index 3bba5b33e..547156532 100644
--- a/src/pages/Worker/Card/WorkerPBX.vue
+++ b/src/pages/Worker/Card/WorkerPBX.vue
@@ -56,7 +56,7 @@ const updateModelValue = (data) => {
         @on-fetch="onFetch"
     >
         <template #form="{}">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('worker.summary.sipExtension')"
                     v-model="extension"
diff --git a/src/pages/Worker/Card/WorkerPda.vue b/src/pages/Worker/Card/WorkerPda.vue
index 513edcf45..4e0abc20c 100644
--- a/src/pages/Worker/Card/WorkerPda.vue
+++ b/src/pages/Worker/Card/WorkerPda.vue
@@ -126,7 +126,7 @@ function reloadData() {
                         @on-data-saved="reloadData()"
                     >
                         <template #form-inputs="{ data }">
-                            <VnRow class="row q-gutter-md q-mb-md">
+                            <VnRow>
                                 <VnSelect
                                     :label="t('worker.pda.newPDA')"
                                     v-model="data.deviceProductionFk"
diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
index d8bee4714..11c36c22d 100644
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -10,6 +10,7 @@ import CardSummary from 'components/ui/CardSummary.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 import RoleDescriptorProxy from 'src/pages/Account/Role/Card/RoleDescriptorProxy.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -133,30 +134,24 @@ const filter = {
                 />
                 <VnLv :label="t('worker.summary.fi')" :value="worker.fi" />
                 <VnLv :label="t('worker.summary.birth')" :value="toDate(worker.birth)" />
-                <QCheckbox
-                    class="padding-none"
-                    :label="t('worker.summary.isFreelance')"
-                    v-model="worker.isFreelance"
-                    :disable="true"
-                />
-                <QCheckbox
-                    class="padding-none"
-                    :label="t('worker.summary.isSsDiscounted')"
-                    v-model="worker.isSsDiscounted"
-                    :disable="true"
-                />
-                <QCheckbox
-                    class="padding-none"
-                    :label="t('worker.summary.hasMachineryAuthorized')"
-                    v-model="worker.hasMachineryAuthorized"
-                    :disable="true"
-                />
-                <QCheckbox
-                    class="padding-none"
-                    :label="t('worker.summary.isDisable')"
-                    v-model="worker.isDisable"
-                    :disable="true"
-                />
+                <VnRow class="q-mt-sm" wrap>
+                    <VnLv
+                        :label="t('worker.summary.isFreelance')"
+                        :value="worker.isFreelance"
+                    />
+                    <VnLv
+                        :label="t('worker.summary.isSsDiscounted')"
+                        :value="worker.isSsDiscounted"
+                    />
+                    <VnLv
+                        :label="t('worker.summary.hasMachineryAuthorized')"
+                        :value="worker.hasMachineryAuthorized"
+                    />
+                    <VnLv
+                        :label="t('worker.summary.isDisable')"
+                        :value="worker.isDisable"
+                    />
+                </VnRow>
             </QCard>
             <QCard class="vn-one">
                 <VnTitle :text="t('worker.summary.userData')" />
diff --git a/src/pages/Worker/Card/WorkerTimeControl.vue b/src/pages/Worker/Card/WorkerTimeControl.vue
index 00e1147d1..7bce5983c 100644
--- a/src/pages/Worker/Card/WorkerTimeControl.vue
+++ b/src/pages/Worker/Card/WorkerTimeControl.vue
@@ -410,7 +410,7 @@ const resendEmail = async () => {
             workerId: Number(route.params.id),
             state: 'SENDED',
         };
-        await axios.post('WorkerTimeControls/weekly-hour-hecord-email', params);
+        await axios.post('WorkerTimeControls/weekly-hour-record-email', params);
         await getMailStates(selectedDate.value);
         notify(t('Email sended'), 'positive');
     } catch (err) {
diff --git a/src/pages/Worker/Card/WorkerTimeControlCalendar.vue b/src/pages/Worker/Card/WorkerTimeControlCalendar.vue
index 20d02ca78..2717a71f4 100644
--- a/src/pages/Worker/Card/WorkerTimeControlCalendar.vue
+++ b/src/pages/Worker/Card/WorkerTimeControlCalendar.vue
@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 
 import { QCalendarMonth } from '@quasar/quasar-ui-qcalendar/src/index.js';
 import QCalendarMonthWrapper from 'src/components/ui/QCalendarMonthWrapper.vue';
-
 const $props = defineProps({
     modelValue: {
         type: String,
@@ -139,7 +138,9 @@ const paintWorkWeeks = async () => {
                 show-work-weeks
                 :weekdays="[1, 2, 3, 4, 5, 6, 0]"
                 :selected-dates="selectedDates"
+                :min-weekday-label="1"
                 :locale="locale"
+                animated
                 mini-mode
                 enable-outside-days
                 class="q-py-sm"
diff --git a/src/pages/Worker/Card/WorkerTimeForm.vue b/src/pages/Worker/Card/WorkerTimeForm.vue
index 0a58a04ca..3250e3180 100644
--- a/src/pages/Worker/Card/WorkerTimeForm.vue
+++ b/src/pages/Worker/Card/WorkerTimeForm.vue
@@ -5,7 +5,7 @@ import { useRoute } from 'vue-router';
 
 import VnSelect from 'src/components/common/VnSelect.vue';
 import FormModelPopup from 'components/FormModelPopup.vue';
-import VnInputTime from 'components/common/VnInputTime.vue';
+import VnInputTime from 'src/components/common/VnInputTime.vue';
 
 const $props = defineProps({
     entryId: {
@@ -37,8 +37,8 @@ const entryDirections = [
 
 const closeButton = ref(null);
 
-const onDataSaved = () => {
-    emit('onDataSaved');
+const onDataSaved = (dataSaved) => {
+    emit('onDataSaved', dataSaved);
     closeForm();
 };
 
@@ -73,7 +73,7 @@ onBeforeMount(() => {
         :default-actions="false"
         :title="title"
         :url-create="urlCreate"
-        @on-data-saved="onDataSaved()"
+        @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data }">
             <VnInputTime
@@ -91,7 +91,6 @@ onBeforeMount(() => {
                 option-value="code"
                 option-label="description"
                 hide-selected
-                :required="true"
             />
         </template>
     </FormModelPopup>
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index 8057e3e7c..0c2656597 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -1,86 +1,297 @@
 <script setup>
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import WorkerSummary from './Card/WorkerSummary.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import WorkerFilter from './WorkerFilter.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import CardList from 'src/components/ui/CardList.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import RightMenu from 'src/components/common/RightMenu.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import WorkerSummary from './Card/WorkerSummary.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnRadio from 'src/components/common/VnRadio.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnLocation from 'src/components/common/VnLocation.vue';
+import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
+import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
+import FetchData from 'src/components/FetchData.vue';
 
-const router = useRouter();
 const { t } = useI18n();
+const tableRef = ref();
 const { viewSummary } = useSummaryDialog();
+const companiesOptions = ref([]);
+const workersOptions = ref([]);
+const payMethodsOptions = ref([]);
+const bankEntitiesOptions = ref([]);
+const postcodesOptions = ref([]);
 
-function navigate(id) {
-    router.push({ path: `/worker/${id}` });
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'id',
+        label: t('tableColumns.id'),
+        columnFilter: {
+            alias: 'w',
+            inWhere: true,
+        },
+        chip: {
+            condition: () => true,
+        },
+        isId: true,
+    },
+    {
+        align: 'left',
+        name: 'nickname',
+        label: t('tableColumns.name'),
+        isTitle: true,
+        columnFilter: {
+            name: 'search',
+        },
+    },
+    {
+        align: 'left',
+        name: 'departmentFk',
+        label: t('tableColumns.department'),
+        cardVisible: true,
+        columnFilter: {
+            component: 'select',
+            inWhere: true,
+            alias: 'wd',
+            attrs: {
+                url: 'Departments',
+            },
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.department),
+    },
+    {
+        align: 'left',
+        name: 'email',
+        label: t('tableColumns.email'),
+        cardVisible: true,
+        columnFilter: {
+            alias: 'mu',
+            inWhere: true,
+        },
+        hidden: true,
+    },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('InvoiceOutSummary'),
+                icon: 'preview',
+                action: (row) => viewSummary(row.id, WorkerSummary),
+            },
+        ],
+    },
+]);
+
+function handleLocation(data, location) {
+    const { town, code, provinceFk, countryFk } = location ?? {};
+    data.postcode = code;
+    data.city = town;
+    data.provinceFk = provinceFk;
+    data.countryFk = countryFk;
 }
 
-const redirectToCreateView = () => {
-    router.push({ name: 'WorkerCreate' });
-};
+function uppercaseStreetModel(data) {
+    return {
+        get: () => (data.street ? data.street.toUpperCase() : ''),
+        set: (value) => {
+            data.street = value.toUpperCase();
+        },
+    };
+}
 </script>
 <template>
     <VnSearchbar
-        data-key="WorkerList"
+        data-key="Worker"
         :label="t('Search worker')"
         :info="t('You can search by worker id or name')"
     />
-    <RightMenu>
-        <template #right-panel>
-            <WorkerFilter data-key="WorkerList" />
-        </template>
-    </RightMenu>
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
-                data-key="WorkerList"
-                url="Workers/filter"
-                order="id DESC"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <CardList
-                        v-for="row of rows"
-                        :key="row.id"
-                        :id="row.id"
-                        :title="row.nickname"
-                        @click="navigate(row.id)"
+    <FetchData
+        url="Companies"
+        @on-fetch="(data) => (companiesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Workers/search"
+        @on-fetch="(data) => (workersOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Paymethods"
+        @on-fetch="(data) => (payMethodsOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="BankEntities"
+        @on-fetch="(data) => (bankEntitiesOptions = data)"
+        auto-load
+    />
+    <VnTable
+        ref="tableRef"
+        data-key="Worker"
+        url="Workers/filter"
+        :create="{
+            urlCreate: 'Workers/new',
+            title: t('Create worker'),
+            onDataSaved: ({ id }) => tableRef.redirect(id),
+            formInitialData: {
+                isFreelance: false,
+            },
+        }"
+        :columns="columns"
+        default-mode="table"
+        redirect="worker"
+        auto-load
+    >
+        <template #more-create-dialog="{ data }">
+            <div class="q-pa-lg full-width" style="max-width: 1200px">
+                <VnRadio
+                    v-model="data.isFreelance"
+                    :val="false"
+                    :label="`${t('Internal')}`"
+                    @update:model-value="data.payMethodFk = defaultPayMethod"
+                />
+                <VnRadio
+                    v-model="data.isFreelance"
+                    :val="true"
+                    :label="`${t('External')}`"
+                    @update:model-value="delete data.payMethodFk"
+                />
+                <VnRow>
+                    <VnInput v-model="data.firstName" :label="t('worker.create.name')" />
+                    <VnInput
+                        v-model="data.lastNames"
+                        :label="t('worker.create.lastName')"
+                    />
+                    <VnInput v-model="data.code" :label="t('worker.create.code')" />
+                </VnRow>
+                <VnRow>
+                    <VnInput v-model="data.name" :label="t('worker.create.webUser')" />
+                    <VnInput
+                        v-model="data.email"
+                        :label="t('worker.create.personalEmail')"
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnSelect
+                        :label="t('worker.create.company')"
+                        v-model="data.companyFk"
+                        :options="companiesOptions"
+                        option-value="id"
+                        option-label="code"
+                        hide-selected
+                    />
+                    <VnSelect
+                        :label="t('worker.create.boss')"
+                        v-model="data.bossFk"
+                        :options="workersOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
                     >
-                        <template #list-items>
-                            <VnLv :label="t('worker.list.name')" :value="row.userName" />
-                            <VnLv :label="t('worker.list.email')" :value="row.email" />
-                            <VnLv
-                                :label="t('worker.list.department')"
-                                :value="row.department"
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ scope.opt.name }}</QItemLabel>
+                                    <QItemLabel caption
+                                        >{{ scope.opt.nickname }},
+                                        {{ scope.opt.code }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelect>
+                </VnRow>
+                <VnRow>
+                    <VnInput v-model="data.fi" :label="t('worker.create.fi')" />
+                    <VnInputDate
+                        v-model="data.birth"
+                        :label="t('worker.create.birth')"
+                        :disable="data.isFreelance"
+                    />
+                    <VnInput
+                        v-model="data.phone"
+                        :label="t('worker.create.phone')"
+                        :disable="data.isFreelance"
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnLocation
+                        :roles-allowed-to-create="['deliveryAssistant']"
+                        :options="postcodesOptions"
+                        v-model="data.location"
+                        @update:model-value="(location) => handleLocation(data, location)"
+                        :disable="data.isFreelance"
+                    >
+                    </VnLocation>
+                </VnRow>
+                <VnRow>
+                    <VnInput
+                        :label="t('worker.create.street')"
+                        :model-value="uppercaseStreetModel(data).get()"
+                        @update:model-value="uppercaseStreetModel(data).set"
+                        :disable="data.isFreelance"
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnSelect
+                        :label="t('worker.create.payMethods')"
+                        v-model="data.payMethodFk"
+                        :options="payMethodsOptions"
+                        option-value="id"
+                        option-label="name"
+                        map-options
+                        hide-selected
+                        :disable="data.isFreelance"
+                        @update:model-value="(val) => !val && delete data.payMethodFk"
+                    />
+                    <VnInput
+                        v-model="data.iban"
+                        :label="t('worker.create.iban')"
+                        :disable="data.isFreelance"
+                    >
+                        <template #append>
+                            <QIcon name="info" class="cursor-info">
+                                <QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
+                            </QIcon>
+                        </template>
+                    </VnInput>
+                </VnRow>
+                <VnRow>
+                    <VnSelectDialog
+                        :label="t('worker.create.bankEntity')"
+                        v-model="data.bankEntityFk"
+                        :options="bankEntitiesOptions"
+                        option-label="name"
+                        option-value="id"
+                        hide-selected
+                        :roles-allowed-to-create="['salesAssistant', 'hr']"
+                        :disable="data.isFreelance"
+                    >
+                        <template #form>
+                            <CreateBankEntityForm
+                                @on-data-saved="(data) => bankEntitiesOptions.push(data)"
                             />
                         </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openCard')"
-                                @click.stop="navigate(row.id)"
-                                outline
-                            />
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, WorkerSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection v-if="scope.opt">
+                                    <QItemLabel
+                                        >{{ scope.opt.bic }}
+                                        {{ scope.opt.name }}</QItemLabel
+                                    >
+                                </QItemSection>
+                            </QItem>
                         </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-        <QPageSticky :offset="[20, 20]">
-            <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
-            <QTooltip>
-                {{ t('worker.list.newWorker') }}
-            </QTooltip>
-        </QPageSticky>
-    </QPage>
+                    </VnSelectDialog>
+                </VnRow>
+            </div>
+        </template>
+    </VnTable>
 </template>
 
 <i18n>
diff --git a/src/pages/Worker/WorkerMain.vue b/src/pages/Worker/WorkerMain.vue
deleted file mode 100644
index 66ce78f23..000000000
--- a/src/pages/Worker/WorkerMain.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'src/components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Worker/locale/en.yml b/src/pages/Worker/locale/en.yml
index f947b30e7..96df37919 100644
--- a/src/pages/Worker/locale/en.yml
+++ b/src/pages/Worker/locale/en.yml
@@ -1 +1,6 @@
 passwordRequirements: 'The password must have at least { length } length characters, {nAlpha} alphabetic characters, {nUpper} capital letters, {nDigits} digits and {nPunct} symbols (Ex: $%&.)\n'
+tableColumns:
+    id: ID
+    name: Name
+    department: Department
+    email: Email
diff --git a/src/pages/Worker/locale/es.yml b/src/pages/Worker/locale/es.yml
index d2478535a..41812345f 100644
--- a/src/pages/Worker/locale/es.yml
+++ b/src/pages/Worker/locale/es.yml
@@ -4,3 +4,8 @@ Locker: Taquilla
 Internal: Interno
 External: Externo
 passwordRequirements: 'La contraseña debe tener al menos { length } caracteres de longitud, {nAlpha} caracteres alfabéticos, {nUpper} letras mayúsculas, {nDigits} dígitos y {nPunct} símbolos (Ej: $%&.)'
+tableColumns:
+    id: ID
+    name: Nombre
+    department: Departamento
+    email: Email
diff --git a/src/pages/Zone/Card/ZoneBasicData.vue b/src/pages/Zone/Card/ZoneBasicData.vue
index 9f2195766..a4874e5fc 100644
--- a/src/pages/Zone/Card/ZoneBasicData.vue
+++ b/src/pages/Zone/Card/ZoneBasicData.vue
@@ -31,11 +31,11 @@ const agencyOptions = ref([]);
 
     <FormModel :url="`Zones/${route.params.id}`" auto-load model="zone">
         <template #form="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput :label="t('Name')" clearable v-model="data.name" />
             </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnSelect
                     option-label="name"
                     option-value="id"
@@ -66,7 +66,7 @@ const agencyOptions = ref([]);
                 />
             </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="data.travelingDays"
                     :label="t('Traveling days')"
@@ -77,7 +77,7 @@ const agencyOptions = ref([]);
                 <VnInputTime v-model="data.hour" :label="t('Closing')" />
             </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="data.price"
                     :label="t('Price')"
@@ -94,7 +94,7 @@ const agencyOptions = ref([]);
                 />
             </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput v-model="data.inflation" :label="t('Inflation')" clearable />
                 <QCheckbox
                     v-model="data.isVolumetric"
diff --git a/src/pages/Zone/Card/ZoneCard.vue b/src/pages/Zone/Card/ZoneCard.vue
index f92ee1e4e..59049a5b3 100644
--- a/src/pages/Zone/Card/ZoneCard.vue
+++ b/src/pages/Zone/Card/ZoneCard.vue
@@ -2,9 +2,9 @@
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { computed } from 'vue';
-
 import VnCard from 'components/common/VnCard.vue';
 import ZoneDescriptor from './ZoneDescriptor.vue';
+import ZoneSearchbar from './ZoneSearchbar.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -33,5 +33,9 @@ const searchBarDataKeys = {
         :search-make-fetch="searchbarMakeFetch"
         :searchbar-label="t('list.searchZone')"
         :searchbar-info="t('list.searchInfo')"
-    />
+    >
+        <template #searchbar>
+            <ZoneSearchbar />
+        </template>
+    </VnCard>
 </template>
diff --git a/src/pages/Zone/Card/ZoneCreateWarehouse.vue b/src/pages/Zone/Card/ZoneCreateWarehouse.vue
index 0f35ee679..86c4dcc72 100644
--- a/src/pages/Zone/Card/ZoneCreateWarehouse.vue
+++ b/src/pages/Zone/Card/ZoneCreateWarehouse.vue
@@ -29,7 +29,7 @@ const warehousesOptions = ref([]);
         @on-submit="emit('onSubmitCreateWarehouse', ZoneWarehouseFormData)"
     >
         <template #form-inputs>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col">
                     <VnSelect
                         :label="t('warehouses.warehouse')"
diff --git a/src/pages/Zone/Card/ZoneDescriptor.vue b/src/pages/Zone/Card/ZoneDescriptor.vue
index 602fefde3..04fb22ba5 100644
--- a/src/pages/Zone/Card/ZoneDescriptor.vue
+++ b/src/pages/Zone/Card/ZoneDescriptor.vue
@@ -52,7 +52,6 @@ const setData = (entity) => {
         :filter="filter"
         @on-fetch="setData"
         data-key="zoneData"
-        :summary="$attrs"
     >
         <template #menu="{ entity }">
             <ZoneDescriptorMenuItems :zone="entity" />
diff --git a/src/pages/Zone/Card/ZoneEventInclusionForm.vue b/src/pages/Zone/Card/ZoneEventInclusionForm.vue
index 808f14a53..66e41607f 100644
--- a/src/pages/Zone/Card/ZoneEventInclusionForm.vue
+++ b/src/pages/Zone/Card/ZoneEventInclusionForm.vue
@@ -149,7 +149,7 @@ onMounted(() => {
                     class="q-mb-sm"
                 />
             </div>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <div class="col flex justify-center">
                     <VnInputDate
                         v-if="inclusionType === 'day'"
@@ -173,7 +173,7 @@ onMounted(() => {
                     v-model="eventInclusionFormData.ended"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInputTime
                     v-model="eventInclusionFormData.hour"
                     :label="t('eventsInclusionForm.closing')"
@@ -185,7 +185,7 @@ onMounted(() => {
                     min="0"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="eventInclusionFormData.price"
                     :label="t('eventsInclusionForm.price')"
@@ -199,7 +199,7 @@ onMounted(() => {
                     min="0"
                 />
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     v-model="eventInclusionFormData.m3Max"
                     :label="t('eventsInclusionForm.m3Max')"
diff --git a/src/pages/Zone/ZoneMain.vue b/src/pages/Zone/Card/ZoneSearchbar.vue
similarity index 71%
rename from src/pages/Zone/ZoneMain.vue
rename to src/pages/Zone/Card/ZoneSearchbar.vue
index 68ff9a5d1..607057d0b 100644
--- a/src/pages/Zone/ZoneMain.vue
+++ b/src/pages/Zone/Card/ZoneSearchbar.vue
@@ -1,11 +1,8 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'src/components/LeftMenu.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
 
 const { t } = useI18n();
-const stateStore = useStateStore();
 
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -49,12 +46,4 @@ const exprBuilder = (param, value) => {
         :info="t('list.searchInfo')"
         custom-route-redirect-name="ZoneSummary"
     />
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
 </template>
diff --git a/src/pages/Zone/ZoneCreate.vue b/src/pages/Zone/ZoneCreate.vue
index e25ccae3a..7d7fa24a3 100644
--- a/src/pages/Zone/ZoneCreate.vue
+++ b/src/pages/Zone/ZoneCreate.vue
@@ -51,14 +51,14 @@ const redirectToZoneLocations = (_, { id }) => {
             @on-data-saved="redirectToZoneLocations"
         >
             <template #form="{ data }">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInput
                         v-model="data.name"
                         :label="t('create.name')"
                         :required="true"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnSelect
                         :label="t('create.warehouse')"
                         :options="warehousesOptions"
@@ -77,7 +77,7 @@ const redirectToZoneLocations = (_, { id }) => {
                         :required="true"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInput
                         v-model="data.travelingDays"
                         :label="t('create.travelingDays')"
@@ -87,7 +87,7 @@ const redirectToZoneLocations = (_, { id }) => {
 
                     <VnInputTime v-model="data.hour" :label="t('create.closingHour')" />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <VnInput
                         v-model="data.price"
                         :label="t('create.price')"
@@ -101,7 +101,7 @@ const redirectToZoneLocations = (_, { id }) => {
                         min="0"
                     />
                 </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow>
                     <QCheckbox
                         :label="t('create.volumetric')"
                         v-model="data.isVolumetric"
diff --git a/src/pages/Zone/ZoneDeliveryDays.vue b/src/pages/Zone/ZoneDeliveryDays.vue
index ddde3f6b3..d95c64d8b 100644
--- a/src/pages/Zone/ZoneDeliveryDays.vue
+++ b/src/pages/Zone/ZoneDeliveryDays.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import ZoneDeliveryPanel from './ZoneDeliveryPanel.vue';
 import ZoneCalendarGrid from './ZoneCalendarGrid.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import ZoneSearchbar from './Card/ZoneSearchbar.vue';
 
 const firstDay = ref(null);
 const lastDay = ref(null);
@@ -10,6 +11,7 @@ const events = ref([]);
 </script>
 
 <template>
+    <ZoneSearchbar />
     <RightMenu>
         <template #right-panel>
             <ZoneDeliveryPanel />
diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index 0932a0b57..0272292f6 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/src/pages/Zone/ZoneList.vue
@@ -15,6 +15,7 @@ import { useStateStore } from 'stores/useStateStore';
 import axios from 'axios';
 import RightMenu from 'src/components/common/RightMenu.vue';
 import ZoneFilterPanel from './ZoneFilterPanel.vue';
+import ZoneSearchbar from './Card/ZoneSearchbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -87,6 +88,7 @@ onMounted(() => (stateStore.rightDrawer = true));
 </script>
 
 <template>
+    <ZoneSearchbar />
     <RightMenu>
         <template #right-panel>
             <ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" />
diff --git a/src/pages/Zone/ZoneUpcoming.vue b/src/pages/Zone/ZoneUpcoming.vue
index be7b12534..ecf82bf4f 100644
--- a/src/pages/Zone/ZoneUpcoming.vue
+++ b/src/pages/Zone/ZoneUpcoming.vue
@@ -7,6 +7,7 @@ import FetchData from 'components/FetchData.vue';
 
 import { toDateFormat } from 'src/filters/date.js';
 import { useWeekdayStore } from 'src/stores/useWeekdayStore';
+import ZoneSearchbar from './Card/ZoneSearchbar.vue';
 
 const { t } = useI18n();
 const weekdayStore = useWeekdayStore();
@@ -52,6 +53,7 @@ onMounted(() => weekdayStore.initStore());
         @on-fetch="(data) => (details = data)"
         auto-load
     />
+    <ZoneSearchbar />
     <VnSubToolbar />
     <QPage class="column items-center q-pa-md">
         <QCard class="full-width q-pa-md">
diff --git a/src/router/modules/Supplier.js b/src/router/modules/Supplier.js
index da45aad2f..b711066b2 100644
--- a/src/router/modules/Supplier.js
+++ b/src/router/modules/Supplier.js
@@ -29,7 +29,7 @@ export default {
         {
             path: '',
             name: 'SupplierMain',
-            component: () => import('src/pages/Supplier/SupplierMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'SupplierList' },
             children: [
                 {
diff --git a/src/router/modules/account.js b/src/router/modules/account.js
index 6f3f8c25b..3faa00fbc 100644
--- a/src/router/modules/account.js
+++ b/src/router/modules/account.js
@@ -34,7 +34,7 @@ export default {
         {
             path: '',
             name: 'AccountMain',
-            component: () => import('src/pages/Account/AccountMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'AccountList' },
             children: [
                 {
diff --git a/src/router/modules/claim.js b/src/router/modules/claim.js
index 65c714418..cced9e24d 100644
--- a/src/router/modules/claim.js
+++ b/src/router/modules/claim.js
@@ -26,7 +26,7 @@ export default {
         {
             name: 'ClaimMain',
             path: '',
-            component: () => import('src/pages/Claim/ClaimMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'ClaimList' },
             children: [
                 {
diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index 9e3b39479..d9d047433 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -38,7 +38,7 @@ export default {
         {
             path: '',
             name: 'CustomerMain',
-            component: () => import('src/pages/Customer/CustomerMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'CustomerList' },
             children: [
                 {
diff --git a/src/router/modules/entry.js b/src/router/modules/entry.js
index 4f5f05231..0d38ed626 100644
--- a/src/router/modules/entry.js
+++ b/src/router/modules/entry.js
@@ -18,7 +18,7 @@ export default {
         {
             path: '',
             name: 'EntryMain',
-            component: () => import('src/pages/Entry/EntryMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'EntryList' },
             children: [
                 {
diff --git a/src/router/modules/invoiceIn.js b/src/router/modules/invoiceIn.js
index 75d0612aa..cd8f7de9c 100644
--- a/src/router/modules/invoiceIn.js
+++ b/src/router/modules/invoiceIn.js
@@ -25,7 +25,7 @@ export default {
         {
             path: '',
             name: 'InvoiceInMain',
-            component: () => import('src/pages/InvoiceIn/InvoiceInMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'InvoiceInList' },
             children: [
                 {
diff --git a/src/router/modules/invoiceOut.js b/src/router/modules/invoiceOut.js
index aac84573c..5e83b0859 100644
--- a/src/router/modules/invoiceOut.js
+++ b/src/router/modules/invoiceOut.js
@@ -18,7 +18,7 @@ export default {
         {
             path: '',
             name: 'InvoiceOutMain',
-            component: () => import('src/pages/InvoiceOut/InvoiceOutMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'InvoiceOutList' },
             children: [
                 {
diff --git a/src/router/modules/item.js b/src/router/modules/item.js
index 06fe680eb..4bd5df4e2 100644
--- a/src/router/modules/item.js
+++ b/src/router/modules/item.js
@@ -35,7 +35,7 @@ export default {
         {
             path: '',
             name: 'ItemMain',
-            component: () => import('src/pages/Item/ItemMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'ItemList' },
             children: [
                 {
diff --git a/src/router/modules/monitor.js b/src/router/modules/monitor.js
index 6c388a474..f0db8d3f3 100644
--- a/src/router/modules/monitor.js
+++ b/src/router/modules/monitor.js
@@ -18,7 +18,7 @@ export default {
         {
             path: '',
             name: 'MonitorMain',
-            component: () => import('src/pages/Monitor/MonitorMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'MonitorList' },
             children: [
                 {
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
index aa1ca774d..a2b874cc6 100644
--- a/src/router/modules/order.js
+++ b/src/router/modules/order.js
@@ -18,7 +18,7 @@ export default {
         {
             path: '',
             name: 'OrderMain',
-            component: () => import('src/pages/Order/OrderMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'OrderList' },
             children: [
                 {
diff --git a/src/router/modules/route.js b/src/router/modules/route.js
index f6f92b7d9..3c5c860cf 100644
--- a/src/router/modules/route.js
+++ b/src/router/modules/route.js
@@ -18,7 +18,10 @@ export default {
         {
             path: '/route',
             name: 'RouteMain',
-            component: () => import('src/pages/Route/RouteMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
+            props: {
+                leftDrawer: false,
+            },
             redirect: { name: 'RouteList' },
             children: [
                 {
diff --git a/src/router/modules/shelving.js b/src/router/modules/shelving.js
index d20ce40f4..70145dfb4 100644
--- a/src/router/modules/shelving.js
+++ b/src/router/modules/shelving.js
@@ -18,7 +18,7 @@ export default {
         {
             path: '',
             name: 'ShelvingMain',
-            component: () => import('src/pages/Shelving/ShelvingMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'ShelvingList' },
             children: [
                 {
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index c507553d6..4074f089f 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -35,7 +35,7 @@ export default {
         {
             name: 'TicketMain',
             path: '',
-            component: () => import('src/pages/Ticket/TicketMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'TicketList' },
             children: [
                 {
diff --git a/src/router/modules/travel.js b/src/router/modules/travel.js
index e1a08e9de..627692be8 100644
--- a/src/router/modules/travel.js
+++ b/src/router/modules/travel.js
@@ -18,7 +18,7 @@ export default {
         {
             path: '',
             name: 'TravelMain',
-            component: () => import('src/pages/Travel/TravelMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'TravelList' },
             children: [
                 {
diff --git a/src/router/modules/wagon.js b/src/router/modules/wagon.js
index 6f9a4c819..d3d14a888 100644
--- a/src/router/modules/wagon.js
+++ b/src/router/modules/wagon.js
@@ -18,7 +18,7 @@ export default {
         {
             path: '/wagon',
             name: 'WagonMain',
-            component: () => import('src/pages/Wagon/WagonMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'WagonList' },
             children: [
                 {
@@ -62,7 +62,7 @@ export default {
         {
             path: '/wagon/type',
             name: 'WagonTypeMain',
-            component: () => import('src/pages/Wagon/WagonMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'WagonTypeList' },
             children: [
                 {
diff --git a/src/router/modules/worker.js b/src/router/modules/worker.js
index 3fc71c2a3..f80df5e06 100644
--- a/src/router/modules/worker.js
+++ b/src/router/modules/worker.js
@@ -31,7 +31,7 @@ export default {
         {
             path: '',
             name: 'WorkerMain',
-            component: () => import('src/pages/Worker/WorkerMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'WorkerList' },
             children: [
                 {
@@ -104,6 +104,25 @@ export default {
                         },
                     ],
                 },
+                {
+                    name: 'WorkerTimeControl',
+                    path: 'time-control',
+                    meta: {
+                        title: 'timeControl',
+                        icon: 'access_time',
+                    },
+                    component: () =>
+                        import('src/pages/Worker/Card/WorkerTimeControl.vue'),
+                },
+                {
+                    name: 'WorkerCalendar',
+                    path: 'calendar',
+                    meta: {
+                        title: 'calendar',
+                        icon: 'calendar_today',
+                    },
+                    component: () => import('src/pages/Worker/Card/WorkerCalendar.vue'),
+                },
                 {
                     name: 'WorkerPda',
                     path: 'pda',
@@ -150,25 +169,6 @@ export default {
                     },
                     component: () => import('src/pages/Worker/Card/WorkerLog.vue'),
                 },
-                {
-                    name: 'WorkerCalendar',
-                    path: 'calendar',
-                    meta: {
-                        title: 'calendar',
-                        icon: 'calendar_today',
-                    },
-                    component: () => import('src/pages/Worker/Card/WorkerCalendar.vue'),
-                },
-                {
-                    name: 'WorkerTimeControl',
-                    path: 'time-control',
-                    meta: {
-                        title: 'timeControl',
-                        icon: 'access_time',
-                    },
-                    component: () =>
-                        import('src/pages/Worker/Card/WorkerTimeControl.vue'),
-                },
                 {
                     name: 'WorkerLocker',
                     path: 'locker',
diff --git a/src/router/modules/zone.js b/src/router/modules/zone.js
index fd6fa959b..889b47464 100644
--- a/src/router/modules/zone.js
+++ b/src/router/modules/zone.js
@@ -29,7 +29,7 @@ export default {
         {
             path: '/zone',
             name: 'ZoneMain',
-            component: () => import('src/pages/Zone/ZoneMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'ZoneList' },
             children: [
                 {
diff --git a/test/cypress/integration/invoiceIn/invoiceInCorrective.spec.js b/test/cypress/integration/invoiceIn/invoiceInCorrective.spec.js
index 5bf9a89e5..a64f98c10 100644
--- a/test/cypress/integration/invoiceIn/invoiceInCorrective.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInCorrective.spec.js
@@ -9,12 +9,16 @@ describe('InvoiceInCorrective', () => {
         cy.viewport(1280, 720);
         cy.login('developer');
         cy.visit(`/#/invoice-in/1/summary`);
-        cy.waitForElement('.q-page');
+        cy.intercept('POST', '/api/InvoiceIns/corrective').as('corrective');
 
         cy.openActionsDescriptor();
 
         cy.get(createRectificative).click();
         cy.get(saveDialog).click();
+        cy.wait('@corrective').then((interception) => {
+            const correctingId = interception.response.body;
+            cy.url().should('include', `/invoice-in/${correctingId}/summary`);
+        });
         cy.get(rectificativeSection).click();
         cy.get('tbody > tr:visible').should('have.length', 1);
     });
diff --git a/test/cypress/integration/invoiceIn/invoiceInIntrastat.spec.js b/test/cypress/integration/invoiceIn/invoiceInIntrastat.spec.js
index c87fd4315..a297a60f4 100644
--- a/test/cypress/integration/invoiceIn/invoiceInIntrastat.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInIntrastat.spec.js
@@ -11,25 +11,29 @@ describe('InvoiceInIntrastat', () => {
 
     it('should edit the first line', () => {
         cy.selectOption(firstLineCode, 'Plantas vivas: Esqueje/injerto, Vid');
-
         cy.get(inputBtns).eq(1).click();
-
         cy.saveCard();
-        cy.visit(`/#/invoice-in/1/intrastat`);
-
-        cy.getValue(firstLineCode).should('equal', 'Plantas vivas: Esqueje/injerto, Vid');
+        cy.get(`${firstLineCode} span`).should(
+            'have.text',
+            '6021010:Plantas vivas: Esqueje/injerto, Vid'
+        );
     });
 
     it('should add a new row', () => {
-        const rowData = [false, 'Plantas vivas: Esqueje/injerto, Vid', 30, 10, 5, 'FR'];
-
         cy.addRow();
-        cy.fillRow(thirdRow, rowData);
+        cy.fillRow(thirdRow, [
+            false,
+            'Plantas vivas: Esqueje/injerto, Vid',
+            30,
+            10,
+            5,
+            'FR',
+        ]);
         cy.saveCard();
         cy.get('.q-notification__message').should('have.text', 'Data saved');
     });
 
     it('should remove the first line', () => {
-        cy.removeRow(2);
+        cy.removeRow(1);
     });
 });
diff --git a/test/cypress/integration/invoiceIn/invoiceInVat.spec.js b/test/cypress/integration/invoiceIn/invoiceInVat.spec.js
index 63e99eac1..932aca96d 100644
--- a/test/cypress/integration/invoiceIn/invoiceInVat.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInVat.spec.js
@@ -16,9 +16,7 @@ describe('InvoiceInVat', () => {
     it('should edit the sage iva', () => {
         cy.selectOption(firstLineVat, 'H.P. IVA 21% CEE');
         cy.saveCard();
-        cy.visit(`/#/invoice-in/1/vat`);
-
-        cy.getValue(firstLineVat).should('equal', '8');
+        cy.get(`${firstLineVat} span`).should('have.text', '8:H.P. IVA 21% CEE');
     });
 
     it('should add a new row', () => {
diff --git a/test/cypress/integration/worker/workerCreate.spec.js b/test/cypress/integration/worker/workerCreate.spec.js
index b73297b73..c1832ad67 100644
--- a/test/cypress/integration/worker/workerCreate.spec.js
+++ b/test/cypress/integration/worker/workerCreate.spec.js
@@ -1,5 +1,5 @@
 describe('WorkerCreate', () => {
-    const externalRadio = '.q-toolbar .q-radio:nth-child(2)';
+    const externalRadio = '.q-radio:nth-child(2)';
     const notification = '.q-notification__message';
     const developerBossId = 120;
 
@@ -9,6 +9,7 @@ describe('WorkerCreate', () => {
         Name: { val: 'Manolo' },
         'Last name': { val: 'Hurtado' },
         'Personal email': { val: 'manolo@mydomain.com' },
+        Company: { val: 'VNL', type: 'select' },
         Street: { val: 'S/ DEFAULTWORKERSTREET' },
         Location: { val: 1, type: 'select' },
         Phone: { val: '123456789' },
@@ -29,16 +30,14 @@ describe('WorkerCreate', () => {
     beforeEach(() => {
         cy.viewport(1280, 720);
         cy.login('hr');
-        cy.visit('/#/worker/create');
+        cy.visit('/#/worker/list');
+        cy.get('.q-page-sticky > div > .q-btn').click();
     });
 
     it('should throw an error if a pay method has not been selected', () => {
         cy.fillInForm(internal);
-        cy.saveCard();
-        cy.get(notification).should(
-            'contains.text',
-            'That payment method requires an IBAN'
-        );
+        cy.get('.q-mt-lg > .q-btn--standard').click();
+        cy.get(notification).should('contains.text', 'Payment method is required');
     });
 
     it('should create an internal', () => {
@@ -46,14 +45,14 @@ describe('WorkerCreate', () => {
             ...internal,
             'Pay method': { val: 'PayMethod one', type: 'select' },
         });
-        cy.saveCard();
+        cy.get('.q-mt-lg > .q-btn--standard').click();
         cy.get(notification).should('contains.text', 'Data created');
     });
 
     it('should create an external', () => {
         cy.get(externalRadio).click();
         cy.fillInForm(external);
-        cy.saveCard();
+        cy.get('.q-mt-lg > .q-btn--standard').click();
         cy.get(notification).should('contains.text', 'Data created');
     });
 });
diff --git a/test/cypress/integration/worker/workerList.spec.js b/test/cypress/integration/worker/workerList.spec.js
index 9808fd157..de57c9638 100644
--- a/test/cypress/integration/worker/workerList.spec.js
+++ b/test/cypress/integration/worker/workerList.spec.js
@@ -1,25 +1,11 @@
 describe('WorkerList', () => {
-    const workerFieldNames =
-        '.card-list-body > .list-items > :nth-child(1) > .value > span';
     beforeEach(() => {
         cy.viewport(1280, 720);
         cy.login('developer');
         cy.visit('/#/worker/list');
     });
 
-    it('should load workers', () => {
-        cy.get(workerFieldNames).eq(2).should('have.text', 'jessicajones');
-        cy.get(workerFieldNames).eq(3).should('have.text', 'brucebanner');
-        cy.get(workerFieldNames).eq(4).should('have.text', 'charlesxavier');
-    });
-
     it('should open the worker summary', () => {
-        cy.openListSummary(2);
-        cy.get('.summaryHeader div').should('have.text', '1110 - Jessica Jones');
-        cy.get('.summary .header-link')
-            .eq(0)
-            .invoke('text')
-            .should('include', 'Basic data');
-        cy.get('.summary .header-link').eq(2).should('have.text', 'User data ');
+        cy.get('.q-drawer .q-form input[aria-label="Name"]').type('jessica jones{enter}');
     });
 });
diff --git a/test/cypress/integration/worker/workerLocker.spec.js b/test/cypress/integration/worker/workerLocker.spec.js
index ef2f88300..9a4a19c7a 100644
--- a/test/cypress/integration/worker/workerLocker.spec.js
+++ b/test/cypress/integration/worker/workerLocker.spec.js
@@ -2,7 +2,7 @@ describe('WorkerLocker', () => {
     const workerId = 1109;
     const lockerCode = '2F';
     const input = '.q-card input';
-    const firstOpt = '[role="listbox"] .q-item:nth-child(1)';
+    const thirdOpt = '[role="listbox"] .q-item:nth-child(3)';
     beforeEach(() => {
         cy.viewport(1280, 720);
         cy.login('productionBoss');
@@ -11,8 +11,8 @@ describe('WorkerLocker', () => {
 
     it('should allocates a locker', () => {
         cy.get(input).click();
-        cy.get(input).type(lockerCode);
-        cy.get(firstOpt).click();
+        cy.waitForElement('[role="listbox"]');
+        cy.get(thirdOpt).click();
         cy.saveCard();
         cy.get(input).invoke('val').should('eq', lockerCode);
     });
diff --git a/test/cypress/integration/zone/zoneDeliveryDays.spec.js b/test/cypress/integration/zone/zoneDeliveryDays.spec.js
new file mode 100644
index 000000000..1e1fc8ff5
--- /dev/null
+++ b/test/cypress/integration/zone/zoneDeliveryDays.spec.js
@@ -0,0 +1,15 @@
+describe('ZoneDeliveryDays', () => {
+    beforeEach(() => {
+        cy.login('developer');
+        cy.viewport(1920, 1080);
+        cy.visit(`/#/zone/delivery-days`);
+    });
+
+    it('should query for the day', () => {
+        cy.get('.q-form > .q-btn > .q-btn__content').click();
+        cy.get('.q-notification__message').should(
+            'have.text',
+            'No service for the specified zone'
+        );
+    });
+});
diff --git a/test/cypress/integration/zone/zoneList.spec.js b/test/cypress/integration/zone/zoneList.spec.js
new file mode 100644
index 000000000..f35da7e5f
--- /dev/null
+++ b/test/cypress/integration/zone/zoneList.spec.js
@@ -0,0 +1,15 @@
+describe('ZoneList', () => {
+    beforeEach(() => {
+        cy.viewport(1920, 1080);
+        cy.login('developer');
+        cy.visit(`/#/zone/list`);
+    });
+
+    it('should open the details', () => {
+        cy.get(':nth-child(1) > .text-right > .material-symbols-outlined').click();
+    });
+    it('should redirect to summary', () => {
+        cy.waitForElement('.q-page');
+        cy.get('tbody > :nth-child(1)').click();
+    });
+});
diff --git a/test/cypress/integration/zone/zoneUpcomingDeliveries.spec.js b/test/cypress/integration/zone/zoneUpcomingDeliveries.spec.js
new file mode 100644
index 000000000..28e2222d4
--- /dev/null
+++ b/test/cypress/integration/zone/zoneUpcomingDeliveries.spec.js
@@ -0,0 +1,9 @@
+describe('ZoneUpcomingDeliveries', () => {
+    beforeEach(() => {
+        cy.login('developer');
+        cy.viewport(1920, 1080);
+        cy.visit(`/#/zone/upcoming-deliveries`);
+    });
+
+    it('should show the page', () => {});
+});
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index 3174e04d2..3cf909af5 100755
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -100,6 +100,7 @@ Cypress.Commands.add('fillInForm', (obj, form = '.q-form > .q-card') => {
                     case 'select':
                         cy.wrap(el).type(val);
                         cy.get('.q-menu .q-item').contains(val).click();
+                        cy.get('body').click();
                         break;
                     case 'date':
                         cy.wrap(el).type(val.split('-').join(''));
@@ -187,11 +188,14 @@ Cypress.Commands.add('validateRow', (rowSelector, expectedValues) => {
 });
 
 Cypress.Commands.add('removeRow', (rowIndex) => {
+    const trEls = 'tbody > tr:visible';
     let rowsBefore;
-    cy.get('tbody > tr:visible')
+    cy.get('tbody > tr')
         .its('length')
         .then((length) => {
-            cy.get('.q-checkbox').eq(rowIndex).click();
+            cy.get(`${trEls} .q-checkbox`)
+                .eq(rowIndex - 1)
+                .click();
             cy.removeCard();
             cy.get('.q-dialog button').eq(2).click();
             rowsBefore = length;
@@ -200,7 +204,7 @@ Cypress.Commands.add('removeRow', (rowIndex) => {
             // Check the existence of tbody before performing the second assertion.
             cy.get('tbody').then(($tbody) => {
                 if ($tbody.length > 0)
-                    cy.get('tbody > tr:visible').should('have.length', rowsBefore - 1);
+                    cy.get('tbody > tr').should('have.length', rowsBefore - 1);
             });
         });
 });
diff --git a/test/vitest/__tests__/pages/Customer/CustomerPayments.spec.js b/test/vitest/__tests__/pages/Customer/CustomerPayments.spec.js
index 13293f596..466a544b4 100644
--- a/test/vitest/__tests__/pages/Customer/CustomerPayments.spec.js
+++ b/test/vitest/__tests__/pages/Customer/CustomerPayments.spec.js
@@ -35,18 +35,4 @@ describe('CustomerPayments', () => {
             );
         });
     });
-
-    describe('stateColor()', () => {
-        it('should return "positive" when isConfirmed property is truthy', async () => {
-            const result = await vm.stateColor({ isConfirmed: true });
-
-            expect(result).toEqual('positive');
-        });
-
-        it('should return "primary" when isConfirmed property is falsy', async () => {
-            const result = await vm.stateColor({ isConfirmed: false });
-
-            expect(result).toEqual('primary');
-        });
-    });
 });
diff --git a/test/vitest/helper.js b/test/vitest/helper.js
index d6721d817..e201535ec 100644
--- a/test/vitest/helper.js
+++ b/test/vitest/helper.js
@@ -38,6 +38,7 @@ vi.mock('vue-router', () => ({
         meta: { moduleName: 'mockName' },
         path: 'mockSection/list',
     }),
+    onBeforeRouteLeave: () => {},
 }));
 
 vi.mock('axios');