Merge branch 'dev' into 7136_vnselectFilter_paginate

CHANGELOG.md

@@ -5,6 +5,8 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2418.01]
+
 ## [2416.01] - 2024-04-18
 
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "24.16.0",
+    "version": "24.18.0",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",
@@ -32,6 +32,7 @@
         "@intlify/unplugin-vue-i18n": "^0.8.1",
         "@pinia/testing": "^0.1.2",
         "@quasar/app-vite": "^1.7.3",
+        "@quasar/quasar-app-extension-qcalendar": "4.0.0-beta.15",
         "@quasar/quasar-app-extension-testing-unit-vitest": "^0.4.0",
         "@vue/test-utils": "^2.4.4",
         "autoprefixer": "^10.4.14",

pnpm-lock.yaml

@@ -49,6 +49,9 @@ devDependencies:
   '@quasar/app-vite':
     specifier: ^1.7.3
     version: 1.7.3(eslint@8.56.0)(pinia@2.1.7)(quasar@2.14.5)(vue-router@4.2.5)(vue@3.4.19)
+  '@quasar/quasar-app-extension-qcalendar':
+    specifier: 4.0.0-beta.15
+    version: 4.0.0-beta.15
   '@quasar/quasar-app-extension-testing-unit-vitest':
     specifier: ^0.4.0
     version: 0.4.0(@vue/test-utils@2.4.4)(quasar@2.14.5)(vite@5.1.4)(vitest@0.31.4)(vue@3.4.19)
@@ -912,6 +915,13 @@ packages:
     resolution: {integrity: sha512-SlOhwzXyPQHWgQIS2ncyDdYdksCJvUYNtgsDQqzAKEG3r3d/ejOxvThle79HTK3Q6HB+gQWFG21Ux00Osr5XSw==}
     dev: false
 
+  /@quasar/quasar-app-extension-qcalendar@4.0.0-beta.15:
+    resolution: {integrity: sha512-i6hQkcP70LXLfVMPZMKQjSg3681gjZmASV3vq6ULzc0LhtBiPneLdVNNtH2itkWxAmaUj+1heQDI5Pa0F7VKLQ==}
+    engines: {node: '>= 10.0.0', npm: '>= 5.6.0', yarn: '>= 1.6.0'}
+    dependencies:
+      '@quasar/quasar-ui-qcalendar': 4.0.0-beta.19
+    dev: true
+
   /@quasar/quasar-app-extension-testing-unit-vitest@0.4.0(@vue/test-utils@2.4.4)(quasar@2.14.5)(vite@5.1.4)(vitest@0.31.4)(vue@3.4.19):
     resolution: {integrity: sha512-eyzdUdmZiCueNS+5nedjMmzdbpCetSrtdGIwW6KplW1dTzRbLiNvYUjpBOxQGmJCgEhWy9zuswJ7MZ/bTql24Q==}
     engines: {node: '>= 12.22.1', npm: '>= 6.14.12', yarn: '>= 1.17.3'}
@@ -939,6 +949,10 @@ packages:
       - vite
     dev: true
 
+  /@quasar/quasar-ui-qcalendar@4.0.0-beta.19:
+    resolution: {integrity: sha512-BT0G2JjgKl1bqNrY5utcYeoy8gK+U9k3Pz1YDi1OB265W/jHU6nFoWMEUdY3JdvMccwkXTL2DLVyl3eqAUyLyg==}
+    dev: true
+
   /@quasar/render-ssr-error@1.0.3:
     resolution: {integrity: sha512-A8RF99q6/sOSe1Ighnh5syEIbliD3qUYEJd2HyfFyBPSMF+WYGXon5dmzg4nUoK662NgOggInevkDyBDJcZugg==}
     engines: {node: '>= 16'}

quasar.config.js

@@ -93,13 +93,11 @@ module.exports = configure(function (/* ctx */) {
                 [
                     VueI18nPlugin({
                         runtimeOnly: false,
+                        include: [
+                            path.resolve(__dirname, './src/i18n/locale/**'),
+                            path.resolve(__dirname, './src/pages/**/locale/**'),
+                        ],
                     }),
-                    {
-                        // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
-                        // compositionOnly: false,
-                        // you need to set i18n resource including paths !
-                        include: path.resolve(__dirname, './src/i18n/**'),
-                    },
                 ],
             ],
         },

quasar.extensions.json

@@ -1,7 +1,6 @@
 {
-  "@quasar/testing-unit-vitest": {
-    "options": [
-      "scripts"
-    ]
-  }
-}
+    "@quasar/testing-unit-vitest": {
+        "options": ["scripts"]
+    },
+    "@quasar/qcalendar": {}
+}

src/components/FormModelPopup.vue

@@ -78,6 +78,7 @@ defineExpose({
             <div class="q-mt-lg row justify-end">
                 <QBtn
                     :label="t('globals.save')"
+                    :title="t('globals.save')"
                     type="submit"
                     color="primary"
                     :disabled="isLoading"
@@ -85,6 +86,7 @@ defineExpose({
                 />
                 <QBtn
                     :label="t('globals.cancel')"
+                    :title="t('globals.cancel')"
                     type="reset"
                     color="primary"
                     flat

src/components/ui/CardDescriptor.vue

@@ -47,7 +47,7 @@ const arrayData = useArrayData($props.dataKey || $props.module, {
     skip: 0,
 });
 const { store } = arrayData;
-const entity = computed(() => store.data);
+const entity = computed(() =>Array.isArray( store.data) ? store.data[0] : store.data);
 const isLoading = ref(false);
 
 defineExpose({
@@ -67,7 +67,7 @@ async function getData() {
     try {
         const { data } = await arrayData.fetch({ append: false, updateRouter: false });
         state.set($props.dataKey, data);
-        emit('onFetch', data);
+        emit('onFetch', Array.isArray(data) ? data[0] : data);
     } finally {
         isLoading.value = false;
     }

src/components/ui/CardSummary.vue

@@ -32,7 +32,7 @@ const arrayData = useArrayData(props.dataKey || route.meta.moduleName, {
     skip: 0,
 });
 const { store } = arrayData;
-const entity = computed(() => store.data);
+const entity = computed(() => Array.isArray(store.data) ? store.data[0] : store.data);
 const isLoading = ref(false);
 
 defineExpose({

src/components/ui/QCalendarMonthWrapper.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { computed } from 'vue';
+import { useQuasar } from 'quasar';
+import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.sass';
+
+const $props = defineProps({
+    bordered: {
+        type: Boolean,
+        default: false,
+    },
+    transparentBackground: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const $q = useQuasar();
+
+const containerClasses = computed(() => {
+    const classes = ['main-container-background'];
+    if ($props.bordered) classes.push('--bordered');
+    if ($props.transparentBackground) classes.push('transparent-background');
+    else classes.push($q.dark.isActive ? '--dark' : '--light');
+    return classes;
+});
+</script>
+
+<template>
+    <div :class="containerClasses">
+        <div class="nav-container row"><slot name="header" /></div>
+        <slot name="calendar" />
+    </div>
+</template>
+
+<style lang="scss">
+.main-container-background {
+    --calendar-current-background-dark: transparent;
+
+    &.--dark {
+        background-color: var(--calendar-background-dark);
+    }
+
+    &.--light {
+        background-color: var(--calendar-background);
+    }
+
+    &.--bordered {
+        border: 1px solid black;
+    }
+}
+
+.transparent-background {
+    --calendar-background-dark: transparent;
+    --calendar-background: transparent;
+    --calendar-outside-background-dark: transparent;
+}
+
+.nav-container {
+    display: flex;
+    align-items: center;
+
+    &.--bordered {
+        border: 1px solid black;
+    }
+}
+</style>

src/components/ui/VnPaginate.vue

@@ -61,7 +61,6 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['onFetch', 'onPaginate']);
-defineExpose({ fetch });
 const isLoading = ref(false);
 const pagination = ref({
     sortBy: props.order,
@@ -78,6 +77,7 @@ const arrayData = useArrayData(props.dataKey, {
     userParams: props.userParams,
     exprBuilder: props.exprBuilder,
 });
+const hasMoreData = ref();
 const store = arrayData.store;
 
 onMounted(() => {
@@ -91,6 +91,10 @@ watch(
     }
 );
 
+const addFilter = async (filter, params) => {
+    await arrayData.addFilter({ filter, params });
+};
+
 async function fetch() {
     await arrayData.fetch({ append: false });
     if (!arrayData.hasMoreData.value) {
@@ -106,7 +110,6 @@ async function paginate() {
 
     isLoading.value = true;
     await arrayData.loadMore();
-
     if (!arrayData.hasMoreData.value) {
         if (store.userParamsChanged) arrayData.hasMoreData.value = true;
         store.userParamsChanged = false;
@@ -124,6 +127,7 @@ async function paginate() {
 }
 
 function endPagination() {
+    hasMoreData.value = arrayData.hasMoreData.value;
     isLoading.value = false;
     emit('onFetch', store.data);
     emit('onPaginate');
@@ -142,6 +146,8 @@ async function onLoad(index, done) {
     if (store.userParamsChanged) isDone = !arrayData.hasMoreData.value;
     done(isDone);
 }
+
+defineExpose({ fetch, addFilter });
 </script>
 
 <template>
@@ -190,10 +196,7 @@ async function onLoad(index, done) {
             <QSpinner color="orange" size="md" />
         </div>
     </QInfiniteScroll>
-    <div
-        v-if="!isLoading && arrayData.hasMoreData"
-        class="w-full flex justify-center q-mt-md"
-    >
+    <div v-if="!isLoading && hasMoreData" class="w-full flex justify-center q-mt-md">
         <QBtn color="primary" :label="t('Load more data')" @click="paginate()" />
     </div>
 </template>

src/components/ui/VnRow.vue

@@ -1,17 +1,17 @@
 <template>
-    <div id="row" class="q-gutter-md q-mb-md">
+    <div class="vn-row q-gutter-md q-mb-md">
         <slot></slot>
     </div>
 </template>
 <style lang="scss" scopped>
-#row {
+.vn-row {
     display: flex;
     > * {
         flex: 1;
     }
 }
 @media screen and (max-width: 800px) {
-    #row {
+    .vn-row {
         flex-direction: column;
     }
 }

src/components/ui/VnUserLink.vue

@@ -1,5 +1,6 @@
 <script setup>
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import { useI18n } from 'vue-i18n';
 
 const $props = defineProps({

src/composables/useArrayData.js

@@ -144,6 +144,8 @@ export function useArrayData(key, userOptions) {
         store.userParams = userParams;
         store.skip = 0;
         store.filter.skip = 0;
+        page.value = 1;
+
         await fetch({ append: false });
         return { filter, params };
     }

src/composables/useSession.js

@@ -3,31 +3,29 @@ import { useRole } from './useRole';
 import { useUserConfig } from './useUserConfig';
 import axios from 'axios';
 import useNotify from './useNotify';
+const TOKEN_MULTIMEDIA = 'tokenMultimedia';
+const TOKEN = 'token';
 
 export function useSession() {
     const { notify } = useNotify();
 
     function getToken() {
-        const localToken = localStorage.getItem('token');
-        const sessionToken = sessionStorage.getItem('token');
+        const localToken = localStorage.getItem(TOKEN);
+        const sessionToken = sessionStorage.getItem(TOKEN);
 
         return localToken || sessionToken || '';
     }
     function getTokenMultimedia() {
-        const localTokenMultimedia = localStorage.getItem('token'); // Temporal
-        const sessionTokenMultimedia = sessionStorage.getItem('token'); // Temporal
+        const localTokenMultimedia = localStorage.getItem(TOKEN_MULTIMEDIA);
+        const sessionTokenMultimedia = sessionStorage.getItem(TOKEN_MULTIMEDIA);
 
         return localTokenMultimedia || sessionTokenMultimedia || '';
     }
 
     function setToken(data) {
-        if (data.keepLogin) {
-            localStorage.setItem('token', data.token);
-            localStorage.setItem('tokenMultimedia', data.tokenMultimedia);
-        } else {
-            sessionStorage.setItem('token', data.token);
-            sessionStorage.setItem('tokenMultimedia', data.tokenMultimedia);
-        }
+        const storage = data.keepLogin ? localStorage : sessionStorage;
+        storage.setItem(TOKEN, data.token);
+        storage.setItem(TOKEN_MULTIMEDIA, data.tokenMultimedia);
     }
     async function destroyToken(url, storage, key) {
         if (storage.getItem(key)) {
@@ -71,8 +69,8 @@ export function useSession() {
     }
 
     function isLoggedIn() {
-        const localToken = localStorage.getItem('token');
-        const sessionToken = sessionStorage.getItem('token');
+        const localToken = localStorage.getItem(TOKEN);
+        const sessionToken = sessionStorage.getItem(TOKEN);
 
         return !!(localToken || sessionToken);
     }

src/css/app.scss

@@ -1,5 +1,6 @@
 // app global css in SCSS form
 @import './icons.scss';
+@import '@quasar/quasar-ui-qcalendar/src/QCalendarMonth.sass';
 
 body.body--light {
     --font-color: black;
@@ -159,4 +160,15 @@ input::-webkit-inner-spin-button {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
-}
+}
+
+// Clases para modificar el color de fecha seleccionada en componente QCalendarMonth
+.q-dark div .q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
+    background-color: $primary !important;
+    color: white !important;
+}
+
+.q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
+    background-color: $primary !important;
+    color: white !important;
+}

src/i18n/index.js

@@ -1,9 +1,28 @@
-import en from './en';
-import es from './es';
-export const localeEquivalence = {
-     'en':'en-GB'
+const files = import.meta.glob(`./locale/*.yml`);
+const modules = import.meta.glob(`../pages/**/locale/*.yml`);
+
+const translations = {};
+
+for (const file in files) {
+    const lang = file.split('/').at(2).split('.')[0];
+
+    files[file]()
+        .then((g) => {
+            translations[lang] = g.default;
+        })
+        .finally(() => {
+            const actualLang = lang + '.yml';
+            for (const module in modules) {
+                if (!module.endsWith(actualLang)) continue;
+                modules[module]().then((t) => {
+                    Object.assign(translations[lang], t.default);
+                })
+            }
+    });
 }
-export default {
-    en: en,
-    es: es,
+
+export const localeEquivalence = {
+    en: 'en-GB',
 };
+
+export default translations;

src/pages/Claim/Card/ClaimSummary.vue

@@ -12,6 +12,7 @@ import ClaimNotes from 'src/pages/Claim/Card/ClaimNotes.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -177,7 +178,7 @@ function openDialog(dmsId) {
         @on-fetch="getClaimDms"
     >
         <template #header="{ entity: { claim } }">
-            {{ claim.id }} - {{ claim.client.name }}
+            {{ claim.id }} - {{ claim.client.name }} ({{ claim.client.id }})
         </template>
         <template #body="{ entity: { claim, salesClaimed, developments } }">
             <QCard class="vn-one">
@@ -214,10 +215,10 @@ function openDialog(dmsId) {
                 </VnLv>
                 <VnLv :label="t('claim.summary.customer')">
                     <template #value>
-                        <VnUserLink
-                            :name="claim.client?.name"
-                            :worker-id="claim.client?.id"
-                        />
+                        <span class="link cursor-pointer">
+                            {{ claim.client?.name }}
+                            <CustomerDescriptorProxy :id="claim.clientFk" />
+                        </span>
                     </template>
                 </VnLv>
                 <VnLv

src/pages/Customer/CustomerFilter.vue

@@ -48,13 +48,17 @@ const zones = ref();
             </QItem>
             <QItem class="q-mb-sm">
                 <QItemSection>
-                    <VnInput :label="t('Name')" v-model="params.name" is-outlined />
+                    <VnInput
+                        :label="t('customerFilter.filter.name')"
+                        v-model="params.name"
+                        is-outlined
+                    />
                 </QItemSection>
             </QItem>
             <QItem class="q-mb-sm">
                 <QItemSection>
                     <VnInput
-                        :label="t('Social Name')"
+                        :label="t('customerFilter.filter.socialName')"
                         v-model="params.socialName"
                         is-outlined
                     />
@@ -170,8 +174,6 @@ en:
     params:
         search: Contains
         fi: FI
-        name: Name
-        socialName: Social Name
         salesPersonFk: Salesperson
         provinceFk: Province
         city: City
@@ -183,8 +185,6 @@ es:
     params:
         search: Contiene
         fi: NIF
-        name: Nombre
-        socialName: Razón Social
         salesPersonFk: Comercial
         provinceFk: Provincia
         city: Ciudad
@@ -193,8 +193,6 @@ es:
         zoneFk: Zona
         postcode: CP
     FI: NIF
-    Name: Nombre
-    Social Name: Razón social
     Salesperson: Comercial
     Province: Provincia
     City: Ciudad

src/pages/Customer/locale/en.yml

@@ -0,0 +1,4 @@
+customerFilter:
+    filter:
+        name: 'Name'
+        socialName: 'Social name'

src/pages/Customer/locale/es.yml

@@ -0,0 +1,4 @@
+customerFilter:
+    filter:
+        name: 'Nombre'
+        socialName: 'Razón Social'

src/pages/Entry/Card/EntryBuys.vue

@@ -268,16 +268,11 @@ const importBuys = () => {
 
 const toggleGroupingMode = async (buy, mode) => {
     try {
-        const grouping = 1;
-        const packing = 2;
-        const groupingMode = mode === 'grouping' ? grouping : packing;
-
-        const newGroupingMode = buy.groupingMode === groupingMode ? 0 : groupingMode;
-
+        const groupingMode = mode === 'grouping' ? mode : 'packing';
+        const newGroupingMode = buy.groupingMode === groupingMode ? null : groupingMode;
         const params = {
             groupingMode: newGroupingMode,
         };
-
         await axios.patch(`Buys/${buy.id}`, params);
         buy.groupingMode = newGroupingMode;
     } catch (err) {
@@ -287,9 +282,9 @@ const toggleGroupingMode = async (buy, mode) => {
 
 const lockIconType = (groupingMode, mode) => {
     if (mode === 'packing') {
-        return groupingMode === 2 ? 'lock' : 'lock_open';
+        return groupingMode === 'packing' ? 'lock' : 'lock_open';
     } else {
-        return groupingMode === 1 ? 'lock' : 'lock_open';
+        return groupingMode === 'grouping' ? 'lock' : 'lock_open';
     }
 };
 </script>

src/pages/Entry/Card/EntryNotes.vue

@@ -1,19 +1,19 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
 import CrudModel from 'components/CrudModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 
-const route = useRoute();
+const { params } = useRoute();
 const { t } = useI18n();
 
 const entryObservationsRef = ref(null);
 const entryObservationsOptions = ref([]);
+const selected = ref([]);
 
 const sortEntryObservationOptions = (data) => {
     entryObservationsOptions.value = [...data].sort((a, b) =>
@@ -24,6 +24,29 @@ const sortEntryObservationOptions = (data) => {
 onMounted(() => {
     if (entryObservationsRef.value) entryObservationsRef.value.reload();
 });
+
+const columns = computed(() => [
+    {
+        name: 'observationType',
+        label: t('entry.notes.observationType'),
+        field: (row) => row.observationTypeFk,
+        sortable: true,
+        options: entryObservationsOptions.value,
+        required: true,
+        model: 'observationTypeFk',
+        optionValue: 'id',
+        optionLabel: 'description',
+        tabIndex: 1,
+        align: 'left',
+    },
+    {
+        name: 'description',
+        label: t('globals.description'),
+        field: (row) => row.description,
+        tabIndex: 2,
+        align: 'left',
+    },
+]);
 </script>
 <template>
     <FetchData
@@ -37,65 +60,90 @@ onMounted(() => {
         model="EntryAccount"
         :filter="{
             fields: ['id', 'entryFk', 'observationTypeFk', 'description'],
-            where: { entryFk: route.params.id },
+            where: { entryFk: params.id },
         }"
         ref="entryObservationsRef"
-        :default-remove="false"
-        :data-required="{ entryFk: route.params.id }"
+        :data-required="{ entryFk: params.id }"
+        v-model:selected="selected"
     >
         <template #body="{ rows, validate }">
-            <QCard class="q-pa-md">
-                <VnRow
-                    v-for="(row, index) in rows"
-                    :key="index"
-                    class="row q-gutter-md q-mb-md"
-                >
-                    <VnSelectFilter
-                        :label="t('entry.notes.observationType')"
-                        v-model="row.observationTypeFk"
-                        :options="entryObservationsOptions"
-                        :disable="!!row.id"
-                        option-label="description"
-                        option-value="id"
-                        hide-selected
-                    />
-
-                    <VnInput
-                        :label="t('globals.description')"
-                        v-model="row.description"
-                        :rules="validate('EntryObservation.description')"
-                    />
-
-                    <div class="row justify-center items-center">
-                        <QIcon
-                            name="delete"
-                            size="sm"
-                            class="cursor-pointer"
-                            color="primary"
-                            @click="entryObservationsRef.remove([row])"
-                        >
-                            <QTooltip>
-                                {{ t('Remove note') }}
-                            </QTooltip>
-                        </QIcon>
+            <QTable
+                v-model:selected="selected"
+                :columns="columns"
+                :rows="rows"
+                :pagination="{ rowsPerPage: 0 }"
+                row-key="$index"
+                selection="multiple"
+                hide-pagination
+                :grid="$q.screen.lt.md"
+                table-header-class="text-left"
+            >
+                <template #body-cell-observationType="{ row, col }">
+                    <QTd>
+                        <VnSelectFilter
+                            v-model="row[col.model]"
+                            :options="col.options"
+                            :option-value="col.optionValue"
+                            :option-label="col.optionLabel"
+                            :autofocus="col.tabIndex == 1"
+                            input-debounce="0"
+                            hide-selected
+                            :required="true"
+                        />
+                    </QTd>
+                </template>
+                <template #body-cell-description="{ row, col }">
+                    <QTd>
+                        <VnInput
+                            :label="t('globals.description')"
+                            v-model="row[col.name]"
+                            :rules="validate('EntryObservation.description')"
+                        />
+                    </QTd>
+                </template>
+                <template #item="props">
+                    <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
+                        <QCard bordered flat>
+                            <QCardSection>
+                                <QCheckbox v-model="props.selected" dense />
+                            </QCardSection>
+                            <QSeparator />
+                            <QList dense>
+                                <QItem>
+                                    <QItemSection>
+                                        <VnSelectFilter
+                                            v-model="props.row.observationTypeFk"
+                                            :options="entryObservationsOptions"
+                                            option-value="id"
+                                            option-label="description"
+                                            input-debounce="0"
+                                            hide-selected
+                                            :required="true"
+                                        />
+                                    </QItemSection>
+                                </QItem>
+                                <QItem>
+                                    <QItemSection>
+                                        <VnInput
+                                            :label="t('globals.description')"
+                                            v-model="props.row.description"
+                                            :rules="
+                                                validate('EntryObservation.description')
+                                            "
+                                        />
+                                    </QItemSection>
+                                </QItem>
+                            </QList>
+                        </QCard>
                     </div>
-                </VnRow>
-                <QIcon
-                    name="add"
-                    size="sm"
-                    class="cursor-pointer"
-                    color="primary"
-                    @click="entryObservationsRef.insert()"
-                >
-                    <QTooltip>
-                        {{ t('Add note') }}
-                    </QTooltip>
-                </QIcon>
-            </QCard>
+                </template>
+            </QTable>
         </template>
     </CrudModel>
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <QBtn fab color="primary" icon="add" @click="entryObservationsRef.insert()" />
+    </QPageSticky>
 </template>
-
 <i18n>
     es:
         Add note: Añadir nota

src/pages/Entry/EntryFilter.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { onMounted } from 'vue';
+import { useStateStore } from 'stores/useStateStore';
 
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
@@ -19,6 +21,11 @@ const props = defineProps({
 const currenciesOptions = ref([]);
 const companiesOptions = ref([]);
 const suppliersOptions = ref([]);
+
+const stateStore = useStateStore();
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+});
 </script>
 
 <template>
@@ -58,7 +65,7 @@ const suppliersOptions = ref([]);
                 <QItemSection>
                     <VnInput
                         v-model="params.search"
-                        :label="t('params.search')"
+                        :label="t('entryFilter.filter.search')"
                         is-outlined
                     />
                 </QItemSection>
@@ -67,7 +74,7 @@ const suppliersOptions = ref([]);
                 <QItemSection>
                     <VnInput
                         v-model="params.reference"
-                        :label="t('params.reference')"
+                        :label="t('entryFilter.filter.reference')"
                         is-outlined
                     />
                 </QItemSection>
@@ -210,8 +217,7 @@ const suppliersOptions = ref([]);
 <i18n>
 en:
     params:
-        search: General search
-        reference: Reference
+        
         invoiceNumber: Invoice number
         travelFk: Travel
         companyFk: Company
@@ -225,8 +231,7 @@ en:
         isOrdered: Ordered
 es:
     params:
-        search: Búsqueda general
-        reference: Referencia
+       
         invoiceNumber: Núm. factura
         travelFk: Envío
         companyFk: Empresa

src/pages/Entry/locale/en.yml

@@ -0,0 +1,8 @@
+entryList:
+    list:
+        inventoryEntry: 'Inventory entry'
+        virtualEntry: 'Virtual entry'
+entryFilter:
+    filter:
+        search: 'General search'
+        reference: 'Reference'

src/pages/Entry/locale/es.yml

@@ -0,0 +1,8 @@
+entryList:
+    list:
+        inventoryEntry: 'Es inventario'
+        virtualEntry: 'Es una redada'
+entryFilter:
+    filter:
+        search: 'Búsqueda general'
+        reference: 'Referencia'

src/pages/Item/Card/ItemBasicData.vue

@@ -0,0 +1 @@
+<template>Item basic data</template>

src/pages/Item/ItemCreate.vue

@@ -0,0 +1,170 @@
+<script setup>
+import { reactive, ref, onBeforeMount } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+
+import axios from 'axios';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const newItemForm = reactive({});
+
+const originsOptions = ref([]);
+const tagsOptions = ref([]);
+const validPriorities = ref([]);
+const itemTypesOptions = ref([]);
+const intrastatsOptions = ref([]);
+
+const fetchDefaultPriorityTag = async () => {
+    const filter = {
+        fields: ['defaultPriority', 'defaultTag', 'validPriorities'],
+        limit: 1,
+    };
+    const { data } = await axios.get(`ItemConfigs`, { filter });
+    if (!data) return;
+
+    const dataRow = data[0];
+    validPriorities.value = [...dataRow.validPriorities];
+    newItemForm.priority = dataRow.defaultPriority;
+    newItemForm.tag = dataRow.defaultTag;
+};
+
+const redirectToItemBasicData = (_, { id }) => {
+    router.push({ name: 'ItemBasicData', params: { id } });
+};
+
+onBeforeMount(async () => {
+    await fetchDefaultPriorityTag();
+});
+</script>
+
+<template>
+    <FetchData
+        url="Origins"
+        @on-fetch="(data) => (originsOptions = data)"
+        :filter="{ order: 'name' }"
+        auto-load
+    />
+    <FetchData
+        url="Tags"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        @on-fetch="(data) => (tagsOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="ItemTypes"
+        :filter="{
+            fields: ['id', 'code', 'categoryFk', 'name'],
+            include: 'category',
+            order: 'name ASC',
+        }"
+        @on-fetch="(data) => (itemTypesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Intrastats"
+        :filter="{ fields: ['id', 'description'], order: 'description ASC' }"
+        @on-fetch="(data) => (intrastatsOptions = data)"
+        auto-load
+    />
+    <QPage>
+        <VnSubToolbar />
+        <FormModel
+            url-create="Items/new"
+            model="item"
+            :form-initial-data="newItemForm"
+            observe-form-changes
+            @on-data-saved="redirectToItemBasicData"
+        >
+            <template #form="{ data }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <VnInput
+                        v-model="data.provisionalName"
+                        :label="t('item.create.name')"
+                    />
+                    <VnSelectFilter
+                        :label="t('item.create.tag')"
+                        v-model="data.tag"
+                        :options="tagsOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                    />
+                    <VnSelectFilter
+                        :label="t('item.create.priority')"
+                        v-model="data.priority"
+                        :options="validPriorities"
+                        option-value="priority"
+                        option-label="priority"
+                        hide-selected
+                    />
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <VnSelectFilter
+                        :label="t('item.create.type')"
+                        v-model="data.typeFk"
+                        :options="itemTypesOptions"
+                        option-label="name"
+                        option-value="id"
+                        hide-selected
+                    >
+                        <template #option="scope">
+                            <QItem class="column" v-bind="scope.itemProps">
+                                <QItemLabel class="row">
+                                    <span style="width: 3em">
+                                        {{ scope.opt?.code }}
+                                    </span>
+                                    <span>
+                                        {{ scope.opt?.name }}
+                                    </span>
+                                </QItemLabel>
+                                <QItemLabel v-if="scope.opt?.category" caption>
+                                    {{ scope.opt?.category?.name }}
+                                </QItemLabel>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                    <VnSelectFilter
+                        :label="t('item.create.intrastat')"
+                        v-model="data.intrastatFk"
+                        :options="intrastatsOptions"
+                        option-label="description"
+                        option-value="id"
+                        hide-selected
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>
+                                        {{ scope.opt?.description }}
+                                    </QItemLabel>
+                                    <QItemLabel caption>
+                                        #{{ scope.opt?.id }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <VnSelectFilter
+                        :label="t('item.create.origin')"
+                        v-model="data.originFk"
+                        :options="originsOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                    />
+                </VnRow>
+            </template>
+        </FormModel>
+    </QPage>
+</template>

src/pages/Item/ItemList.vue

@@ -1 +1,577 @@
-<template>Item list</template>
+<script setup>
+import { onMounted, ref, computed, reactive, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import ItemSummary from '../Item/Card/ItemSummary.vue';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { toDateFormat } from 'src/filters/date.js';
+import { useSession } from 'composables/useSession';
+import { dashIfEmpty } from 'src/filters';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { useVnConfirm } from 'composables/useVnConfirm';
+import axios from 'axios';
+
+const router = useRouter();
+const { getTokenMultimedia } = useSession();
+const token = getTokenMultimedia();
+const stateStore = useStateStore();
+const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
+const { openConfirmationModal } = useVnConfirm();
+
+const paginateRef = ref(null);
+const itemTypesOptions = ref([]);
+const originsOptions = ref([]);
+const buyersOptions = ref([]);
+const intrastatOptions = ref([]);
+const itemCategoriesOptions = ref([]);
+const visibleColumns = ref([]);
+const allColumnNames = ref([]);
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'category':
+            return { 'ic.name': value };
+        case 'buyerFk':
+            return { 'it.workerFk': value };
+        case 'grouping':
+            return { 'b.grouping': value };
+        case 'packing':
+            return { 'b.packing': value };
+        case 'origin':
+            return { 'ori.code': value };
+        case 'typeFk':
+            return { 'i.typeFk': value };
+        case 'intrastat':
+            return { 'intr.description': value };
+        case 'name':
+            return { 'i.name': { like: `%${value}%` } };
+        case 'producer':
+            return { 'pr.name': { like: `%${value}%` } };
+        case 'id':
+        case 'size':
+        case 'subname':
+        case 'isActive':
+        case 'weightByPiece':
+        case 'stemMultiplier':
+        case 'stems':
+            return { [`i.${param}`]: value };
+    }
+};
+
+const params = reactive({});
+
+const applyColumnFilter = async (col) => {
+    try {
+        const paramKey = col.columnFilter?.filterParamKey || col.field;
+        params[paramKey] = col.columnFilter.filterValue;
+        await paginateRef.value.addFilter(null, params);
+    } catch (err) {
+        console.error('Error applying column filter', err);
+    }
+};
+
+const getInputEvents = (col) => {
+    return col.columnFilter.type === 'select'
+        ? { 'update:modelValue': () => applyColumnFilter(col) }
+        : {
+              'keyup.enter': () => applyColumnFilter(col),
+          };
+};
+
+const columns = computed(() => [
+    {
+        label: '',
+        name: 'picture',
+        align: 'left',
+        columnFilter: null,
+    },
+    {
+        label: t('item.list.id'),
+        name: 'id',
+        field: 'id',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('item.list.grouping'),
+        field: 'grouping',
+        name: 'grouping',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('item.list.packing'),
+        field: 'packing',
+        name: 'packing',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('globals.description'),
+        field: 'name',
+        name: 'description',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('item.list.stems'),
+        field: 'stems',
+        name: 'stems',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('item.list.size'),
+        field: 'size',
+        name: 'size',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('item.list.typeName'),
+        field: 'typeName',
+        name: 'typeName',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelectFilter,
+            filterParamKey: 'typeFk',
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: itemTypesOptions.value,
+                'option-value': 'id',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
+    },
+
+    {
+        label: t('item.list.category'),
+        field: 'category',
+        name: 'category',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelectFilter,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: itemCategoriesOptions.value,
+                'option-value': 'name',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
+    },
+
+    {
+        label: t('item.list.intrastat'),
+        field: 'intrastat',
+        name: 'intrastat',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelectFilter,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: intrastatOptions.value,
+                'option-value': 'description',
+                'option-label': 'description',
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('item.list.origin'),
+        field: 'origin',
+        name: 'origin',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelectFilter,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: originsOptions.value,
+                'option-value': 'code',
+                'option-label': 'code',
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('item.list.userName'),
+        field: 'userName',
+        name: 'userName',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelectFilter,
+            filterParamKey: 'buyerFk',
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: buyersOptions.value,
+                'option-value': 'id',
+                'option-label': 'nickname',
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('item.list.weightByPiece'),
+        field: 'weightByPiece',
+        name: 'weightByPiece',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('item.list.stemMultiplier'),
+        field: 'stemMultiplier',
+        name: 'stemMultiplier',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('item.list.isActive'),
+        field: 'isActive',
+        name: 'isActive',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+    },
+    {
+        label: t('item.list.producer'),
+        field: 'producer',
+        name: 'producer',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('item.list.landed'),
+        field: 'landed',
+        name: 'landed',
+        align: 'left',
+        sortable: true,
+        format: (val) => dashIfEmpty(toDateFormat(val)),
+        columnFilter: null,
+    },
+    {
+        label: '',
+        name: 'actions',
+        align: 'left',
+        columnFilter: null,
+    },
+]);
+
+const redirectToItemCreate = () => {
+    router.push({ name: 'ItemCreate' });
+};
+
+const redirectToItemSummary = (id) => {
+    router.push({ name: 'ItemSummary', params: { id } });
+};
+
+const cloneItem = async (itemFk) => {
+    try {
+        const { data } = await axios.post(`Items/${itemFk}/clone`);
+        if (!data) return;
+        router.push({ name: 'ItemTags', params: { id: data.id } });
+    } catch (err) {
+        console.error('Error cloning item', err);
+    }
+};
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+    const filteredColumns = columns.value.filter(
+        (col) => col.name !== 'picture' && col.name !== 'actions'
+    );
+    allColumnNames.value = filteredColumns.map((col) => col.name);
+});
+
+onUnmounted(() => (stateStore.rightDrawer = false));
+</script>
+
+<template>
+    <FetchData
+        url="ItemTypes"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        auto-load
+        @on-fetch="(data) => (itemTypesOptions = data)"
+    />
+    <FetchData
+        url="ItemCategories"
+        :filter="{ fields: ['name'], order: 'name ASC' }"
+        auto-load
+        @on-fetch="(data) => (itemCategoriesOptions = data)"
+    />
+    <FetchData
+        url="Intrastats"
+        :filter="{ fields: ['description'], order: 'description ASC' }"
+        auto-load
+        @on-fetch="(data) => (intrastatOptions = data)"
+    />
+    <FetchData
+        url="Origins"
+        :filter="{ fields: ['code'], order: 'code ASC' }"
+        auto-load
+        @on-fetch="(data) => (originsOptions = data)"
+    />
+    <FetchData
+        url="TicketRequests/getItemTypeWorker"
+        :filter="{ fields: ['id', 'nickname'], order: 'nickname ASC' }"
+        auto-load
+        @on-fetch="(data) => (buyersOptions = data)"
+    />
+
+    <QToolbar class="bg-vn-dark justify-end">
+        <div id="st-data">
+            <TableVisibleColumns
+                :all-columns="allColumnNames"
+                table-code="itemsIndex"
+                labels-traductions-path="item.list"
+                @on-config-saved="visibleColumns = ['picture', ...$event, 'actions']"
+            />
+        </div>
+        <QSpace />
+        <div id="st-actions"></div>
+    </QToolbar>
+    <QPage class="column items-center q-pa-md">
+        <VnPaginate
+            ref="paginateRef"
+            data-key="ItemList"
+            url="Items/filter"
+            :order="['isActive DESC', 'name', 'id']"
+            :limit="12"
+            :expr-builder="exprBuilder"
+            :user-params="params"
+            :offset="50"
+            auto-load
+        >
+            <template #body="{ rows }">
+                <QTable
+                    :rows="rows"
+                    :columns="columns"
+                    row-key="id"
+                    :pagination="{ rowsPerPage: 0 }"
+                    class="full-width q-mt-md"
+                    :visible-columns="visibleColumns"
+                    :no-data-label="t('globals.noResults')"
+                    @row-click="(_, row) => redirectToItemSummary(row.id)"
+                >
+                    <template #top-row="{ cols }">
+                        <QTr>
+                            <QTd
+                                v-for="(col, index) in cols"
+                                :key="index"
+                                style="max-width: 100px"
+                            >
+                                <component
+                                    :is="col.columnFilter.component"
+                                    v-if="col.columnFilter"
+                                    v-model="col.columnFilter.filterValue"
+                                    v-bind="col.columnFilter.attrs"
+                                    v-on="col.columnFilter.event(col)"
+                                    dense
+                                />
+                            </QTd>
+                        </QTr>
+                    </template>
+                    <template #body-cell-picture="{ row }">
+                        <QTd>
+                            <QImg
+                                :src="`/api/Images/catalog/50x50/${row.id}/download?access_token=${token}`"
+                                spinner-color="primary"
+                                :ratio="1"
+                                height="50px"
+                                width="50px"
+                                class="image"
+                            />
+                        </QTd>
+                    </template>
+                    <template #body-cell-id="{ row }">
+                        <QTd @click.stop>
+                            <QBtn flat color="primary">
+                                {{ row.id }}
+                            </QBtn>
+                            <ItemDescriptorProxy :id="row.id" />
+                        </QTd>
+                    </template>
+                    <template #body-cell-userName="{ row }">
+                        <QTd @click.stop>
+                            <QBtn flat color="primary" dense>
+                                {{ row.userName }}
+                            </QBtn>
+                            <WorkerDescriptorProxy :id="row.buyerFk" />
+                        </QTd>
+                    </template>
+                    <template #body-cell-description="{ row }">
+                        <QTd class="col">
+                            <span>{{ row.name }} {{ row.subName }}</span>
+                            <fetched-tags :item="row" :max-length="6" />
+                        </QTd>
+                    </template>
+                    <template #body-cell-isActive="{ row }">
+                        <QTd>
+                            <QCheckbox :model-value="!!row.isActive" disable />
+                        </QTd>
+                    </template>
+                    <template #body-cell-actions="{ row }">
+                        <QTd>
+                            <QIcon
+                                @click.stop="
+                                    openConfirmationModal(
+                                        t(`All it's properties will be copied`),
+                                        t('Do you want to clone this item?'),
+                                        () => cloneItem(row.id)
+                                    )
+                                "
+                                class="q-ml-sm"
+                                color="primary"
+                                name="vn:clone"
+                                size="sm"
+                            >
+                                <QTooltip>
+                                    {{ t('Clone') }}
+                                </QTooltip>
+                            </QIcon>
+                            <QIcon
+                                @click.stop="viewSummary(row.id, ItemSummary)"
+                                class="q-ml-md"
+                                color="primary"
+                                name="preview"
+                                size="sm"
+                            >
+                                <QTooltip class="text-no-wrap">
+                                    {{ t('Preview') }}
+                                </QTooltip>
+                            </QIcon>
+                        </QTd>
+                    </template>
+                </QTable>
+            </template>
+        </VnPaginate>
+
+        <QPageSticky :offset="[20, 20]">
+            <QBtn @click="redirectToItemCreate()" color="primary" fab icon="add" />
+            <QTooltip class="text-no-wrap">
+                {{ t('New item') }}
+            </QTooltip>
+        </QPageSticky>
+    </QPage>
+</template>
+
+<i18n>
+es:
+    New item: Nuevo artículo
+    All it's properties will be copied: Todas sus propiedades serán copiadas
+    Do you want to clone this item?: ¿Desea clonar este artículo?
+    Clone: Clonar
+    Preview: Vista previa
+</i18n>

src/pages/Order/Card/OrderDescriptor.vue

@@ -61,7 +61,7 @@ const data = ref(useCardDescription());
 const setData = (entity) => {
     if (!entity) return;
     data.value = useCardDescription(entity.client.name, entity.id);
-    state.set('ClaimDescriptor', entity);
+    state.set('OrderDescriptor', entity);
 };
 
 const getConfirmationValue = (isConfirmed) => {

src/pages/Supplier/Card/SupplierSummary.vue

@@ -1,10 +1,9 @@
 <script setup>
-import { onMounted, ref, computed, onUpdated } from 'vue';
+import { ref, computed, onUpdated } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-import { getUrl } from 'src/composables/getUrl';
 import { useRole } from 'src/composables/useRole';
 import { dashIfEmpty } from 'src/filters';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
@@ -28,12 +27,6 @@ const entityId = computed(() => $props.id || route.params.id);
 
 const summaryRef = ref();
 const supplier = ref();
-const supplierUrl = ref();
-
-onMounted(async () => {
-    await roleState.fetch();
-    supplierUrl.value = (await getUrl('supplier/')) + entityId.value;
-});
 
 async function setData(data) {
     if (data) {
@@ -44,6 +37,10 @@ async function setData(data) {
 const isAdministrative = computed(() => {
     return roleState.hasAny(['administrative']);
 });
+
+function getUrl(section) {
+    return isAdministrative.value && `#/supplier/${entityId.value}/${section}`;
+}
 </script>
 
 <template>
@@ -58,15 +55,10 @@ const isAdministrative = computed(() => {
 
         <template #body>
             <QCard class="vn-one">
-                <router-link
-                    v-if="isAdministrative"
-                    class="header link"
-                    :to="{ name: 'SupplierBasicData', params: { id: entityId } }"
-                >
-                    {{ t('globals.summary.basicData') }}
-                    <QIcon name="open_in_new" />
-                </router-link>
-                <span v-else> {{ t('globals.summary.basicData') }}</span>
+                <VnTitle
+                    :url="getUrl('basic-data')"
+                    :text="t('globals.summary.basicData')"
+                />
                 <VnLv label="Id" :value="supplier.id" />
                 <VnLv label="Alias" :value="supplier.nickname" />
                 <VnLv :label="t('supplier.summary.responsible')">
@@ -94,15 +86,10 @@ const isAdministrative = computed(() => {
                 />
             </QCard>
             <QCard class="vn-one">
-                <router-link
-                    v-if="isAdministrative"
-                    class="header link"
-                    :to="{ name: 'SupplierBillingData', params: { id: entityId } }"
-                >
-                    {{ t('supplier.summary.billingData') }}
-                    <QIcon name="open_in_new" />
-                </router-link>
-                <span v-else> {{ t('supplier.summary.billingData') }}</span>
+                <VnTitle
+                    :url="getUrl('billing-data')"
+                    :text="t('supplier.summary.billingData')"
+                />
                 <VnLv
                     :label="t('supplier.summary.payMethod')"
                     :value="supplier.payMethod?.name"
@@ -117,15 +104,10 @@ const isAdministrative = computed(() => {
                 <VnLv :label="t('supplier.summary.account')" :value="supplier.account" />
             </QCard>
             <QCard class="vn-one">
-                <router-link
-                    v-if="isAdministrative"
-                    class="header link"
-                    :to="{ name: 'SupplierFiscalData', params: { id: entityId } }"
-                >
-                    {{ t('supplier.summary.fiscalData') }}
-                    <QIcon name="open_in_new" />
-                </router-link>
-                <span v-else> {{ t('supplier.summary.fiscalData') }}</span>
+                <VnTitle
+                    :url="getUrl('fiscal-data')"
+                    :text="t('supplier.summary.fiscalData')"
+                />
                 <VnLv
                     :label="t('supplier.summary.sageTaxType')"
                     :value="supplier.sageTaxType?.vat"
@@ -152,15 +134,10 @@ const isAdministrative = computed(() => {
                 />
             </QCard>
             <QCard class="vn-one">
-                <router-link
-                    v-if="isAdministrative"
-                    class="header link"
-                    :to="{ name: 'SupplierFiscalData', params: { id: entityId } }"
-                >
-                    {{ t('supplier.summary.fiscalAddress') }}
-                    <QIcon name="open_in_new" />
-                </router-link>
-                <span v-else> {{ t('supplier.summary.fiscalAddress') }}</span>
+                <VnTitle
+                    :url="getUrl('fiscal-data')"
+                    :text="t('supplier.summary.fiscalAddress')"
+                />
                 <VnLv :label="t('supplier.summary.socialName')" :value="supplier.name" />
                 <VnLv :label="t('supplier.summary.taxNumber')" :value="supplier.nif" />
                 <VnLv :label="t('supplier.summary.street')" :value="supplier.street" />

src/pages/Travel/TravelFilter.vue

@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import VnInput from 'src/components/common/VnInput.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 
@@ -63,7 +62,7 @@ const decrement = (paramsObj, key) => {
             <QItem>
                 <QItemSection>
                     <VnSelectFilter
-                        :label="t('params.agencyModeFk')"
+                        :label="t('travelFilter.filter.agencyModeFk')"
                         v-model="params.agencyModeFk"
                         @update:model-value="searchFn()"
                         :options="agenciesOptions"
@@ -79,7 +78,7 @@ const decrement = (paramsObj, key) => {
             <QItem>
                 <QItemSection>
                     <VnSelectFilter
-                        :label="t('params.warehouseOutFk')"
+                        :label="t('travelFilter.filter.warehouseOutFk')"
                         v-model="params.warehouseOutFk"
                         @update:model-value="searchFn()"
                         :options="warehousesOptions"
@@ -95,7 +94,7 @@ const decrement = (paramsObj, key) => {
             <QItem>
                 <QItemSection>
                     <VnSelectFilter
-                        :label="t('params.warehouseInFk')"
+                        :label="t('travelFilter.filter.warehouseInFk')"
                         v-model="params.warehouseInFk"
                         @update:model-value="searchFn()"
                         :options="warehousesOptions"
@@ -113,7 +112,7 @@ const decrement = (paramsObj, key) => {
                     <QInput
                         v-model="params.scopeDays"
                         type="number"
-                        :label="t('params.scopeDays')"
+                        :label="t('travelFilter.filter.scopeDays')"
                         dense
                         outlined
                         rounded
@@ -211,10 +210,6 @@ const decrement = (paramsObj, key) => {
 en:
     params:
         search: Id/Reference
-        agencyModeFk: Agency
-        warehouseInFk: Warehouse In
-        warehouseOutFk: Warehouse Out
-        scopeDays: Days onward
         landedFrom: Landed from
         landedTo: Landed to
         continent: Continent out
@@ -222,10 +217,6 @@ en:
 es:
     params:
         search: Id/Referencia
-        agencyModeFk: Agencia
-        warehouseInFk: Alm. entrada
-        warehouseOutFk: Alm. salida
-        scopeDays: Días adelante
         landedFrom: Llegada desde
         landedTo: Llegada hasta
         continent: Cont. Salida

src/pages/Travel/locale/en.yml

@@ -0,0 +1,6 @@
+travelFilter:
+    filter:
+        warehouseOutFk: 'Warehouse Out'
+        warehouseInFk: 'Warehouse In'
+        agencyModeFk: 'Agency'
+        scopeDays: 'Days onward'

src/pages/Travel/locale/es.yml

@@ -0,0 +1,6 @@
+travelFilter:
+    filter:
+        warehouseInFk: 'Alm. entrada'
+        warehouseOutFk: 'Alm. salida'
+        agencyModeFk: 'Agencia'
+        scopeDays: 'Días adelante'

src/pages/Worker/Card/WorkerBasicData.vue

@@ -27,6 +27,7 @@ const workerFilter = {
         },
         { relation: 'sip', scope: { fields: ['extension', 'secret'] } },
         { relation: 'department', scope: { include: { relation: 'department' } } },
+        { relation: 'client', scope: {fields:['phone']} },
     ],
 };
 const workersFilter = {
@@ -86,6 +87,7 @@ const maritalStatus = [
                     :label="t('Mobile extension')"
                     clearable
                 />
+                <VnInput v-model="data.client.phone" :label="t('Personal phone')" clearable />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
@@ -157,6 +159,7 @@ es:
     Last name: Apellidos
     Business phone: Teléfono de empresa
     Mobile extension: Extensión móvil
+    Personal phone: Teléfono personal
     Boss: Jefe
     Marital status: Estado civil
     Married: Casado/a

src/pages/Worker/Card/WorkerCalendar.vue

@@ -0,0 +1,239 @@
+<script setup>
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import WorkerCalendarFilter from 'pages/Worker/Card/WorkerCalendarFilter.vue';
+import FetchData from 'components/FetchData.vue';
+import WorkerCalendarItem from 'pages/Worker/Card/WorkerCalendarItem.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import axios from 'axios';
+
+const stateStore = useStateStore();
+const route = useRoute();
+const { t } = useI18n();
+
+const workerCalendarFilterRef = ref(null);
+const workerCalendarRef = ref(null);
+const absenceType = ref(null);
+const hasWorkCenter = ref(false);
+const isSubordinate = ref(false);
+const businessFk = ref(null);
+const year = ref(Date.vnNew().getFullYear());
+const contractHolidays = ref(null);
+const yearHolidays = ref(null);
+const eventsMap = ref({});
+const festiveEventsMap = ref({});
+
+const onFetchActiveContract = (data) => {
+    if (!data) return;
+    businessFk.value = data?.businessFk;
+    hasWorkCenter.value = Boolean(data?.workCenterFk);
+};
+
+const addEvent = (day, newEvent, isFestive = false) => {
+    const timestamp = new Date(day).getTime();
+    let event = eventsMap.value[timestamp];
+
+    if (!event) {
+        eventsMap.value[timestamp] = newEvent;
+        if (isFestive)
+            festiveEventsMap.value[timestamp] = JSON.parse(JSON.stringify(newEvent));
+    } else {
+        const oldName = event.name;
+        const oldEventWasFestive = event.isFestive;
+        Object.assign(event, newEvent);
+        event.isFestive = oldEventWasFestive;
+        event.name = `${oldName}, ${event.name}`;
+    }
+};
+
+const onFetchAbsences = (data) => {
+    if (!data) return;
+
+    eventsMap.value = {};
+
+    if (data.holidays) {
+        data.holidays.forEach((holiday) => {
+            const holidayDetail = holiday?.detail?.name;
+            const holidayType = holiday?.type?.name;
+            const holidayName = holidayDetail || holidayType;
+
+            addEvent(
+                holiday.dated,
+                {
+                    name: holidayName,
+                    isFestive: true,
+                },
+                true
+            );
+        });
+    }
+    if (data.absences) {
+        data.absences.forEach((absence) => {
+            let type = absence.absenceType;
+            addEvent(absence.dated, {
+                name: type.name,
+                color: type.rgb,
+                type: type.code,
+                absenceId: absence.id,
+                isFestive: false,
+            });
+        });
+    }
+};
+
+const getAbsences = async () => {
+    try {
+        const params = {
+            workerFk: route.params.id,
+            businessFk: businessFk.value,
+            year: year.value,
+        };
+        const { data } = await axios.get('Calendars/absences', { params });
+        if (data) onFetchAbsences(data);
+
+        return data;
+    } catch (error) {
+        console.error('Error fetching absences:', error);
+        return null;
+    }
+};
+
+const getHolidays = async (params) => {
+    try {
+        const { data } = await axios.get(`Workers/${route.params.id}/holidays`, {
+            params,
+        });
+        return data;
+    } catch (error) {
+        console.error('Error fetching holidays:', error);
+        return null;
+    }
+};
+
+const updateContractHolidays = async () => {
+    contractHolidays.value = await getHolidays({
+        businessFk: businessFk.value,
+        year: year.value,
+    });
+};
+
+const updateYearHolidays = async () => {
+    yearHolidays.value = await getHolidays({ year: year.value });
+};
+
+const refreshData = () => {
+    updateYearHolidays();
+    updateContractHolidays();
+    getAbsences();
+};
+
+const onDeletedEvent = (timestamp) => {
+    delete eventsMap.value[timestamp];
+    // Si el evento que eliminamos se encontraba dentro de un dia festivo, volvemos a agregar el evento festivo
+    if (festiveEventsMap.value[timestamp])
+        eventsMap.value[timestamp] = festiveEventsMap.value[timestamp];
+};
+
+watch([year, businessFk], () => refreshData());
+</script>
+
+<template>
+    <FetchData
+        :url="`Workers/${route.params.id}/activeContract`"
+        @on-fetch="onFetchActiveContract"
+        auto-load
+    />
+    <FetchData
+        :url="`Workers/${route.params.id}/isSubordinate`"
+        @on-fetch="(data) => (isSubordinate = data)"
+        auto-load
+    />
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <WorkerCalendarFilter
+                ref="workerCalendarFilterRef"
+                v-model:business-fk="businessFk"
+                v-model:year="year"
+                v-model:absence-type="absenceType"
+                :contract-holidays="contractHolidays"
+                :year-holidays="yearHolidays"
+            />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center">
+        <QCard v-if="!hasWorkCenter">
+            <QCardSection class="text-center">
+                {{ t('Autonomous worker') }}
+            </QCardSection>
+        </QCard>
+        <QCard v-else class="full-width">
+            <QIcon
+                v-if="isSubordinate"
+                name="info"
+                size="sm"
+                class="absolute"
+                style="top: 14px; right: 14px"
+            >
+                <QTooltip max-width="250px">
+                    {{ t('addAbsencesText') }}
+                </QTooltip>
+            </QIcon>
+            <div class="calendar-container">
+                <WorkerCalendarItem
+                    ref="workerCalendarRef"
+                    v-for="month in 12"
+                    :key="month"
+                    :year="year"
+                    :month="month"
+                    :absence-type="absenceType"
+                    :business-fk="businessFk"
+                    :events="eventsMap"
+                    @refresh="refreshData"
+                    @on-deleted-event="onDeletedEvent"
+                />
+            </div>
+        </QCard>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.calendar-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 32px;
+    padding: 40px;
+    justify-content: center;
+}
+</style>
+
+<i18n>
+en:
+    addAbsencesText: To start adding absences, click an absence type from the right menu and then on the day you want to add an absence
+
+es:
+    Search worker: Buscar trabajador
+    You can search by worker id or name: Puedes buscar por id o nombre del trabajador
+    addAbsencesText: Para empezar a añadir ausencias, haz clic en un tipo de ausencia desde el menu de la derecha y después en el día que quieres añadir la ausencia
+</i18n>

src/pages/Worker/Card/WorkerCalendarFilter.vue

@@ -0,0 +1,248 @@
+<script setup>
+import WorkerEventLabel from 'pages/Worker/Card/WorkerEventLabel.vue';
+import FetchData from 'components/FetchData.vue';
+import { useI18n } from 'vue-i18n';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import { useRoute } from 'vue-router';
+import { computed, ref } from 'vue';
+import { toDateFormat } from '../../../filters/date';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const props = defineProps({
+    businessFk: {
+        type: Number,
+        default: null,
+    },
+    year: {
+        type: [Number, String],
+        default: null,
+    },
+    absenceType: {
+        type: Object,
+        default: null,
+    },
+    contractHolidays: {
+        type: Object,
+        default: null,
+    },
+    yearHolidays: {
+        type: Object,
+        default: null,
+    },
+});
+
+const emit = defineEmits(['update:businessFk', 'update:year', 'update:absenceType']);
+
+const selectedBusinessFk = computed({
+    get: () => props.businessFk,
+    set: (value) => emit('update:businessFk', value),
+});
+
+const selectedYear = computed({
+    get: () => props.year,
+    set: (value) => emit('update:year', value),
+});
+
+const selectedAbsenceType = computed({
+    get: () => props.absenceType,
+    set: (value) => {
+        if (value === props.absenceType) value = null;
+        emit('update:absenceType', value);
+    },
+});
+
+const generateYears = () => {
+    const now = Date.vnNew();
+    const maxYear = now.getFullYear() + 1;
+
+    return Array.from({ length: 5 }, (_, i) => String(maxYear - i)) || [];
+};
+
+const absenceTypeList = ref([]);
+const contractList = ref([]);
+const yearList = ref(generateYears());
+</script>
+
+<template>
+    <FetchData
+        url="AbsenceTypes"
+        @on-fetch="(data) => (absenceTypeList = data)"
+        auto-load
+    />
+    <FetchData
+        :url="`Workers/${route.params.id}/contracts`"
+        :filter="{ fields: ['businessFk', 'started', 'ended'] }"
+        @on-fetch="(data) => (contractList = data)"
+        auto-load
+    />
+
+    <div
+        v-if="contractHolidays"
+        class="q-pa-md q-mb-md q-ma-md color-vn-text"
+        style="border: 2px solid black"
+    >
+        <QCardSection horizontal>
+            <span class="text-weight-bold text-subtitle1 text-center full-width">
+                {{ t('Contract') }} #{{ selectedBusinessFk }}
+            </span>
+        </QCardSection>
+        <QCardSection class="column items-center" horizontal>
+            <span>
+                {{
+                    t('usedDays', {
+                        holidaysEnjoyed: contractHolidays.holidaysEnjoyed || 0,
+                        totalHolidays: contractHolidays.totalHolidays || 0,
+                    })
+                }}
+            </span>
+        </QCardSection>
+        <QCardSection class="column items-center" horizontal>
+            <span>
+                {{
+                    t('spentHours', {
+                        hoursEnjoyed: contractHolidays.hoursEnjoyed || 0,
+                        totalHours: contractHolidays.totalHours || 0,
+                    })
+                }}
+            </span>
+        </QCardSection>
+        <QCardSection class="column items-center" horizontal>
+            <span>
+                {{
+                    t('paidHolidays', {
+                        payedHolidays: contractHolidays.payedHolidays || 0,
+                    })
+                }}
+            </span>
+        </QCardSection>
+    </div>
+    <div
+        v-if="yearHolidays"
+        class="q-pa-md q-mb-md q-ma-md color-vn-text"
+        style="border: 2px solid black"
+    >
+        <QCardSection horizontal>
+            <span class="text-weight-bold text-subtitle1 text-center full-width">
+                {{ t('Year') }} {{ selectedYear }}
+            </span>
+        </QCardSection>
+        <QCardSection class="column items-center" horizontal>
+            <span>
+                {{
+                    t('usedDays', {
+                        holidaysEnjoyed: yearHolidays.holidaysEnjoyed || 0,
+                        totalHolidays: yearHolidays.totalHolidays || 0,
+                    })
+                }}
+            </span>
+        </QCardSection>
+        <QCardSection class="column items-center" horizontal>
+            {{
+                t('spentHours', {
+                    hoursEnjoyed: yearHolidays.hoursEnjoyed || 0,
+                    totalHours: yearHolidays.totalHours || 0,
+                })
+            }}
+        </QCardSection>
+    </div>
+    <QList dense class="list q-gutter-y-sm q-my-lg">
+        <QItem>
+            <QItemSection>
+                <VnSelectFilter
+                    :label="t('Year')"
+                    v-model="selectedYear"
+                    :options="yearList"
+                    dense
+                    outlined
+                    rounded
+                    use-input
+                    :is-clearable="false"
+                />
+            </QItemSection>
+        </QItem>
+        <QItem>
+            <QItemSection>
+                <VnSelectFilter
+                    :label="t('Contract')"
+                    v-model="selectedBusinessFk"
+                    :options="contractList"
+                    option-value="businessFk"
+                    option-label="businessFk"
+                    dense
+                    outlined
+                    rounded
+                    use-input
+                    :is-clearable="false"
+                >
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            <QItemSection>
+                                <QItemLabel># {{ scope.opt?.businessFk }}</QItemLabel>
+                                <QItemLabel caption>
+                                    {{ toDateFormat(scope.opt?.started) }} -
+                                    {{
+                                        scope.opt?.ended
+                                            ? toDateFormat(scope.opt?.ended)
+                                            : 'Indef.'
+                                    }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelectFilter>
+            </QItemSection>
+        </QItem>
+    </QList>
+    <QList dense class="list q-gutter-y-xs q-my-md">
+        <QItem v-for="type in absenceTypeList" :key="type.id">
+            <WorkerEventLabel
+                :color="type.rgb"
+                :selected="selectedAbsenceType?.id === type.id"
+                @click="selectedAbsenceType = type"
+            >
+                {{ type.name }}
+            </WorkerEventLabel>
+        </QItem>
+    </QList>
+    <QSeparator />
+    <QList dense class="list q-my-md no-pointer-events">
+        <QItem>
+            <WorkerEventLabel avatar-class="worker-calendar-festive">
+                {{ t('Festive') }}
+            </WorkerEventLabel>
+            <WorkerEventLabel avatar-class="worker-calendar-today">
+                {{ t('Current day') }}
+            </WorkerEventLabel>
+        </QItem>
+    </QList>
+</template>
+
+<style lang="scss">
+.worker-calendar-festive {
+    border: 2px solid $negative;
+}
+
+.worker-calendar-today {
+    border: 2px solid $info;
+}
+</style>
+
+<i18n>
+en:
+    spentHours: Spent {hoursEnjoyed} of {totalHours} hours
+    usedDays: Used {holidaysEnjoyed} of {totalHolidays} days
+    paidHolidays: Paid holidays {payedHolidays} days
+
+es:
+    Paid holidays: Vacaciones pagadas
+    Year: Año
+    Contract: Contrato
+    Festive: Festivo
+    Current day: Día actual
+    spentHours: Utilizadas {hoursEnjoyed} de {totalHours} horas
+    usedDays: Utilizados {holidaysEnjoyed} de {totalHolidays} días
+    paidHolidays: Vacaciones pagadas {payedHolidays} días
+
+</i18n>

src/pages/Worker/Card/WorkerCalendarItem.vue

@@ -0,0 +1,313 @@
+<script setup>
+import { onBeforeMount, ref, watch, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { date } from 'quasar';
+import { useRoute } from 'vue-router';
+
+import QCalendarMonthWrapper from 'src/components/ui/QCalendarMonthWrapper.vue';
+import { QCalendarMonth } from '@quasar/quasar-ui-qcalendar/src/index.js';
+import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.sass';
+
+import { useWeekdayStore } from 'src/stores/useWeekdayStore';
+import useNotify from 'src/composables/useNotify.js';
+import axios from 'axios';
+
+const props = defineProps({
+    year: {
+        type: Number,
+        required: true,
+    },
+    month: {
+        type: Number,
+        required: true,
+    },
+    absenceType: {
+        type: Object,
+        default: null,
+    },
+    businessFk: {
+        type: Number,
+        default: null,
+    },
+    events: {
+        type: Object,
+        default: null,
+    },
+});
+
+const emit = defineEmits(['refresh', 'onDeletedEvent']);
+
+const route = useRoute();
+const { t } = useI18n();
+const { notify } = useNotify();
+const { locale } = useI18n();
+
+const calendarRef = ref(null);
+const weekdayStore = useWeekdayStore();
+const selectedDate = ref();
+const calendarEventDates = [];
+const today = ref(date.formatDate(Date.vnNew(), 'YYYY-MM-DD'));
+const todayTimestamp = computed(() => {
+    const date = Date.vnNew();
+    date.setHours(0, 0, 0, 0);
+    return date.getTime();
+});
+const _year = computed(() => props.year);
+
+const updateSelectedDate = (year) => {
+    const _date = new Date(year, props.month - 1, 1);
+    selectedDate.value = date.formatDate(_date, 'YYYY-MM-DD');
+};
+
+const createEvent = async (date) => {
+    try {
+        const params = {
+            dated: date,
+            absenceTypeId: props.absenceType.id,
+            businessFk: props.businessFk,
+        };
+
+        const { data } = await axios.post(
+            `Workers/${route.params.id}/createAbsence`,
+            params
+        );
+
+        if (data) emit('refresh');
+    } catch (error) {
+        console.error('error creating event:: ', error);
+    }
+};
+
+const editEvent = async (event) => {
+    try {
+        const absenceType = props.absenceType;
+        const params = {
+            absenceId: event.absenceId,
+            absenceTypeId: absenceType.id,
+        };
+        const { data } = await axios.patch(
+            `Workers/${route.params.id}/updateAbsence`,
+            params
+        );
+
+        if (data) emit('refresh');
+    } catch (error) {
+        console.error('error editing event:: ', error);
+    }
+};
+
+const deleteEvent = async (event, date) => {
+    const params = { absenceId: event.absenceId };
+    const { data } = await axios.delete(`Workers/${route.params.id}/deleteAbsence`, {
+        params,
+    });
+
+    if (data) emit('onDeletedEvent', date.getTime());
+};
+
+const handleDateSelected = (date) => {
+    if (!props.absenceType) {
+        notify(t('Choose an absence type from the right menu'), 'warning');
+        return;
+    }
+
+    const { year, month, day } = date.scope.timestamp;
+    const _date = new Date(year, month - 1, day);
+    const stamp = _date.getTime();
+    const event = props.events[stamp];
+
+    if (!event) createEvent(_date);
+};
+
+const handleEventSelected = (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);
+    else if (event.type == props.absenceType.code) deleteEvent(event, date);
+    else editEvent(event);
+};
+
+const getEventByTimestamp = ({ year, month, day }) => {
+    const stamp = new Date(year, month - 1, day).getTime();
+    return props.events[stamp] || null;
+};
+
+const getEventAttrs = (timestamp) => {
+    const event = getEventByTimestamp(timestamp);
+    if (!event) return {};
+
+    const { name, color, isFestive } = event;
+
+    // Atributos a asignar a cada slot que representa un evento en el calendario
+
+    const attrs = {
+        title: name,
+        style: color ? `background-color: ${color};` : '',
+        label: timestamp.day,
+    };
+
+    if (isFestive) {
+        attrs.class = '--festive';
+        attrs.label = event.absenceId ? timestamp.day : '';
+    }
+
+    return attrs;
+};
+
+const isToday = (timestamp) => {
+    const { year, month, day } = timestamp;
+    return todayTimestamp.value === new Date(year, month - 1, day).getTime();
+};
+
+onBeforeMount(() => {
+    updateSelectedDate(_year.value);
+});
+
+watch(_year, (newValue) => {
+    updateSelectedDate(newValue);
+});
+</script>
+
+<template>
+    <QCalendarMonthWrapper
+        style="height: 290px; width: 310px"
+        class="outline"
+        bordered
+        transparent-background
+    >
+        <template #header>
+            <span class="full-width text-center text-body1 q-py-sm">{{
+                weekdayStore.getLocaleMonths[$props.month - 1].locale
+            }}</span>
+        </template>
+        <template #calendar>
+            <QCalendarMonth
+                ref="calendarRef"
+                v-model="selectedDate"
+                @click-date="handleDateSelected"
+                show-work-weeks
+                no-outside-days
+                :selected-dates="calendarEventDates"
+                no-active-date
+                :weekdays="[1, 2, 3, 4, 5, 6, 0]"
+                short-weekday-label
+                :locale="locale"
+                :now="today"
+                mini-mode
+            >
+                <template #day="{ scope: { timestamp } }">
+                    <!-- Este slot representa cada día del calendario y muestra un botón representando el correspondiente evento -->
+                    <QBtn
+                        v-if="getEventByTimestamp(timestamp)"
+                        v-bind="{ ...getEventAttrs(timestamp) }"
+                        @click="
+                            handleEventSelected(getEventByTimestamp(timestamp), timestamp)
+                        "
+                        rounded
+                        dense
+                        flat
+                        class="calendar-event"
+                        :class="{
+                            '--today': isToday(timestamp),
+                        }"
+                    />
+                </template>
+            </QCalendarMonth>
+        </template>
+    </QCalendarMonthWrapper>
+</template>
+
+<style lang="scss">
+@import '../../../css/quasar.variables.scss';
+:root {
+    // Cambia los colores del día actual del calendario por los de salix
+    --calendar-border-current-dark: #84d0e2 2px solid;
+    --calendar-border-current: #84d0e2 2px solid;
+    --calendar-current-color-dark: #ec8916;
+}
+
+.q-calendar__button {
+    width: 32px;
+    height: 32px;
+    font-size: 13px;
+
+    &:hover {
+        background-color: var(--vn-accent-color);
+        cursor: pointer;
+    }
+}
+
+.q-calendar-month__week--days > div:nth-child(6),
+.q-calendar-month__week--days > div:nth-child(7) {
+    // Cambia el color de los días sábado y domingo
+    color: #777777;
+}
+
+.q-calendar-month__week--wrapper {
+    margin-bottom: 4px;
+}
+
+.q-calendar-month__workweek {
+    height: 32px;
+    display: flex;
+    justify-content: center;
+}
+
+.q-calendar__button--bordered {
+    color: $info !important;
+}
+
+.q-calendar-month__day--content {
+    position: absolute;
+    top: 1;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.q-outside .calendar-event {
+    display: none;
+}
+
+.calendar-event {
+    display: flex;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    font-size: 13px;
+    line-height: 1.715em;
+    cursor: pointer;
+    color: white;
+
+    &.--today {
+        border: 2px solid $info;
+    }
+
+    &.--festive {
+        border: 2px solid $negative;
+    }
+
+    &:hover {
+        opacity: 0.8;
+    }
+}
+.q-calendar-month__workweek,
+.q-calendar-month__head--workweek,
+.q-calendar-month__head--weekday.q-calendar__center.q-calendar__ellipsis {
+    text-transform: capitalize;
+    color: #777;
+    font-weight: bold;
+    font-size: 0.8rem;
+    text-align: center;
+}
+</style>
+
+<i18n>
+es:
+    Choose an absence type from the right menu: Elige un tipo de ausencia desde el menú de la derecha
+</i18n>

src/pages/Worker/Card/WorkerDescriptor.vue

@@ -31,29 +31,7 @@ const entityId = computed(() => {
 });
 
 const worker = ref();
-const filter = {
-    include: [
-        {
-            relation: 'user',
-            scope: {
-                fields: ['email', 'name', 'nickname'],
-            },
-        },
-        {
-            relation: 'department',
-            scope: {
-                include: [
-                    {
-                        relation: 'department',
-                    },
-                ],
-            },
-        },
-        {
-            relation: 'sip',
-        },
-    ],
-};
+const filter = { where: { id: route.params.id}};
 
 const sip = ref(null);
 
@@ -82,7 +60,7 @@ const setData = (entity) => {
     <CardDescriptor
         module="Worker"
         data-key="workerData"
-        :url="`Workers/${entityId}`"
+        :url="`Workers/summary`"
         :filter="filter"
         :title="data.title"
         :subtitle="data.subtitle"

src/pages/Worker/Card/WorkerEventLabel.vue

@@ -0,0 +1,33 @@
+<script setup>
+defineProps({
+    color: {
+        type: String,
+        default: null,
+    },
+    avatarClass: {
+        type: String,
+        default: null,
+    },
+    selected: {
+        type: Boolean,
+        default: undefined,
+    },
+});
+defineEmits(['update:selected']);
+</script>
+
+<template>
+    <QChip
+        class="text-white q-ma-none"
+        :selected="selected"
+        :style="{ backgroundColor: selected ? color : 'black' }"
+        @update:selected="$emit('update:selected', $event)"
+    >
+        <QAvatar
+            :color="color"
+            :class="avatarClass"
+            :style="{ backgroundColor: color }"
+        />
+        <slot />
+    </QChip>
+</template>

src/pages/Worker/Card/WorkerSummary.vue

@@ -10,7 +10,7 @@ import CardSummary from 'components/ui/CardSummary.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 
-const route = useRoute();
+const { params } = useRoute();
 const { t } = useI18n();
 
 const $props = defineProps({
@@ -20,53 +20,18 @@ const $props = defineProps({
     },
 });
 
-const entityId = computed(() => $props.id || route.params.id);
+const entityId = computed(() => $props.id || params.id);
 const workerUrl = ref();
 
 onMounted(async () => {
     workerUrl.value = (await getUrl('')) + `worker/${entityId.value}/`;
 });
 
-const filter = {
-    include: [
-        {
-            relation: 'user',
-            scope: {
-                fields: ['email', 'name', 'nickname', 'roleFk'],
-                include: {
-                    relation: 'role',
-                    scope: {
-                        fields: ['name'],
-                    },
-                },
-            },
-        },
-        {
-            relation: 'department',
-            scope: {
-                include: {
-                    relation: 'department',
-                    scope: {
-                        fields: ['name'],
-                    },
-                },
-            },
-        },
-        {
-            relation: 'boss',
-        },
-        {
-            relation: 'client',
-        },
-        {
-            relation: 'sip',
-        },
-    ],
-};
+const filter = { where: { id: entityId.value } };
 </script>
 
 <template>
-    <CardSummary ref="summary" :url="`Workers/${entityId}`" :filter="filter">
+    <CardSummary ref="summary" :url="`Workers/summary`" :filter="filter">
         <template #header="{ entity }">
             <div>{{ entity.id }} - {{ entity.firstName }} {{ entity.lastName }}</div>
         </template>
@@ -103,12 +68,6 @@ const filter = {
                         <VnLinkPhone :phone-number="worker.phone" />
                     </template>
                 </VnLv>
-                <VnLv :value="worker.client?.phone">
-                    <template #label>
-                        {{ t('worker.summary.personalPhone') }}
-                        <VnLinkPhone :phone-number="worker.client?.phone" />
-                    </template>
-                </VnLv>
                 <VnLv :label="t('worker.summary.locker')" :value="worker.locker" />
             </QCard>
             <QCard class="vn-one">

src/router/modules/Supplier.js

@@ -45,7 +45,8 @@ export default {
                     path: 'create',
                     name: 'SupplierCreate',
                     meta: {
-                        title: 'create',
+                        title: 'supplierCreate',
+                        icon: 'add',
                     },
                     component: () => import('src/pages/Supplier/SupplierCreate.vue'),
                 },

src/router/modules/customer.js

@@ -55,7 +55,8 @@ export default {
                     path: 'create',
                     name: 'CustomerCreate',
                     meta: {
-                        title: 'create',
+                        title: 'customerCreate',
+                        icon: 'add',
                     },
                     component: () => import('src/pages/Customer/CustomerCreate.vue'),
                 },

src/router/modules/entry.js

@@ -34,7 +34,8 @@ export default {
                     path: 'create',
                     name: 'EntryCreate',
                     meta: {
-                        title: 'create',
+                        title: 'entryCreate',
+                        icon: 'add',
                     },
                     component: () => import('src/pages/Entry/EntryCreate.vue'),
                 },

src/router/modules/item.js

@@ -10,15 +10,15 @@ export default {
     component: RouterView,
     redirect: { name: 'ItemMain' },
     menus: {
-        main: [],
-        card: [],
+        main: ['ItemList', 'WasteBreakdown'],
+        card: ['ItemBasicData'],
     },
     children: [
         {
             path: '',
             name: 'ItemMain',
             component: () => import('src/pages/Item/ItemMain.vue'),
-            redirect: { name: 'Itemlist' },
+            redirect: { name: 'ItemList' },
             children: [
                 {
                     path: 'list',
@@ -29,6 +29,27 @@ export default {
                     },
                     component: () => import('src/pages/Item/ItemList.vue'),
                 },
+                {
+                    path: 'create',
+                    name: 'ItemCreate',
+                    meta: {
+                        title: 'create',
+                    },
+                    component: () => import('src/pages/Item/ItemCreate.vue'),
+                },
+                {
+                    path: 'waste-breakdown',
+                    name: 'WasteBreakdown',
+                    meta: {
+                        title: 'wasteBreakdown',
+                        icon: 'vn:claims',
+                    },
+                    beforeEnter: (to, from, next) => {
+                        next({ name: 'ItemList' });
+                        window.location.href =
+                            'https://grafana.verdnatura.es/d/TTNXQAxVk';
+                    },
+                },
             ],
         },
         {
@@ -64,6 +85,15 @@ export default {
                     },
                     component: () => import('src/pages/Item/Card/ItemTags.vue'),
                 },
+                {
+                    path: 'basic-data',
+                    name: 'ItemBasicData',
+                    meta: {
+                        title: 'basicData',
+                        icon: 'vn:settings',
+                    },
+                    component: () => import('src/pages/Item/Card/ItemBasicData.vue'),
+                },
             ],
         },
     ],

src/router/modules/order.js

@@ -34,7 +34,8 @@ export default {
                     path: 'create',
                     name: 'OrderCreate',
                     meta: {
-                        title: 'create',
+                        title: 'orderCreate',
+                        icon: 'add',
                     },
                     component: () => import('src/pages/Order/Card/OrderForm.vue'),
                 },

src/router/modules/route.js

@@ -34,7 +34,8 @@ export default {
                     path: 'create',
                     name: 'RouteCreate',
                     meta: {
-                        title: 'create',
+                        title: 'routeCreate',
+                        icon: 'add',
                     },
                     component: () => import('src/pages/Route/Card/RouteForm.vue'),
                 },

src/router/modules/shelving.js

@@ -34,7 +34,8 @@ export default {
                     path: 'create',
                     name: 'ShelvingCreate',
                     meta: {
-                        title: 'create',
+                        title: 'shelvingCreate',
+                        icon: 'add',
                     },
                     component: () => import('src/pages/Shelving/Card/ShelvingForm.vue'),
                 },

src/router/modules/travel.js

@@ -44,6 +44,7 @@ export default {
                     name: 'TravelCreate',
                     meta: {
                         title: 'travelCreate',
+                        icon: 'add',
                     },
                     component: () => import('src/pages/Travel/TravelCreate.vue'),
                 },

src/router/modules/worker.js

@@ -19,6 +19,7 @@ export default {
             'WorkerNotificationsManager',
             'WorkerPBX',
             'WorkerLog',
+            'WorkerCalendar',
             'WorkerDms',
         ],
         departmentCard: ['BasicData'],
@@ -53,7 +54,7 @@ export default {
                     name: 'WorkerCreate',
                     meta: {
                         title: 'workerCreate',
-                        icon: '',
+                        icon: 'add',
                     },
                     component: () => import('src/pages/Worker/WorkerCreate.vue'),
                 },
@@ -146,6 +147,15 @@ export default {
                     },
                     component: () => import('src/pages/Worker/Card/WorkerLog.vue'),
                 },
+                {
+                    name: 'WorkerCalendar',
+                    path: 'calendar',
+                    meta: {
+                        title: 'calendar',
+                        icon: 'calendar_today',
+                    },
+                    component: () => import('src/pages/Worker/Card/WorkerCalendar.vue'),
+                },
             ],
         },
     ],

src/stores/useNavigationStore.js

@@ -7,6 +7,7 @@ import routes from 'src/router/modules';
 
 export const useNavigationStore = defineStore('navigationStore', () => {
     const modules = [
+        'item',
         'shelving',
         'order',
         'customer',

src/stores/useWeekdayStore.js

@@ -0,0 +1,95 @@
+import { reactive, ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { defineStore } from 'pinia';
+
+export const useWeekdayStore = defineStore('weekdayStore', () => {
+    const { t } = useI18n();
+
+    const weekdays = [
+        { code: 'sun', name: 'Sunday' },
+        { code: 'mon', name: 'Monday' },
+        { code: 'tue', name: 'Tuesday' },
+        { code: 'wed', name: 'Wednesday' },
+        { code: 'thu', name: 'Thursday' },
+        { code: 'fri', name: 'Friday' },
+        { code: 'sat', name: 'Saturday' },
+    ];
+
+    const monthCodes = [
+        'jan',
+        'feb',
+        'mar',
+        'apr',
+        'may',
+        'jun',
+        'jul',
+        'aug',
+        'sep',
+        'oct',
+        'nov',
+        'dec',
+    ];
+
+    const localeOrder = {
+        es: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],
+        en: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
+    };
+
+    const weekdaysMap = reactive({});
+    const localeWeekdays = ref([]);
+
+    const initStore = () => {
+        getWeekdaysMap();
+    };
+
+    const getWeekdaysMap = () => {
+        if (Object.keys(weekdaysMap).length > 0) return weekdaysMap;
+
+        weekdays.forEach((day, i) => {
+            const obj = {
+                ...day,
+                index: i,
+                char: day.name.substr(0, 1),
+                abr: day.name.substr(0, 3),
+            };
+            weekdaysMap[day.code] = obj;
+        });
+    };
+
+    const getLocales = computed(() => {
+        // El día de mañana esto permitirá ordenar los weekdays en base a el locale si se lo desea reemplazando localeOrder.es por localeOrder[locale]
+        const locales = [];
+        for (let code of localeOrder.es) {
+            const obj = {
+                ...weekdaysMap[code],
+                locale: t(`weekdays.${weekdaysMap[code].code}`),
+                localeChar: t(`weekdays.${weekdaysMap[code].code}`).substr(0, 1),
+                localeAbr: t(`weekdays.${weekdaysMap[code].code}`).substr(0, 3),
+            };
+            locales.push(obj);
+        }
+        return locales;
+    });
+
+    const getLocaleMonths = computed(() => {
+        const locales = [];
+        for (let code of monthCodes) {
+            const obj = {
+                code: code,
+                locale: t(`months.${code}`),
+            };
+            locales.push(obj);
+        }
+        return locales;
+    });
+
+    return {
+        initStore,
+        weekdaysMap,
+        localeWeekdays,
+        getLocales,
+        weekdays,
+        monthCodes,
+        getLocaleMonths,
+    };
+});

test/cypress/integration/entry/entryDms.spec.js

@@ -5,37 +5,40 @@ describe('WagonTypeCreate', () => {
         cy.viewport(1920, 1080);
         cy.login('developer');
         cy.visit(`/#/entry/${entryId}/dms`);
-
     });
 
     it('should create edit and remove new dms', () => {
         cy.addRow();
-        cy.get('.icon-attach').click()
+        cy.get('.icon-attach').click();
         cy.get('.q-file').selectFile('test/cypress/fixtures/image.jpg', {
             force: true,
         });
 
-        cy.get("tbody > tr").then((value) => {
+        cy.get('tbody > tr').then((value) => {
+            const u = undefined;
+
             //Create and check if exist new row
             let newFileTd = Cypress.$(value).length;
             cy.get('.q-btn--standard > .q-btn__content > .block').click();
             expect(value).to.have.length(newFileTd++);
-            const newRowSelector = `tbody > :nth-child(${newFileTd})`
+            const newRowSelector = `tbody > :nth-child(${newFileTd})`;
             cy.waitForElement(newRowSelector);
+            cy.validateRow(newRowSelector, [u, u, u, u, 'ENTRADA ID 1']);
 
             //Edit new dms
-            const u = undefined;
-            cy.validateRow(newRowSelector, [u,u,u,u,'ENTRADA ID 1'])
-            cy.get(`tbody :nth-child(${newFileTd}) > .text-right > .flex > :nth-child(2) > .q-btn > .q-btn__content > .q-icon`).click();
-        })
-        // cy.log('newFileTd', newFileTd)
+            const newDescription = 'entry id 1 modified';
+            const textAreaSelector =
+                '.q-textarea > .q-field__inner > .q-field__control > .q-field__control-container';
+            cy.get(
+                `tbody :nth-child(${newFileTd}) > .text-right > .no-wrap > :nth-child(2) > .q-btn > .q-btn__content > .q-icon`
+            ).click();
 
-        // //Create and check if exist new row
-        // cy.log('newFileTd:', newFileTd);
-        // cy.get(`tbody :nth-child(${newFileTd}) > .text-right > .flex > :nth-child(2) > .q-btn > .q-btn__content > .q-icon`).click()
+            cy.get(textAreaSelector).clear();
+            cy.get(textAreaSelector).type(newDescription);
+            cy.saveCard();
+            cy.reload();
 
-        // cy.get(`tbody :nth-child(${newFileTd}) > :nth-child(5) > .q-tr > :nth-child(1) > span`).then((value) => {
-        //     cy.log(value)
-        // });
+            cy.validateRow(newRowSelector, [u, u, u, u, newDescription]);
+        });
     });
 });

test/cypress/integration/invoiceIn/invoiceInVat.spec.js

@@ -37,6 +37,7 @@ describe('InvoiceInVat', () => {
 
     it('should throw an error if there are fields undefined', () => {
         cy.get(inputBtns).eq(0).click();
+        cy.get(':nth-child(1) > .q-td.q-table--col-auto-width > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .default-icon').click();
         cy.get(dialogBtns).eq(2).click();
         cy.get('.q-notification__message').should('have.text', "The code can't be empty");
     });
@@ -44,7 +45,7 @@ describe('InvoiceInVat', () => {
     it('should correctly handle expense addition', () => {
         cy.get(inputBtns).eq(0).click();
 
-        cy.get(dialogInputs).eq(0).click();
+        cy.get(':nth-child(1) > .q-td.q-table--col-auto-width > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .default-icon').click();
         cy.get(dialogInputs).eq(0).type(randomInt);
         cy.get(dialogInputs).eq(1).click();
         cy.get(dialogInputs).eq(1).type('This is a dummy expense');

test/cypress/integration/worker/workerList.spec.js

@@ -8,9 +8,9 @@ describe('WorkerList', () => {
     });
 
     it('should load workers', () => {
-        cy.get(workerFieldNames).eq(0).should('have.text', 'JessicaJones');
-        cy.get(workerFieldNames).eq(1).should('have.text', 'BruceBanner');
-        cy.get(workerFieldNames).eq(2).should('have.text', 'CharlesXavier');
+        cy.get(workerFieldNames).eq(0).should('have.text', 'jessicajones');
+        cy.get(workerFieldNames).eq(1).should('have.text', 'brucebanner');
+        cy.get(workerFieldNames).eq(2).should('have.text', 'charlesxavier');
     });
 
     it('should open the worker summary', () => {

test/cypress/integration/worker/workerNotificationsManager.spec.js

@@ -60,7 +60,6 @@ describe('WorkerNotificationsManager', () => {
     it('should active a notification if you are their boss', () => {
         cy.login('salesBoss');
         cy.visit(`/#/worker/${salesPersonId}/notifications`);
-        cy.waitForElement(activeList);
         cy.waitForElement(availableList);
 
         cy.get(activeList)

test/cypress/integration/worker/workerSummary.spec.js

@@ -6,7 +6,8 @@ describe('WorkerSummary', () => {
     });
 
     it('should load worker summary', () => {
-        cy.get('.summaryHeader > div').should('have.text', '19 - salesBoss salesBoss');
+        cy.waitForElement('.summaryHeader');
+        cy.get('.summaryHeader > div').should('have.text', '19 - salesboss salesboss');
         cy.get(':nth-child(1) > :nth-child(2) > .value > span').should(
             'have.text',
             'salesBossNick'

vitest.config.js

@@ -19,7 +19,7 @@ export default defineConfig({
     plugins: [
         vue({
             template: {
-                transformAssetUrls
+                transformAssetUrls,
             },
         }),
         quasar({