Merge branch 'dev' into 6897-entryMigration2

2024-07-03 10:02:28 +00:00 · 2024-07-03 10:02:28 +00:00 · 885decc700
parent dff77277ac f6f5c2c085
commit 885decc700
59 changed files with 549 additions and 755 deletions
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@ -10,6 +10,7 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import SkeletonTable from 'components/ui/SkeletonTable.vue';
 import { tMobile } from 'src/composables/tMobile';
+import VnSubToolbar from './ui/VnSubToolbar.vue';

 const { push } = useRouter();
 const quasar = useQuasar();
@ -67,7 +68,7 @@ const $props = defineProps({
        default: '',
        description: 'It is used for redirect on click "save and continue"',
    },
-    hasSubtoolbar: {
+    hasSubToolbar: {
        type: Boolean,
        default: true,
    },
@ -313,8 +314,11 @@ watch(formUrl, async () => {
            ></slot>
        </template>
    </VnPaginate>
-    <SkeletonTable v-if="!formData" :columns="$attrs.columns?.length" />
-    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown() && hasSubtoolbar">
+    <SkeletonTable
+        v-if="!formData && $attrs.autoLoad"
+        :columns="$attrs.columns?.length"
+    />
+    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown() && hasSubToolbar">
        <QBtnGroup push style="column-gap: 10px">
            <slot name="moreBeforeActions" />
            <QBtn
--- a/src/components/LeftMenuItem.vue
+++ b/src/components/LeftMenuItem.vue
@ -21,7 +21,7 @@ const itemComputed = computed(() => {
 </script>
 <template>
    <QItem
-        active-class="bg-hover"
+        active-class="bg-vn-hover"
        class="min-height"
        :to="{ name: itemComputed.name }"
        clickable
--- a/src/components/VnTable/VnColumn.vue
+++ b/src/components/VnTable/VnColumn.vue
@ -138,7 +138,7 @@ const col = computed(() => {
 const components = computed(() => $props.components ?? defaultComponents);
 </script>
 <template>
-    <div class="row no-wrap fit">
+    <div class="row no-wrap">
        <VnComponent
            v-if="col.before"
            :prop="col.before"
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@ -59,10 +59,14 @@ const $props = defineProps({
        type: Boolean,
        default: false,
    },
-    hasSubtoolbar: {
+    hasSubToolbar: {
        type: Boolean,
        default: true,
    },
+    disableOption: {
+        type: Object,
+        default: () => ({ card: false, table: false }),
+    },
 });
 const { t } = useI18n();
 const stateStore = useStateStore();
@ -84,11 +88,13 @@ const tableModes = [
        icon: 'view_column',
        title: t('table view'),
        value: TABLE_MODE,
+        disable: $props.disableOption?.table,
    },
    {
        icon: 'grid_view',
        title: t('grid view'),
        value: DEFAULT_MODE,
+        disable: $props.disableOption?.card,
    },
 ];

@ -232,7 +238,7 @@ defineExpose({
            :search-url="searchUrl"
            :disable-infinite-scroll="mode == TABLE_MODE"
            @save-changes="reload"
-            :has-subtoolbar="$attrs['hasSubtoolbar'] ?? isEditable"
+            :has-sub-toolbar="$attrs['hasSubToolbar'] ?? isEditable"
        >
            <template
                v-for="(_, slotName) in $slots"
@ -418,9 +424,9 @@ defineExpose({
                                        >
                                            <VnLv
                                                :label="
-                                                    !col.component &&
-                                                    col.label &&
-                                                    `${col.label}:`
+                                                    !col.component && col.label
+                                                        ? `${col.label}:`
+                                                        : ''
                                                "
                                            >
                                                <template #value>
--- a/src/components/common/VnComponent.vue
+++ b/src/components/common/VnComponent.vue
@ -12,7 +12,7 @@ const $props = defineProps({
        default: () => {},
    },
    value: {
-        type: [Object, Number, String],
+        type: [Object, Number, String, Boolean],
        default: () => {},
    },
 });
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@ -49,6 +49,7 @@ const filter = {
        'changedModelId',
        'changedModelValue',
        'description',
+        'summaryId',
    ],
    include: [
        {
@ -459,12 +460,12 @@ onUnmounted(() => {
                                :style="{
                                    backgroundColor: useColor(modelLog.model),
                                }"
-                                :title="modelLog.model"
+                                :title="`${modelLog.model} #${modelLog.id}`"
                            >
                                {{ t(modelLog.modelI18n) }}
                            </QChip>
-                            <span class="model-id" v-if="modelLog.id"
-                                >#{{ modelLog.id }}</span
+                            <span class="model-id" v-if="modelLog.summaryId"
+                                >#{{ modelLog.summaryId }}</span
                            >
                            <span class="model-value" :title="modelLog.showValue">
                                {{ modelLog.showValue }}
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@ -93,13 +93,36 @@ function getValueFromPath(path) {
 }

 const emit = defineEmits(['onFetch']);
+
+const iconModule = computed(() => route.matched[1].meta.icon);
+const toModule = computed(() =>
+    route.matched[1].path.split('/').length > 2
+        ? route.matched[1].redirect
+        : route.matched[1].children[0].redirect
+);
 </script>

 <template>
    <div class="descriptor">
        <template v-if="entity && !isLoading">
            <div class="header bg-primary q-pa-sm justify-between">
-                <slot name="header-extra-action" />
+                <slot name="header-extra-action"
+                    ><QBtn
+                        round
+                        flat
+                        dense
+                        size="md"
+                        :icon="iconModule"
+                        color="white"
+                        class="link"
+                        :to="toModule"
+                    >
+                        <QTooltip>
+                            {{ t('globals.goToModuleIndex') }}
+                        </QTooltip>
+                    </QBtn></slot
+                >
+
                <QBtn
                    @click.stop="viewSummary(entity.id, $props.summary)"
                    round
--- a/src/components/ui/VnSubToolbar.vue
+++ b/src/components/ui/VnSubToolbar.vue
@ -1,6 +1,7 @@
 <script setup>
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onBeforeUnmount, ref, nextTick } from 'vue';
 import { useStateStore } from 'stores/useStateStore';
+
 const stateStore = useStateStore();
 const actions = ref(null);
 const data = ref(null);
@ -24,9 +25,7 @@ onMounted(() => {
    if (data.value) observer.observe(data.value, opts);
 });

-onUnmounted(() => {
-    stateStore.toggleSubToolbar();
-});
+onBeforeUnmount(() => stateStore.toggleSubToolbar());
 </script>

 <template>
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@ -19,7 +19,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
    onMounted(() => {
        setOptions();
        store.skip = 0;
-
        const query = route.query;
        const searchUrl = store.searchUrl;
        if (query[searchUrl]) {
--- a/src/css/app.scss
+++ b/src/css/app.scss
@ -5,6 +5,7 @@
 body.body--light {
    --font-color: black;
    --vn-section-color: #e0e0e0;
+    --vn-section-hover-color: #b9b9b9;
    --vn-page-color: #ffffff;
    --vn-text-color: var(--font-color);
    --vn-label-color: #5f5f5f;
@ -19,6 +20,7 @@ body.body--light {
 body.body--dark {
    --vn-page-color: #222;
    --vn-section-color: #3d3d3d;
+    --vn-section-hover-color: #747474;
    --vn-text-color: white;
    --vn-label-color: #a8a8a8;
    --vn-accent-color: #424242;
@ -71,8 +73,9 @@ select:-webkit-autofill {
 .bg-vn-section-color {
    background-color: var(--vn-section-color);
 }
-.bg-hover {
-    background-color: #666666;
+
+.bg-vn-hover {
+    background-color: var(--vn-section-hover-color);
 }

 .color-vn-label {
@ -183,8 +186,6 @@ select:-webkit-autofill {
    justify-content: center;
 }

-/* q-notification row items-stretch q-notification--standard bg-negative text-white */
-
 .q-card,
 .q-table,
 .q-table__bottom,
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@ -90,6 +90,7 @@ globals:
    send: Send
    code: Code
    pageTitles:
+        logIn: Login
        summary: Summary
        basicData: Basic data
        log: Logs
@ -244,6 +245,7 @@ globals:
    new: New
    comment: Comment
    observations: Observations
+    goToModuleIndex: Go to module index
 errors:
    statusUnauthorized: Access denied
    statusInternalServerError: An internal server error has ocurred
@ -262,8 +264,6 @@ login:
    loginError: Invalid username or password
    fieldRequired: This field is required
    twoFactorRequired: Two-factor verification required
-    pageTitles:
-        logIn: Login
 twoFactor:
    code: Code
    validate: Validate
@ -1026,6 +1026,19 @@ wagon:
        maxWagonHeight: 'The maximum height of the wagon is '
        uncompleteTrays: There are incomplete trays
 route:
+    pageTitles:
+        agency: Agency List
+        routes: Routes
+        cmrsList: CMRs list
+        RouteList: List
+        routeCreate: New route
+        basicData: Basic Data
+        summary: Summary
+        RouteRoadmap: Roadmaps
+        RouteRoadmapCreate: Create roadmap
+        tickets: Tickets
+        log: Log
+        autonomous: Autonomous
    cmr:
        list:
            results: results
@ -1144,6 +1157,16 @@ supplier:
        date: Date
        reference: Reference
 travel:
+    travelList:
+        tableVisibleColumns:
+            id: Id
+            ref: Reference
+            agency: Agency
+            shipped: Shipped
+            landed: Landed
+            warehouseIn: Warehouse in
+            warehouseOut: Warehouse out
+            totalEntries: Total entries
    summary:
        confirmed: Confirmed
        entryId: Entry Id
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@ -90,6 +90,7 @@ globals:
    send: Enviar
    code: Código
    pageTitles:
+        logIn: Inicio de sesión
        summary: Resumen
        basicData: Datos básicos
        log: Historial
@ -245,6 +246,7 @@ globals:
    new: Nuevo
    comment: Comentario
    observations: Observaciones
+    goToModuleIndex: Ir al índice del módulo
 errors:
    statusUnauthorized: Acceso denegado
    statusInternalServerError: Ha ocurrido un error interno del servidor
@ -263,8 +265,6 @@ login:
    loginError: Nombre de usuario o contraseña incorrectos
    fieldRequired: Este campo es obligatorio
    twoFactorRequired: Verificación de doble factor requerida
-    pageTitles:
-        logIn: Inicio de sesión
 twoFactor:
    code: Código
    validate: Validar
@ -1016,7 +1016,7 @@ route:
        list:
            results: resultados
            cmrFk: Id CMR
-            hasCmrDms: Adjuntado en gestdoc
+            hasCmrDms: Gestdoc
            'true': Sí
            'false': 'No'
            ticketFk: Id ticket
@ -1130,6 +1130,16 @@ supplier:
        date: Fecha
        reference: Referencia
 travel:
+    travelList:
+        tableVisibleColumns:
+            id: Id
+            ref: Referencia
+            agency: Agencia
+            shipped: Enviado
+            landed: Llegada
+            warehouseIn: Almacén de salida
+            warehouseOut: Almacén de entrada
+            totalEntries: Total de entradas
    summary:
        confirmed: Confirmado
        entryId: Id entrada
--- a/src/pages/Account/Card/AccountDescriptor.vue
+++ b/src/pages/Account/Card/AccountDescriptor.vue
@ -49,20 +49,6 @@ const hasAccount = ref(false);
        :title="data.title"
        :subtitle="data.subtitle"
    >
-        <template #header-extra-action>
-            <QBtn
-                round
-                flat
-                size="md"
-                color="white"
-                icon="face"
-                :to="{ name: 'AccountList' }"
-            >
-                <QTooltip>
-                    {{ t('Go to module index') }}
-                </QTooltip>
-            </QBtn>
-        </template>
        <template #menu>
            <AccountDescriptorMenu :has-account="hasAccount" />
        </template>
--- a/src/pages/Agency/AgencyList.vue
+++ b/src/pages/Agency/AgencyList.vue
@ -1,72 +0,0 @@
-<script setup>
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import CardList from 'src/components/ui/CardList.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import { useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-
-const { t } = useI18n();
-const router = useRouter();
-function navigate(id) {
-    router.push({ path: `/agency/${id}` });
-}
-function exprBuilder(param, value) {
-    if (!value) return;
-    if (param !== 'search') return;
-
-    if (!isNaN(value)) return { id: value };
-
-    return { name: { like: `%${value}%` } };
-}
-</script>
-<template>
-    <VnSearchbar
-        :info="t('You can search by name')"
-        :label="t('Search agency')"
-        data-key="AgencyList"
-        url="Agencies"
-    />
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
-                data-key="AgencyList"
-                url="Agencies"
-                order="name"
-                :expr-builder="exprBuilder"
-            >
-                <template #body="{ rows }">
-                    <CardList
-                        :id="row.id"
-                        :key="row.id"
-                        :title="row.name"
-                        @click="navigate(row.id)"
-                        v-for="row of rows"
-                    >
-                        <template #list-items>
-                            <QCheckbox
-                                :label="t('isOwn')"
-                                v-model="row.isOwn"
-                                :disable="true"
-                            />
-                            <QCheckbox
-                                :label="t('isAnyVolumeAllowed')"
-                                v-model="row.isAnyVolumeAllowed"
-                                :disable="true"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-    </QPage>
-</template>
-<i18n>
-    es: 
-        isOwn: Tiene propietario
-        isAnyVolumeAllowed: Permite cualquier volumen
-        Search agency: Buscar agencia
-        You can search by name: Puedes buscar por nombre
-    en:
-        isOwn: Has owner
-        isAnyVolumeAllowed: Allows any volume
-</i18n>
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@ -69,7 +69,7 @@ const filterOptions = {
        <template #form="{ data, validate, filter }">
            <VnRow class="row q-gutter-md q-mb-md">
                <VnInput
-                    :label="t('Comercial name')"
+                    :label="t('globals.name')"
                    :rules="validate('client.socialName')"
                    autofocus
                    clearable
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@ -45,20 +45,6 @@ const setData = (entity) => (data.value = useCardDescription(entity.name, entity
        :summary="$props.summary"
        data-key="customerData"
    >
-        <template #header-extra-action>
-            <QBtn
-                round
-                flat
-                size="sm"
-                icon="vn:Person"
-                color="white"
-                :to="{ name: 'CustomerList' }"
-            >
-                <QTooltip>
-                    {{ t('Go to module index') }}
-                </QTooltip>
-            </QBtn>
-        </template>
        <template #menu="{ entity }">
            <CustomerDescriptorMenu :customer="entity" />
        </template>
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@ -73,7 +73,7 @@ const creditWarning = computed(() => {
                    :text="t('customer.summary.basicData')"
                />
                <VnLv :label="t('customer.summary.customerId')" :value="entity.id" />
-                <VnLv :label="t('customer.summary.name')" :value="entity.name" />
+                <VnLv :label="t('globals.name')" :value="entity.name" />
                <VnLv :label="t('customer.summary.contact')" :value="entity.contact" />
                <VnLv :value="entity.phone">
                    <template #label>
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@ -38,7 +38,7 @@ const columns = computed(() => [
    },
    {
        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.name'),
+        label: t('globals.name'),
        name: 'name',
        isTitle: true,
        create: true,
@ -408,6 +408,7 @@ function handleLocation(data, location) {
        default-mode="table"
        redirect="customer"
        auto-load
+        :disable-option="{ card: true }"
    >
        <template #more-create-dialog="{ data }">
            <VnLocation
--- a/src/pages/Entry/Card/EntryDescriptor.vue
+++ b/src/pages/Entry/Card/EntryDescriptor.vue
@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';

@ -10,6 +10,7 @@ import useCardDescription from 'src/composables/useCardDescription';
 import { useState } from 'src/composables/useState';
 import { toDate } from 'src/filters';
 import { usePrintService } from 'composables/usePrintService';
+import { getUrl } from 'src/composables/getUrl';

 const $props = defineProps({
    id: {
@ -17,10 +18,6 @@ const $props = defineProps({
        required: false,
        default: null,
    },
-    summary: {
-        type: Object,
-        default: null,
-    },
 });

 const route = useRoute();
@ -28,6 +25,7 @@ const { t } = useI18n();
 const { openReport } = usePrintService();
 const state = useState();
 const entryDescriptorRef = ref(null);
+const url = ref();

 const entryFilter = {
    include: [
@ -69,6 +67,9 @@ const entryFilter = {
 const entityId = computed(() => {
    return $props.id || route.params.id;
 });
+onMounted(async () => {
+    url.value = await getUrl('');
+});

 const data = ref(useCardDescription());
 const setData = (entity) =>
@ -114,6 +115,7 @@ watch;
        :subtitle="data.subtitle"
        @on-fetch="setData"
        data-key="entry"
+        :summary="$attrs"
    >
        <template #menu="{ entity }">
            <QItem v-ripple clickable @click="showEntryReport(entity)">
--- a/src/pages/Entry/Card/EntryDescriptorProxy.vue
+++ b/src/pages/Entry/Card/EntryDescriptorProxy.vue
@ -1,5 +1,6 @@
 <script setup>
 import EntryDescriptor from './EntryDescriptor.vue';
+import EntrySummary from './EntrySummary.vue';

 const $props = defineProps({
    id: {
@ -11,6 +12,6 @@ const $props = defineProps({

 <template>
    <QPopupProxy>
-        <EntryDescriptor v-if="$props.id" :id="$props.id" />
+        <EntryDescriptor v-if="$props.id" :id="$props.id" :summary="EntrySummary" />
    </QPopupProxy>
 </template>
--- a/src/pages/InvoiceIn/Card/InvoiceInDescriptorProxy.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInDescriptorProxy.vue
@ -1,5 +1,6 @@
 <script setup>
-import InvoiceInDescriptor from "pages/InvoiceIn/Card/InvoiceInDescriptor.vue";
+import InvoiceInDescriptor from 'pages/InvoiceIn/Card/InvoiceInDescriptor.vue';
+import InvoiceInSummary from './InvoiceInSummary.vue';

 const $props = defineProps({
    id: {
@ -10,6 +11,10 @@ const $props = defineProps({
 </script>
 <template>
    <QPopupProxy>
-        <InvoiceInDescriptor v-if="$props.id" :id="$props.id" />
+        <InvoiceInDescriptor
+            v-if="$props.id"
+            :id="$props.id"
+            :summary="InvoiceInSummary"
+        />
    </QPopupProxy>
 </template>
--- a/src/pages/ItemType/Card/ItemTypeDescriptor.vue
+++ b/src/pages/ItemType/Card/ItemTypeDescriptor.vue
@ -51,20 +51,6 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
        @on-fetch="setData"
        data-key="entry"
    >
-        <template #header-extra-action>
-            <QBtn
-                round
-                flat
-                size="sm"
-                icon="vn:item"
-                color="white"
-                :to="{ name: 'ItemTypeList' }"
-            >
-                <QTooltip>
-                    {{ t('Go to module index') }}
-                </QTooltip>
-            </QBtn>
-        </template>
        <template #body="{ entity }">
            <VnLv :label="t('shared.code')" :value="entity.code" />
            <VnLv :label="t('shared.name')" :value="entity.name" />
--- a/src/pages/Route/Agency/AgencyList.vue
+++ b/src/pages/Route/Agency/AgencyList.vue
@ -0,0 +1,92 @@
+<script setup>
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnTable from 'components/VnTable/VnTable.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+function navigate(id) {
+    router.push({ path: `/agency/${id}` });
+}
+const exprBuilder = (param, value) => {
+    if (!value) return;
+    if (param !== 'search') return;
+    if (!isNaN(value)) return { id: value };
+
+    return { name: { like: `%${value}%` } };
+};
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'id',
+        label: 'Id',
+        chip: {
+            condition: () => true,
+        },
+        isId: true,
+    },
+    {
+        align: 'left',
+        label: t('globals.name'),
+        name: 'name',
+        isTitle: true,
+    },
+    {
+        align: 'left',
+        label: t('isOwn'),
+        name: 'isOwn',
+        component: 'checkbox',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        label: t('isAnyVolumeAllowed'),
+        name: 'isAnyVolumeAllowed',
+        component: 'checkbox',
+        cardVisible: true,
+        disable: true,
+    },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('Client ticket list'),
+                icon: 'preview',
+                action: (row) => navigate(row.id),
+            },
+        ],
+    },
+]);
+</script>
+<template>
+    <VnSearchbar
+        :info="t('You can search by name')"
+        :label="t('Search agency')"
+        data-key="AgencyList"
+        :expr-builder="exprBuilder"
+    />
+    <VnTable
+        ref="tableRef"
+        data-key="AgencyList"
+        url="Agencies"
+        order="name"
+        :columns="columns"
+        :right-search="false"
+        :use-model="true"
+    />
+</template>
+<i18n>
+    es: 
+        isOwn: Tiene propietario
+        isAnyVolumeAllowed: Permite cualquier volumen
+        Search agency: Buscar agencia
+        You can search by name: Puedes buscar por nombre
+    en:
+        isOwn: Has owner
+        isAnyVolumeAllowed: Allows any volume
+</i18n>
--- a/src/pages/Route/Agency/Card/AgencyBasicData.vue
+++ b/src/pages/Route/Agency/Card/AgencyBasicData.vue
--- a/src/pages/Route/Agency/Card/AgencyCard.vue
+++ b/src/pages/Route/Agency/Card/AgencyCard.vue
@ -1,5 +1,5 @@
 <script setup>
-import AgencyDescriptor from 'pages/Agency/Card/AgencyDescriptor.vue';
+import AgencyDescriptor from 'pages/Route/Agency/Card/AgencyDescriptor.vue';
 import VnCard from 'components/common/VnCard.vue';
 </script>
 <template>
--- a/src/pages/Route/Agency/Card/AgencyDescriptor.vue
+++ b/src/pages/Route/Agency/Card/AgencyDescriptor.vue
--- a/src/pages/Route/Agency/Card/AgencyLog.vue
+++ b/src/pages/Route/Agency/Card/AgencyLog.vue
--- a/src/pages/Route/Agency/Card/AgencyModes.vue
+++ b/src/pages/Route/Agency/Card/AgencyModes.vue
--- a/src/pages/Route/Agency/Card/AgencySummary.vue
+++ b/src/pages/Route/Agency/Card/AgencySummary.vue
@ -18,12 +18,10 @@ const entityId = computed(() => $props.id || useRoute().params.id);
            <template #header="{ entity: agency }">{{ agency.name }}</template>
            <template #body="{ entity: agency }">
                <QCard class="vn-one">
-                    <QCardSection class="q-pa-none">
-                        <VnTitle
-                            :url="`#/agency/${entityId}/basic-data`"
-                            :text="t('globals.pageTitles.basicData')"
-                        />
-                    </QCardSection>
+                    <VnTitle
+                        :url="`#/agency/${entityId}/basic-data`"
+                        :text="t('globals.pageTitles.basicData')"
+                    />
                    <VnLv :label="t('globals.name')" :value="agency.name" />
                    <QCheckbox
                        :label="t('agency.isOwn')"
--- a/src/pages/Route/Agency/Card/AgencyWorkcenter.vue
+++ b/src/pages/Route/Agency/Card/AgencyWorkcenter.vue
--- a/src/pages/Route/Agency/locale/en.yml
+++ b/src/pages/Route/Agency/locale/en.yml
--- a/src/pages/Route/Agency/locale/es.yml
+++ b/src/pages/Route/Agency/locale/es.yml
--- a/src/pages/Route/Card/RouteDescriptor.vue
+++ b/src/pages/Route/Card/RouteDescriptor.vue
@ -74,8 +74,9 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
        :filter="filter"
        :title="data.title"
        :subtitle="data.subtitle"
-        data-key="Routes"
+        data-key="routeData"
        @on-fetch="setData"
+        :summary="$attrs"
    >
        <template #body="{ entity }">
            <VnLv :label="t('Date')" :value="toDate(entity?.created)" />
--- a/src/pages/Route/Card/RouteDescriptorProxy.vue
+++ b/src/pages/Route/Card/RouteDescriptorProxy.vue
@ -1,5 +1,6 @@
 <script setup>
 import RouteDescriptor from 'pages/Route/Card/RouteDescriptor.vue';
+import RouteSummary from './RouteSummary.vue';

 const $props = defineProps({
    id: {
@ -10,6 +11,6 @@ const $props = defineProps({
 </script>
 <template>
    <QPopupProxy>
-        <RouteDescriptor v-if="$props.id" :id="$props.id" />
+        <RouteDescriptor v-if="$props.id" :id="$props.id" :summary="RouteSummary" />
    </QPopupProxy>
 </template>
--- a/src/pages/Route/Card/RouteSearchbar.vue
+++ b/src/pages/Route/Card/RouteSearchbar.vue
@ -9,7 +9,6 @@ const { t } = useI18n();
        data-key="RouteList"
        :label="t('Search route')"
        :info="t('You can search by route reference')"
-        custom-route-redirect-name="RouteList"
    />
 </template>

--- a/src/pages/Route/Cmr/CmrFilter.vue
+++ b/src/pages/Route/Cmr/CmrFilter.vue
@ -154,7 +154,7 @@ const warehouses = ref();
    es:
        params:
            cmrFk: Id cmr
-            hasCmrDms: Adjuntado en gestdoc
+            hasCmrDms: Gestdoc
            ticketFk: Id ticket
            country: País
            clientFk: Id cliente
--- a/src/pages/Route/Cmr/CmrList.vue
+++ b/src/pages/Route/Cmr/CmrList.vue
@ -12,6 +12,8 @@ import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy
 import RightMenu from 'src/components/common/RightMenu.vue';
 import { useStateStore } from 'src/stores/useStateStore';

+import VnTable from 'components/VnTable/VnTable.vue';
+
 const { t } = useI18n();
 const { getTokenMultimedia } = useSession();
 const token = getTokenMultimedia();
@ -107,88 +109,15 @@ function downloadPdfs() {
 }
 </script>
 <template>
-    <RightMenu>
-        <template #right-panel>
-            <CmrFilter data-key="CmrList" />
-        </template>
-    </RightMenu>
-    <div class="column items-center">
-        <div class="list">
-            <VnPaginate data-key="CmrList" :url="`Routes/cmrs`" order="cmrFk DESC">
-                <template #body="{ rows }">
-                    <QTable
-                        :columns="columns"
-                        :rows="rows"
-                        :dense="$q.screen.lt.md"
-                        row-key="cmrFk"
-                        selection="multiple"
-                        v-model:selected="selected"
-                        :grid="$q.screen.lt.md"
-                        auto-load
-                    >
-                        <template #top>
-                            <div style="width: 100%; display: table">
-                                <div style="float: right; color: lightgray">
-                                    {{ `${rows.length} ${t('route.cmr.list.results')}` }}
-                                </div>
-                            </div>
-                        </template>
-                        <template #body-cell-hasCmrDms="{ value }">
-                            <QTd align="center">
-                                <QBadge
-                                    text-color="black"
-                                    :id="value ? 'true' : 'false'"
-                                    :label="
-                                        value
-                                            ? t('route.cmr.list.true')
-                                            : t('route.cmr.list.false')
-                                    "
-                                />
-                            </QTd>
-                        </template>
-                        <template #body-cell-ticketFk="{ value }">
-                            <QTd align="right" class="text-primary">
-                                <span class="text-primary link">{{ value }}</span>
-                                <TicketDescriptorProxy :id="value" />
-                            </QTd>
-                        </template>
-                        <template #body-cell-clientFk="{ value }">
-                            <QTd align="right" class="text-primary">
-                                <span class="text-primary link">{{ value }}</span>
-                                <CustomerDescriptorProxy :id="value" />
-                            </QTd>
-                        </template>
-                        <template #body-cell-warehouseFk="{ value }">
-                            <QTd align="center">
-                                {{ warehouses.find(({ id }) => id === value)?.name }}
-                            </QTd>
-                        </template>
-                        <template #body-cell-icons="{ value }">
-                            <QTd align="center">
-                                <a :href="getCmrUrl(value)" target="_blank">
-                                    <QIcon
-                                        name="visibility"
-                                        color="primary"
-                                        size="md"
-                                        class="q-mr-sm q-ml-sm"
-                                    />
-                                    <QTooltip>
-                                        {{ t('route.cmr.list.viewCmr') }}
-                                    </QTooltip>
-                                </a>
-                            </QTd>
-                        </template>
-                    </QTable>
-                </template>
-            </VnPaginate>
-        </div>
-        <QPageSticky :offset="[20, 20]">
-            <QBtn @click="downloadPdfs" fab icon="cloud_download" color="primary" />
-            <QTooltip>
-                {{ t('route.cmr.list.downloadCmrs') }}
-            </QTooltip>
-        </QPageSticky>
-    </div>
+    <VnTable
+        ref="tableRef"
+        data-key="CmrList"
+        url="Routes/cmrs"
+        order="cmrFk DESC"
+        :columns="columns"
+        :right-search="true"
+        :use-model="true"
+    />
 </template>
 <style lang="scss" scoped>
 .list {
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@ -1,29 +1,32 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { computed, onMounted, ref } from 'vue';
+import { useArrayData } from 'composables/useArrayData';
 import { dashIfEmpty, toHour } from 'src/filters';
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useValidator } from 'composables/useValidator';
 import { useSession } from 'composables/useSession';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import { useArrayData } from 'composables/useArrayData';
 import { useQuasar } from 'quasar';

 import axios from 'axios';
 import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
 import FetchData from 'components/FetchData.vue';
-import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
-import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
-import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
 import RouteListTicketsDialog from 'pages/Route/Card/RouteListTicketsDialog.vue';
+import { useRouter } from 'vue-router';
+import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
+import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import RouteSummary from 'pages/Route/Card/RouteSummary.vue';

 import VnPaginate from 'components/ui/VnPaginate.vue';
-import VnSelect from 'components/common/VnSelect.vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInput from 'components/common/VnInput.vue';
 import VnInputTime from 'components/common/VnInputTime.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import VnTable from 'components/VnTable/VnTable.vue';
+import { useStateStore } from 'src/stores/useStateStore';

 const { t } = useI18n();
 const { validate } = useValidator();
@ -40,90 +43,100 @@ const allColumnNames = ref([]);
 const confirmationDialog = ref(false);
 const startingDate = ref(null);
 const refreshKey = ref(0);
-
+const router = useRouter();
+const stateStore = useStateStore();
 const columns = computed(() => [
    {
-        name: 'Id',
-        label: t('Id'),
-        field: (row) => row.id,
-        sortable: true,
-        align: 'center',
+        align: 'left',
+        name: 'id',
+        label: 'Id',
+        chip: {
+            condition: () => true,
+        },
+        isId: true,
+        columnFilter: {
+            name: 'search',
+        },
    },
    {
+        align: 'left',
        name: 'worker',
        label: t('Worker'),
-        field: (row) => row.workerUserName,
-        sortable: true,
-        align: 'left',
+        create: true,
+        component: 'select',
+        attrs: {
+            url: 'payrollComponents',
+            fields: ['id', 'name'],
+        },
+        cardVisible: true,
    },
    {
        name: 'agency',
        label: t('Agency'),
-        field: (row) => row.agencyName,
-        sortable: true,
        align: 'left',
+        isTitle: true,
+        cardVisible: true,
+        create: true,
    },
    {
        name: 'vehicle',
        label: t('Vehicle'),
-        field: (row) => row.vehiclePlateNumber,
-        sortable: true,
        align: 'left',
+        cardVisible: true,
+        create: true,
    },
    {
        name: 'date',
        label: t('Date'),
-        field: (row) => row.created,
-        sortable: true,
        align: 'left',
+        cardVisible: true,
+        create: true,
    },
    {
        name: 'volume',
        label: 'm³',
-        field: (row) => dashIfEmpty(row.m3),
-        sortable: true,
        align: 'center',
+        cardVisible: true,
    },
    {
        name: 'description',
        label: t('Description'),
-        field: (row) => row.description,
-        sortable: true,
        align: 'left',
+        isTitle: true,
+        create: true,
    },
    {
        name: 'started',
        label: t('hourStarted'),
-        field: (row) => toHour(row.started),
-        sortable: true,
        align: 'left',
    },
    {
        name: 'finished',
        label: t('hourFinished'),
-        field: (row) => toHour(row.finished),
-        sortable: true,
        align: 'left',
    },
    {
        name: 'isServed',
        label: t('Served'),
-        field: (row) => Boolean(row.isOk),
-        sortable: true,
        align: 'left',
    },
    {
-        name: 'actions',
-        label: '',
-        sortable: false,
        align: 'right',
+        label: 'asdasd',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('Client ticket list'),
+                icon: 'preview',
+                action: (row) => navigate(row.id),
+            },
+        ],
    },
 ]);

-const arrayData = useArrayData('EntryLatestBuys', {
-    url: 'Buys/latestBuysFilter',
-    order: ['itemFk DESC'],
-});
+function navigate(id) {
+    router.push({ path: `/route/${id}` });
+}

 const updateRoute = async (route) => {
    try {
@ -181,20 +194,10 @@ const openTicketsDialog = (id) => {
        })
        .onOk(() => refreshKey.value++);
 };
-
-onMounted(async () => {
-    allColumnNames.value = columns.value.map((col) => col.name);
-    await arrayData.fetch({ append: false });
-});
 </script>

 <template>
    <RouteSearchbar />
-    <RightMenu>
-        <template #right-panel>
-            <RouteFilter data-key="RouteList" />
-        </template>
-    </RightMenu>
    <QDialog v-model="confirmationDialog">
        <QCard style="min-width: 350px">
            <QCardSection>
@ -227,256 +230,53 @@ onMounted(async () => {
    />
    <FetchData url="AgencyModes" @on-fetch="(data) => (agencyList = data)" auto-load />
    <FetchData url="Vehicles" @on-fetch="(data) => (vehicleList = data)" auto-load />
-    <QPage class="column items-center">
-        <VnSubToolbar>
-            <template #st-data>
-                <TableVisibleColumns
-                    class="LeftIcon"
-                    :all-columns="allColumnNames"
-                    table-code="routesList"
-                    labels-traductions-path="route.columnLabels"
-                    @on-config-saved="visibleColumns = [...$event]"
-                />
-            </template>
-            <template #st-actions>
-                <QBtn
-                    icon="vn:clone"
-                    color="primary"
-                    class="q-mr-sm"
-                    :disable="!selectedRows?.length"
-                    @click="confirmationDialog = true"
-                >
-                    <QTooltip>{{ t('Clone Selected Routes') }}</QTooltip>
-                </QBtn>
-                <QBtn
-                    icon="cloud_download"
-                    color="primary"
-                    class="q-mr-sm"
-                    :disable="!selectedRows?.length"
-                    @click="showRouteReport"
-                >
-                    <QTooltip>{{ t('Download selected routes as PDF') }}</QTooltip>
-                </QBtn>
-                <QBtn
-                    icon="check"
-                    color="primary"
-                    class="q-mr-sm"
-                    :disable="!selectedRows?.length"
-                    @click="markAsServed()"
-                >
-                    <QTooltip>{{ t('Mark as served') }}</QTooltip>
-                </QBtn>
-            </template>
-        </VnSubToolbar>
-        <div class="route-list">
-            <VnPaginate
-                :key="refreshKey"
-                data-key="RouteList"
-                url="Routes/filter"
-                :order="['created ASC', 'started ASC', 'id ASC']"
-                :limit="20"
+    <VnSubToolbar />
+    <VnTable
+        ref="tableRef"
+        data-key="RouteList"
+        url="Routes/filter"
+        :columns="columns"
+        :right-search="true"
+        default-mode="table"
+        :is-editable="true"
+        :create="{
+            urlCreate: 'Routes',
+            title: t('Create route'),
+            onDataSaved: () => tableRef.reload(),
+        }"
+        save-url="routes"
+        :disable-option="{ card: true }"
+    >
+        <template #moreBeforeActions>
+            <QBtn
+                icon="vn:clone"
+                color="primary"
+                class="q-mr-sm"
+                :disable="!selectedRows?.length"
+                @click="confirmationDialog = true"
            >
-                <template #body="{ rows }">
-                    <div class="q-pa-md route-table">
-                        <QTable
-                            v-model:selected="selectedRows"
-                            :columns="columns"
-                            :rows="rows"
-                            flat
-                            row-key="id"
-                            selection="multiple"
-                            :rows-per-page-options="[0]"
-                            :visible-columns="visibleColumns"
-                            hide-pagination
-                            :no-data-label="t('globals.noResults')"
-                            style="max-height: 82vh"
-                        >
-                            <template #body-cell-worker="{ row }">
-                                <QTd class="table-input-cell">
-                                    <VnSelect
-                                        :label="t('Worker')"
-                                        v-model="row.workerFk"
-                                        :options="workers"
-                                        option-value="id"
-                                        option-label="nickname"
-                                        hide-selected
-                                        dense
-                                        :emit-value="false"
-                                        :rules="validate('Route.workerFk')"
-                                        :is-clearable="false"
-                                        @update:model-value="updateRoute(row)"
-                                    >
-                                        <template #option="{ opt, itemProps }">
-                                            <QItem
-                                                v-bind="itemProps"
-                                                class="q-pa-xs row items-center"
-                                            >
-                                                <QItemSection
-                                                    class="col-9 justify-center"
-                                                >
-                                                    <span>{{ opt.name }}</span>
-                                                    <span class="text-grey">{{
-                                                        opt.nickname
-                                                    }}</span>
-                                                </QItemSection>
-                                            </QItem>
-                                        </template>
-                                    </VnSelect>
-                                </QTd>
-                            </template>
-                            <template #body-cell-agency="{ row }">
-                                <QTd class="table-input-cell">
-                                    <VnSelect
-                                        :label="t('Agency')"
-                                        v-model="row.agencyModeFk"
-                                        :options="agencyList"
-                                        option-value="id"
-                                        option-label="name"
-                                        hide-selected
-                                        dense
-                                        :emit-value="false"
-                                        :rules="validate('route.agencyFk')"
-                                        :is-clearable="false"
-                                        @update:model-value="updateRoute(row)"
-                                    />
-                                </QTd>
-                            </template>
-                            <template #body-cell-vehicle="{ row }">
-                                <QTd class="table-input-cell small-column">
-                                    <VnSelect
-                                        :label="t('Vehicle')"
-                                        v-model="row.vehicleFk"
-                                        :options="vehicleList"
-                                        option-value="id"
-                                        option-label="numberPlate"
-                                        hide-selected
-                                        dense
-                                        :emit-value="false"
-                                        :rules="validate('route.vehicleFk')"
-                                        :is-clearable="false"
-                                        @update:model-value="updateRoute(row)"
-                                    />
-                                </QTd>
-                            </template>
-                            <template #body-cell-date="{ row }">
-                                <QTd class="table-input-cell small-column">
-                                    <VnInputDate
-                                        v-model="row.created"
-                                        hide-bottom-space
-                                        dense
-                                        :label="t('Date')"
-                                        :rules="validate('route.created')"
-                                        :is-clearable="false"
-                                        @update:model-value="updateRoute(row)"
-                                    />
-                                </QTd>
-                            </template>
-                            <template #body-cell-description="{ row }">
-                                <QTd class="table-input-cell">
-                                    <VnInput
-                                        v-model="row.description"
-                                        :label="t('Description')"
-                                        :rules="validate('route.description')"
-                                        :is-clearable="false"
-                                        dense
-                                        @update:model-value="updateRoute(row)"
-                                    />
-                                </QTd>
-                            </template>
-                            <template #body-cell-started="{ row }">
-                                <QTd class="table-input-cell small-column">
-                                    <VnInputTime
-                                        v-model="row.started"
-                                        :label="t('hourStarted')"
-                                        :rules="validate('route.started')"
-                                        :is-clearable="false"
-                                        hide-bottom-space
-                                        dense
-                                        @update:model-value="updateRoute(row)"
-                                    />
-                                </QTd>
-                            </template>
-                            <template #body-cell-finished="{ row }">
-                                <QTd class="table-input-cell small-column">
-                                    <VnInputTime
-                                        v-model="row.finished"
-                                        autofocus
-                                        :label="t('hourFinished')"
-                                        :rules="validate('route.finished')"
-                                        :is-clearable="false"
-                                        hide-bottom-space
-                                        dense
-                                        @update:model-value="updateRoute(row)"
-                                    />
-                                </QTd>
-                            </template>
-                            <template #body-cell-isServed="props">
-                                <QTd class="table-input-cell small-column">
-                                    <QCheckbox v-model="props.value" disable>
-                                        <QTooltip>
-                                            {{
-                                                props.value
-                                                    ? t('Route is closed')
-                                                    : t('Route is not served')
-                                            }}
-                                        </QTooltip>
-                                    </QCheckbox>
-                                </QTd>
-                            </template>
-                            <template #body-cell-actions="props">
-                                <QTd :props="props">
-                                    <div class="flex items-center no-wrap table-actions">
-                                        <QIcon
-                                            name="vn:ticketAdd"
-                                            size="sm"
-                                            color="primary"
-                                            class="cursor-pointer"
-                                            @click="openTicketsDialog(props?.row?.id)"
-                                        >
-                                            <QTooltip>{{ t('Add ticket') }}</QTooltip>
-                                        </QIcon>
-                                        <QIcon
-                                            name="preview"
-                                            size="sm"
-                                            color="primary"
-                                            @click="
-                                                viewSummary(props?.row?.id, RouteSummary)
-                                            "
-                                            class="cursor-pointer"
-                                        >
-                                            <QTooltip>{{ t('Preview') }}</QTooltip>
-                                        </QIcon>
-                                        <RouterLink
-                                            :to="{
-                                                name: 'RouteSummary',
-                                                params: { id: props?.row?.id },
-                                            }"
-                                        >
-                                            <QIcon
-                                                name="vn:eye"
-                                                size="xs"
-                                                color="primary"
-                                            >
-                                                <QTooltip>{{ t('Summary') }}</QTooltip>
-                                            </QIcon>
-                                        </RouterLink>
-                                    </div>
-                                </QTd>
-                            </template>
-                        </QTable>
-                    </div>
-                </template>
-            </VnPaginate>
-        </div>
-        <QPageSticky :offset="[20, 20]">
-            <RouterLink :to="{ name: 'RouteCreate' }">
-                <QBtn fab icon="add" color="primary" />
-                <QTooltip>
-                    {{ t('newRoute') }}
-                </QTooltip>
-            </RouterLink>
-        </QPageSticky>
-    </QPage>
+                <QTooltip>{{ t('Clone Selected Routes') }}</QTooltip>
+            </QBtn>
+            <QBtn
+                icon="cloud_download"
+                color="primary"
+                class="q-mr-sm"
+                :disable="!selectedRows?.length"
+                @click="showRouteReport"
+            >
+                <QTooltip>{{ t('Download selected routes as PDF') }}</QTooltip>
+            </QBtn>
+            <QBtn
+                icon="check"
+                color="primary"
+                class="q-mr-sm"
+                :disable="!selectedRows?.length"
+                @click="markAsServed()"
+            >
+                <QTooltip>{{ t('Mark as served') }}</QTooltip>
+            </QBtn>
+        </template>
+    </VnTable>
 </template>

 <style lang="scss" scoped>
--- a/src/pages/Route/RouteMain.vue
+++ b/src/pages/Route/RouteMain.vue
@ -2,7 +2,7 @@
 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>
--- a/src/pages/Shelving/Card/ShelvingDescriptor.vue
+++ b/src/pages/Shelving/Card/ShelvingDescriptor.vue
@ -51,6 +51,7 @@ 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" />
--- a/src/pages/Shelving/Card/ShelvingDescriptorProxy.vue
+++ b/src/pages/Shelving/Card/ShelvingDescriptorProxy.vue
@ -1,5 +1,6 @@
 <script setup>
-import ShelvingDescriptor from "pages/Shelving/Card/ShelvingDescriptor.vue";
+import ShelvingDescriptor from 'pages/Shelving/Card/ShelvingDescriptor.vue';
+import ShelvingSummary from './ShelvingSummary.vue';

 const $props = defineProps({
    id: {
@ -10,6 +11,6 @@ const $props = defineProps({
 </script>
 <template>
    <QPopupProxy>
-        <ShelvingDescriptor v-if="$props.id" :id="$props.id" />
+        <ShelvingDescriptor v-if="$props.id" :id="$props.id" :summary="ShelvingSummary" />
    </QPopupProxy>
 </template>
--- a/src/pages/Supplier/Card/SupplierDescriptor.vue
+++ b/src/pages/Supplier/Card/SupplierDescriptor.vue
@ -112,22 +112,6 @@ const getEntryQueryParams = (supplier) => {
        data-key="supplier"
        :summary="$props.summary"
    >
-        <template #header-extra-action>
-            <QBtn
-                round
-                flat
-                dense
-                size="md"
-                icon="vn:supplier"
-                color="white"
-                class="link"
-                :to="{ name: 'SupplierList' }"
-            >
-                <QTooltip>
-                    {{ t('Go to module index') }}
-                </QTooltip>
-            </QBtn>
-        </template>
        <template #body="{ entity }">
            <VnLv :label="t('supplier.summary.taxNumber')" :value="entity.nif" />
            <VnLv label="Alias" :value="entity.nickname" />
--- a/src/pages/Ticket/Card/TicketDescriptor.vue
+++ b/src/pages/Ticket/Card/TicketDescriptor.vue
@ -70,8 +70,6 @@ const filter = {
 };

 const data = ref(useCardDescription());
-const setData = (entity) =>
-    (data.value = useCardDescription(entity.client?.name, entity.id));
 </script>

 <template>
@ -82,7 +80,6 @@ const setData = (entity) =>
        :title="data.title"
        :subtitle="data.subtitle"
        data-key="ticketData"
-        @on-fetch="setData"
    >
        <template #menu="{ entity }">
            <TicketDescriptorMenu :ticket="entity" />
@ -153,4 +150,5 @@ const setData = (entity) =>
 <i18n>
 es:
    This ticket is deleted: Este ticket está eliminado
+    Go to module index: Ir al índice del modulo
 </i18n>
--- a/src/pages/Ticket/Card/TicketDescriptorProxy.vue
+++ b/src/pages/Ticket/Card/TicketDescriptorProxy.vue
@ -1,5 +1,6 @@
 <script setup>
 import TicketDescriptor from './TicketDescriptor.vue';
+import TicketSummary from './TicketSummary.vue';

 const $props = defineProps({
    id: {
@ -10,6 +11,6 @@ const $props = defineProps({
 </script>
 <template>
    <QPopupProxy>
-        <TicketDescriptor v-if="$props.id" :id="$props.id" />
+        <TicketDescriptor v-if="$props.id" :id="$props.id" :summary="TicketSummary" />
    </QPopupProxy>
 </template>
--- a/src/pages/Travel/Card/TravelCard.vue
+++ b/src/pages/Travel/Card/TravelCard.vue
@ -33,8 +33,12 @@ const filter = {
 <template>
    <VnCard
        data-key="Travel"
-        :filter="filter"
        base-url="Travels"
+        search-data-key="TravelList"
+        searchbar-label="Search travel"
+        searchbar-info="You can search by travel id or name"
+        search-url="Travels"
+        :filter="filter"
        :descriptor="TravelDescriptor"
    />
 </template>
--- a/src/pages/Travel/Card/TravelDescriptor.vue
+++ b/src/pages/Travel/Card/TravelDescriptor.vue
@ -1,10 +1,11 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';

 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import useCardDescription from 'src/composables/useCardDescription';
 import TravelDescriptorMenuItems from './TravelDescriptorMenuItems.vue';

 import { toDate } from 'src/filters';
@ -51,32 +52,22 @@ const filter = {
 const entityId = computed(() => {
    return $props.id || route.params.id;
 });
+
+const data = ref(useCardDescription());
+const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.id));
 </script>

 <template>
    <CardDescriptor
        module="Travel"
        :url="`Travels/${entityId}`"
-        title="ref"
+        :title="data.title"
+        :subtitle="data.subtitle"
        :filter="filter"
-        data-key="Travel"
+        data-key="travelData"
+        :summary="$attrs"
+        @on-fetch="setData"
    >
-        <template #header-extra-action>
-            <QBtn
-                round
-                flat
-                dense
-                size="md"
-                icon="local_airport"
-                color="white"
-                class="link"
-                :to="{ name: 'TravelList' }"
-            >
-                <QTooltip>
-                    {{ t('Go to module index') }}
-                </QTooltip>
-            </QBtn>
-        </template>
        <template #menu="{ entity }">
            <TravelDescriptorMenuItems :travel="entity" />
        </template>
--- a/src/pages/Travel/Card/TravelDescriptorProxy.vue
+++ b/src/pages/Travel/Card/TravelDescriptorProxy.vue
@ -1,5 +1,6 @@
 <script setup>
 import TravelDescriptor from './TravelDescriptor.vue';
+import TravelSummary from './TravelSummary.vue';

 const $props = defineProps({
    id: {
@ -11,6 +12,6 @@ const $props = defineProps({

 <template>
    <QPopupProxy>
-        <TravelDescriptor v-if="$props.id" :id="$props.id" />
+        <TravelDescriptor v-if="$props.id" :id="$props.id" :summary="TravelSummary" />
    </QPopupProxy>
 </template>
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@ -12,8 +12,6 @@ import FetchData from 'src/components/FetchData.vue';
 import { toDate, toCurrency } from 'src/filters';
 import axios from 'axios';

-onUpdated(() => summaryRef.value.fetch());
-
 const $props = defineProps({
    id: {
        type: Number,
--- a/src/pages/Travel/TravelList.vue
+++ b/src/pages/Travel/TravelList.vue
@ -2,31 +2,27 @@
 import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import CardList from 'src/components/ui/CardList.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import TravelSummary from './Card/TravelSummary.vue';
-import TravelFilter from './TravelFilter.vue';
-import FetchData from 'components/FetchData.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-
+import { useRoute } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
-import { toDate } from 'src/filters/index';
+import VnTable from 'components/VnTable/VnTable.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import { getDateQBadgeColor } from 'src/composables/getDateQBadgeColor.js';
-import RightMenu from 'src/components/common/RightMenu.vue';
-
+import { computed } from 'vue';
+import TravelSummary from './Card/TravelSummary.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import { dashIfEmpty, toDate } from 'src/filters';
+const { viewSummary } = useSummaryDialog();
 const router = useRouter();
 const { t } = useI18n();
 const stateStore = useStateStore();
-const { viewSummary } = useSummaryDialog();
-
-const warehouses = ref([]);
-
-const navigateToTravelId = (id) => {
-    router.push({ path: `/travel/${id}` });
-};
-
+const route = useRoute();
+const tableRef = ref();
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+const entityId = computed(() => $props.id || route.params.id);
 const cloneTravel = (travelData) => {
    const stringifiedTravelData = JSON.stringify(travelData);
    redirectToCreateView(stringifiedTravelData);
@ -40,125 +36,170 @@ const redirectCreateEntryView = (travelData) => {
    router.push({ name: 'EntryCreate', query: { travelFk: travelData.id } });
 };

-const getWarehouseName = (id) => {
-    return warehouses.value.find((warehouse) => warehouse.id === id).name;
-};
-
 onMounted(async () => {
    stateStore.rightDrawer = true;
 });
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'id',
+        label: t('travel.travelList.tableVisibleColumns.id'),
+        isId: true,
+        field: 'id',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'ref',
+        label: t('travel.travelList.tableVisibleColumns.ref'),
+        field: 'ref',
+        component: 'input',
+        columnField: {
+            component: null,
+        },
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'agencyModeFk',
+        label: t('travel.travelList.tableVisibleColumns.agency'),
+        field: 'agencyModeFk',
+        component: 'select',
+        attrs: {
+            url: 'agencyModes',
+            fields: ['id', 'name'],
+        },
+        columnField: {
+            component: null,
+        },
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'shipped',
+        label: t('travel.travelList.tableVisibleColumns.shipped'),
+        field: 'shipped',
+        component: 'date',
+        columnField: {
+            component: null,
+        },
+        cardVisible: true,
+        create: true,
+        format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.shipped)),
+    },
+    {
+        align: 'left',
+        name: 'landed',
+        label: t('travel.travelList.tableVisibleColumns.landed'),
+        field: 'landed',
+        component: 'date',
+        columnField: {
+            component: null,
+        },
+        cardVisible: true,
+        create: true,
+        format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.landed)),
+    },
+    {
+        align: 'left',
+        name: 'warehouseInFk',
+        label: t('travel.travelList.tableVisibleColumns.warehouseIn'),
+        field: 'warehouseInFk',
+        component: 'select',
+        attrs: {
+            url: 'warehouses',
+            fields: ['id', 'name'],
+        },
+        columnField: {
+            component: null,
+        },
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'warehouseOutFk',
+        label: t('travel.travelList.tableVisibleColumns.warehouseOut'),
+        field: 'warehouseOutFk',
+        component: 'select',
+        attrs: {
+            url: 'warehouses',
+            fields: ['id', 'name'],
+        },
+        columnField: {
+            component: null,
+        },
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'totalEntries',
+        label: t('travel.travelList.tableVisibleColumns.totalEntries'),
+        field: 'totalEntries',
+        component: 'input',
+        columnField: {
+            component: null,
+        },
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('Clone'),
+                icon: 'vn:clone',
+                action: cloneTravel,
+                isPrimary: true,
+            },
+            {
+                title: t('Add entry'),
+                icon: 'contact_support',
+                action: redirectCreateEntryView,
+            },
+            {
+                title: t('View Summary'),
+                icon: 'preview',
+                action: (row) => viewSummary(row.id, TravelSummary),
+            },
+        ],
+    },
+]);
 </script>

 <template>
-    <FetchData
-        url="Warehouses"
-        :filter="{ fields: ['id', 'name'] }"
-        order="name"
-        @on-fetch="(data) => (warehouses = data)"
-        auto-load
+    <VnSearchbar
+        :info="t('You can search by travel id or name')"
+        :label="t('Search travel')"
+        data-key="TravelList"
+    />
+    <VnTable
+        ref="tableRef"
+        data-key="TravelList"
+        url="Travels"
+        :create="{
+            urlCreate: 'Travels',
+            title: t('Create Travels'),
+            onDataSaved: ({ id }) => tableRef.redirect(id),
+            formInitialData: {
+                editorFk: entityId,
+            },
+        }"
+        order="landed DESC"
+        :columns="columns"
+        default-mode="table"
+        auto-load
+        redirect="travel"
+        :right-search="false"
+        :is-editable="false"
+        :use-model="true"
    />
-    <VnSearchbar data-key="TravelList" :limit="20" :label="t('searchByIdOrReference')" />
-    <RightMenu>
-        <template #right-panel>
-            <TravelFilter data-key="TravelList" />
-        </template>
-    </RightMenu>
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
-                data-key="TravelList"
-                url="Travels/filter"
-                auto-load
-                order="shipped DESC, landed DESC"
-            >
-                <template #body="{ rows }">
-                    <CardList
-                        v-for="row of rows"
-                        :key="row.id"
-                        :title="row.ref"
-                        :id="row.id"
-                        @click="navigateToTravelId(row.id)"
-                    >
-                        <template #list-items>
-                            <VnLv
-                                :label="t('globals.agency')"
-                                :value="row.agencyModeName"
-                            />
-                            <VnLv
-                                v-if="warehouses.length > 0"
-                                :label="t('globals.wareHouseOut')"
-                                :value="getWarehouseName(row.warehouseOutFk)"
-                            />
-                            <VnLv :label="t('globals.shipped')">
-                                <template #value>
-                                    <QBadge
-                                        text-color="black"
-                                        v-if="getDateQBadgeColor(row.shipped)"
-                                        :color="getDateQBadgeColor(row.shipped)"
-                                        class="q-ma-none"
-                                        dense
-                                        style="font-size: 14px"
-                                    >
-                                        {{ toDate(row.shipped) }}
-                                    </QBadge>
-                                    <span v-else>{{ toDate(row.shipped) }}</span>
-                                </template>
-                            </VnLv>
-                            <VnLv :label="t('globals.landed')">
-                                <template #value>
-                                    <QBadge
-                                        text-color="black"
-                                        v-if="getDateQBadgeColor(row.landed)"
-                                        :color="getDateQBadgeColor(row.landed)"
-                                        class="q-ma-none"
-                                        dense
-                                        style="font-size: 14px"
-                                    >
-                                        {{ toDate(row.landed) }}
-                                    </QBadge>
-                                    <span v-else>{{ toDate(row.landed) }}</span>
-                                </template>
-                            </VnLv>
-                            <VnLv
-                                v-if="warehouses.length > 0"
-                                :label="t('globals.wareHouseIn')"
-                                :value="getWarehouseName(row.warehouseInFk)"
-                            />
-                            <VnLv
-                                :label="t('globals.totalEntries')"
-                                :value="row.totalEntries"
-                            />
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.clone')"
-                                @click.stop="cloneTravel(row)"
-                                outline
-                            />
-                            <QBtn
-                                :label="t('addEntry')"
-                                @click.stop="redirectCreateEntryView(row)"
-                                outline
-                                style="margin-top: 15px"
-                            />
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, TravelSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-        <QPageSticky :offset="[20, 20]">
-            <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
-            <QTooltip>
-                {{ t('supplier.list.newSupplier') }}
-            </QTooltip>
-        </QPageSticky>
-    </QPage>
 </template>

 <i18n>
@ -169,4 +210,6 @@ en:
 es:
    addEntry: Añadir entrada
    searchByIdOrReference: Buscar por ID o por referencia
+    You can search by travel id or name: Buscar por envio por id o nombre
+    Search travel: Buscar envio
 </i18n>
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@ -17,10 +17,6 @@ const $props = defineProps({
        required: false,
        default: null,
    },
-    summary: {
-        type: Object,
-        default: null,
-    },
 });

 const route = useRoute();
@ -115,7 +111,7 @@ const refetch = async () => await cardDescriptorRef.value.getData();
        :filter="filter"
        :title="data.title"
        :subtitle="data.subtitle"
-        :summary="$props.summary"
+        :summary="$attrs"
        @on-fetch="
            (data) => {
                worker = data;
--- a/src/pages/Zone/Card/ZoneDescriptor.vue
+++ b/src/pages/Zone/Card/ZoneDescriptor.vue
@ -38,7 +38,6 @@ const entityId = computed(() => {
 });

 const data = ref(useCardDescription());
-
 const setData = (entity) => {
    data.value = useCardDescription(entity.ref, entity.id);
 };
@ -53,23 +52,8 @@ const setData = (entity) => {
        :filter="filter"
        @on-fetch="setData"
        data-key="zoneData"
+        :summary="$attrs"
    >
-        <template #header-extra-action>
-            <QBtn
-                round
-                flat
-                dense
-                size="md"
-                icon="vn:zone"
-                color="white"
-                class="link"
-                :to="{ name: 'ZoneList' }"
-            >
-                <QTooltip>
-                    {{ t('Summary') }}
-                </QTooltip>
-            </QBtn>
-        </template>
        <template #menu="{ entity }">
            <ZoneDescriptorMenuItems :zone="entity" />
        </template>
@ -82,3 +66,8 @@ const setData = (entity) => {
        </template>
    </CardDescriptor>
 </template>
+
+<i18n>
+es:
+    Go to module index: Ir al índice del módulo
+</i18n>
--- a/src/pages/Zone/Card/ZoneDescriptorProxy.vue
+++ b/src/pages/Zone/Card/ZoneDescriptorProxy.vue
@ -1,5 +1,6 @@
 <script setup>
 import ZoneDescriptor from './ZoneDescriptor.vue';
+import ZoneSummary from './ZoneSummary.vue';

 const $props = defineProps({
    id: {
@ -11,6 +12,6 @@ const $props = defineProps({

 <template>
    <QPopupProxy>
-        <ZoneDescriptor v-if="$props.id" :id="$props.id" />
+        <ZoneDescriptor v-if="$props.id" :id="$props.id" :summary="ZoneSummary" />
    </QPopupProxy>
 </template>
--- a/src/router/modules/agency.js
+++ b/src/router/modules/agency.js
@ -18,7 +18,7 @@ export default {
        {
            path: '/agency/:id',
            name: 'AgencyCard',
-            component: () => import('src/pages/Agency/Card/AgencyCard.vue'),
+            component: () => import('src/pages/Route/Agency/Card/AgencyCard.vue'),
            redirect: { name: 'AgencySummary' },
            children: [
                {
@ -28,7 +28,8 @@ export default {
                        title: 'summary',
                        icon: 'view_list',
                    },
-                    component: () => import('src/pages/Agency/Card/AgencySummary.vue'),
+                    component: () =>
+                        import('src/pages/Route/Agency/Card/AgencySummary.vue'),
                },
                {
                    name: 'AgencyBasicData',
@ -37,7 +38,8 @@ export default {
                        title: 'basicData',
                        icon: 'vn:settings',
                    },
-                    component: () => import('pages/Agency/Card/AgencyBasicData.vue'),
+                    component: () =>
+                        import('pages/Route/Agency/Card/AgencyBasicData.vue'),
                },
                {
                    path: 'workCenter',
@ -52,7 +54,9 @@ export default {
                                title: 'workCenters',
                            },
                            component: () =>
-                                import('src/pages/Agency/Card/AgencyWorkcenter.vue'),
+                                import(
+                                    'src/pages/Route/Agency/Card/AgencyWorkcenter.vue'
+                                ),
                        },
                    ],
                },
@ -69,7 +73,7 @@ export default {
                                title: 'modes',
                            },
                            component: () =>
-                                import('src/pages/Agency/Card/AgencyModes.vue'),
+                                import('src/pages/Route/Agency/Card/AgencyModes.vue'),
                        },
                    ],
                },
@ -80,7 +84,7 @@ export default {
                        title: 'log',
                        icon: 'history',
                    },
-                    component: () => import('src/pages/Agency/Card/AgencyLog.vue'),
+                    component: () => import('src/pages/Route/Agency/Card/AgencyLog.vue'),
                },
            ],
        },
--- a/src/router/modules/route.js
+++ b/src/router/modules/route.js
@ -86,7 +86,8 @@ export default {
                                title: 'agencyList',
                                icon: 'view_list',
                            },
-                            component: () => import('src/pages/Agency/AgencyList.vue'),
+                            component: () =>
+                                import('src/pages/Route/Agency/AgencyList.vue'),
                        },
                    ],
                },
--- a/test/cypress/integration/route/agency/agencyWorkCenter.spec.js
+++ b/test/cypress/integration/route/agency/agencyWorkCenter.spec.js
--- a/test/cypress/integration/vnComponent/vnBreadcrumbs.spec.js
+++ b/test/cypress/integration/vnComponent/vnBreadcrumbs.spec.js
--- a/test/cypress/integration/vnComponent/vnLocation.spec.js
+++ b/test/cypress/integration/vnComponent/vnLocation.spec.js
--- a/test/cypress/integration/vnComponent/vnLog.spec.js
+++ b/test/cypress/integration/vnComponent/vnLog.spec.js
--- a/test/cypress/integration/vnComponent/vnSearchBar.spec.js
+++ b/test/cypress/integration/vnComponent/vnSearchBar.spec.js