Merge branch 'dev' of https: refs #8655//gitea.verdnatura.es/verdnatura/salix-front into 8655-scrollUpButton

2025-03-03 13:12:54 +01:00 · 2025-03-03 13:12:54 +01:00 · 9bf0b4c077
parent 27866e7090 f0e00e1721
commit 9bf0b4c077
41 changed files with 520 additions and 150 deletions
--- a/3
+++ b/3
@ -94,7 +94,7 @@ pipeline {
            parallel {
                stage('Unit') {
                    steps {
-                        sh 'pnpm run test:unit:ci'
+                        sh 'pnpm run test:front:ci'
                    }
                    post {
                        always {
@ -113,6 +113,7 @@ pipeline {
                    }
                    steps {
                        script {
+                            sh 'rm junit/e2e-*.xml || true'
                            env.COMPOSE_TAG = PROTECTED_BRANCH.contains(env.CHANGE_TARGET) ? env.CHANGE_TARGET : 'dev'
                            def image = docker.build('lilium-dev', '-f docs/Dockerfile.dev docs')
                            sh "docker-compose ${env.COMPOSE_PARAMS} up -d"
--- a/README.md
+++ b/README.md
@ -23,7 +23,7 @@ quasar dev
 ### Run unit tests

 ```bash
-pnpm run test:unit
+pnpm run test:front
 ```

 ### Run e2e tests
--- a/package.json
+++ b/package.json
@ -14,8 +14,8 @@
        "test:e2e": "cypress open",
        "test:e2e:ci": "npm run resetDatabase && cd ../salix-front && cypress run",
        "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
-        "test:unit": "vitest",
-        "test:unit:ci": "vitest run",
+        "test:front": "vitest",
+        "test:front:ci": "vitest run",
        "commitlint": "commitlint --edit",
        "prepare": "npx husky install",
        "addReferenceTag": "node .husky/addReferenceTag.js",
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@ -96,6 +96,10 @@ const $props = defineProps({
        type: [String, Boolean],
        default: '800px',
    },
+    onDataSaved: {
+        type: Function,
+        default: () => {},
+    },
 });
 const emit = defineEmits(['onFetch', 'onDataSaved']);
 const modelValue = computed(
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@ -134,6 +134,10 @@ const $props = defineProps({
    createComplement: {
        type: Object,
    },
+    dataCy: {
+        type: String,
+        default: 'vn-table',
+    },
 });

 const { t } = useI18n();
@ -274,7 +278,9 @@ function splitColumns(columns) {
            col.columnFilter = { inWhere: true, ...col.columnFilter };
        splittedColumns.value.columns.push(col);
    }
-    // Status column
+
+    splittedColumns.value.create = createOrderSort(splittedColumns.value.create);
+
    if (splittedColumns.value.chips.length) {
        splittedColumns.value.columnChips = splittedColumns.value.chips.filter(
            (c) => !c.isId,
@ -290,6 +296,24 @@ function splitColumns(columns) {
    }
 }

+function createOrderSort(columns) {
+    const orderedColumn = columns
+        .map((column, index) =>
+            column.createOrder !== undefined ? { ...column, originalIndex: index } : null,
+        )
+        .filter((item) => item !== null);
+
+    orderedColumn.sort((a, b) => a.createOrder - b.createOrder);
+
+    const filteredColumns = columns.filter((col) => col.createOrder === undefined);
+
+    orderedColumn.forEach((col) => {
+        filteredColumns.splice(col.createOrder, 0, col);
+    });
+
+    return filteredColumns;
+}
+
 const rowClickFunction = computed(() => {
    if ($props.rowClick != undefined) return $props.rowClick;
    if ($props.redirect) return ({ id }) => redirectFn(id);
@ -365,12 +389,11 @@ function hasEditableFormat(column) {

 const clickHandler = async (event) => {
    const clickedElement = event.target.closest('td');
-
    const isDateElement = event.target.closest('.q-date');
    const isTimeElement = event.target.closest('.q-time');
-    const isQselectDropDown = event.target.closest('.q-select__dropdown-icon');
+    const isQSelectDropDown = event.target.closest('.q-select__dropdown-icon');

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

    if (clickedElement === null) {
        await destroyInput(editingRow.value, editingField.value);
@ -609,6 +632,21 @@ function removeTextValue(data, getChanges) {

    return data;
 }
+
+function handleRowClick(event, row) {
+    if (event.ctrlKey) return rowCtrlClickFunction.value(event, row);
+    if (rowClickFunction.value) rowClickFunction.value(row);
+}
+
+const rowCtrlClickFunction = computed(() => {
+    if ($props.rowCtrlClick != undefined) return $props.rowCtrlClick;
+    if ($props.redirect)
+        return (evt, { id }) => {
+            stopEventPropagation(evt);
+            window.open(`/#/${$props.redirect}/${id}`, '_blank');
+        };
+    return () => {};
+});
 </script>
 <template>
    <QBtn
@ -621,7 +659,7 @@ function removeTextValue(data, getChanges) {
    >
    <QTooltip>{{ $t('globals.scrollToTop') }}</QTooltip>
    </QBtn>
-    <RightMenu v-if="$props.rightSearch">
+    <RightMenu v-if="$props.rightSearch" :overlay="overlay">
        <template #right-panel>
            <VnTableFilter
                :data-key="$attrs['data-key']"
@ -674,10 +712,11 @@ function removeTextValue(data, getChanges) {
                :style="isTableMode && `max-height: ${tableHeight}`"
                :virtual-scroll="isTableMode"
                @virtual-scroll="onVirtualScroll"
-                @row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
+                @row-click="(event, row) => handleRowClick(event, row)"
                @update:selected="emit('update:selected', $event)"
                @selection="(details) => handleSelection(details, rows)"
                :hide-selected-banner="true"
+                :data-cy="$props.dataCy ?? 'vnTable'"
            >
                <template #top-left v-if="!$props.withoutHeader">
                    <slot name="top-left"> </slot>
@ -1021,7 +1060,10 @@ function removeTextValue(data, getChanges) {
        >
            <template #form-inputs="{ data }">
                <div :style="createComplement?.containerStyle">
-                    <div>
+                    <div
+                        :style="createComplement?.previousStyle"
+                        v-if="!quasar.screen.xs"
+                    >
                        <slot name="previous-create-dialog" :data="data" />
                    </div>
                    <div class="grid-create" :style="createComplement?.columnGridStyle">
@ -1034,7 +1076,10 @@ function removeTextValue(data, getChanges) {
                            :label="column.label"
                        >
                            <VnColumn
-                                :column="column"
+                                :column="{
+                                    ...column,
+                                    ...{ disable: column?.createDisable ?? false },
+                                }"
                                :row="{}"
                                default="input"
                                v-model="data[column.name]"
--- a/src/components/common/RightMenu.vue
+++ b/src/components/common/RightMenu.vue
@ -11,6 +11,13 @@ const stateStore = useStateStore();
 const slots = useSlots();
 const hasContent = useHasContent('#right-panel');

+defineProps({
+    overlay: {
+        type: Boolean,
+        default: false,
+    },
+});
+
 onMounted(() => {
    if ((!slots['right-panel'] && !hasContent.value) || quasar.platform.is.mobile)
        stateStore.rightDrawer = false;
@ -34,7 +41,12 @@ onMounted(() => {
            </QBtn>
        </div>
    </Teleport>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256">
+    <QDrawer
+        v-model="stateStore.rightDrawer"
+        side="right"
+        :width="256"
+        :overlay="overlay"
+    >
        <QScrollArea class="fit">
            <div id="right-panel"></div>
            <slot v-if="!hasContent" name="right-panel" />
--- a/src/components/common/VnCardBeta.vue
+++ b/src/components/common/VnCardBeta.vue
@ -1,10 +1,9 @@
 <script setup>
 import { onBeforeMount } from 'vue';
-import { useRouter, onBeforeRouteUpdate } from 'vue-router';
+import { useRouter, onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
 import useCardSize from 'src/composables/useCardSize';
-import LeftMenu from 'components/LeftMenu.vue';
 import VnSubToolbar from '../ui/VnSubToolbar.vue';

 const props = defineProps({
@ -27,7 +26,13 @@ const arrayData = useArrayData(props.dataKey, {
    oneRecord: true,
 });

+onBeforeRouteLeave(() => {
+    stateStore.cardDescriptorChangeValue(null);
+});
+
 onBeforeMount(async () => {
+    stateStore.cardDescriptorChangeValue(props.descriptor);
+
    const route = router.currentRoute.value;
    try {
        await fetch(route.params.id);
@ -62,11 +67,6 @@ function hasRouteParam(params, valueToCheck = ':addressId') {
 }
 </script>
 <template>
-    <Teleport to="#left-panel" v-if="stateStore.isHeaderMounted()">
-        <component :is="descriptor" />
-        <QSeparator />
-        <LeftMenu source="card" />
-    </Teleport>
    <VnSubToolbar />
    <div :class="[useCardSize(), $attrs.class]">
        <RouterView :key="$route.path" />
--- a/src/components/common/VnCheckbox.vue
+++ b/src/components/common/VnCheckbox.vue
@ -27,7 +27,7 @@ const checkboxModel = computed({
 </script>
 <template>
    <div>
-        <QCheckbox v-bind="$attrs" v-on="$attrs" v-model="checkboxModel" />
+        <QCheckbox v-bind="$attrs" v-model="checkboxModel" />
        <QIcon
            v-if="info"
            v-bind="$attrs"
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@ -641,15 +641,7 @@ watch(
                                                    >
                                                        {{ prop.nameI18n }}:
                                                    </span>
-                                                    <VnJsonValue :value="prop.val.val" />
-                                                    <span
-                                                        v-if="prop.val.id"
-                                                        class="id-value"
-                                                    >
-                                                        #{{ prop.val.id }}
-                                                    </span>
                                                    <span v-if="log.action == 'update'">
-                                                        ←
                                                        <VnJsonValue
                                                            :value="prop.old.val"
                                                        />
@ -659,6 +651,26 @@ watch(
                                                        >
                                                            #{{ prop.old.id }}
                                                        </span>
+                                                        →
+                                                        <VnJsonValue
+                                                            :value="prop.val.val"
+                                                        />
+                                                        <span
+                                                            v-if="prop.val.id"
+                                                            class="id-value"
+                                                        >
+                                                            #{{ prop.val.id }}
+                                                        </span>
+                                                    </span>
+                                                    <span v-else="prop.old.val">
+                                                        <VnJsonValue
+                                                            :value="prop.val.val"
+                                                        />
+                                                        <span
+                                                            v-if="prop.old.id"
+                                                            class="id-value"
+                                                            >#{{ prop.old.id }}</span
+                                                        >
                                                    </span>
                                                </div>
                                            </span>
--- a/src/components/common/VnModule.vue
+++ b/src/components/common/VnModule.vue
@ -12,7 +12,7 @@ const $props = defineProps({
    },
 });
 onMounted(
-    () => (stateStore.leftDrawer = useQuasar().screen.gt.xs ? $props.leftDrawer : false)
+    () => (stateStore.leftDrawer = useQuasar().screen.gt.xs ? $props.leftDrawer : false),
 );

 const teleportRef = ref({});
@ -35,8 +35,14 @@ onMounted(() => {
 <template>
    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
        <QScrollArea class="fit text-grey-8">
-            <div id="left-panel" ref="teleportRef"></div>
-            <LeftMenu v-if="!hasContent" />
+            <div id="left-panel" ref="teleportRef">
+                <template v-if="stateStore.cardDescriptor">
+                    <component :is="stateStore.cardDescriptor" />
+                    <QSeparator />
+                    <LeftMenu source="card" />
+                </template>
+                <template v-else> <LeftMenu /></template>
+            </div>
        </QScrollArea>
    </QDrawer>
    <QPageContainer>
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@ -302,8 +302,6 @@ defineExpose({ opts: myOptions, vnSelectRef });

 function handleKeyDown(event) {
    if (event.key === 'Tab' && !event.shiftKey) {
-        event.preventDefault();
-
        const inputValue = vnSelectRef.value?.inputValue;

        if (inputValue) {
--- a/src/composables/checkEntryLock.js
+++ b/src/composables/checkEntryLock.js
@ -29,7 +29,6 @@ export async function checkEntryLock(entryFk, userFk) {
                .dialog({
                    component: VnConfirm,
                    componentProps: {
-                        'data-cy': 'entry-lock-confirm',
                        title: t('entry.lock.title'),
                        message: t('entry.lock.message', {
                            userName: data?.user?.nickname,
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@ -695,8 +695,10 @@ worker:
        machine: Machine
    business:
        tableVisibleColumns:
+            id: ID
            started: Start Date
            ended: End Date
+            hourlyLabor: Time sheet
            company: Company
            reasonEnd: Reason for Termination
            department: Department
@ -704,6 +706,7 @@ worker:
            calendarType: Work Calendar
            workCenter: Work Center
            payrollCategories: Contract Category
+            workerBusinessAgreementName: Agreement
            occupationCode: Contribution Code
            rate: Rate
            businessType: Contract Type
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@ -771,8 +771,10 @@ worker:
            concept: Concepto
    business:
        tableVisibleColumns:
+            id: Id
            started: Fecha inicio
            ended: Fecha fin
+            hourlyLabor: Ficha
            company: Empresa
            reasonEnd: Motivo finalización
            department: Departamento
@ -783,6 +785,7 @@ worker:
            occupationCode: Cotización
            rate: Tarifa
            businessType: Contrato
+            workerBusinessAgreementName: Convenio
            amount: Salario
            basicSalary: Salario transportistas
            notes: Notas
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@ -325,7 +325,7 @@ const sumRisk = ({ clientRisks }) => {
            </QCard>
            <QCard class="vn-max">
                <VnTitle :text="t('Latest tickets')" />
-                <CustomerSummaryTable />
+                <CustomerSummaryTable :id="entityId" />
            </QCard>
        </template>
    </CardSummary>
--- a/src/pages/Customer/components/CustomerSummaryTable.vue
+++ b/src/pages/Customer/components/CustomerSummaryTable.vue
@ -20,7 +20,12 @@ const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 const { viewSummary } = useSummaryDialog();
-
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: null,
+    },
+});
 const filter = {
    include: [
        {
@ -43,7 +48,7 @@ const filter = {
            },
        },
    ],
-    where: { clientFk: route.params.id },
+    where: { clientFk: $props.id ?? route.params.id },
    order: ['shipped DESC', 'id'],
    limit: 30,
 };
--- a/src/pages/Entry/Card/EntryBuys.vue
+++ b/src/pages/Entry/Card/EntryBuys.vue
@ -54,6 +54,7 @@ const columns = [
            toggleIndeterminate: false,
        },
        create: true,
+        createOrder: 12,
        width: '25px',
    },
    {
@ -61,9 +62,10 @@ const columns = [
        name: 'workerFk',
        component: 'select',
        attrs: {
-            url: 'Workers/search',
+            url: 'TicketRequests/getItemTypeWorker',
            fields: ['id', 'nickname'],
            optionLabel: 'nickname',
+            sortBy: 'nickname ASC',
            optionValue: 'id',
        },
        visible: false,
@ -87,15 +89,6 @@ const columns = [
        isEditable: false,
        columnFilter: false,
    },
-    {
-        name: 'entryFk',
-        isId: true,
-        visible: false,
-        isEditable: false,
-        disable: true,
-        create: true,
-        columnFilter: false,
-    },
    {
        align: 'center',
        label: 'Id',
@ -137,6 +130,7 @@ const columns = [
        name: 'itemFk',
        visible: false,
        create: true,
+        createOrder: 0,
        columnFilter: false,
    },
    {
@ -160,6 +154,8 @@ const columns = [
        name: 'stickers',
        component: 'input',
        create: true,
+
+        createOrder: 1,
        attrs: {
            positive: false,
        },
@ -271,6 +267,7 @@ const columns = [
        },
        width: '45px',
        create: true,
+        createOrder: 3,
        style: getQuantityStyle,
    },
    {
@ -280,6 +277,7 @@ const columns = [
        toolTip: t('Buying value'),
        name: 'buyingValue',
        create: true,
+        createOrder: 2,
        component: 'number',
        attrs: {
            positive: false,
@ -312,6 +310,7 @@ const columns = [
        toolTip: t('Package'),
        name: 'price2',
        component: 'number',
+        createDisable: true,
        width: '35px',
        create: true,
        format: (row) => parseFloat(row['price2']).toFixed(2),
@ -321,6 +320,7 @@ const columns = [
        label: t('Box'),
        name: 'price3',
        component: 'number',
+        createDisable: true,
        cellEvent: {
            'update:modelValue': async (value, oldValue, row) => {
                row['price2'] = row['price2'] * (value / oldValue);
@ -508,13 +508,14 @@ async function setBuyUltimate(itemFk, data) {
        },
    });
    const buyUltimateData = buyUltimate.data[0];
+    if (!buyUltimateData) return;

    const allowedKeys = columns
        .filter((col) => col.create === true)
        .map((col) => col.name);

    allowedKeys.forEach((key) => {
-        if (buyUltimateData.hasOwnProperty(key) && key !== 'entryFk') {
+        if (buyUltimateData?.hasOwnProperty(key) && key !== 'entryFk') {
            if (!['stickers', 'quantity'].includes(key)) data[key] = buyUltimateData[key];
        }
    });
@ -607,6 +608,7 @@ onMounted(() => {
        ref="entryBuysRef"
        data-key="EntryBuys"
        :url="`Entries/${entityId}/getBuyList`"
+        search-url="EntryBuys"
        save-url="Buys/crud"
        :disable-option="{ card: true }"
        v-model:selected="selectedRows"
@ -636,22 +638,24 @@ onMounted(() => {
            isFullWidth: true,
            containerStyle: {
                display: 'flex',
-                'flex-wrap': 'wrap',
                gap: '16px',
                position: 'relative',
-                height: '500px',
            },
            columnGridStyle: {
                'max-width': '50%',
-                flex: 1,
                'margin-right': '30px',
+                flex: 1,
            },
+            previousStyle: {
+                'max-width': '30%',
+                height: '500px',
+            },
+            displayPrevious: true,
        }"
        :is-editable="editableMode"
        :without-header="!editableMode"
        :with-filters="editableMode"
        :right-search="editableMode"
-        :right-search-icon="true"
        :row-click="false"
        :columns="columns"
        :beforeSaveFn="beforeSave"
@ -660,6 +664,7 @@ onMounted(() => {
        auto-load
        footer
        data-cy="entry-buys"
+        overlay
    >
        <template #column-hex="{ row }">
            <VnColor :colors="row?.hexJson" style="height: 100%; min-width: 2000px" />
--- a/src/pages/Entry/EntryFilter.vue
+++ b/src/pages/Entry/EntryFilter.vue
@ -248,7 +248,7 @@ const entryFilterPanel = ref();
 <i18n>
 en:
    params:
-        isExcludedFromAvailable: Inventory
+        isExcludedFromAvailable: Is excluded
        isOrdered: Ordered
        isReceived: Received
        isConfirmed: Confirmed
--- a/src/pages/Entry/EntryList.vue
+++ b/src/pages/Entry/EntryList.vue
@ -11,6 +11,8 @@ import VnTable from 'components/VnTable/VnTable.vue';
 import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
 import VnSelectTravelExtended from 'src/components/common/VnSelectTravelExtended.vue';
 import { toDate } from 'src/filters';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import EntrySummary from './Card/EntrySummary.vue';

 const { t } = useI18n();
 const tableRef = ref();
@ -18,6 +20,7 @@ const defaultEntry = ref({});
 const state = useState();
 const user = state.getUser();
 const dataKey = 'EntryList';
+const { viewSummary } = useSummaryDialog();

 const entryQueryFilter = {
    include: [
@ -222,6 +225,19 @@ const columns = computed(() => [
        visible: false,
        create: true,
    },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('components.smartCard.viewSummary'),
+                icon: 'preview',
+                isPrimary: true,
+                action: (row) => viewSummary(row.id, EntrySummary, 'xlg-width'),
+            },
+        ],
+    },
 ]);
 function getBadgeAttrs(row) {
    const date = row.landed;
@ -267,16 +283,7 @@ onBeforeMount(async () => {
 </script>

 <template>
-    <VnSection
-        :data-key="dataKey"
-        prefix="entry"
-        url="Entries/filter"
-        :array-data-props="{
-            url: 'Entries/filter',
-            order: 'landed DESC',
-            userFilter: entryQueryFilter,
-        }"
-    >
+    <VnSection :data-key="dataKey" prefix="entry">
        <template #advanced-menu>
            <EntryFilter :data-key="dataKey" />
        </template>
@ -285,6 +292,7 @@ onBeforeMount(async () => {
                v-if="defaultEntry.defaultSupplierFk"
                ref="tableRef"
                :data-key="dataKey"
+                search-url="EntryList"
                url="Entries/filter"
                :filter="entryQueryFilter"
                order="landed DESC"
--- a/src/pages/Entry/EntryStockBought.vue
+++ b/src/pages/Entry/EntryStockBought.vue
@ -19,6 +19,7 @@ const { t } = useI18n();
 const quasar = useQuasar();
 const state = useState();
 const user = state.getUser();
+const footer = ref({ bought: 0, reserve: 0 });
 const columns = computed(() => [
    {
        align: 'left',
@ -38,16 +39,14 @@ const columns = computed(() => [
        cardVisible: true,
        create: true,
        attrs: {
-            url: 'Workers/activeWithInheritedRole',
-            fields: ['id', 'name', 'nickname'],
-            where: { role: 'buyer' },
-            optionFilter: 'firstName',
+            url: 'TicketRequests/getItemTypeWorker',
+            fields: ['id', 'nickname'],
            optionLabel: 'nickname',
+            sortBy: 'nickname ASC',
            optionValue: 'id',
-            useLike: false,
        },
        columnFilter: false,
-        width: '70px',
+        width: '50px',
    },
    {
        align: 'center',
@ -58,6 +57,7 @@ const columns = computed(() => [
        component: 'number',
        summation: true,
        width: '50px',
+        format: ({ reserve }, dashIfEmpty) => dashIfEmpty(round(reserve)),
    },
    {
        align: 'center',
@ -65,6 +65,7 @@ const columns = computed(() => [
        name: 'bought',
        summation: true,
        cardVisible: true,
+        style: ({ reserve, bought }) => boughtStyle(bought, reserve),
        columnFilter: false,
    },
    {
@ -95,7 +96,6 @@ const columns = computed(() => [
                },
            },
        ],
-        'data-cy': 'table-actions',
    },
 ]);

@ -137,20 +137,20 @@ function openDialog() {
 }

 function setFooter(data) {
-    const footer = {
-        bought: 0,
-        reserve: 0,
-    };
+    footer.value = { bought: 0, reserve: 0 };
    data.forEach((row) => {
-        footer.bought += row?.bought;
-        footer.reserve += row?.reserve;
+        footer.value.bought += row?.bought;
+        footer.value.reserve += row?.reserve;
    });
-    tableRef.value.footer = footer;
 }

 function round(value) {
    return Math.round(value * 100) / 100;
 }
+
+function boughtStyle(bought, reserve) {
+    return reserve < bought ? { color: 'var(--q-negative)' } : '';
+}
 </script>
 <template>
    <VnSubToolbar>
@ -253,24 +253,14 @@ function round(value) {
                        <WorkerDescriptorProxy :id="row?.workerFk" />
                    </span>
                </template>
-                <template #column-bought="{ row }">
-                    <span :class="{ 'text-negative': row.reserve < row.bought }">
-                        {{ row?.bought }}
-                    </span>
-                </template>
                <template #column-footer-reserve>
                    <span>
-                        {{ round(tableRef.footer.reserve) }}
+                        {{ round(footer.reserve) }}
                    </span>
                </template>
                <template #column-footer-bought>
-                    <span
-                        :class="{
-                            'text-negative':
-                                tableRef.footer.reserve < tableRef.footer.bought,
-                        }"
-                    >
-                        {{ round(tableRef.footer.bought) }}
+                    <span :style="boughtStyle(footer?.bought, footer?.reserve)">
+                        {{ round(footer.bought) }}
                    </span>
                </template>
            </VnTable>
@ -286,7 +276,7 @@ function round(value) {
    justify-content: center;
 }
 .column {
-    min-width: 40%;
+    min-width: 35%;
    margin-top: 5%;
    display: flex;
    flex-direction: column;
--- a/src/pages/Entry/EntryStockBoughtDetail.vue
+++ b/src/pages/Entry/EntryStockBoughtDetail.vue
@ -14,7 +14,7 @@ const $props = defineProps({
        required: true,
    },
    dated: {
-        type: Date,
+        type: [Date, String],
        required: true,
    },
 });
--- a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
@ -185,6 +185,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
        data-key="InvoiceInSummary"
        :url="`InvoiceIns/${entityId}/summary`"
        @on-fetch="(data) => init(data)"
+        module-name="InvoiceIn"
    >
        <template #header="{ entity }">
            <div>{{ entity.id }} - {{ entity.supplier?.name }}</div>
--- a/src/pages/InvoiceIn/Card/InvoiceInVat.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInVat.vue
@ -202,7 +202,7 @@ function setCursor(ref) {
                            :option-label="col.optionLabel"
                            :filter-options="['id', 'name']"
                            :tooltip="t('Create a new expense')"
-                            @keydown.tab="
+                            @keydown.tab.prevent="
                                autocompleteExpense(
                                    $event,
                                    row,
--- a/src/pages/Item/Card/ItemDiary.vue
+++ b/src/pages/Item/Card/ItemDiary.vue
@ -12,7 +12,7 @@ import FetchData from 'components/FetchData.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';

-import { toDateFormat } from 'src/filters/date.js';
+import { toDateTimeFormat } from 'src/filters/date.js';
 import { dashIfEmpty } from 'src/filters';
 import { date } from 'quasar';
 import { useState } from 'src/composables/useState';
@ -143,7 +143,12 @@ onMounted(async () => {
 const fetchItemBalances = async () => await arrayDataItemBalances.fetch({});

 const getBadgeAttrs = (_date) => {
-    const isSameDate = date.isSameDate(today, _date);
+    let today = Date.vnNew();
+    today.setHours(0, 0, 0, 0);
+    let timeTicket = new Date(_date);
+    timeTicket.setHours(0, 0, 0, 0);
+
+    const isSameDate = date.isSameDate(today, timeTicket);
    const attrs = {
        'text-color': isSameDate ? 'black' : 'white',
        color: isSameDate ? 'warning' : 'transparent',
@ -244,7 +249,7 @@ async function updateWarehouse(warehouseFk) {
                        dense
                        style="font-size: 14px"
                    >
-                        {{ toDateFormat(row.shipped) }}
+                        {{ toDateTimeFormat(row.shipped) }}
                    </QBadge>
                </QTd>
            </template>
--- a/src/pages/Item/Card/ItemLastEntries.vue
+++ b/src/pages/Item/Card/ItemLastEntries.vue
@ -11,7 +11,6 @@ import { toCurrency } from 'filters/index';
 import { useArrayData } from 'composables/useArrayData';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
-
 const { t } = useI18n();
 const route = useRoute();
 const from = ref();
@ -41,7 +40,7 @@ const itemLastEntries = ref([]);

 const columns = computed(() => [
    {
-        label: 'Nv',
+        label: 'NV',
        name: 'ig',
        align: 'center',
    },
@ -70,6 +69,7 @@ const columns = computed(() => [
        field: 'reference',
        align: 'center',
        format: (_, row) => toCurrency(row.price2) + ' / ' + toCurrency(row.price3),
+        style: (row) => highlightedRow(row),
    },
    {
        label: t('lastEntries.printedStickers'),
@ -84,6 +84,7 @@ const columns = computed(() => [
        field: 'stickers',
        align: 'center',
        format: (val) => dashIfEmpty(val),
+        style: (row) => highlightedRow(row),
    },
    {
        label: 'Packing',
@ -102,12 +103,14 @@ const columns = computed(() => [
        name: 'stems',
        field: 'stems',
        align: 'center',
+        style: (row) => highlightedRow(row),
    },
    {
        label: t('lastEntries.quantity'),
        name: 'quantity',
        field: 'quantity',
        align: 'center',
+        style: (row) => highlightedRow(row),
    },
    {
        label: t('lastEntries.cost'),
@ -120,12 +123,14 @@ const columns = computed(() => [
        name: 'weight',
        field: 'weight',
        align: 'center',
+        style: (row) => highlightedRow(row),
    },
    {
        label: t('lastEntries.cube'),
        name: 'cube',
        field: 'packagingFk',
        align: 'center',
+        style: (row) => highlightedRow(row),
    },
    {
        label: t('lastEntries.supplier'),
@ -208,6 +213,14 @@ onMounted(async () => {
 function getBadgeClass(groupingMode, expectedGrouping) {
    return groupingMode === expectedGrouping ? 'accent-badge' : 'simple-badge';
 }
+
+function highlightedRow(row) {
+    return row?.isInventorySupplier
+        ? {
+              'background-color': 'var(--vn-section-hover-color)',
+          }
+        : '';
+}
 </script>
 <template>
    <VnSubToolbar>
@ -236,7 +249,7 @@ function getBadgeClass(groupingMode, expectedGrouping) {
            :no-data-label="t('globals.noResults')"
        >
            <template #body-cell-ig="{ row }">
-                <QTd class="text-center">
+                <QTd class="text-center" :style="highlightedRow(row)">
                    <QIcon
                        :name="row.isIgnored ? 'check_box' : 'check_box_outline_blank'"
                        style="color: var(--vn-label-color)"
@ -245,38 +258,38 @@ function getBadgeClass(groupingMode, expectedGrouping) {
                </QTd>
            </template>
            <template #body-cell-warehouse="{ row }">
-                <QTd>
+                <QTd :style="highlightedRow(row)">
                    <span>{{ row.warehouse }}</span>
                </QTd>
            </template>
            <template #body-cell-date="{ row }">
-                <QTd class="text-center">
+                <QTd class="text-center" :style="highlightedRow(row)">
                    <VnDateBadge :date="row.landed" />
                </QTd>
            </template>
            <template #body-cell-entry="{ row }">
-                <QTd @click.stop>
+                <QTd @click.stop :style="highlightedRow(row)">
                    <div class="full-width flex justify-center">
                        <EntryDescriptorProxy :id="row.entryFk" class="q-ma-none" dense />
                        <span class="link">{{ row.entryFk }}</span>
                    </div>
                </QTd>
            </template>
-            <template #body-cell-pvp="{ value }">
-                <QTd @click.stop class="text-center">
+            <template #body-cell-pvp="{ row, value }">
+                <QTd @click.stop class="text-center" :style="highlightedRow(row)">
                    <span> {{ value }}</span>
-                    <QTooltip> {{ t('lastEntries.grouping') }}/Packing </QTooltip></QTd
-                >
+                    <QTooltip> {{ t('lastEntries.grouping') }}/Packing </QTooltip>
+                </QTd>
            </template>
            <template #body-cell-printedStickers="{ row }">
-                <QTd @click.stop class="text-center">
+                <QTd @click.stop class="text-center" :style="highlightedRow(row)">
                    <span style="color: var(--vn-label-color)">
                        {{ row.printedStickers }}</span
                    >
                </QTd>
            </template>
            <template #body-cell-packing="{ row }">
-                <QTd @click.stop>
+                <QTd @click.stop :style="highlightedRow(row)">
                    <QBadge
                        class="center-content"
                        :class="getBadgeClass(row.groupingMode, 'packing')"
@ -288,7 +301,7 @@ function getBadgeClass(groupingMode, expectedGrouping) {
                </QTd>
            </template>
            <template #body-cell-grouping="{ row }">
-                <QTd @click.stop>
+                <QTd @click.stop :style="highlightedRow(row)">
                    <QBadge
                        class="center-content"
                        :class="getBadgeClass(row.groupingMode, 'grouping')"
@ -300,7 +313,7 @@ function getBadgeClass(groupingMode, expectedGrouping) {
                </QTd>
            </template>
            <template #body-cell-cost="{ row }">
-                <QTd @click.stop class="text-center">
+                <QTd @click.stop class="text-center" :style="highlightedRow(row)">
                    <span>
                        {{ toCurrency(row.cost, 'EUR', 3) }}
                        <QTooltip>
@ -319,7 +332,7 @@ function getBadgeClass(groupingMode, expectedGrouping) {
                </QTd>
            </template>
            <template #body-cell-supplier="{ row }">
-                <QTd @click.stop>
+                <QTd @click.stop :style="highlightedRow(row)">
                    <div class="full-width flex justify-left">
                        <QBadge
                            :class="
@ -354,7 +367,6 @@ function getBadgeClass(groupingMode, expectedGrouping) {
 .th :first-child {
    .td {
        text-align: center;
-        background-color: red;
    }
 }
 .accent-badge {
--- a/src/pages/Order/Card/OrderCatalog.vue
+++ b/src/pages/Order/Card/OrderCatalog.vue
@ -10,6 +10,7 @@ import OrderCatalogFilter from 'src/pages/Order/Card/OrderCatalogFilter.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import { onUnmounted } from 'vue';

 const route = useRoute();
 const router = useRouter();
@ -23,16 +24,40 @@ const catalogParams = {
 const arrayData = useArrayData(dataKey, {
    url: 'Orders/CatalogFilter',
    userParams: catalogParams,
+    exprBuilder,
+    searchUrl: 'table',
 });
 const store = arrayData.store;
 const tags = ref([]);
 const itemRefs = ref({});

-onMounted(() => {
+onMounted(async () => {
    stateStore.rightDrawer = true;
    checkOrderConfirmation();
+
+    if (
+        arrayData.store.userParams &&
+        Object.keys(arrayData.store.userParams).some((key) => !key.startsWith('order'))
+    ) {
+        await arrayData.fetch({});
+    }
 });

+onUnmounted(() => {
+    arrayData.destroy();
+});
+
+function exprBuilder(param, value) {
+    switch (param) {
+        case 'categoryFk':
+        case 'typeFk':
+            return { [param]: value };
+        case 'search':
+            if (/^\d+$/.test(value)) return { 'i.id': value };
+            else return { 'i.name': { like: `%${value}%` } };
+    }
+}
+
 async function checkOrderConfirmation() {
    const response = await axios.get(`Orders/${route.params.id}`);
    if (response.data.isConfirmed === 1) {
@ -96,6 +121,7 @@ watch(
                :tag-value="tagValue"
                :tags="tags"
                :initial-catalog-params="catalogParams"
+                :arrayData
            />
        </template>
    </RightMenu>
--- a/src/pages/Order/Card/OrderCatalogFilter.vue
+++ b/src/pages/Order/Card/OrderCatalogFilter.vue
@ -24,6 +24,10 @@ const props = defineProps({
        type: Array,
        required: true,
    },
+    arrayData: {
+        type: Object,
+        required: true,
+    },
 });

 const { t } = useI18n();
@ -74,17 +78,6 @@ const loadTypes = async (id) => {
    typeList.value = data;
 };

-function exprBuilder(param, value) {
-    switch (param) {
-        case 'categoryFk':
-        case 'typeFk':
-            return { [param]: value };
-        case 'search':
-            if (/^\d+$/.test(value)) return { 'i.id': value };
-            else return { 'i.name': { like: `%${value}%` } };
-    }
-}
-
 const applyTags = (tagInfo, params, search) => {
    if (!tagInfo || !tagInfo.values.length) {
        params.tagGroups = null;
@ -152,9 +145,8 @@ function addOrder(value, field, params) {
        :data-key="props.dataKey"
        :hidden-tags="['filter', 'orderFk', 'orderBy']"
        :unremovable-params="['orderFk', 'orderBy']"
-        :expr-builder="exprBuilder"
        :custom-tags="['tagGroups', 'categoryFk']"
-        :redirect="false"
+        :arrayData
    >
        <template #tags="{ tag, formatFn }">
            <strong v-if="tag.label === 'typeFk' && typeList">
--- a/src/pages/Route/RouteAutonomous.vue
+++ b/src/pages/Route/RouteAutonomous.vue
@ -180,6 +180,7 @@ const onDmsSaved = async (dms, response) => {
            rows: dmsDialog.value.rowsToCreateInvoiceIn,
            dms: response.data,
        });
+        notify(t('Data saved'), 'positive');
    }
    dmsDialog.value.show = false;
    dmsDialog.value.initialForm = null;
@ -243,7 +244,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
        </template>
        <template #column-invoiceInFk="{ row }">
            <span class="link" @click.stop>
-                {{ row.invoiceInFk }}
+                {{ row.supplierRef }}
                <InvoiceInDescriptorProxy v-if="row.invoiceInFk" :id="row.invoiceInFk" />
            </span>
        </template>
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, markRaw } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { toHour } from 'src/filters';
@ -8,6 +8,7 @@ import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import VnSection from 'src/components/common/VnSection.vue';
+import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';

 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
@ -38,17 +39,7 @@ const columns = computed(() => [
        align: 'left',
        name: 'workerFk',
        label: t('route.Worker'),
-        component: 'select',
-        attrs: {
-            url: 'Workers/activeWithInheritedRole',
-            fields: ['id', 'name'],
-            useLike: false,
-            optionFilter: 'firstName',
-            find: {
-                value: 'workerFk',
-                label: 'workerUserName',
-            },
-        },
+        component: markRaw(VnSelectWorker),
        create: true,
        cardVisible: true,
        format: (row, dashIfEmpty) => dashIfEmpty(row.travelRef),
@ -59,6 +50,10 @@ const columns = computed(() => [
        name: 'agencyName',
        label: t('route.Agency'),
        cardVisible: true,
+    },
+    {
+        label: t('route.Agency'),
+        name: 'agencyModeFk',
        component: 'select',
        attrs: {
            url: 'agencyModes',
@ -69,14 +64,19 @@ const columns = computed(() => [
            },
        },
        create: true,
-        columnClass: 'expand',
        columnFilter: false,
+        visible: false,
    },
    {
        align: 'left',
        name: 'vehiclePlateNumber',
        label: t('route.Vehicle'),
        cardVisible: true,
+    },
+    {
+        name: 'vehicleFk',
+        label: t('route.Vehicle'),
+        cardVisible: true,
        component: 'select',
        attrs: {
            url: 'vehicles',
@ -90,6 +90,7 @@ const columns = computed(() => [
        },
        create: true,
        columnFilter: false,
+        visible: false,
    },
    {
        align: 'left',
@ -156,6 +157,7 @@ const columns = computed(() => [
            <VnTable
                :data-key
                :columns="columns"
+                ref="tableRef"
                :right-search="false"
                redirect="route"
                :create="{
--- a/src/pages/Route/Vehicle/Card/VehicleSummary.vue
+++ b/src/pages/Route/Vehicle/Card/VehicleSummary.vue
@ -22,7 +22,12 @@ const links = {
 };
 </script>
 <template>
-    <CardSummary data-key="Vehicle" :url="`Vehicles/${entityId}`" :filter="VehicleFilter">
+    <CardSummary
+        data-key="Vehicle"
+        :url="`Vehicles/${entityId}`"
+        module-name="Vehicle"
+        :filter="VehicleFilter"
+    >
        <template #header="{ entity }">
            <div>{{ entity.id }} - {{ entity.numberPlate }}</div>
        </template>
--- a/src/pages/Supplier/SupplierList.vue
+++ b/src/pages/Supplier/SupplierList.vue
@ -6,7 +6,10 @@ import VnSection from 'src/components/common/VnSection.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'src/components/FetchData.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import SupplierSummary from './Card/SupplierSummary.vue';

+const { viewSummary } = useSummaryDialog();
 const { t } = useI18n();
 const tableRef = ref();
 const dataKey = 'SupplierList';
@ -103,6 +106,19 @@ const columns = computed(() => [
            },
        },
    },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('components.smartCard.viewSummary'),
+                icon: 'preview',
+                isPrimary: true,
+                action: (row) => viewSummary(row.id, SupplierSummary, 'md-width'),
+            },
+        ],
+    },
 ]);
 </script>
 <template>
--- a/src/pages/Ticket/TicketAdvance.vue
+++ b/src/pages/Ticket/TicketAdvance.vue
@ -456,6 +456,7 @@ watch(
            :pagination="{ rowsPerPage: 0 }"
            :no-data-label="t('globals.noResults')"
            :right-search="false"
+            :order="['futureTotalWithVat ASC']"            
            auto-load
            :disable-option="{ card: true }"
        >
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@ -214,6 +214,7 @@ const columns = computed(() => [
            {
                title: t('components.smartCard.viewSummary'),
                icon: 'preview',
+                isPrimary: true,
                action: (row, evt) => {
                    if (evt && evt.ctrlKey) {
                        const url = router.resolve({
--- a/src/pages/Worker/Card/WorkerBusiness.vue
+++ b/src/pages/Worker/Card/WorkerBusiness.vue
@ -35,6 +35,22 @@ async function reactivateWorker() {
    }
 }
 const columns = computed(() => [
+    {
+        name: 'id',
+        label: t('Id'),
+        align: 'left',
+        isId: true,
+        cardVisible: true,
+        width: '40px',
+    },
+    {
+        name: 'isHourlyLabor',
+        label: t('worker.business.tableVisibleColumns.hourlyLabor'),
+        align: 'left',
+        component: 'checkbox',
+        cardVisible: true,
+        width: '60px',
+    },
    {
        name: 'started',
        label: t('worker.business.tableVisibleColumns.started'),
@ -194,6 +210,20 @@ const columns = computed(() => [
        format: ({ workerBusinessTypeName }, dashIfEmpty) =>
            dashIfEmpty(workerBusinessTypeName),
    },
+    {
+        align: 'left',
+        name: 'workerBusinessAgreementFk',
+        label: t('worker.business.tableVisibleColumns.workerBusinessAgreementName'),
+        component: 'select',
+        attrs: {
+            url: 'WorkerBusinessAgreements',
+            fields: ['id', 'name'],
+        },
+        cardVisible: true,
+        create: true,
+        format: ({ workerBusinessAgreementName }, dashIfEmpty) =>
+            dashIfEmpty(workerBusinessAgreementName),
+    },
    {
        align: 'left',
        label: t('worker.business.tableVisibleColumns.amount'),
@ -230,7 +260,7 @@ const columns = computed(() => [
        save-url="/Businesses/crud"
        :create="{
            urlCreate: `Workers/${entityId}/Business`,
-            title: 'Create business',
+            title: t('Create business'),
            onDataSaved: () => tableRef.reload(),
            formInitialData: {},
        }"
@ -248,4 +278,5 @@ const columns = computed(() => [
 <i18n>
 es:
    Do you want to reactivate the user?: desea reactivar el usuario?
+    Create business: Crear contrato
 </i18n>
--- a/src/pages/Worker/Card/WorkerCalendarItem.vue
+++ b/src/pages/Worker/Card/WorkerCalendarItem.vue
@ -79,7 +79,7 @@ const editEvent = async (event) => {
    };
    const { data } = await axios.patch(
        `Workers/${route.params.id}/updateAbsence`,
-        params
+        params,
    );

    if (data) emit('refresh');
@ -108,14 +108,14 @@ const handleDateSelected = (date) => {
    if (!event) createEvent(_date);
 };

-const handleEventSelected = (event, { year, month, day }) => {
+const handleEventSelected = async (event, { year, month, day }) => {
    if (!props.absenceType) {
        notify(t('Choose an absence type from the right menu'), 'warning');
        return;
    }

    const date = new Date(year, month - 1, day);
-    if (!event?.absenceId) createEvent(date);
+    if (!event?.absenceId) await createEvent(date);
    else if (event.type == props.absenceType.code) deleteEvent(event, date);
    else editEvent(event);
 };
--- a/src/stores/useStateStore.js
+++ b/src/stores/useStateStore.js
@ -7,7 +7,11 @@ export const useStateStore = defineStore('stateStore', () => {
    const rightDrawer = ref(false);
    const rightAdvancedDrawer = ref(false);
    const subToolbar = ref(false);
+    const cardDescriptor = ref(null);

+    function cardDescriptorChangeValue(descriptor) {
+        cardDescriptor.value = descriptor;
+    }
    function toggleLeftDrawer() {
        leftDrawer.value = !leftDrawer.value;
    }
@ -49,6 +53,8 @@ export const useStateStore = defineStore('stateStore', () => {
    }

    return {
+        cardDescriptor,
+        cardDescriptorChangeValue,
        leftDrawer,
        rightDrawer,
        rightAdvancedDrawer,
--- a/test/cypress/integration/claim/claimNotes.spec.js
+++ b/test/cypress/integration/claim/claimNotes.spec.js
@ -1,4 +1,4 @@
-describe('ClaimNotes', () => {
+describe.skip('ClaimNotes', () => {
    const saveBtn = '.q-field__append > .q-btn > .q-btn__content > .q-icon';
    const firstNote = '.q-infinite-scroll :nth-child(1) > .q-card__section--vert';
    beforeEach(() => {
--- a/test/cypress/integration/entry/entryList.spec.js
+++ b/test/cypress/integration/entry/entryList.spec.js
@ -67,7 +67,7 @@ describe('Entry', () => {

    it('Should notify when entry is lock by another user', () => {
        const checkLockMessage = () => {
-            cy.get('[data-cy="entry-lock-confirm"]').should('be.visible');
+            cy.get('[role="dialog"]').should('be.visible');
            cy.get('[data-cy="VnConfirm_message"] > span').should(
                'contain.text',
                'This entry has been locked by buyerNick',
--- a/test/cypress/integration/entry/stockBought.spec.js
+++ b/test/cypress/integration/entry/stockBought.spec.js
@ -16,9 +16,9 @@ describe('EntryStockBought', () => {
        cy.get('input[aria-label="Reserve"]').type('1');
        cy.get('input[aria-label="Date"]').eq(1).clear();
        cy.get('input[aria-label="Date"]').eq(1).type('01-01');
-        cy.get('input[aria-label="Buyer"]').type('buyerBossNick');
+        cy.get('input[aria-label="Buyer"]').type('itNick');
        cy.get('div[role="listbox"] > div > div[role="option"]')
-            .eq(0)
+            .eq(1)
            .should('be.visible')
            .click();

--- a/test/cypress/integration/route/routeAutonomous.spec.js
+++ b/test/cypress/integration/route/routeAutonomous.spec.js
@ -0,0 +1,121 @@
+describe('RouteAutonomous', () => {
+    const getLinkSelector = (colField) =>
+        `tr:first-child > [data-col-field="${colField}"] > .no-padding > .link`;
+
+    const selectors = {
+        reference: 'Reference_input',
+        date: 'tr:first-child > [data-col-field="dated"]',
+        total: '.value > .text-h6',
+        received: getLinkSelector('invoiceInFk'),
+        autonomous: getLinkSelector('supplierName'),
+        firstRowCheckbox: '.q-virtual-scroll__content tr:first-child .q-checkbox__bg',
+        secondRowCheckbox: '.q-virtual-scroll__content tr:nth-child(2) .q-checkbox__bg',
+        createInvoiceBtn: '.q-card > .q-btn',
+        saveFormBtn: 'FormModelPopup_save',
+        summaryIcon: 'tableAction-0',
+        summaryPopupBtn: '.header > :nth-child(2) > .q-btn__content > .q-icon',
+        summaryHeader: '.summaryHeader > :nth-child(2)',
+        descriptorHeader: '.summaryHeader > div',
+        descriptorTitle: '.q-item__label--header > .title > span',
+        summaryGoToSummaryBtn: '.header > .q-icon',
+        descriptorGoToSummaryBtn: '.descriptor > .header > a[href] > .q-btn',
+    };
+
+    const data = {
+        reference: 'Test invoice',
+        total: '€206.40',
+        supplier: 'PLANTS SL',
+        route: 'first route',
+    };
+
+    const summaryUrl = '/summary';
+    const dataSaved = 'Data saved';
+
+    beforeEach(() => {
+        cy.viewport(1920, 1080);
+        cy.login('developer');
+        cy.visit(`/#/route/agency-term`);
+        cy.typeSearchbar('{enter}');
+    });
+
+    it('Should list autonomous routes', () => {
+        cy.get('.q-table')
+            .children()
+            .should('be.visible')
+            .should('have.length.greaterThan', 0);
+    });
+
+    it('Should create invoice in to selected route', () => {
+        cy.get(selectors.firstRowCheckbox).click();
+        cy.get(selectors.createInvoiceBtn).click();
+        cy.dataCy(selectors.reference).type(data.reference);
+        cy.get('.q-file').selectFile('test/cypress/fixtures/image.jpg', {
+            force: true,
+        });
+        cy.dataCy(selectors.saveFormBtn).click();
+        cy.checkNotification(dataSaved);
+        cy.typeSearchbar('{enter}');
+    });
+
+    it('Should display the total price of the selected rows', () => {
+        cy.get(selectors.firstRowCheckbox).click();
+        cy.get(selectors.secondRowCheckbox).click();
+        cy.validateContent(selectors.total, data.total);
+    });
+
+    it('Should redirect to the summary when clicking a route', () => {
+        cy.get(selectors.date).click();
+        cy.get(selectors.summaryHeader).should('contain', data.route);
+        cy.url().should('include', summaryUrl);
+    });
+
+    describe('Received pop-ups', () => {
+        it('Should redirect to invoice in summary from the received descriptor pop-up', () => {
+            cy.get(selectors.received).click();
+            cy.validateContent(selectors.descriptorTitle, data.reference);
+            cy.get(selectors.descriptorGoToSummaryBtn).click();
+            cy.get(selectors.descriptorHeader).should('contain', data.supplier);
+            cy.url().should('include', summaryUrl);
+        });
+
+        it('Should redirect to the invoiceIn summary from summary pop-up from the received descriptor pop-up', () => {
+            cy.get(selectors.received).click();
+            cy.validateContent(selectors.descriptorTitle, data.reference);
+            cy.get(selectors.summaryPopupBtn).click();
+            cy.get(selectors.descriptorHeader).should('contain', data.supplier);
+            cy.get(selectors.summaryGoToSummaryBtn).click();
+            cy.get(selectors.descriptorHeader).should('contain', data.supplier);
+            cy.url().should('include', summaryUrl);
+        });
+    });
+
+    describe('Autonomous pop-ups', () => {
+        it('Should redirect to the supplier summary from the received descriptor pop-up', () => {
+            cy.get(selectors.autonomous).click();
+            cy.validateContent(selectors.descriptorTitle, data.supplier);
+            cy.get(selectors.descriptorGoToSummaryBtn).click();
+            cy.get(selectors.summaryHeader).should('contain', data.supplier);
+            cy.url().should('include', summaryUrl);
+        });
+
+        it('Should redirect to the supplier summary from summary pop-up from the autonomous descriptor pop-up', () => {
+            cy.get(selectors.autonomous).click();
+            cy.get(selectors.descriptorTitle).should('contain', data.supplier);
+            cy.get(selectors.summaryPopupBtn).click();
+            cy.get(selectors.summaryHeader).should('contain', data.supplier);
+            cy.get(selectors.summaryGoToSummaryBtn).click();
+            cy.get(selectors.summaryHeader).should('contain', data.supplier);
+            cy.url().should('include', summaryUrl);
+        });
+    });
+
+    describe('Route pop-ups', () => {
+        it('Should redirect to the summary from the route summary pop-up', () => {
+            cy.dataCy(selectors.summaryIcon).first().click();
+            cy.get(selectors.summaryHeader).should('contain', data.route);
+            cy.get(selectors.summaryGoToSummaryBtn).click();
+            cy.get(selectors.summaryHeader).should('contain', data.route);
+            cy.url().should('include', summaryUrl);
+        });
+    });
+});
--- a/test/cypress/integration/route/vehicle/vehicleList.spec.js
+++ b/test/cypress/integration/route/vehicle/vehicleList.spec.js
@ -0,0 +1,59 @@
+describe('Vehicle list', () => {
+    const selectors = {
+        saveFormBtn: 'FormModelPopup_save',
+        summaryPopupBtn: 'tr:last-child > .q-table--col-auto-width > .q-btn',
+        summaryGoToSummaryBtn: '.header > .q-icon',
+        summaryHeader: '.summaryHeader > div',
+        numberPlate: 'tr:last-child > [data-col-field="numberPlate"] > .no-padding',
+    };
+
+    const data = {
+        'Nº Plate': { val: '9465-LPA' },
+        'Trade Mark': { val: 'WAYNE INDUSTRIES' },
+        Model: { val: 'BATREMOLQUE' },
+        Type: { val: 'remolque', type: 'select' },
+        Warehouse: { val: 'Warehouse One', type: 'select' },
+        Country: { val: 'Portugal', type: 'select' },
+        Description: { val: 'Exclusive for batpod transport' },
+    };
+
+    const expected = data['Nº Plate'].val;
+    const summaryUrl = '/summary';
+
+    beforeEach(() => {
+        cy.viewport(1920, 1080);
+        cy.login('developer');
+        cy.visit(`/#/route/vehicle/list`);
+        cy.typeSearchbar('{enter}');
+    });
+
+    it('should list vehicles', () => {
+        cy.get('.q-table')
+            .children()
+            .should('be.visible')
+            .should('have.length.greaterThan', 0);
+    });
+
+    it('Should add new vehicle', () => {
+        cy.addBtnClick();
+        cy.fillInForm(data);
+        cy.dataCy(selectors.saveFormBtn).should('be.visible').click();
+
+        cy.checkNotification('Data created');
+        cy.get(selectors.summaryHeader).should('contain', expected);
+        cy.url().should('include', summaryUrl);
+    });
+
+    it('should open summary by clicking a vehicle', () => {
+        cy.get(selectors.numberPlate).click();
+        cy.get(selectors.summaryHeader).should('contain', expected);
+        cy.url().should('include', summaryUrl);
+    });
+
+    it('should redirect to vehicle summary when click summary icon on summary pop-up', () => {
+        cy.get(selectors.summaryPopupBtn).click();
+        cy.get(selectors.summaryHeader).should('contain', expected);
+        cy.get(selectors.summaryGoToSummaryBtn).click();
+        cy.url().should('include', summaryUrl);
+    });
+});