Merge branch 'dev' into formModel_mapper

2025-02-15 23:59:16 +00:00 · 2025-02-15 23:59:16 +00:00 · f0b1c66c27
parent ae060b0cf4 4492b9e70f
commit f0b1c66c27
36 changed files with 497 additions and 492 deletions
--- a/src/boot/qformMixin.js
+++ b/src/boot/qformMixin.js
@ -9,19 +9,19 @@ export default {
        if (!form) return;
        try {
            const inputsFormCard = form.querySelectorAll(
-                `input:not([disabled]):not([type="checkbox"])`
+                `input:not([disabled]):not([type="checkbox"])`,
            );
            if (inputsFormCard.length) {
                focusFirstInput(inputsFormCard[0]);
            }
            const textareas = document.querySelectorAll(
-                'textarea:not([disabled]), [contenteditable]:not([disabled])'
+                'textarea:not([disabled]), [contenteditable]:not([disabled])',
            );
            if (textareas.length) {
                focusFirstInput(textareas[textareas.length - 1]);
            }
            const inputs = document.querySelectorAll(
-                'form#formModel input:not([disabled]):not([type="checkbox"])'
+                'form#formModel input:not([disabled]):not([type="checkbox"])',
            );
            const input = inputs[0];
            if (!input) return;
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@ -114,7 +114,7 @@ const defaultButtons = computed(() => ({
        color: 'primary',
        icon: 'save',
        label: 'globals.save',
-        click: () => myForm.value.submit(),
+        click: () => myForm.value.onSubmit(false),
        type: 'submit',
    },
    reset: {
@ -208,7 +208,8 @@ async function fetch() {
    }
 }

-async function save() {
+async function save(prevent = false) {
+    if (prevent) return;
    if ($props.observeFormChanges && !hasChanges.value)
        return notify('globals.noChanges', 'negative');

@ -299,7 +300,7 @@ defineExpose({
        <QForm
            ref="myForm"
            v-if="formData"
-            @submit="save"
+            @submit="save(!!$event)"
            @reset="reset"
            class="q-pa-md"
            :style="maxWidth ? 'max-width: ' + maxWidth : ''"
--- a/src/components/FormModelPopup.vue
+++ b/src/components/FormModelPopup.vue
@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';

 import FormModel from 'components/FormModel.vue';
@ -58,19 +58,6 @@ defineExpose({
            <p>{{ subtitle }}</p>
            <slot name="form-inputs" :data="data" :validate="validate" />
            <div class="q-mt-lg row justify-end">
-                <QBtn
-                    v-if="showSaveAndContinueBtn"
-                    :label="t('globals.isSaveAndContinue')"
-                    :title="t('globals.isSaveAndContinue')"
-                    type="submit"
-                    color="primary"
-                    class="q-ml-sm"
-                    :disabled="isLoading"
-                    :loading="isLoading"
-                    data-cy="FormModelPopup_isSaveAndContinue"
-                    z-max
-                    @click="() => (isSaveAndContinue = true)"
-                />
                <QBtn
                    :label="t('globals.cancel')"
                    :title="t('globals.cancel')"
@ -83,23 +70,39 @@ defineExpose({
                    v-close-popup
                    z-max
                    @click="
-                        () => {
-                            isSaveAndContinue = false;
-                            emit('onDataCanceled');
-                        }
+                        isSaveAndContinue = false;
+                        emit('onDataCanceled');
                    "
                />
                <QBtn
+                    :flat="showSaveAndContinueBtn"
                    :label="t('globals.save')"
                    :title="t('globals.save')"
-                    type="submit"
+                    @click="
+                        formModelRef.save();
+                        isSaveAndContinue = false;
+                    "
                    color="primary"
                    class="q-ml-sm"
                    :disabled="isLoading"
                    :loading="isLoading"
                    data-cy="FormModelPopup_save"
                    z-max
-                    @click="() => (isSaveAndContinue = false)"
+                />
+                <QBtn
+                    v-if="showSaveAndContinueBtn"
+                    :label="t('globals.isSaveAndContinue')"
+                    :title="t('globals.isSaveAndContinue')"
+                    color="primary"
+                    class="q-ml-sm"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                    data-cy="FormModelPopup_isSaveAndContinue"
+                    z-max
+                    @click="
+                        isSaveAndContinue = true;
+                        formModelRef.save();
+                    "
                />
            </div>
        </template>
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@ -340,8 +340,9 @@ const clickHandler = async (event) => {

    const isDateElement = event.target.closest('.q-date');
    const isTimeElement = event.target.closest('.q-time');
+    const isQselectDropDown = event.target.closest('.q-select__dropdown-icon');

-    if (isDateElement || isTimeElement) return;
+    if (isDateElement || isTimeElement || isQselectDropDown) return;

    if (clickedElement === null) {
        destroyInput(editingRow.value, editingField.value);
@ -411,7 +412,7 @@ async function renderInput(rowId, field, clickedElement) {
        focusOnMount: true,
        eventHandlers: {
            'update:modelValue': async (value) => {
-                if (isSelect) {
+                if (isSelect && value) {
                    row[column.name] = value[column.attrs?.optionValue ?? 'id'];
                    row[column?.name + 'TextValue'] =
                        value[column.attrs?.optionLabel ?? 'name'];
@ -448,8 +449,11 @@ async function renderInput(rowId, field, clickedElement) {
    node.appContext = app._context;
    render(node, clickedElement);

-    if (['checkbox', 'toggle', undefined].includes(column?.component))
+    if (['toggle'].includes(column?.component))
        node.el?.querySelector('span > div').focus();
+
+    if (['checkbox', undefined].includes(column?.component))
+        node.el?.querySelector('span > div > div').focus();
 }

 function destroyInput(rowIndex, field, clickedElement) {
@ -530,6 +534,9 @@ function formatColumnValue(col, row, dashIfEmpty) {
    }
 }
 const checkbox = ref(null);
+function cardClick(_, row) {
+    if ($props.redirect) router.push({ path: `/${$props.redirect}/${row.id}` });
+}
 </script>
 <template>
    <QDrawer
@ -593,6 +600,7 @@ const checkbox = ref(null);
                @row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
                @update:selected="emit('update:selected', $event)"
                @selection="(details) => handleSelection(details, rows)"
+                :hide-selected-banner="true"
            >
                <template #top-left v-if="!$props.withoutHeader">
                    <slot name="top-left"> </slot>
@ -624,6 +632,7 @@ const checkbox = ref(null);
                <template #header-cell="{ col }">
                    <QTh
                        v-if="col.visible ?? true"
+                        v-bind:class="col.headerClass"
                        class="body-cell"
                        :style="col?.width ? `max-width: ${col?.width}` : ''"
                        style="padding: inherit"
@ -763,18 +772,13 @@ const checkbox = ref(null);
                </template>
                <template #item="{ row, colsMap }">
                    <component
-                        :is="$props.redirect ? 'router-link' : 'span'"
-                        :to="`/${$props.redirect}/` + row.id"
+                        v-bind:is="'div'"
+                        @click="(event) => cardClick(event, row)"
                    >
                        <QCard
                            bordered
                            flat
                            class="row no-wrap justify-between cursor-pointer q-pa-sm"
-                            @click="
-                                (_, row) => {
-                                    $props.rowClick && $props.rowClick(row);
-                                }
-                            "
                            style="height: 100%"
                        >
                            <QCardSection
@ -1042,8 +1046,8 @@ es:

 .grid-three {
    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
-    max-width: 100%;
+    grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
+    width: 100%;
    grid-gap: 20px;
    margin: 0 auto;
 }
--- a/src/components/common/VnColor.vue
+++ b/src/components/common/VnColor.vue
@ -2,7 +2,7 @@
 const $props = defineProps({
    colors: {
        type: String,
-        default: '{"value":[]}',
+        default: '{"value": []}',
    },
 });

@ -11,7 +11,7 @@ const maxHeight = 30;
 const colorHeight = maxHeight / colorArray?.length;
 </script>
 <template>
-    <div class="color-div" :style="{ height: `${maxHeight}px` }">
+    <div v-if="colors" class="color-div" :style="{ height: `${maxHeight}px` }">
        <div
            v-for="(color, index) in colorArray"
            :key="index"
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@ -6,6 +6,7 @@ import { useArrayData } from 'composables/useArrayData';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { useState } from 'src/composables/useState';
 import { useRoute } from 'vue-router';
+import { useClipboard } from 'src/composables/useClipboard';
 import VnMoreOptions from './VnMoreOptions.vue';

 const $props = defineProps({
@ -42,6 +43,7 @@ const $props = defineProps({
 const state = useState();
 const route = useRoute();
 const { t } = useI18n();
+const { copyText } = useClipboard();
 const { viewSummary } = useSummaryDialog();
 let arrayData;
 let store;
@ -99,6 +101,14 @@ function getValueFromPath(path) {
    return current;
 }

+function copyIdText(id) {
+    copyText(id, {
+        component: {
+            copyValue: id,
+        },
+    });
+}
+
 const emit = defineEmits(['onFetch']);

 const iconModule = computed(() => route.matched[1].meta.icon);
@ -182,9 +192,22 @@ const toModule = computed(() =>
                            </slot>
                        </div>
                    </QItemLabel>
-                    <QItem dense>
+                    <QItem>
                        <QItemLabel class="subtitle" caption>
                            #{{ getValueFromPath(subtitle) ?? entity.id }}
+                            <QBtn
+                                round
+                                flat
+                                dense
+                                size="sm"
+                                icon="content_copy"
+                                color="primary"
+                                @click.stop="copyIdText(entity.id)"
+                            >
+                                <QTooltip>
+                                    {{ t('globals.copyId') }}
+                                </QTooltip>
+                            </QBtn>
                        </QItemLabel>
                    </QItem>
                </QList>
@ -292,3 +315,11 @@ const toModule = computed(() =>
    }
 }
 </style>
+<i18n>
+    en:
+        globals:
+            copyId: Copy ID
+    es:
+        globals:
+            copyId: Copiar ID
+</i18n>
--- a/src/composables/useCau.js
+++ b/src/composables/useCau.js
@ -11,6 +11,7 @@ export async function useCau(res, message) {
    const { config, headers, request, status, statusText, data } = res || {};
    const { params, url, method, signal, headers: confHeaders } = config || {};
    const { message: resMessage, code, name } = data?.error || {};
+    delete confHeaders.Authorization;

    const additionalData = {
        path: location.hash,
@ -40,7 +41,7 @@ export async function useCau(res, message) {
                handler: async () => {
                    const locale = i18n.global.t;
                    const reason = ref(
-                        code == 'ACCESS_DENIED' ? locale('cau.askPrivileges') : ''
+                        code == 'ACCESS_DENIED' ? locale('cau.askPrivileges') : '',
                    );
                    openConfirmationModal(
                        locale('cau.title'),
@ -59,10 +60,9 @@ export async function useCau(res, message) {
                                'onUpdate:modelValue': (val) => (reason.value = val),
                                label: locale('cau.inputLabel'),
                                class: 'full-width',
-                                required: true,
                                autofocus: true,
                            },
-                        }
+                        },
                    );
                },
            },
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@ -156,6 +156,7 @@ globals:
    changeState: Change state
    raid: 'Raid {daysInForward} days'
    isVies: Vies
+    noData: No data available
    pageTitles:
        logIn: Login
        addressEdit: Update address
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@ -160,6 +160,7 @@ globals:
    changeState: Cambiar estado
    raid: 'Redada {daysInForward} días'
    isVies: Vies
+    noData: Datos no disponibles
    pageTitles:
        logIn: Inicio de sesión
        addressEdit: Modificar consignatario
--- a/src/pages/Account/Card/AccountDescriptorMenu.vue
+++ b/src/pages/Account/Card/AccountDescriptorMenu.vue
@ -35,6 +35,12 @@ account.value.hasAccount = hasAccount.value;
 const entityId = computed(() => +route.params.id);
 const hasitManagementAccess = ref();
 const hasSysadminAccess = ref();
+const isHimself = computed(() => user.value.id === account.value.id);
+const url = computed(() =>
+    isHimself.value
+        ? 'Accounts/change-password'
+        : `Accounts/${entityId.value}/setPassword`
+);

 async function updateStatusAccount(active) {
    if (active) {
@ -107,11 +113,8 @@ onMounted(() => {
        :ask-old-pass="askOldPass"
        :submit-fn="
            async (newPassword, oldPassword) => {
-                await axios.patch(`Accounts/change-password`, {
-                    userId: entityId,
-                    newPassword,
-                    oldPassword,
-                });
+                const body = isHimself ? { userId: entityId, oldPassword } : {};
+                await axios.patch(url, { ...body, newPassword });
            }
        "
    />
@ -155,16 +158,10 @@ onMounted(() => {
    >
        <QItemSection>{{ t('globals.delete') }}</QItemSection>
    </QItem>
-    <QItem
-        v-if="hasSysadminAccess"
-        v-ripple
-        clickable
-        @click="user.id === account.id ? onChangePass(true) : onChangePass(false)"
-    >
-        <QItemSection v-if="user.id === account.id">
-            {{ t('globals.changePass') }}
+    <QItem v-if="hasSysadminAccess" v-ripple clickable>
+        <QItemSection @click="onChangePass(isHimself)">
+            {{ isHimself ? t('globals.changePass') : t('globals.setPass') }}
        </QItemSection>
-        <QItemSection v-else>{{ t('globals.setPass') }}</QItemSection>
    </QItem>
    <QItem
        v-if="!account.hasAccount && hasSysadminAccess"
--- a/src/pages/Claim/Card/ClaimLines.vue
+++ b/src/pages/Claim/Card/ClaimLines.vue
@ -190,7 +190,7 @@ async function saveWhenHasChanges() {
            ref="claimLinesForm"
            :url="`Claims/${route.params.id}/lines`"
            save-url="ClaimBeginnings/crud"
-            :filter="linesFilter"
+            :user-filter="linesFilter"
            @on-fetch="onFetch"
            v-model:selected="selected"
            :default-save="false"
--- a/src/pages/Claim/ClaimFilter.vue
+++ b/src/pages/Claim/ClaimFilter.vue
@ -1,8 +1,6 @@
 <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 VnSelect from 'components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
@ -14,15 +12,14 @@ const props = defineProps({
        type: String,
        required: true,
    },
+    states: {
+        type: Array,
+        default: () => [],
+    },
 });
-
-const states = ref([]);
-
-defineExpose({ states });
 </script>

 <template>
-    <FetchData url="ClaimStates" @on-fetch="(data) => (states = data)" auto-load />
    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
        <template #tags="{ tag, formatFn }">
            <div class="q-gutter-x-xs">
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@ -10,12 +10,13 @@ import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import VnTable from 'src/components/VnTable/VnTable.vue';
 import ZoneDescriptorProxy from '../Zone/Card/ZoneDescriptorProxy.vue';
 import VnSection from 'src/components/common/VnSection.vue';
+import FetchData from 'src/components/FetchData.vue';

 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 const dataKey = 'ClaimList';

-const claimFilterRef = ref();
+const states = ref([]);
 const columns = computed(() => [
    {
        align: 'left',
@ -81,8 +82,7 @@ const columns = computed(() => [
        align: 'left',
        label: t('claim.state'),
        format: ({ stateCode }) =>
-            claimFilterRef.value?.states.find(({ code }) => code === stateCode)
-                ?.description,
+            states.value?.find(({ code }) => code === stateCode)?.description,
        name: 'stateCode',
        chip: {
            condition: () => true,
@ -92,7 +92,7 @@ const columns = computed(() => [
            name: 'claimStateFk',
            component: 'select',
            attrs: {
-                options: claimFilterRef.value?.states,
+                options: states.value,
                optionLabel: 'description',
            },
        },
@ -125,6 +125,7 @@ const STATE_COLOR = {
 </script>

 <template>
+    <FetchData url="ClaimStates" @on-fetch="(data) => (states = data)" auto-load />
    <VnSection
        :data-key="dataKey"
        :columns="columns"
@ -135,7 +136,7 @@ const STATE_COLOR = {
        }"
    >
        <template #advanced-menu>
-            <ClaimFilter data-key="ClaimList" ref="claimFilterRef" />
+            <ClaimFilter :data-key ref="claimFilterRef" :states />
        </template>
        <template #body>
            <VnTable
--- a/src/pages/Customer/Card/CustomerFiscalData.vue
+++ b/src/pages/Customer/Card/CustomerFiscalData.vue
@ -10,6 +10,7 @@ import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnLocation from 'src/components/common/VnLocation.vue';
 import VnCheckbox from 'src/components/common/VnCheckbox.vue';
+import { getDifferences, getUpdatedValues } from 'src/filters';

 const { t } = useI18n();
 const route = useRoute();
@ -24,6 +25,12 @@ function handleLocation(data, location) {
    data.provinceFk = provinceFk;
    data.countryFk = countryFk;
 }
+function onBeforeSave(formData, originalData) {
+    return getUpdatedValues(
+        Object.keys(getDifferences(formData, originalData)),
+        formData,
+    );
+}
 </script>

 <template>
@ -37,6 +44,7 @@ function handleLocation(data, location) {
        :url-update="`Clients/${route.params.id}/updateFiscalData`"
        auto-load
        model="Customer"
+        :mapper="onBeforeSave"
    >
        <template #form="{ data, validate }">
            <VnRow>
@ -114,7 +122,7 @@ function handleLocation(data, location) {
                <VnCheckbox
                    v-model="data.isVies"
                    :label="t('globals.isVies')"
-                    :info="t('whenActivatingIt')"    
+                    :info="t('whenActivatingIt')"
                />
            </VnRow>

@ -127,7 +135,7 @@ function handleLocation(data, location) {
            </VnRow>

            <VnRow>
-                <VnCheckbox                    
+                <VnCheckbox
                    v-model="data.isEqualizated"
                    :label="t('Is equalizated')"
                    :info="t('inOrderToInvoice')"
--- a/src/pages/Customer/components/CustomerNewPayment.vue
+++ b/src/pages/Customer/components/CustomerNewPayment.vue
@ -84,7 +84,7 @@ function setPaymentType(accounting) {
    viewReceipt.value = isCash.value;
    if (accountingType.value.daysInFuture)
        initialData.payed.setDate(
-            initialData.payed.getDate() + accountingType.value.daysInFuture
+            initialData.payed.getDate() + accountingType.value.daysInFuture,
        );
    maxAmount.value = accountingType.value && accountingType.value.maxAmount;

--- a/src/pages/Entry/Card/EntryBuys.vue
+++ b/src/pages/Entry/Card/EntryBuys.vue
@ -156,10 +156,10 @@ const columns = [
    {
        align: 'center',
        labelAbbreviation: t('Sti.'),
-        label: t('Printed Stickers/Stickers'),
+        label: t('Stickers'),
        toolTip: t('Printed Stickers/Stickers'),
        name: 'stickers',
-        component: 'number',
+        component: 'input',
        create: true,
        attrs: {
            positive: false,
@ -179,7 +179,7 @@ const columns = [
        component: 'select',
        attrs: {
            url: 'packagings',
-            fields: ['id', 'volume'],
+            fields: ['id'],
            optionLabel: 'id',
        },
        create: true,
@ -192,10 +192,10 @@ const columns = [
        component: 'number',
        create: true,
        width: '35px',
+        format: (row, dashIfEmpty) => parseFloat(row['weight']).toFixed(1),
    },
    {
-        align: 'center',
-        labelAbbreviation: 'Pack',
+        labelAbbreviation: 'P',
        label: 'Packing',
        toolTip: 'Packing',
        name: 'packing',
@ -209,14 +209,13 @@ const columns = [
                row['amount'] = row['quantity'] * row['buyingValue'];
            },
        },
-        width: '35px',
+        width: '20px',
        style: (row) => {
            if (row.groupingMode === 'grouping')
                return { color: 'var(--vn-label-color)' };
        },
    },
    {
-        align: 'center',
        labelAbbreviation: 'GM',
        label: t('Grouping selector'),
        toolTip: t('Grouping selector'),
@ -229,7 +228,7 @@ const columns = [
            indeterminateValue: null,
        },
        size: 'xs',
-        width: '30px',
+        width: '25px',
        create: true,
        rightFilter: false,
        getIcon: (value) => {
@ -245,12 +244,12 @@ const columns = [
    },
    {
        align: 'center',
-        labelAbbreviation: 'Group',
+        labelAbbreviation: 'G',
        label: 'Grouping',
        toolTip: 'Grouping',
        name: 'grouping',
        component: 'number',
-        width: '35px',
+        width: '20px',
        create: true,
        style: (row) => {
            if (row.groupingMode === 'packing') return { color: 'var(--vn-label-color)' };
@ -290,6 +289,7 @@ const columns = [
            },
        },
        width: '45px',
+        format: (row) => parseFloat(row['buyingValue']).toFixed(3),
    },
    {
        align: 'center',
@ -301,6 +301,7 @@ const columns = [
            positive: false,
        },
        isEditable: false,
+        format: (row) => parseFloat(row['amount']).toFixed(2),
        style: getAmountStyle,
    },
    {
@ -312,6 +313,7 @@ const columns = [
        component: 'number',
        width: '35px',
        create: true,
+        format: (row) => parseFloat(row['price2']).toFixed(2),
    },
    {
        align: 'center',
@ -325,6 +327,7 @@ const columns = [
        },
        width: '35px',
        create: true,
+        format: (row) => parseFloat(row['price3']).toFixed(2),
    },
    {
        align: 'center',
@ -344,6 +347,7 @@ const columns = [
        style: (row) => {
            if (!row?.hasMinPrice) return { color: 'var(--vn-label-color)' };
        },
+        format: (row) => parseFloat(row['minPrice']).toFixed(2),
    },
    {
        align: 'center',
@ -518,7 +522,7 @@ onMounted(() => {
    <Teleport to="#st-data" v-if="stateStore?.isSubToolbarShown() && editableMode">
        <QBtnGroup push style="column-gap: 1px">
            <QBtnDropdown
-                icon="exposure_neg_1"
+                label="+/-"
                color="primary"
                flat
                :title="t('Invert quantity value')"
@ -533,7 +537,7 @@ onMounted(() => {
                                @click="invertQuantitySign(selectedRows, -1)"
                                data-cy="set-negative-quantity"
                            >
-                                <span style="font-size: medium">-1</span>
+                                <span style="font-size: large">-</span>
                            </QBtn>
                        </QItemSection>
                    </QItem>
@ -544,7 +548,7 @@ onMounted(() => {
                                @click="invertQuantitySign(selectedRows, 1)"
                                data-cy="set-positive-quantity"
                            >
-                                <span style="font-size: medium">1</span>
+                                <span style="font-size: large">+</span>
                            </QBtn>
                        </QItemSection>
                    </QItem>
@ -558,11 +562,11 @@ onMounted(() => {
                :disable="!selectedRows.length"
                data-cy="check-buy-amount"
            >
-                <QTooltip>{{}}</QTooltip>
                <QList>
                    <QItem>
                        <QItemSection>
                            <QBtn
+                                size="sm"
                                icon="check"
                                flat
                                @click="setIsChecked(selectedRows, true)"
@ -573,6 +577,7 @@ onMounted(() => {
                    <QItem>
                        <QItemSection>
                            <QBtn
+                                size="sm"
                                icon="close"
                                flat
                                @click="setIsChecked(selectedRows, false)"
@ -662,7 +667,7 @@ onMounted(() => {
            <FetchedTags :item="row" :columns="3" />
        </template>
        <template #column-stickers="{ row }">
-            <span class="editable-text">
+            <span :class="editableMode ? 'editable-text' : ''">
                <span style="color: var(--vn-label-color)">
                    {{ row.printedStickers }}
                </span>
@ -693,20 +698,36 @@ onMounted(() => {
        </template>
        <template #column-create-itemFk="{ data }">
            <VnSelect
-                url="Items"
+                url="Items/search"
                v-model="data.itemFk"
                :label="t('Article')"
-                :fields="['id', 'name']"
+                :fields="['id', 'name', 'size', 'producerName']"
+                :filter-options="['id', 'name', 'size', 'producerName']"
                option-label="name"
                option-value="id"
                @update:modelValue="
                    async (value) => {
-                        setBuyUltimate(value, data);
+                        await setBuyUltimate(value, data);
                    }
                "
                :required="true"
                data-cy="itemFk-create-popup"
-            />
+                sort-by="nickname DESC"
+            >
+                <template #option="scope">
+                    <QItem v-bind="scope.itemProps">
+                        <QItemSection>
+                            <QItemLabel>
+                                {{ scope.opt.name }}
+                            </QItemLabel>
+                            <QItemLabel caption>
+                                #{{ scope.opt.id }}, {{ scope.opt?.size }},
+                                {{ scope.opt?.producerName }}
+                            </QItemLabel>
+                        </QItemSection>
+                    </QItem>
+                </template>
+            </VnSelect>
        </template>
        <template #column-create-groupingMode="{ data }">
            <VnSelectEnum
@ -720,9 +741,14 @@ onMounted(() => {
            />
        </template>
        <template #previous-create-dialog="{ data }">
-            <div style="position: absolute">
+            <div
+                style="position: absolute"
+                :class="{ 'centered-container': !data.itemFk }"
+            >
                <ItemDescriptor :id="data.itemFk" v-if="data.itemFk" />
-                <SkeletonDescriptor v-if="!data.itemFk" :has-image="true" />
+                <div v-else>
+                    <span>{{ t('globals.noData') }}</span>
+                </div>
            </div>
        </template>
    </VnTable>
@ -744,6 +770,7 @@ es:
    Com.: Ref.
    Comment: Referencia
    Minimum price: Precio mínimo
+    Stickers: Etiquetas
    Printed Stickers/Stickers: Etiquetas impresas/Etiquetas
    Cost: Cost.
    Buying value: Coste
@ -761,7 +788,12 @@ es:
    Check buy amount: Marcar como correcta la cantidad de compra
 </i18n>
 <style lang="scss" scoped>
-.test {
+.centered-container {
+    display: flex;
    justify-content: center;
+    align-items: center;
+    position: absolute;
+    width: 40%;
+    height: 100%;
 }
 </style>
--- a/src/pages/Entry/EntryList.vue
+++ b/src/pages/Entry/EntryList.vue
@ -182,14 +182,6 @@ const columns = computed(() => [
        name: 'entryTypeCode',
        cardVisible: true,
    },
-    {
-        name: 'dated',
-        label: t('entry.list.tableVisibleColumns.dated'),
-        component: 'date',
-        cardVisible: false,
-        visible: false,
-        create: true,
-    },
    {
        name: 'companyFk',
        label: t('entry.list.tableVisibleColumns.companyFk'),
@ -220,7 +212,8 @@ function getBadgeAttrs(row) {

    let timeDiff = today - timeTicket;

-    if (timeDiff > 0) return { color: 'warning', 'text-color': 'black' };
+    if (timeDiff > 0) return { color: 'info', 'text-color': 'black' };
+    if (timeDiff < 0) return { color: 'warning', 'text-color': 'black' };
    switch (row.entryTypeCode) {
        case 'regularization':
        case 'life':
@ -245,7 +238,6 @@ function getBadgeAttrs(row) {
        default:
            break;
    }
-    if (timeDiff < 0) return { color: 'info', 'text-color': 'black' };
    return { color: 'transparent' };
 }

--- a/src/pages/Item/Card/ItemShelving.vue
+++ b/src/pages/Item/Card/ItemShelving.vue
@ -110,10 +110,16 @@ const columns = computed(() => [
        attrs: { inWhere: true },
        align: 'left',
    },
+    {
+        label: t('globals.visible'),
+        name: 'stock',
+        attrs: { inWhere: true },
+        align: 'left',
+    },
 ]);

 const totalLabels = computed(() =>
-    rows.value.reduce((acc, row) => acc + row.stock / row.packing, 0).toFixed(2)
+    rows.value.reduce((acc, row) => acc + row.stock / row.packing, 0).toFixed(2),
 );

 const removeLines = async () => {
@ -157,7 +163,7 @@ watchEffect(selectedRows);
                    openConfirmationModal(
                        t('shelvings.removeConfirmTitle'),
                        t('shelvings.removeConfirmSubtitle'),
-                        removeLines
+                        removeLines,
                    )
                "
            >
--- a/src/pages/Monitor/Ticket/MonitorTickets.vue
+++ b/src/pages/Monitor/Ticket/MonitorTickets.vue
@ -61,6 +61,7 @@ function exprBuilder(param, value) {
        case 'nickname':
            return { [`t.nickname`]: { like: `%${value}%` } };
        case 'zoneFk':
+            return { 't.zoneFk': value };
        case 'department':
            return { 'd.name': value };
        case 'totalWithVat':
--- a/src/pages/Order/Card/OrderCatalogItemDialog.vue
+++ b/src/pages/Order/Card/OrderCatalogItemDialog.vue
@ -39,7 +39,7 @@ const addToOrder = async () => {
    });

    const { data: orderTotal } = await axios.get(
-        `Orders/${Number(route.params.id)}/getTotal`
+        `Orders/${Number(route.params.id)}/getTotal`,
    );

    state.set('orderTotal', orderTotal);
@ -56,7 +56,7 @@ const canAddToOrder = () => {
    if (canAddToOrder) {
        const excedQuantity = prices.value.reduce(
            (acc, { quantity }) => acc + quantity,
-            0
+            0,
        );
        if (excedQuantity > props.item.available) {
            canAddToOrder = false;
--- a/src/pages/Route/Card/RouteDescriptor.vue
+++ b/src/pages/Route/Card/RouteDescriptor.vue
@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'components/ui/VnLv.vue';
@ -16,10 +16,30 @@ const $props = defineProps({
 });

 const route = useRoute();
-
+const { t } = useI18n();
+const zone = ref();
+const zoneId = ref();
 const entityId = computed(() => {
    return $props.id || route.params.id;
 });
+const getZone = async () => {
+    const filter = {
+        where: { routeFk: $props.id ? $props.id : route.params.id },
+    };
+    const { data } = await axios.get('Tickets/findOne', {
+        params: {
+            filter: JSON.stringify(filter),
+        },
+    });
+    zoneId.value = data.zoneFk;
+    const { data: zoneData } = await axios.get(`Zones/${zoneId.value}`);
+    zone.value = zoneData.name;
+};
+const data = ref(useCardDescription());
+const setData = (entity) => (data.value = useCardDescription(entity.code, entity.id));
+onMounted(async () => {
+    getZone();
+});
 </script>
 <template>
    <CardDescriptor
@ -30,9 +50,9 @@ const entityId = computed(() => {
        width="lg-width"
    >
        <template #body="{ entity }">
-            <VnLv :label="$t('Date')" :value="toDate(entity?.created)" />
-            <VnLv :label="$t('Agency')" :value="entity?.agencyMode?.name" />
-            <VnLv :label="$t('Zone')" :value="entity?.zone?.name" />
+            <VnLv :label="t('Date')" :value="toDate(entity?.dated)" />
+            <VnLv :label="t('Agency')" :value="entity?.agencyMode?.name" />
+            <VnLv :label="t('Zone')" :value="zone" />
            <VnLv
                :label="$t('Volume')"
                :value="`${dashIfEmpty(entity?.m3)} / ${dashIfEmpty(
--- a/src/pages/Route/Card/RouteForm.vue
+++ b/src/pages/Route/Card/RouteForm.vue
@ -29,6 +29,51 @@ const defaultInitialData = {
 };
 const maxDistance = ref();

+const routeFilter = {
+    fields: [
+        'id',
+        'workerFk',
+        'agencyModeFk',
+        'dated',
+        'm3',
+        'warehouseFk',
+        'description',
+        'vehicleFk',
+        'kmStart',
+        'kmEnd',
+        'started',
+        'finished',
+        'cost',
+        'isOk',
+    ],
+    include: [
+        { relation: 'agencyMode', scope: { fields: ['id', 'name'] } },
+        {
+            relation: 'vehicle',
+            scope: { fields: ['id', 'm3'] },
+        },
+        {
+            relation: 'ticket',
+            scope: {
+                fields: ['id', 'name', 'zoneFk'],
+                include: { relation: 'zone', scope: { fields: ['id', 'name'] } },
+            },
+        },
+        {
+            relation: 'worker',
+            scope: {
+                fields: ['id'],
+                include: {
+                    relation: 'user',
+                    scope: {
+                        fields: ['id'],
+                        include: { relation: 'emailUser', scope: { fields: ['email'] } },
+                    },
+                },
+            },
+        },
+    ],
+};
 const onSave = (data, response) => {
    if (isNew) {
        axios.post(`Routes/${response?.id}/updateWorkCenter`);
--- a/src/pages/Shelving/Parking/Card/ParkingBasicData.vue
+++ b/src/pages/Shelving/Parking/Card/ParkingBasicData.vue
@ -8,6 +8,11 @@ import VnSelect from 'src/components/common/VnSelect.vue';

 const sectors = ref([]);
 const sectorFilter = { fields: ['id', 'description'] };
+
+const filter = {
+    fields: ['sectorFk', 'code', 'pickingOrder'],
+    include: [{ relation: 'sector', scope: sectorFilter }],
+};
 </script>
 <template>
    <FetchData
@ -26,10 +31,6 @@ const sectorFilter = { fields: ['id', 'description'] };
                    :label="$t('parking.pickingOrder')"
                />
            </VnRow>
-            <VnRow>
-                <VnInput v-model="data.row" :label="$t('parking.row')" />
-                <VnInput v-model="data.column" :label="$t('parking.column')" />
-            </VnRow>
            <VnRow>
                <VnSelect
                    v-model="data.sectorFk"
--- a/src/pages/Shelving/Parking/locale/en.yml
+++ b/src/pages/Shelving/Parking/locale/en.yml
@ -1,7 +1,5 @@
 parking:
    pickingOrder: Picking order
    sector: Sector
-    row: Row
-    column: Column
    search: Search parking
    searchInfo: You can search by parking code
--- a/src/pages/Shelving/Parking/locale/es.yml
+++ b/src/pages/Shelving/Parking/locale/es.yml
@ -1,7 +1,5 @@
 parking:
    pickingOrder: Orden de recogida
-    row: Fila
    sector: Sector
-    column: Columna
    search: Buscar parking
    searchInfo: Puedes buscar por código de parking
--- a/src/pages/Ticket/Negative/TicketLackList.vue
+++ b/src/pages/Ticket/Negative/TicketLackList.vue
@ -34,7 +34,7 @@ const redirectToCreateView = ({ itemFk }) => {
 const columns = computed(() => [
    {
        name: 'date',
-        align: 'left',
+        align: 'center',
        label: t('negative.date'),
        format: ({ timed }) => toDate(timed),
        sortable: true,
@ -47,7 +47,7 @@ const columns = computed(() => [
    {
        columnClass: 'shrink',
        name: 'timed',
-        align: 'left',
+        align: 'center',
        label: t('negative.timed'),
        format: ({ timed }) => toHour(timed),
        sortable: true,
@ -58,7 +58,7 @@ const columns = computed(() => [
    },
    {
        name: 'itemFk',
-        align: 'left',
+        align: 'center',
        label: t('negative.id'),
        format: ({ itemFk }) => itemFk,
        sortable: true,
@ -70,7 +70,7 @@ const columns = computed(() => [
    },
    {
        name: 'longName',
-        align: 'left',
+        align: 'center',
        label: t('negative.longName'),
        field: ({ longName }) => longName,

@ -81,7 +81,7 @@ const columns = computed(() => [
    },
    {
        name: 'producer',
-        align: 'left',
+        align: 'center',
        label: t('negative.supplier'),
        field: ({ producer }) => dashIfEmpty(producer),
        sortable: true,
@ -89,7 +89,7 @@ const columns = computed(() => [
    },
    {
        name: 'inkFk',
-        align: 'left',
+        align: 'center',
        label: t('negative.colour'),
        field: ({ inkFk }) => inkFk,
        sortable: true,
@ -97,7 +97,7 @@ const columns = computed(() => [
    },
    {
        name: 'size',
-        align: 'left',
+        align: 'center',
        label: t('negative.size'),
        field: ({ size }) => size,
        sortable: true,
@ -110,7 +110,7 @@ const columns = computed(() => [
    },
    {
        name: 'category',
-        align: 'left',
+        align: 'center',
        label: t('negative.origen'),
        field: ({ category }) => dashIfEmpty(category),
        sortable: true,
@ -118,7 +118,7 @@ const columns = computed(() => [
    },
    {
        name: 'lack',
-        align: 'left',
+        align: 'center',
        label: t('negative.lack'),
        field: ({ lack }) => lack,
        columnFilter: {
@ -127,12 +127,12 @@ const columns = computed(() => [
            columnClass: 'shrink',
        },
        sortable: true,
-        headerStyle: 'padding-left: 33px',
+        headerStyle: 'padding-center: 33px',
        cardVisible: true,
    },
    {
        name: 'tableActions',
-        align: 'left',
+        align: 'center',
        actions: [
            {
                title: t('Open details'),
--- a/src/pages/Ticket/Negative/TicketLackTable.vue
+++ b/src/pages/Ticket/Negative/TicketLackTable.vue
@ -52,27 +52,26 @@ const route = useRoute();
 const columns = computed(() => [
    {
        name: 'status',
-        align: 'left',
+        align: 'center',
        sortable: false,
-        columnClass: 'expand',
+        columnClass: 'shrink',
        columnFilter: false,
    },
    {
        name: 'ticketFk',
        label: t('negative.detail.ticketFk'),
-        align: 'left',
+        align: 'center',
        sortable: true,
        columnFilter: {
            component: 'input',
            type: 'number',
        },
-        columnClass: 'shrink',
    },
    {
        name: 'shipped',
        label: t('negative.detail.shipped'),
        field: 'shipped',
-        align: 'left',
+        align: 'center',
        format: ({ shipped }) => toDate(shipped),
        sortable: true,
        columnFilter: {
@ -84,11 +83,9 @@ const columns = computed(() => [
        name: 'minTimed',
        label: t('negative.detail.theoreticalhour'),
        field: 'minTimed',
-        align: 'left',
-        format: ({ minTimed }) => toHour(minTimed),
+        align: 'center',
        sortable: true,
        component: 'time',
-        columnClass: 'shrink',
        columnFilter: {},
    },
    {
@ -104,29 +101,27 @@ const columns = computed(() => [
                optionValue: 'code',
            },
        },
-        columnClass: 'expand',
-        align: 'left',
+        align: 'center',
        sortable: true,
    },
    {
        name: 'zoneName',
        label: t('negative.detail.zoneName'),
        field: 'zoneName',
-        align: 'left',
+        align: 'center',
        sortable: true,
    },
    {
        name: 'nickname',
        label: t('negative.detail.nickname'),
        field: 'nickname',
-        align: 'left',
+        align: 'center',
        sortable: true,
    },
    {
        name: 'quantity',
        label: t('negative.detail.quantity'),
        field: 'quantity',
-        align: 'left',
        sortable: true,
        component: 'input',
        type: 'number',
@ -167,7 +162,6 @@ const saveChange = async (field, { row }) => {
    }
 };

-const hasToIgnore = (row) => row.hasToIgnore === 1;
 function onBuysFetched(data) {
    Object.assign(item.value, data[0]);
 }
@ -244,7 +238,7 @@ function onBuysFetched(data) {
        </template>

        <template #column-status="{ row }">
-            <QTd style="width: 150px">
+            <QTd style="min-width: 150px">
                <div class="icon-container">
                    <QIcon
                        v-if="row.isBasket"
--- a/src/pages/Ticket/TicketFuture.vue
+++ b/src/pages/Ticket/TicketFuture.vue
@ -1,19 +1,16 @@
 <script setup>
-import { onMounted, ref, computed, reactive } from 'vue';
+import { ref, computed, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';

-import FetchData from 'components/FetchData.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
 import TicketFutureFilter from './TicketFutureFilter.vue';

 import { dashIfEmpty, toCurrency } from 'src/filters';
 import { useVnConfirm } from 'composables/useVnConfirm';
-import { useArrayData } from 'composables/useArrayData';
 import { getDateQBadgeColor } from 'src/composables/getDateQBadgeColor.js';
 import useNotify from 'src/composables/useNotify.js';
 import { useState } from 'src/composables/useState';
@ -26,214 +23,126 @@ const { openConfirmationModal } = useVnConfirm();
 const { notify } = useNotify();
 const user = state.getUser();

-const itemPackingTypesOptions = ref([]);
 const selectedTickets = ref([]);
-
-const exprBuilder = (param, value) => {
-    switch (param) {
-        case 'id':
-            return { id: value };
-        case 'futureId':
-            return { futureId: value };
-        case 'liters':
-            return { liters: value };
-        case 'lines':
-            return { lines: value };
-        case 'iptColFilter':
-            return { ipt: { like: `%${value}%` } };
-        case 'futureIptColFilter':
-            return { futureIpt: { like: `%${value}%` } };
-        case 'totalWithVat':
-            return { totalWithVat: value };
-    }
-};
-
+const vnTableRef = ref({});
+const originElRef = ref(null);
+const destinationElRef = ref(null);
 const userParams = reactive({
    futureScopeDays: Date.vnNew().toISOString(),
    originScopeDays: Date.vnNew().toISOString(),
    warehouseFk: user.value.warehouseFk,
 });

-const arrayData = useArrayData('FutureTickets', {
-    url: 'Tickets/getTicketsFuture',
-    userParams: userParams,
-    exprBuilder: exprBuilder,
-});
-const { store } = arrayData;
-
-const params = reactive({
-    futureScopeDays: Date.vnNew(),
-    originScopeDays: Date.vnNew(),
-    warehouseFk: user.value.warehouseFk,
-});
-
-const applyColumnFilter = async (col) => {
-    const paramKey = col.columnFilter?.filterParamKey || col.field;
-    params[paramKey] = col.columnFilter.filterValue;
-    await arrayData.addFilter({ params });
-};
-
-const getInputEvents = (col) => {
-    return col.columnFilter.type === 'select'
-        ? { 'update:modelValue': () => applyColumnFilter(col) }
-        : {
-              'keyup.enter': () => applyColumnFilter(col),
-          };
-};
-
-const tickets = computed(() => store.data);
-
 const ticketColumns = computed(() => [
    {
-        label: t('futureTickets.problems'),
+        label: '',
        name: 'problems',
+        headerClass: 'horizontal-separator',
        align: 'left',
-        columnFilter: null,
+        columnFilter: false,
    },
    {
        label: t('advanceTickets.ticketId'),
-        name: 'ticketId',
+        name: 'id',
        align: 'center',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            filterParamKey: 'id',
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
+        headerClass: 'horizontal-separator',
    },
    {
        label: t('futureTickets.shipped'),
        name: 'shipped',
        align: 'left',
-        sortable: true,
-        columnFilter: null,
+        columnFilter: false,
+        headerClass: 'horizontal-separator',
    },
    {
+        align: 'center',
+        class: 'shrink',
        label: t('advanceTickets.ipt'),
        name: 'ipt',
-        field: 'ipt',
-        align: 'left',
-        sortable: true,
        columnFilter: {
-            component: VnSelect,
-            filterParamKey: 'iptColFilter',
-            type: 'select',
-            filterValue: null,
-            event: getInputEvents,
+            component: 'select',
            attrs: {
-                options: itemPackingTypesOptions.value,
-                'option-value': 'code',
-                'option-label': 'description',
-                dense: true,
+                url: 'itemPackingTypes',
+                fields: ['code', 'description'],
+                where: { isActive: true },
+                optionValue: 'code',
+                optionLabel: 'description',
+                inWhere: false,
            },
        },
-        format: (val) => dashIfEmpty(val),
+        format: (row, dashIfEmpty) => dashIfEmpty(row.ipt),
+        headerClass: 'horizontal-separator',
    },
    {
        label: t('ticketList.state'),
        name: 'state',
        align: 'left',
-        sortable: true,
-        columnFilter: null,
+        columnFilter: false,
+        headerClass: 'horizontal-separator',
    },
    {
        label: t('advanceTickets.liters'),
        name: 'liters',
-        field: 'liters',
        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
+        headerClass: 'horizontal-separator',
    },
    {
        label: t('advanceTickets.import'),
-        field: 'import',
        name: 'import',
        align: 'left',
-        sortable: true,
+        headerClass: 'horizontal-separator',
+        columnFilter: false,
+        format: (row) => toCurrency(row.totalWithVat),
    },
    {
        label: t('futureTickets.availableLines'),
        name: 'lines',
        field: 'lines',
        align: 'center',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
-        format: (val) => dashIfEmpty(val),
+        headerClass: 'horizontal-separator',
+        format: (row, dashIfEmpty) => dashIfEmpty(row.lines),
    },
    {
        label: t('advanceTickets.futureId'),
        name: 'futureId',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            filterParamKey: 'futureId',
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
+        align: 'center',
+        headerClass: 'horizontal-separator vertical-separator ',
+        columnClass: 'vertical-separator',
    },
    {
        label: t('futureTickets.futureShipped'),
        name: 'futureShipped',
        align: 'left',
-        sortable: true,
-        columnFilter: null,
-        format: (val) => dashIfEmpty(val),
+        headerClass: 'horizontal-separator',
+        columnFilter: false,
+        format: (row) => toDateTimeFormat(row.futureShipped),
    },
-
    {
+        align: 'center',
        label: t('advanceTickets.futureIpt'),
+        class: 'shrink',
        name: 'futureIpt',
-        field: 'futureIpt',
-        align: 'left',
-        sortable: true,
        columnFilter: {
-            component: VnSelect,
-            filterParamKey: 'futureIptColFilter',
-            type: 'select',
-            filterValue: null,
-            event: getInputEvents,
+            component: 'select',
            attrs: {
-                options: itemPackingTypesOptions.value,
-                'option-value': 'code',
-                'option-label': 'description',
-                dense: true,
+                url: 'itemPackingTypes',
+                fields: ['code', 'description'],
+                where: { isActive: true },
+                optionValue: 'code',
+                optionLabel: 'description',
            },
        },
-        format: (val) => dashIfEmpty(val),
+        headerClass: 'horizontal-separator',
+        format: (row, dashIfEmpty) => dashIfEmpty(row.futureIpt),
    },
    {
        label: t('advanceTickets.futureState'),
        name: 'futureState',
        align: 'right',
-        sortable: true,
-        columnFilter: null,
-        format: (val) => dashIfEmpty(val),
+        headerClass: 'horizontal-separator',
+        class: 'expand',
+        columnFilter: false,
+        format: (row, dashIfEmpty) => dashIfEmpty(row.futureState),
    },
 ]);

@ -258,26 +167,51 @@ const moveTicketsFuture = async () => {
    await axios.post('Tickets/merge', params);
    notify(t('advanceTickets.moveTicketSuccess'), 'positive');
    selectedTickets.value = [];
-    arrayData.fetch({ append: false });
+    vnTableRef.value.reload();
 };
-onMounted(async () => {
-    await arrayData.fetch({ append: false });
-});
+
+watch(
+    () => vnTableRef.value.tableRef?.$el,
+    ($el) => {
+        if (!$el) return;
+        const head = $el.querySelector('thead');
+        const firstRow = $el.querySelector('thead > tr');
+
+        const newRow = document.createElement('tr');
+        destinationElRef.value = document.createElement('th');
+        originElRef.value = document.createElement('th');
+
+        newRow.classList.add('bg-header');
+        destinationElRef.value.classList.add('text-uppercase', 'color-vn-label');
+        originElRef.value.classList.add('text-uppercase', 'color-vn-label');
+
+        destinationElRef.value.setAttribute('colspan', '7');
+        originElRef.value.setAttribute('colspan', '9');
+
+        originElRef.value.textContent = `${t('advanceTickets.origin')}`;
+        destinationElRef.value.textContent = `${t('advanceTickets.destination')}`;
+
+        newRow.append(destinationElRef.value, originElRef.value);
+        head.insertBefore(newRow, firstRow);
+    },
+    { once: true, inmmediate: true },
+);
+
+watch(
+    () => vnTableRef.value.params,
+    () => {
+        if (originElRef.value && destinationElRef.value) {
+            destinationElRef.value.textContent = `${t('advanceTickets.origin')}`;
+            originElRef.value.textContent = `${t('advanceTickets.destination')}`;
+        }
+    },
+    { deep: true },
+);
 </script>

 <template>
-    <FetchData
-        url="itemPackingTypes"
-        :filter="{
-            fields: ['code', 'description'],
-            order: 'description ASC',
-            where: { isActive: true },
-        }"
-        auto-load
-        @on-fetch="(data) => (itemPackingTypesOptions = data)"
-    />
    <VnSearchbar
-        data-key="FutureTickets"
+        data-key="futureTicket"
        :label="t('Search ticket')"
        :info="t('futureTickets.searchInfo')"
    />
@ -293,7 +227,7 @@ onMounted(async () => {
                        t(`futureTickets.moveTicketDialogSubtitle`, {
                            selectedTickets: selectedTickets.length,
                        }),
-                        moveTicketsFuture
+                        moveTicketsFuture,
                    )
                "
            >
@ -305,77 +239,29 @@ onMounted(async () => {
    </VnSubToolbar>
    <RightMenu>
        <template #right-panel>
-            <TicketFutureFilter data-key="FutureTickets" />
+            <TicketFutureFilter data-key="futureTickets" />
        </template>
    </RightMenu>
    <QPage class="column items-center q-pa-md">
-        <QTable
-            :rows="tickets"
+        <VnTable
+            data-key="futureTickets"
+            ref="vnTableRef"
+            url="Tickets/getTicketsFuture"
+            search-url="futureTickets"
+            :user-params="userParams"
+            :limit="0"
            :columns="ticketColumns"
-            row-key="id"
-            selection="multiple"
+            :table="{
+                'row-key': '$index',
+                selection: 'multiple',
+            }"
            v-model:selected="selectedTickets"
-            :pagination="{ rowsPerPage: 0 }"
-            :no-data-label="t('globals.noResults')"
-            style="max-width: 99%"
+            :right-search="false"
+            auto-load
+            :disable-option="{ card: true }"
        >
-            <template #header="props">
-                <QTr>
-                    <QTh class="horizontal-separator" />
-                    <QTh
-                        class="horizontal-separator text-uppercase color-vn-label"
-                        colspan="8"
-                        translate
-                    >
-                        {{ t('advanceTickets.origin') }}
-                    </QTh>
-                    <QTh
-                        class="horizontal-separator text-uppercase color-vn-label"
-                        colspan="4"
-                        translate
-                    >
-                        {{ t('advanceTickets.destination') }}
-                    </QTh>
-                </QTr>
-                <QTr>
-                    <QTh>
-                        <QCheckbox v-model="props.selected" />
-                    </QTh>
-                    <QTh
-                        v-for="(col, index) in ticketColumns"
-                        :key="index"
-                        :class="{ 'vertical-separator': col.name === 'futureId' }"
-                    >
-                        {{ col.label }}
-                    </QTh>
-                </QTr>
-            </template>
-            <template #top-row="{ cols }">
-                <QTr>
-                    <QTd />
-                    <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 #header-cell-availableLines="{ col }">
-                <QTh class="vertical-separator">
-                    {{ col.label }}
-                </QTh>
-            </template>
-            <template #body-cell-problems="{ row }">
-                <QTd class="q-gutter-x-xs">
+            <template #column-problems="{ row }">
+                <span class="q-gutter-x-xs">
                    <QIcon
                        v-if="row.futureAgencyFk !== row.agencyFk && row.agencyFk"
                        color="primary"
@ -465,99 +351,87 @@ onMounted(async () => {
                            {{ t('futureTickets.rounding') }}
                        </QTooltip>
                    </QIcon>
-                </QTd>
+                </span>
            </template>
-            <template #body-cell-ticketId="{ row }">
-                <QTd>
-                    <QBtn flat class="link">
-                        {{ row.id }}
-                        <TicketDescriptorProxy :id="row.id" />
-                    </QBtn>
-                </QTd>
+            <template #column-id="{ row }">
+                <QBtn flat class="link" @click.stop dense>
+                    {{ row.id }}
+                    <TicketDescriptorProxy :id="row.id" />
+                </QBtn>
            </template>
-            <template #body-cell-shipped="{ row }">
-                <QTd class="shipped">
-                    <QBadge
-                        text-color="black"
-                        :color="getDateQBadgeColor(row.shipped)"
-                        class="q-ma-none"
-                    >
-                        {{ toDateTimeFormat(row.shipped) }}
-                    </QBadge>
-                </QTd>
+            <template #column-shipped="{ row }">
+                <QBadge
+                    text-color="black"
+                    :color="getDateQBadgeColor(row.shipped)"
+                    class="q-ma-none"
+                >
+                    {{ toDateTimeFormat(row.shipped) }}
+                </QBadge>
            </template>
-            <template #body-cell-state="{ row }">
-                <QTd>
-                    <QBadge
-                        text-color="black"
-                        :color="row.classColor"
-                        class="q-ma-none"
-                        dense
-                    >
-                        {{ row.state }}
-                    </QBadge>
-                </QTd>
+            <template #column-state="{ row }">
+                <QBadge
+                    v-if="row.state"
+                    text-color="black"
+                    :color="row.classColor"
+                    class="q-ma-none"
+                    dense
+                >
+                    {{ row.state }}
+                </QBadge>
+                <span v-else> {{ dashIfEmpty(row.state) }}</span>
            </template>
-            <template #body-cell-import="{ row }">
-                <QTd>
-                    <QBadge
-                        :text-color="
-                            totalPriceColor(row.totalWithVat) === 'warning'
-                                ? 'black'
-                                : 'white'
-                        "
-                        :color="totalPriceColor(row.totalWithVat)"
-                        class="q-ma-none"
-                        dense
-                    >
-                        {{ toCurrency(row.totalWithVat || 0) }}
-                    </QBadge>
-                </QTd>
+            <template #column-import="{ row }">
+                <QBadge
+                    :text-color="
+                        totalPriceColor(row.totalWithVat) === 'warning'
+                            ? 'black'
+                            : 'white'
+                    "
+                    :color="totalPriceColor(row.totalWithVat)"
+                    class="q-ma-none"
+                    dense
+                >
+                    {{ toCurrency(row.totalWithVat || 0) }}
+                </QBadge>
            </template>
-            <template #body-cell-futureId="{ row }">
-                <QTd class="vertical-separator">
-                    <QBtn flat class="link" dense>
-                        {{ row.futureId }}
-                        <TicketDescriptorProxy :id="row.futureId" />
-                    </QBtn>
-                </QTd>
+            <template #column-futureId="{ row }">
+                <QBtn flat class="link" @click.stop dense>
+                    {{ row.futureId }}
+                    <TicketDescriptorProxy :id="row.futureId" />
+                </QBtn>
            </template>
-            <template #body-cell-futureShipped="{ row }">
-                <QTd class="shipped">
-                    <QBadge
-                        text-color="black"
-                        :color="getDateQBadgeColor(row.futureShipped)"
-                        class="q-ma-none"
-                    >
-                        {{ toDateTimeFormat(row.futureShipped) }}
-                    </QBadge>
-                </QTd>
+            <template #column-futureShipped="{ row }">
+                <QBadge
+                    text-color="black"
+                    :color="getDateQBadgeColor(row.futureShipped)"
+                    class="q-ma-none"
+                >
+                    {{ toDateTimeFormat(row.futureShipped) }}
+                </QBadge>
            </template>
-            <template #body-cell-futureState="{ row }">
-                <QTd>
-                    <QBadge
-                        text-color="black"
-                        :color="row.futureClassColor"
-                        class="q-ma-none"
-                        dense
-                    >
-                        {{ row.futureState }}
-                    </QBadge>
-                </QTd>
+            <template #column-futureState="{ row }">
+                <QBadge
+                    text-color="black"
+                    :color="row.futureClassColor"
+                    class="q-mr-xs"
+                    dense
+                >
+                    {{ row.futureState }}
+                </QBadge>
            </template>
-        </QTable>
+        </VnTable>
    </QPage>
 </template>

 <style scoped lang="scss">
-.shipped {
-    min-width: 132px;
-}
-.vertical-separator {
+:deep(.vertical-separator) {
    border-left: 4px solid white !important;
 }

-.horizontal-separator {
+:deep(.horizontal-separator) {
+    border-top: 4px solid white !important;
+}
+:deep(.horizontal-bottom-separator) {
    border-bottom: 4px solid white !important;
 }
 </style>
--- a/src/pages/Ticket/TicketFutureFilter.vue
+++ b/src/pages/Ticket/TicketFutureFilter.vue
@ -12,7 +12,7 @@ import axios from 'axios';
 import { onMounted } from 'vue';

 const { t } = useI18n();
-const props = defineProps({
+defineProps({
    dataKey: {
        type: String,
        required: true,
@ -58,7 +58,7 @@ onMounted(async () => {
        auto-load
    />
    <VnFilterPanel
-        :data-key="props.dataKey"
+        :data-key
        :un-removable-params="['warehouseFk', 'originScopeDays ', 'futureScopeDays']"
    >
        <template #tags="{ tag, formatFn }">
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@ -232,7 +232,7 @@ const columns = computed(() => [

 function resetAgenciesSelector(formData) {
    agenciesOptions.value = [];
-    if(formData) formData.agencyModeId = null;
+    if (formData) formData.agencyModeId = null;
 }

 function redirectToLines(id) {
@ -240,7 +240,7 @@ function redirectToLines(id) {
    window.open(url, '_blank');
 }

-const onClientSelected = async (formData) => {    
+const onClientSelected = async (formData) => {
    resetAgenciesSelector(formData);
    await fetchClient(formData);
    await fetchAddresses(formData);
@ -248,14 +248,12 @@ const onClientSelected = async (formData) => {

 const fetchAvailableAgencies = async (formData) => {
    resetAgenciesSelector(formData);
-    const response= await getAgencies(formData, selectedClient.value);
+    const response = await getAgencies(formData, selectedClient.value);
    if (!response) return;
-    
-    const { options, agency } =  response
-    if(options)
-        agenciesOptions.value = options;
-    if(agency)
-        formData.agencyModeId = agency;
+
+    const { options, agency } = response;
+    if (options) agenciesOptions.value = options;
+    if (agency) formData.agencyModeId = agency;
 };

 const fetchClient = async (formData) => {
@ -330,7 +328,7 @@ function openBalanceDialog(ticket) {
    const description = ref([]);
    const firstTicketClientId = checkedTickets[0].clientFk;
    const isSameClient = checkedTickets.every(
-        (ticket) => ticket.clientFk === firstTicketClientId
+        (ticket) => ticket.clientFk === firstTicketClientId,
    );

    if (!isSameClient) {
@ -369,7 +367,7 @@ async function onSubmit() {
            description: dialogData.value.value.description,
            clientFk: dialogData.value.value.clientFk,
            email: email[0].email,
-        }
+        },
    );

    if (data) notify('globals.dataSaved', 'positive');
@ -388,32 +386,32 @@ function setReference(data) {
    switch (data) {
        case 1:
            newDescription = `${t(
-                'ticketList.creditCard'
+                'ticketList.creditCard',
            )}, ${dialogData.value.value.description.replace(
                /^(Credit Card, |Cash, |Transfers, )/,
-                ''
+                '',
            )}`;
            break;
        case 2:
            newDescription = `${t(
-                'ticketList.cash'
+                'ticketList.cash',
            )}, ${dialogData.value.value.description.replace(
                /^(Credit Card, |Cash, |Transfers, )/,
-                ''
+                '',
            )}`;
            break;
        case 3:
            newDescription = `${newDescription.replace(
                /^(Credit Card, |Cash, |Transfers, )/,
-                ''
+                '',
            )}`;
            break;
        case 4:
            newDescription = `${t(
-                'ticketList.transfers'
+                'ticketList.transfers',
            )}, ${dialogData.value.value.description.replace(
                /^(Credit Card, |Cash, |Transfers, )/,
-                ''
+                '',
            )}`;
            break;
        case 3317:
--- a/src/pages/Worker/Department/Card/DepartmentSummary.vue
+++ b/src/pages/Worker/Department/Card/DepartmentSummary.vue
@ -31,20 +31,18 @@ onMounted(async () => {
        ref="summary"
        :url="`Departments/${entityId}`"
        class="full-width"
-        style="max-width: 900px"
-        module-name="Department"
    >
        <template #header="{ entity }">
            <div>{{ entity.name }}</div>
        </template>
        <template #body="{ entity: department }">
-            <QCard class="column">
+            <QCard class="vn-one">
                <VnTitle
                    :url="`#/worker/department/${entityId}/basic-data`"
                    :text="t('Basic data')"
                />
                <div class="full-width row wrap justify-between content-between">
-                    <div class="column" style="min-width: 50%">
+                    <div class="column">
                        <VnLv :label="t('globals.name')" :value="department.name" dash />
                        <VnLv :label="t('globals.code')" :value="department.code" dash />
                        <VnLv
--- a/src/pages/Zone/Card/ZoneBasicData.vue
+++ b/src/pages/Zone/Card/ZoneBasicData.vue
@ -35,7 +35,7 @@ const filterWhere = computed(() => ({
        auto-load
        @on-fetch="(data) => (validAddresses = data)"
    />
-    <FormModel :url="`Zones/${route.params.id}`" auto-load model="zone">
+    <FormModel :url="`Zones/${$route.params.id}`" auto-load data-key="Zone">
        <template #form="{ data, validate }">
            <VnRow>
                <VnInput
--- a/test/cypress/integration/entry/entryList.spec.js
+++ b/test/cypress/integration/entry/entryList.spec.js
@ -124,12 +124,12 @@ describe('Entry', () => {

        clickAndType('stickers', '1');
        checkText('quantity', '11');
-        checkText('amount', '550');
+        checkText('amount', '550.00');
        clickAndType('packing', '2');
        checkText('packing', '12close');
-        checkText('weight', '12');
+        checkText('weight', '12.0');
        checkText('quantity', '132');
-        checkText('amount', '6600');
+        checkText('amount', '6600.00');
        checkColor('packing', COLORS.enabled);

        selectCell('groupingMode').click().click().click();
@ -137,7 +137,7 @@ describe('Entry', () => {
        checkColor('grouping', COLORS.enabled);

        selectCell('buyingValue').click().clear().type('{backspace}{backspace}1');
-        checkText('amount', '132');
+        checkText('amount', '132.00');
        checkColor('minPrice', COLORS.disable);

        selectCell('hasMinPrice').click().click();
--- a/test/cypress/integration/invoiceIn/invoiceInBasicData.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInBasicData.spec.js
@ -49,7 +49,7 @@ describe('InvoiceInBasicData', () => {
            'test/cypress/fixtures/image.jpg',
            {
                force: true,
-            }
+            },
        );
        cy.get('[data-cy="FormModelPopup_save"]').click();
        cy.checkNotification('Data saved');
--- a/test/cypress/integration/route/routeList.spec.js
+++ b/test/cypress/integration/route/routeList.spec.js
@ -4,9 +4,6 @@ describe('Route', () => {
        cy.login('developer');
        cy.visit(`/#/route/extended-list`);
    });
-    const getVnSelect =
-        '> :nth-child(1) > .column > .q-field > .q-field__inner > .q-field__control > .q-field__control-container';
-    const getRowColumn = (row, column) => `:nth-child(${row}) > :nth-child(${column})`;

    it('Route list create route', () => {
        cy.addBtnClick();
@ -16,18 +13,25 @@ describe('Route', () => {
    });

    it('Route list search and edit', () => {
-        cy.get('#searchbar input').type('{enter}'); /* 
-        cy.get('td[data-col-field="description"]').click(); */
-        cy.get('input[name="description"]').type('routeTestOne{enter}');
-        /*  cy.get('.q-table tr')
+        cy.get('#searchbar input').type('{enter}');
+        cy.get('[data-col-field="description"][data-row-index="0"]')
+            .click()
+            .type('routeTestOne{enter}');
+        cy.get('.q-table tr')
            .its('length')
            .then((rowCount) => {
                expect(rowCount).to.be.greaterThan(0);
            });
-        cy.get(getRowColumn(1, 3) + getVnSelect).type('{downArrow}{enter}');
-        cy.get(getRowColumn(1, 4) + getVnSelect).type('{downArrow}{enter}');
-        cy.get(getRowColumn(1, 5) + getVnSelect).type('{downArrow}{enter}');
+        cy.get('[data-col-field="workerFk"][data-row-index="0"]')
+            .click()
+            .type('{downArrow}{enter}');
+        cy.get('[data-col-field="agencyModeFk"][data-row-index="0"]')
+            .click()
+            .type('{downArrow}{enter}');
+        cy.get('[data-col-field="vehicleFk"][data-row-index="0"]')
+            .click()
+            .type('{downArrow}{enter}');
        cy.get('button[title="Save"]').click();
-        cy.get('.q-notification__message').should('have.text', 'Data saved'); */
+        cy.get('.q-notification__message').should('have.text', 'Data saved');
    });
 });
--- a/test/cypress/integration/wagon/wagonType/wagonTypeCreate.spec.js
+++ b/test/cypress/integration/wagon/wagonType/wagonTypeCreate.spec.js
@ -9,7 +9,7 @@ describe('WagonTypeCreate', () => {
    it('should create a new wagon type and then delete it', () => {
        cy.get('.q-page-sticky > div > .q-btn').click();
        cy.get('input').first().type('Example for testing');
-        cy.get('button[type="submit"]').click();
+        cy.get('[data-cy="FormModelPopup_save"]').click();
        cy.get('[title="Remove"] > .q-btn__content > .q-icon').first().click();
    });
 });