Merge branch 'dev' into 6772_reload_sections

CHANGELOG.md

@@ -5,10 +5,16 @@ 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
 
+### Fixed
+
+-   (General) => Se vuelven a mostrar los parámetros en la url al aplicar un filtro
+
 ## [2414.01] - 2024-04-04
 
 ### Added

cypress.config.js

@@ -3,6 +3,7 @@ const { defineConfig } = require('cypress');
 module.exports = defineConfig({
     e2e: {
         baseUrl: 'http://localhost:9000/',
+        experimentalStudio: true,
         fixturesFolder: 'test/cypress/fixtures',
         screenshotsFolder: 'test/cypress/screenshots',
         supportFile: 'test/cypress/support/index.js',

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/App.vue

@@ -16,7 +16,7 @@ onMounted(() => {
     if (availableLocales.includes(userLang)) {
         locale.value = userLang;
     } else {
-        locale.value = fallbackLocale;
+        locale.value = fallbackLocale.value;
     }
 });
 

src/components/CreateNewPostcodeForm.vue

@@ -28,8 +28,23 @@ const countriesOptions = ref([]);
 const provincesOptions = ref([]);
 const townsLocationOptions = ref([]);
 
-const onDataSaved = (dataSaved) => {
-    emit('onDataSaved', dataSaved);
+const onDataSaved = (formData) => {
+    const newPostcode = {
+        ...formData
+    };
+    const townObject = townsLocationOptions.value.find(
+        ({id}) => id === formData.townFk
+    );
+    newPostcode.town = townObject?.name;
+    const provinceObject = provincesOptions.value.find(
+        ({id}) => id === formData.provinceFk
+    );
+    newPostcode.province = provinceObject?.name;
+    const countryObject = countriesOptions.value.find(
+        ({id}) => id === formData.countryFk
+    );
+    newPostcode.country = countryObject?.country;
+    emit('onDataSaved', newPostcode);  
 };
 
 const onCityCreated = async ({ name, provinceFk }, formData) => {
@@ -73,7 +88,7 @@ const onProvinceCreated = async ({ name }, formData) => {
         :title="t('New postcode')"
         :subtitle="t('Please, ensure you put the correct data!')"
         :form-initial-data="postcodeFormData"
-        @on-data-saved="onDataSaved($event)"
+        @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">

src/components/FetchData.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { h, onMounted } from 'vue';
+import { onMounted } from 'vue';
 import axios from 'axios';
 
 const $props = defineProps({

src/components/FormModel.vue

@@ -101,16 +101,16 @@ onMounted(async () => {
 });
 
 onBeforeRouteLeave((to, from, next) => {
-    if (!hasChanges.value) next();
-
-    quasar.dialog({
-        component: VnConfirm,
-        componentProps: {
-            title: t('Unsaved changes will be lost'),
-            message: t('Are you sure exit without saving?'),
-            promise: () => next(),
-        },
-    });
+    if (hasChanges.value)
+        quasar.dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('Unsaved changes will be lost'),
+                message: t('Are you sure exit without saving?'),
+                promise: () => next(),
+            },
+        });
+    else next();
 });
 
 onUnmounted(() => {
@@ -132,12 +132,12 @@ const formUrl = computed(() => $props.url);
 const defaultButtons = computed(() => ({
     save: {
         color: 'primary',
-        icon: 'restart_alt',
+        icon: 'save',
         label: 'globals.save',
     },
     reset: {
         color: 'primary',
-        icon: 'save',
+        icon: 'restart_alt',
         label: 'globals.reset',
     },
     ...$props.defaultButtons,
@@ -227,6 +227,7 @@ watch(formUrl, async () => {
 defineExpose({
     save,
     isLoading,
+    hasChanges,
 });
 </script>
 <template>
@@ -284,6 +285,9 @@ defineExpose({
     />
 </template>
 <style lang="scss" scoped>
+.q-notifications {
+    color: black;
+}
 #formModel {
     max-width: 800px;
     width: 100%;

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/LeftMenuItem.vue

@@ -20,12 +20,7 @@ const itemComputed = computed(() => {
 });
 </script>
 <template>
-    <QItem
-        active-class="text-primary"
-        :to="{ name: itemComputed.name }"
-        clickable
-        v-ripple
-    >
+    <QItem active-class="bg-hover" :to="{ name: itemComputed.name }" clickable v-ripple>
         <QItemSection avatar v-if="itemComputed.icon">
             <QIcon :name="itemComputed.icon" />
         </QItemSection>

src/components/common/VnCurrency.vue

@@ -5,7 +5,7 @@ import { useCapitalize } from 'src/composables/useCapitalize';
 import VnInput from 'src/components/common/VnInput.vue';
 
 const props = defineProps({
-    modelValue: { type: String, default: '' },
+    modelValue: { type: [String, Number], default: '' },
 });
 
 const { t } = useI18n();

src/components/common/VnDms.vue

@@ -198,11 +198,13 @@ function addDefaultData(data) {
 en:
     contentTypesInfo: Allowed file types {allowedContentTypes}
     EntryDmsDescription: Reference {reference}
+    WorkersDescription: Working of employee id {reference}
     SupplierDmsDescription: Reference {reference}
 es:
     Generate identifier for original file: Generar identificador para archivo original
     contentTypesInfo: Tipos de archivo permitidos {allowedContentTypes}
     EntryDmsDescription: Referencia {reference}
+    WorkersDescription: Laboral del empleado {reference}
     SupplierDmsDescription: Referencia {reference}
 
 </i18n>

src/components/common/VnDmsList.vue

@@ -5,9 +5,11 @@ import { useRoute } from 'vue-router';
 import { useQuasar, QCheckbox, QBtn, QInput } from 'quasar';
 import axios from 'axios';
 
-import FetchData from 'components/FetchData.vue';
+import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnDms from 'src/components/common/VnDms.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+import VnUserLink from '../ui/VnUserLink.vue';
 import { downloadFile } from 'src/composables/downloadFile';
 
 const route = useRoute();
@@ -26,6 +28,15 @@ const $props = defineProps({
         type: String,
         default: null,
     },
+    deleteModel: {
+        type: String,
+        default: null,
+    },
+    downloadModel: {
+        type: String,
+        required: false,
+        default: null,
+    },
     defaultDmsCode: {
         type: String,
         required: true,
@@ -74,7 +85,7 @@ const dmsFilter = {
             ],
         },
     },
-    order: ['dmsFk DESC'],
+    where: { [$props.filter]: route.params.id },
 };
 
 const columns = computed(() => [
@@ -94,12 +105,12 @@ const columns = computed(() => [
         props: (prop) => ({
             readonly: true,
             borderless: true,
-            'model-value': prop.row.dmsType.name,
+            'model-value': prop.row.dmsType?.name,
         }),
     },
     {
         align: 'left',
-        field: 'order',
+        field: 'hardCopyNumber',
         label: t('globals.order'),
         name: 'order',
         component: 'span',
@@ -117,6 +128,7 @@ const columns = computed(() => [
         label: t('globals.description'),
         name: 'description',
         component: 'span',
+        props: (prop) => ({ value: prop.value?.toUpperCase() }),
     },
     {
         align: 'left',
@@ -136,21 +148,53 @@ const columns = computed(() => [
         name: 'file',
         component: 'span',
     },
+    {
+        align: 'left',
+        field: 'worker',
+        label: t('globals.worker'),
+        name: 'worker',
+        component: VnUserLink,
+        props: (prop) => ({
+            name: prop.row.worker?.user?.name.toLowerCase(),
+            workerId: prop.row.worker?.id,
+        }),
+    },
+    {
+        align: 'left',
+        field: 'created',
+        label: t('globals.created'),
+        name: 'created',
+        component: VnInputDate,
+        props: (prop) => ({
+            disable: true,
+            'model-value': prop.row.created,
+        }),
+    },
     {
         field: 'options',
         name: 'options',
         components: [
             {
                 component: QBtn,
+                name: 'download',
+                isDocuware: true,
                 props: () => ({
                     icon: 'cloud_download',
                     flat: true,
                     color: 'primary',
                 }),
-                click: (prop) => downloadFile(prop.row.id),
+                click: (prop) =>
+                    downloadFile(
+                        prop.row.id,
+                        $props.downloadModel,
+                        null,
+                        prop.row.download
+                    ),
             },
             {
                 component: QBtn,
+                name: 'edit',
+                external: false,
                 props: () => ({
                     icon: 'edit',
                     flat: true,
@@ -160,6 +204,8 @@ const columns = computed(() => [
             },
             {
                 component: QBtn,
+                name: 'delete',
+                external: false,
                 props: () => ({
                     icon: 'delete',
                     flat: true,
@@ -167,12 +213,24 @@ const columns = computed(() => [
                 }),
                 click: (prop) => deleteDms(prop.row.id),
             },
+            {
+                component: QBtn,
+                name: 'open',
+                external: true,
+                props: () => ({
+                    icon: 'open_in_new',
+                    flat: true,
+                    color: 'primary',
+                }),
+                click: (prop) => open(prop.row.url),
+            },
         ],
     },
 ]);
 
 function setData(data) {
-    const newData = data.map((value) => value.dms);
+    const newData = data.map((value) => value.dms || value);
+    newData.sort((a, b) => new Date(b.created) - new Date(a.created));
     rows.value = newData;
 }
 
@@ -186,7 +244,7 @@ function deleteDms(dmsFk) {
             },
         })
         .onOk(async () => {
-            await axios.post(`${$props.model}/${dmsFk}/removeFile`);
+            await axios.post(`${$props.deleteModel ?? $props.model}/${dmsFk}/removeFile`);
             const index = rows.value.findIndex((row) => row.id == dmsFk);
             rows.value.splice(index, 1);
         });
@@ -206,84 +264,106 @@ function parseDms(data) {
     }
     return data;
 }
+
+async function open(url) {
+    window.open(url).focus();
+}
+
+function shouldRenderButton(button, isExternal = false) {
+    if (button.name == 'download') return true;
+    return button.external === isExternal;
+}
 </script>
 <template>
-    <FetchData
+    <VnPaginate
         ref="dmsRef"
+        :data-key="$props.model"
         :url="$props.model"
         :filter="dmsFilter"
-        :where="{ [$props.filter]: route.params.id }"
+        :order="['dmsFk DESC']"
+        :auto-load="true"
         @on-fetch="setData"
-        auto-load
-    />
-    <QTable
-        :columns="columns"
-        :rows="rows"
-        class="full-width q-mt-md"
-        hide-bottom
-        row-key="clientFk"
-        :grid="$q.screen.lt.sm"
     >
-        <template #body-cell="props">
-            <QTd :props="props">
-                <QTr :props="props">
-                    <component
-                        v-if="props.col.component"
-                        :is="props.col.component"
-                        v-bind="props.col.props && props.col.props(props)"
-                    >
-                        <span
-                            v-if="props.col.component == 'span'"
-                            style="white-space: wrap"
-                            >{{ props.value }}</span
-                        >
-                    </component>
-                </QTr>
-
-                <div class="flex justify-center" v-if="props.col.name == 'options'">
-                    <div v-for="button of props.col.components" :key="button.id">
-                        <component
-                            :is="button.component"
-                            v-bind="button.props(props)"
-                            @click="button.click(props)"
-                        />
-                    </div>
-                </div>
-            </QTd>
-        </template>
-        <template #item="props">
-            <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
-                <QCard
-                    bordered
-                    flat
-                    @keyup.ctrl.enter.stop="claimDevelopmentForm?.saveChanges()"
-                >
-                    <QSeparator />
-                    <QList dense>
-                        <QItem v-for="col in props.cols" :key="col.name">
-                            <div v-if="col.name != 'options'" class="row">
-                                <span class="labelColor">{{ col.label }}:</span>
-                                <span>{{ col.value }}</span>
-                            </div>
-                            <div v-if="col.name == 'options'" class="row">
-                                <div
-                                    v-for="button of col.components"
-                                    :key="button.id"
-                                    class="row"
+        <template #body>
+            <QTable
+                :columns="columns"
+                :rows="rows"
+                class="full-width q-mt-md"
+                hide-bottom
+                row-key="clientFk"
+                :grid="$q.screen.lt.sm"
+            >
+                <template #body-cell="props">
+                    <QTd :props="props">
+                        <QTr :props="props">
+                            <component
+                                v-if="props.col.component"
+                                :is="props.col.component"
+                                v-bind="props.col.props && props.col.props(props)"
+                            >
+                                <span
+                                    v-if="props.col.component == 'span'"
+                                    style="white-space: wrap"
+                                    >{{ props.value }}</span
                                 >
-                                    <component
-                                        :is="button.component"
-                                        v-bind="button.props(col)"
-                                        @click="button.click(col)"
-                                    />
-                                </div>
+                            </component>
+                        </QTr>
+
+                        <div class="row no-wrap" v-if="props.col.name == 'options'">
+                            <div v-for="button of props.col.components" :key="button.id">
+                                <component
+                                    v-if="
+                                        shouldRenderButton(button, props.row.isDocuware)
+                                    "
+                                    :is="button.component"
+                                    v-bind="button.props(props)"
+                                    @click="button.click(props)"
+                                />
                             </div>
-                        </QItem>
-                    </QList>
-                </QCard>
-            </div>
+                        </div>
+                    </QTd>
+                </template>
+                <template #item="props">
+                    <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
+                        <QCard
+                            bordered
+                            flat
+                            @keyup.ctrl.enter.stop="claimDevelopmentForm?.saveChanges()"
+                        >
+                            <QSeparator />
+                            <QList dense>
+                                <QItem v-for="col in props.cols" :key="col.name">
+                                    <div v-if="col.name != 'options'" class="row">
+                                        <span class="labelColor">{{ col.label }}:</span>
+                                        <span>{{ col.value }}</span>
+                                    </div>
+                                    <div v-if="col.name == 'options'" class="row">
+                                        <div
+                                            v-for="button of col.components"
+                                            :key="button.id"
+                                            class="row"
+                                        >
+                                            <component
+                                                v-if="
+                                                    shouldRenderButton(
+                                                        button.name,
+                                                        props.row.isDocuware
+                                                    )
+                                                "
+                                                :is="button.component"
+                                                v-bind="button.props(col)"
+                                                @click="button.click(col)"
+                                            />
+                                        </div>
+                                    </div>
+                                </QItem>
+                            </QList>
+                        </QCard>
+                    </div>
+                </template>
+            </QTable>
         </template>
-    </QTable>
+    </VnPaginate>
     <QDialog v-model="formDialog.show">
         <VnDms
             :model="updateModel ?? model"

src/components/common/VnInput.vue

@@ -26,7 +26,7 @@ const value = computed({
         emit('update:modelValue', value);
     },
 });
-
+const hover = ref(false);
 const styleAttrs = computed(() => {
     return $props.isOutlined
         ? {
@@ -41,6 +41,10 @@ const onEnterPress = () => {
     emit('keyup.enter');
 };
 
+const handleValue = (val = null) => {
+    value.value = val;
+};
+
 const focus = () => {
     vnInputRef.value.focus();
 };
@@ -51,20 +55,33 @@ defineExpose({
 </script>
 
 <template>
-    <QInput
-        ref="vnInputRef"
-        v-model="value"
-        v-bind="{ ...$attrs, ...styleAttrs }"
-        type="text"
-        :class="{ required: $attrs.required }"
-        @keyup.enter="onEnterPress()"
+    <div
+        @mouseover="hover = true"
+        @mouseleave="hover = false"
         :rules="$attrs.required ? [requiredFieldRule] : null"
     >
-        <template v-if="$slots.prepend" #prepend>
-            <slot name="prepend" />
-        </template>
-        <template v-if="$slots.append" #append>
-            <slot name="append" />
-        </template>
-    </QInput>
+        <QInput
+            ref="vnInputRef"
+            v-model="value"
+            v-bind="{ ...$attrs, ...styleAttrs }"
+            :type="$attrs.type"
+            :class="{ required: $attrs.required }"
+            @keyup.enter="onEnterPress()"
+            :clearable="false"
+        >
+            <template v-if="$slots.prepend" #prepend>
+                <slot name="prepend" />
+            </template>
+
+            <template #append>
+                <slot name="append" v-if="$slots.append" />
+                <QIcon
+                    name="close"
+                    size="xs"
+                    v-if="hover && value"
+                    @click="handleValue(null)"
+                ></QIcon>
+            </template>
+        </QInput>
+    </div>
 </template>

src/components/common/VnInputDate.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue';
-import VnInput from 'components/common/VnInput.vue';
-import isValidDate from "filters/isValidDate";
+import isValidDate from 'filters/isValidDate';
 
 const props = defineProps({
     modelValue: {
@@ -17,6 +16,8 @@ const props = defineProps({
         default: false,
     },
 });
+const hover = ref(false);
+
 const emit = defineEmits(['update:modelValue']);
 
 const joinDateAndTime = (date, time) => {
@@ -77,30 +78,39 @@ const styleAttrs = computed(() => {
 </script>
 
 <template>
-    <VnInput
-        class="vn-input-date"
-        :model-value="displayDate(value)"
-        v-bind="{ ...$attrs, ...styleAttrs }"
-        readonly
-        @click="isPopupOpen = true"
-    >
-        <template #append>
-            <QIcon name="event" class="cursor-pointer">
-                <QPopupProxy
-                    v-model="isPopupOpen"
-                    cover
-                    transition-show="scale"
-                    transition-hide="scale"
-                    :no-parent-event="props.readonly"
-                >
-                    <QDate
-                        :model-value="formatDate(value)"
-                        @update:model-value="onDateUpdate"
-                    />
-                </QPopupProxy>
-            </QIcon>
-        </template>
-    </VnInput>
+    <div @mouseover="hover = true" @mouseleave="hover = false">
+        <QInput
+            class="vn-input-date"
+            readonly
+            :model-value="displayDate(value)"
+            v-bind="{ ...$attrs, ...styleAttrs }"
+            @click="isPopupOpen = true"
+        >
+            <template #append>
+                <QIcon
+                    name="close"
+                    size="xs"
+                    v-if="hover && value"
+                    @click="onDateUpdate(null)"
+                ></QIcon>
+                <QIcon name="event" class="cursor-pointer">
+                    <QPopupProxy
+                        v-model="isPopupOpen"
+                        cover
+                        transition-show="scale"
+                        transition-hide="scale"
+                        :no-parent-event="props.readonly"
+                    >
+                        <QDate
+                            :today-btn="true"
+                            :model-value="formatDate(value)"
+                            @update:model-value="onDateUpdate"
+                        />
+                    </QPopupProxy>
+                </QIcon>
+            </template>
+        </QInput>
+    </div>
 </template>
 
 <style lang="scss">

src/components/common/VnInputTime.vue

@@ -2,7 +2,6 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import isValidDate from 'filters/isValidDate';
-import VnInput from "components/common/VnInput.vue";
 
 const props = defineProps({
     modelValue: {
@@ -20,6 +19,7 @@ const props = defineProps({
 });
 const { t } = useI18n();
 const emit = defineEmits(['update:modelValue']);
+
 const value = computed({
     get() {
         return props.modelValue;
@@ -27,12 +27,7 @@ const value = computed({
     set(value) {
         const [hours, minutes] = value.split(':');
         const date = new Date(props.modelValue);
-        date.setHours(
-            Number.parseInt(hours) || 0,
-            Number.parseInt(minutes) || 0,
-            0,
-            0
-        );
+        date.setHours(Number.parseInt(hours) || 0, Number.parseInt(minutes) || 0, 0, 0);
         emit('update:modelValue', value ? date.toISOString() : null);
     },
 });
@@ -71,7 +66,7 @@ const styleAttrs = computed(() => {
 </script>
 
 <template>
-    <VnInput
+    <QInput
         class="vn-input-time"
         readonly
         :model-value="formatTime(value)"
@@ -79,7 +74,7 @@ const styleAttrs = computed(() => {
         @click="isPopupOpen = true"
     >
         <template #append>
-            <QIcon name="event" class="cursor-pointer">
+            <QIcon name="schedule" class="cursor-pointer">
                 <QPopupProxy
                     v-model="isPopupOpen"
                     cover
@@ -111,7 +106,7 @@ const styleAttrs = computed(() => {
                 </QPopupProxy>
             </QIcon>
         </template>
-    </VnInput>
+    </QInput>
 </template>
 
 <style lang="scss">

src/components/common/VnLocation.vue

@@ -88,6 +88,10 @@ function locationFilter(search = '') {
 function handleFetch(data) {
     postcodesOptions.value = data;
 }
+function onDataSaved(newPostcode) {
+    postcodesOptions.value.push(newPostcode);
+    value.value = newPostcode.code;
+}
 </script>
 <template>
     <FetchData
@@ -111,11 +115,13 @@ function handleFetch(data) {
         clearable
     >
         <template #form>
-            <CreateNewPostcode @on-data-saved="locationFilter()" />
+            <CreateNewPostcode
+                @on-data-saved="onDataSaved"
+            />
         </template>
         <template #option="{ itemProps, opt }">
             <QItem v-bind="itemProps">
-                <QItemSection v-if="opt">
+                <QItemSection v-if="opt.code">
                     <QItemLabel>{{ opt.code }}</QItemLabel>
                     <QItemLabel caption>{{ showLabel(opt) }}</QItemLabel>
                 </QItemSection>

src/components/common/VnLog.vue

@@ -1030,7 +1030,7 @@ en:
         ticketCreated: Created
         created: Created
         isChargedToMana: Charged to mana
-        hasToPickUp: Has to pick Up
+        pickup: Type of pickup
         dmsFk: Document ID
         text: Description
         claimStateFk: Claim State
@@ -1069,7 +1069,7 @@ es:
         ticketCreated: Creado
         created: Creado
         isChargedToMana: Cargado a maná
-        hasToPickUp: Se debe recoger
+        pickup: Se debe recoger
         dmsFk: ID documento
         text: Descripción
         claimStateFk: Estado de la reclamación

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;
     }
@@ -157,7 +157,7 @@ const emit = defineEmits(['onFetch']);
             <div class="icons">
                 <slot name="icons" :entity="entity" />
             </div>
-            <div class="actions">
+            <div class="actions justify-center">
                 <slot name="actions" :entity="entity" />
             </div>
             <slot name="after" />
@@ -176,22 +176,23 @@ const emit = defineEmits(['onFetch']);
 .body {
     background-color: var(--vn-section-color);
     .text-h5 {
+        font-size: 20px;
         padding-top: 5px;
-        padding-bottom: 5px;
+        padding-bottom: 0px;
     }
     .q-item {
         min-height: 20px;
 
         .link {
-            margin-left: 5px;
+            margin-left: 10px;
         }
     }
     .vn-label-value {
         display: flex;
-        padding: 2px 16px;
+        padding: 0px 16px;
         .label {
             color: var(--vn-label-color);
-            font-size: 12px;
+            font-size: 14px;
 
             &:not(:has(a))::after {
                 content: ':';
@@ -200,7 +201,7 @@ const emit = defineEmits(['onFetch']);
         .value {
             color: var(--vn-text-color);
             font-size: 14px;
-            margin-left: 12px;
+            margin-left: 4px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -218,18 +219,19 @@ const emit = defineEmits(['onFetch']);
     overflow: hidden;
     text-overflow: ellipsis;
     span {
-        color: $primary;
+        color: var(--vn-text-color);
         font-weight: bold;
     }
 }
 .subtitle {
     color: var(--vn-text-color);
     font-size: 16px;
-    margin-bottom: 15px;
+    margin-bottom: 2px;
 }
 .list-box {
     .q-item__label {
         color: var(--vn-label-color);
+        padding-bottom: 0%;
     }
 }
 .descriptor {
@@ -247,6 +249,7 @@ const emit = defineEmits(['onFetch']);
     }
     .actions {
         margin: 0 5px;
+        justify-content: center !important;
     }
 }
 </style>

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({
@@ -74,7 +74,7 @@ async function fetch() {
                         </router-link>
                         <span v-else></span>
                     </slot>
-                    <slot name="header" :entity="entity">
+                    <slot name="header" :entity="entity" dense>
                         <VnLv :label="`${entity.id} -`" :value="entity.name" />
                     </slot>
                     <slot name="header-right">
@@ -97,7 +97,6 @@ async function fetch() {
 
 .cardSummary {
     width: 100%;
-
     .summaryHeader {
         text-align: center;
         font-size: 20px;
@@ -132,6 +131,7 @@ async function fetch() {
             padding: 7px;
             font-size: 16px;
             min-width: 275px;
+            box-shadow: none;
 
             .vn-label-value {
                 display: flex;

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/VnLinkPhone.vue

@@ -15,7 +15,6 @@ const { t } = useI18n();
         color="primary"
         padding="none"
         :href="`sip:${props.phoneNumber}`"
-        :title="t('globals.microsip')"
         @click.stop
     />
 </template>

src/components/ui/VnPaginate.vue

@@ -63,7 +63,6 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['onFetch', 'onPaginate']);
-defineExpose({ fetch });
 const isLoading = ref(false);
 const pagination = ref({
     sortBy: props.order,
@@ -80,6 +79,7 @@ const arrayData = useArrayData(props.dataKey, {
     userParams: props.userParams,
     exprBuilder: props.exprBuilder,
 });
+const hasMoreData = ref();
 const store = arrayData.store;
 
 onMounted(() => {
@@ -96,6 +96,10 @@ watch(
     () => route.params.id,
     () => arrayData.reloadRoute()
 );
+const addFilter = async (filter, params) => {
+    await arrayData.addFilter({ filter, params });
+};
+
 async function fetch() {
     await arrayData.fetch({ append: false });
     if (!arrayData.hasMoreData.value) {
@@ -111,11 +115,10 @@ async function paginate() {
 
     isLoading.value = true;
     await arrayData.loadMore();
-
     if (!arrayData.hasMoreData.value) {
         if (store.userParamsChanged) arrayData.hasMoreData.value = true;
         store.userParamsChanged = false;
-        isLoading.value = false;
+        endPagination();
         return;
     }
 
@@ -125,12 +128,15 @@ async function paginate() {
     pagination.value.sortBy = sortBy;
     pagination.value.descending = descending;
 
-    isLoading.value = false;
+    endPagination();
+}
 
+function endPagination() {
+    hasMoreData.value = arrayData.hasMoreData.value;
+    isLoading.value = false;
     emit('onFetch', store.data);
     emit('onPaginate');
 }
-
 async function onLoad(index, done) {
     if (!store.data) {
         return done();
@@ -145,6 +151,8 @@ async function onLoad(index, done) {
     if (store.userParamsChanged) isDone = !arrayData.hasMoreData.value;
     done(isDone);
 }
+
+defineExpose({ fetch, addFilter });
 </script>
 
 <template>
@@ -193,6 +201,9 @@ async function onLoad(index, done) {
             <QSpinner color="orange" size="md" />
         </div>
     </QInfiniteScroll>
+    <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>
 
 <style lang="scss" scoped>
@@ -209,4 +220,5 @@ async function onLoad(index, done) {
 es:
     No data to display: Sin datos que mostrar
     No results found: No se han encontrado resultados
+    Load more data: Cargar más resultados
 </i18n>

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/VnSubToolbar.vue

@@ -14,7 +14,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <QToolbar class="justify-end sticky">
+    <QToolbar class="bg-vn-section-color justify-end sticky">
         <slot name="st-data">
             <div id="st-data"></div>
         </slot>
@@ -24,6 +24,11 @@ onUnmounted(() => {
         </slot>
     </QToolbar>
 </template>
+<style lang="scss">
+.q-toolbar {
+    background: var(--vn-section-color);
+}
+</style>
 <style lang="scss" scoped>
 .sticky {
     position: sticky;

src/components/ui/VnTree.vue

@@ -76,7 +76,7 @@ const removeNode = (node) => {
                 notify(t('department.departmentRemoved'), 'positive');
                 await fetchNodeLeaves(parentFk);
             } catch (err) {
-                console.log('Error removing department');
+                console.error('Error removing department');
             }
         });
 };

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/downloadFile.js

@@ -1,11 +1,11 @@
 import { useSession } from 'src/composables/useSession';
 import { getUrl } from './getUrl';
 
-const {getTokenMultimedia} = useSession();
-const token =  getTokenMultimedia();
+const { getTokenMultimedia } = useSession();
+const token = getTokenMultimedia();
 
-export async function downloadFile(dmsId) {
+export async function downloadFile(id, model = 'dms', urlPath = '/downloadFile', url) {
     let appUrl = await getUrl('', 'lilium');
     appUrl = appUrl.replace('/#/', '');
-    window.open(`${appUrl}/api/dms/${dmsId}/downloadFile?access_token=${token}`);
+    window.open(url ?? `${appUrl}/api/${model}/${id}${urlPath}?access_token=${token}`);
 }

src/composables/useArrayData.js

@@ -1,5 +1,5 @@
 import { onMounted, ref, computed } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
+import { useRoute } from 'vue-router';
 import axios from 'axios';
 import { useArrayDataStore } from 'stores/useArrayDataStore';
 import { buildFilter } from 'filters/filterPanel';
@@ -15,7 +15,6 @@ export function useArrayData(key, userOptions) {
 
     const store = arrayDataStore.get(key);
     const hasMoreData = ref(false);
-    const router = useRouter();
     const route = useRoute();
     let canceller = null;
 
@@ -118,14 +117,14 @@ export function useArrayData(key, userOptions) {
 
         const { limit } = filter;
 
-        hasMoreData.value = response.data.length === limit;
+        hasMoreData.value = response.data.length >= limit;
 
         if (append) {
             if (!store.data) store.data = [];
             for (const row of response.data) store.data.push(row);
         } else {
             store.data = response.data;
-            if (!document.querySelectorAll('[role="dialog"]'))
+            if (!document.querySelectorAll('[role="dialog"]').length)
                 updateRouter && updateStateParams();
         }
 
@@ -165,6 +164,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 };
     }
@@ -208,11 +209,15 @@ export function useArrayData(key, userOptions) {
         if (store.userParams && Object.keys(store.userParams).length !== 0)
             query.params = JSON.stringify(store.userParams);
 
-        if (router)
-            router.replace({
-                path: route.path,
-                query: query,
-            });
+        const url = new URL(window.location.href);
+        const { hash: currentHash } = url;
+        const [currentRoute] = currentHash.split('?');
+
+        const params = new URLSearchParams();
+        for (const param in query) params.append(param, query[param]);
+
+        url.hash = currentRoute + '?' + params.toString();
+        window.history.pushState({}, '', url.hash);
     }
 
     const totalRows = computed(() => (store.data && store.data.length) || 0);

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('tokenMultimedia');
-        const sessionTokenMultimedia = sessionStorage.getItem('tokenMultimedia');
+        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;
@@ -14,21 +15,15 @@ body.body--light {
     .q-header .q-toolbar {
         color: var(--font-color);
     }
-    .q-card,
-    .q-table,
-    .q-table__bottom,
-    .q-drawer {
-        background-color: var(--vn-section-color);
-    }
 }
-
 body.body--dark {
-    --vn-section-color: #403c3c;
+    --vn-page-color: #222;
+    --vn-section-color: #3d3d3d;
     --vn-text-color: white;
     --vn-label-color: #a8a8a8;
     --vn-accent-color: #424242;
 
-    background-color: #222;
+    background-color: var(--vn-page-color);
 }
 
 a {
@@ -76,6 +71,9 @@ select:-webkit-autofill {
 .bg-vn-section-color {
     background-color: var(--vn-section-color);
 }
+.bg-hover {
+    background-color: #666666;
+}
 
 .color-vn-text {
     color: var(--vn-text-color);
@@ -85,6 +83,11 @@ select:-webkit-autofill {
     color: $white;
 }
 
+.card-width {
+    max-width: 800px;
+    width: 100%;
+}
+
 .vn-card {
     background-color: var(--vn-section-color);
     color: var(--vn-text-color);
@@ -118,9 +121,36 @@ select:-webkit-autofill {
     content: ' *';
 }
 
-.q-chip {
+.q-card,
+.q-table,
+.q-table__bottom,
+.q-drawer {
+    background-color: var(--vn-section-color);
+}
+
+.q-chip,
+.q-notification__message,
+.q-notification__icon {
     color: black;
 }
+.q-notification--standard.bg-negative {
+    background-color: #fa3939 !important;
+}
+.q-notification--standard.bg-positive {
+    background-color: #a3d131 !important;
+}
+
+.q-tooltip {
+    background-color: var(--vn-page-color);
+    color: var(--font-color);
+    font-size: medium;
+}
+
+.q-card__actions {
+    justify-content: center;
+}
+
+/* q-notification row items-stretch q-notification--standard bg-negative text-white */
 
 input[type='number'] {
     -moz-appearance: textfield;
@@ -131,3 +161,14 @@ input::-webkit-inner-spin-button {
     -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/css/quasar.variables.scss

@@ -22,7 +22,7 @@ $warning: #f4b974;
 $success: $positive;
 $alert: $negative;
 $white: #fff;
-$dark: #3c3b3b;
+$dark: #3d3d3d;
 // custom
 $color-link: #66bfff;
 $color-spacer-light: #a3a3a31f;

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/ClaimBasicData.vue

@@ -9,6 +9,7 @@ import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 
+import axios from 'axios';
 import { useSession } from 'src/composables/useSession';
 
 const route = useRoute();
@@ -24,7 +25,7 @@ const claimFilter = {
         'workerFk',
         'claimStateFk',
         'packages',
-        'hasToPickUp',
+        'pickup',
     ],
     include: [
         {
@@ -50,6 +51,20 @@ function setClaimStates(data) {
     claimStates.value = data;
     claimStatesCopy.value = data;
 }
+let optionsList;
+async function getEnumValues() {
+    optionsList = [{ id: null, description: t('claim.basicData.null') }];
+    const { data } = await axios.get(`Applications/get-enum-values`, {
+        params: {
+            schema: 'vn',
+            table: 'claim',
+            column: 'pickup',
+        },
+    });
+    for (let value of data)
+        optionsList.push({ id: value, description: t(`claim.basicData.${value}`) });
+}
+getEnumValues();
 
 const workerFilter = {
     options: workers,
@@ -168,13 +183,19 @@ const statesFilter = {
                         type="number"
                     />
                 </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QCheckbox
-                        v-model="data.hasToPickUp"
-                        :label="t('claim.basicData.picked')"
-                    />
+                    <QSelect
+                        v-model="data.pickup"
+                        :options="optionsList"
+                        option-value="id"
+                        option-label="description"
+                        emit-value
+                        :label="t('claim.basicData.pickup')"
+                        map-options
+                        use-input
+                        :input-debounce="0"
+                    >
+                    </QSelect>
                 </div>
             </VnRow>
         </template>

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,16 +215,15 @@ 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>
-                <QCheckbox
-                    :label="t('claim.basicData.picked')"
-                    v-model="claim.hasToPickUp"
-                    :disable="true"
+                <VnLv
+                    :label="t('claim.summary.pickup')"
+                    :value="t(`claim.summary.${claim.pickup}`)"
                 />
             </QCard>
             <QCard class="vn-three">

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/Department/Card/DepartmentDescriptor.vue

@@ -63,7 +63,7 @@ const removeDepartment = () => {
                 router.push({ name: 'WorkerDepartment' });
                 notify('department.departmentRemoved', 'positive');
             } catch (err) {
-                console.log('Error removing department');
+                console.error('Error removing department');
             }
         });
 };

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/InvoiceIn/Card/InvoiceInVat.vue

@@ -32,6 +32,13 @@ const invoiceInFormRef = ref();
 const expensesRef = ref();
 const newExpenseRef = ref();
 
+defineProps({
+    actionIcon: {
+        type: String,
+        default: 'add',
+    },
+});
+
 const columns = computed(() => [
     {
         name: 'expense',
@@ -207,17 +214,16 @@ async function addExpense() {
                                     @click.stop="value = null"
                                     class="cursor-pointer"
                                 />
-                                <QBtn
-                                    padding="xs"
-                                    round
-                                    flat
-                                    icon="add_circle"
-                                    @click.stop="newExpenseRef.show()"
+                                <QIcon
+                                    @click.stop.prevent="newExpenseRef.show()"
+                                    :name="actionIcon"
+                                    size="xs"
+                                    class="default-icon"
                                 >
                                     <QTooltip>
                                         {{ t('Create expense') }}
                                     </QTooltip>
-                                </QBtn>
+                                </QIcon>
                             </template>
                         </VnSelectFilter>
                     </QTd>
@@ -470,6 +476,11 @@ async function addExpense() {
 .q-item {
     min-height: 0;
 }
+.default-icon {
+    cursor: pointer;
+    border-radius: 50px;
+    background-color: $primary;
+}
 </style>
 <i18n>
 es:

src/pages/InvoiceIn/InvoiceInFilter.vue

@@ -29,6 +29,7 @@ const suppliersRef = ref();
         order="nickname"
         limit="30"
         @on-fetch="(data) => (suppliers = data)"
+        auto-load
     />
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
@@ -38,46 +39,6 @@ const suppliersRef = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QItem>
-                <QItemSection>
-                    <VnInput
-                        :label="t('Id or Supplier')"
-                        v-model="params.search"
-                        is-outlined
-                    >
-                        <template #prepend>
-                            <QIcon name="badge" size="sm"></QIcon>
-                        </template>
-                    </VnInput>
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInput
-                        :label="useCapitalize(t('params.correctedFk'))"
-                        v-model="params.correctedFk"
-                        is-outlined
-                    >
-                        <template #prepend>
-                            <QIcon name="attachment" size="sm" />
-                        </template>
-                    </VnInput>
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInput
-                        :label="t('params.supplierRef')"
-                        v-model="params.supplierRef"
-                        is-outlined
-                        lazy-rules
-                    >
-                        <template #prepend>
-                            <QIcon name="vn:client" size="sm"></QIcon>
-                        </template>
-                    </VnInput>
-                </QItemSection>
-            </QItem>
             <QItem>
                 <QItemSection>
                     <VnSelectFilter
@@ -97,31 +58,31 @@ const suppliersRef = ref();
             <QItem>
                 <QItemSection>
                     <VnInput
-                        :label="t('params.fi')"
-                        v-model="params.fi"
+                        :label="t('params.supplierRef')"
+                        v-model="params.supplierRef"
                         is-outlined
                         lazy-rules
                     >
                         <template #prepend>
-                            <QIcon name="badge" size="sm"></QIcon>
+                            <QIcon name="vn:client" size="sm"></QIcon>
                         </template>
                     </VnInput>
                 </QItemSection>
             </QItem>
             <QItem>
-                <QItemSection>
-                    <VnInput
-                        :label="t('params.serialNumber')"
-                        v-model="params.serialNumber"
-                        is-outlined
-                        lazy-rules
-                    >
-                        <template #prepend>
-                            <QIcon name="badge" size="sm"></QIcon>
-                        </template>
-                    </VnInput>
-                </QItemSection>
-            </QItem>
+                    <QItemSection>
+                        <VnInputDate
+                            :label="t('From')"
+                            v-model="params.from"
+                            is-outlined
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInputDate :label="t('To')" v-model="params.to" is-outlined />
+                    </QItemSection>
+                </QItem>
             <QItem>
                 <QItemSection>
                     <VnInput
@@ -152,6 +113,34 @@ const suppliersRef = ref();
                 </QItemSection>
             </QItem>
             <QExpansionItem :label="t('More options')" expand-separator>
+                <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('params.fi')"
+                        v-model="params.fi"
+                        is-outlined
+                        lazy-rules
+                    >
+                        <template #prepend>
+                            <QIcon name="badge" size="sm"></QIcon>
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('params.serialNumber')"
+                        v-model="params.serialNumber"
+                        is-outlined
+                        lazy-rules
+                    >
+                        <template #prepend>
+                            <QIcon name="badge" size="sm"></QIcon>
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
                 <QItem>
                     <QItemSection>
                         <VnInput
@@ -180,20 +169,6 @@ const suppliersRef = ref();
                         </VnInput>
                     </QItemSection>
                 </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            :label="t('From')"
-                            v-model="params.from"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate :label="t('To')" v-model="params.to" is-outlined />
-                    </QItemSection>
-                </QItem>
                 <QItem>
                     <QItemSection>
                         <VnInputDate

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/Login/LoginMain.vue

@@ -55,7 +55,7 @@ async function onSubmit() {
         if (res.response?.data?.error?.code === 'REQUIRES_2FA') {
             Notify.create({
                 message: t('login.twoFactorRequired'),
-                icon: 'phonelink_lock',
+                icon: 'phoneLink_lock',
                 type: 'warning',
             });
             params.keepLogin = keepLogin.value;

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/Route/RouteRoadmap.vue

@@ -277,7 +277,6 @@ function navigateToRoadmapSummary(event, row) {
 .route-list {
     width: 100%;
 }
-
 .table-actions {
     gap: 12px;
 }

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/Ticket/Card/TicketSummary.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, computed, onUpdated } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
@@ -14,8 +14,6 @@ import { getUrl } from 'src/composables/getUrl';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 
-onUpdated(() => summaryRef.value.fetch());
-
 const route = useRoute();
 const router = useRouter();
 

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

@@ -0,0 +1,171 @@
+<script setup>
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'src/components/FormModel.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 { t } = useI18n();
+
+const workersOptions = ref([]);
+const countriesOptions = ref([]);
+const educationLevelsOptions = ref([]);
+
+const workerFilter = {
+    include: [
+        {
+            relation: 'user',
+            scope: {
+                fields: ['name', 'emailVerified'],
+                include: { relation: 'emailUser', scope: { fields: ['email'] } },
+            },
+        },
+        { relation: 'sip', scope: { fields: ['extension', 'secret'] } },
+        { relation: 'department', scope: { include: { relation: 'department' } } },
+        { relation: 'client', scope: {fields:['phone']} },
+    ],
+};
+const workersFilter = {
+    fields: ['id', 'nickname'],
+    order: 'nickname ASC',
+    limit: 30,
+};
+const countriesFilter = {
+    fields: ['id', 'country', 'code'],
+    order: 'country ASC',
+    limit: 30,
+};
+const educationLevelsFilter = { fields: ['id', 'name'], order: 'name ASC', limit: 30 };
+
+const maritalStatus = [
+    { code: 'M', name: t('Married') },
+    { code: 'S', name: t('Single') },
+];
+</script>
+
+<template>
+    <FetchData
+        :filter="workersFilter"
+        @on-fetch="(data) => (workersOptions = data)"
+        auto-load
+        url="Workers/search"
+    />
+    <FetchData
+        :filter="countriesFilter"
+        @on-fetch="(data) => (countriesOptions = data)"
+        auto-load
+        url="Countries"
+    />
+    <FetchData
+        :filter="educationLevelsFilter"
+        @on-fetch="(data) => (educationLevelsOptions = data)"
+        auto-load
+        url="EducationLevels"
+    />
+
+    <FormModel
+        :filter="workerFilter"
+        :url="`Workers/${route.params.id}`"
+        auto-load
+        model="Worker"
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput :label="t('Name')" clearable v-model="data.firstName" />
+                <VnInput :label="t('Last name')" clearable v-model="data.lastName" />
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput v-model="data.phone" :label="t('Business phone')" clearable />
+                <VnInput
+                    v-model="data.mobileExtension"
+                    :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">
+                <VnSelectFilter
+                    :label="t('Boss')"
+                    :options="workersOptions"
+                    hide-selected
+                    option-label="nickname"
+                    option-value="id"
+                    v-model="data.bossFk"
+                >
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            <QItemSection>
+                                <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
+                                <QItemLabel caption>
+                                    {{ scope.opt?.nickname }},
+                                    {{ scope.opt?.code }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelectFilter>
+                <VnSelectFilter
+                    :label="t('Marital status')"
+                    :options="maritalStatus"
+                    hide-selected
+                    option-label="name"
+                    option-value="code"
+                    v-model="data.maritalStatus"
+                />
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnSelectFilter
+                    :label="t('Origin country')"
+                    :options="countriesOptions"
+                    hide-selected
+                    option-label="country"
+                    option-value="id"
+                    v-model="data.originCountryFk"
+                />
+                <VnSelectFilter
+                    :label="t('Education level')"
+                    :options="educationLevelsOptions"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    v-model="data.educationLevelFk"
+                />
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput v-model="data.SSN" :label="t('SSN')" clearable />
+                <VnInput
+                    v-model="data.locker"
+                    type="number"
+                    :label="t('Locker')"
+                    clearable
+                />
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
+
+<i18n>
+es:
+    Name: Nombre
+    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
+    Single: Soltero/a
+    Origin country: País origen
+    Education level: Nivel educación
+    SSN: NSS
+    Locker: Taquilla
+</i18n>

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
@@ -7,6 +7,7 @@ import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import useCardDescription from 'src/composables/useCardDescription';
+import { useState } from 'src/composables/useState';
 
 const $props = defineProps({
     id: {
@@ -23,37 +24,27 @@ const $props = defineProps({
 const route = useRoute();
 const { t } = useI18n();
 const { getTokenMultimedia } = useSession();
+const state = useState();
 
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
 
 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 = computed(() => worker.value?.sip && worker.value.sip.extension);
+const sip = ref(null);
+
+watch(
+    () => [worker.value?.sip?.extension, state.get('extension')],
+    ([newWorkerSip, newStateExtension], [oldWorkerSip, oldStateExtension]) => {
+        if (newStateExtension !== oldStateExtension || sip.value === oldStateExtension) {
+            sip.value = newStateExtension;
+        } else if (newWorkerSip !== oldWorkerSip && sip.value !== newStateExtension) {
+            sip.value = newWorkerSip;
+        }
+    }
+);
 
 function getWorkerAvatar() {
     const token = getTokenMultimedia();
@@ -69,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/WorkerDms.vue

@@ -0,0 +1,15 @@
+<script setup>
+import VnDmsList from 'src/components/common/VnDmsList.vue';
+import { useRoute } from 'vue-router';
+const route = useRoute();
+</script>
+<template>
+    <VnDmsList
+        :model="`WorkerDms/${route.params.id}/filter`"
+        update-model="Workers"
+        delete-model="WorkerDms"
+        download-model="WorkerDms"
+        default-dms-code="hhrrData"
+        filter="worker"
+    />
+</template>

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/WorkerNotes.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { useRoute } from 'vue-router';
+
+import VnNotes from 'src/components/ui/VnNotes.vue';
+
+const route = useRoute();
+
+const filter = {
+    order: 'created DESC',
+    where: { workerFk: route.params.id },
+    include: {
+        relation: 'worker',
+        scope: {
+            fields: ['id', 'firstName', 'lastName'],
+            include: {
+                relation: 'user',
+                scope: {
+                    fields: ['id', 'nickname'],
+                },
+            },
+        },
+    },
+};
+
+const body = {
+    workerFk: route.params.id,
+};
+</script>
+
+<template>
+    <VnNotes
+        style="overflow-y: auto"
+        :add-note="{ type: Boolean, default: true }"
+        url="WorkerObservations"
+        :filter="filter"
+        :body="body"
+    />
+</template>

src/pages/Worker/Card/WorkerPBX.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { watch, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import { useState } from 'src/composables/useState';
+
+import FormModel from 'src/components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+const { t } = useI18n();
+const state = useState();
+const route = useRoute();
+const workerPBXForm = ref();
+const extension = ref(null);
+
+const filter = {
+    include: [
+        {
+            relation: 'sip',
+        },
+    ],
+};
+
+watch(
+    () => route.params.id,
+    () => state.set('extension', null)
+);
+
+const onFetch = (data) => {
+    state.set('extension', data?.sip?.extension);
+    extension.value = state.get('extension');
+};
+
+const updateModelValue = (data) => {
+    state.set('extension', data);
+    workerPBXForm.value.hasChanges = true;
+};
+</script>
+
+<template>
+    <FormModel
+        ref="workerPBXForm"
+        :filter="filter"
+        :url="`Workers/${route.params.id}`"
+        url-update="Sips"
+        auto-load
+        :mapper="
+            () => ({
+                userFk: +route.params.id,
+                extension,
+            })
+        "
+        model="DeviceProductionUser"
+        @on-fetch="onFetch"
+    >
+        <template #form="{}">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        :label="t('worker.summary.sipExtension')"
+                        v-model="extension"
+                        @update:model-value="updateModelValue"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</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

@@ -12,7 +12,16 @@ export default {
     redirect: { name: 'WorkerMain' },
     menus: {
         main: ['WorkerList', 'WorkerDepartment'],
-        card: ['WorkerNotificationsManager', 'WorkerPda', 'WorkerLog'],
+        card: [
+            'WorkerBasicData',
+            'WorkerNotes',
+            'WorkerPda',
+            'WorkerNotificationsManager',
+            'WorkerPBX',
+            'WorkerLog',
+            'WorkerCalendar',
+            'WorkerDms',
+        ],
         departmentCard: ['BasicData'],
     },
     children: [
@@ -45,7 +54,7 @@ export default {
                     name: 'WorkerCreate',
                     meta: {
                         title: 'workerCreate',
-                        icon: '',
+                        icon: 'add',
                     },
                     component: () => import('src/pages/Worker/WorkerCreate.vue'),
                 },
@@ -67,14 +76,30 @@ export default {
                     component: () => import('src/pages/Worker/Card/WorkerSummary.vue'),
                 },
                 {
-                    name: 'WorkerNotificationsManager',
-                    path: 'notifications',
+                    path: 'basic-data',
+                    name: 'WorkerBasicData',
                     meta: {
-                        title: 'notifications',
-                        icon: 'notifications',
+                        title: 'basicData',
+                        icon: 'vn:settings',
                     },
-                    component: () =>
-                        import('src/pages/Worker/Card/WorkerNotificationsManager.vue'),
+                    component: () => import('src/pages/Worker/Card/WorkerBasicData.vue'),
+                },
+                {
+                    path: 'notes',
+                    name: 'NotesCard',
+                    redirect: { name: 'WorkerNotes' },
+                    children: [
+                        {
+                            path: '',
+                            name: 'WorkerNotes',
+                            meta: {
+                                title: 'notes',
+                                icon: 'vn:notes',
+                            },
+                            component: () =>
+                                import('src/pages/Worker/Card/WorkerNotes.vue'),
+                        },
+                    ],
                 },
                 {
                     name: 'WorkerPda',
@@ -85,6 +110,34 @@ export default {
                     },
                     component: () => import('src/pages/Worker/Card/WorkerPda.vue'),
                 },
+                {
+                    name: 'WorkerNotificationsManager',
+                    path: 'notifications',
+                    meta: {
+                        title: 'notifications',
+                        icon: 'notifications',
+                    },
+                    component: () =>
+                        import('src/pages/Worker/Card/WorkerNotificationsManager.vue'),
+                },
+                {
+                    path: 'pbx',
+                    name: 'WorkerPBX',
+                    meta: {
+                        title: 'pbx',
+                        icon: 'vn:pbx',
+                    },
+                    component: () => import('src/pages/Worker/Card/WorkerPBX.vue'),
+                },
+                {
+                    name: 'WorkerDms',
+                    path: 'dms',
+                    meta: {
+                        title: 'dms',
+                        icon: 'cloud_upload',
+                    },
+                    component: () => import('src/pages/Worker/Card/WorkerDms.vue'),
+                },
                 {
                     name: 'WorkerLog',
                     path: 'log',
@@ -94,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/VnLocation.spec.js

@@ -1,48 +1,64 @@
-const locationOptions ='[role="listbox"] > div.q-virtual-scroll__content > .q-item'
+const locationOptions = '[role="listbox"] > div.q-virtual-scroll__content > .q-item';
 describe('VnLocation', () => {
-    describe('Create',()=>{
-        const inputLocation = ':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control';
+    describe('Create', () => {
+        const inputLocation =
+            '.q-form .q-card> :nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control';
         beforeEach(() => {
             cy.viewport(1280, 720);
             cy.login('developer');
             cy.visit('/#/worker/create');
             cy.waitForElement('.q-card');
         });
-
-        it('Show all options', function() {
-        cy.get(inputLocation).click();
-        cy.get(locationOptions).should('have.length',5);
+        it('Show all options', function () {
+            cy.get(inputLocation).click();
+            cy.get(locationOptions).should('have.length.at.least', 5);
         });
-
-        it('input filter location as "al"', function() {
+        it('input filter location as "al"', function () {
             cy.get(inputLocation).click();
             cy.get(inputLocation).clear();
             cy.get(inputLocation).type('al');
-            cy.get(locationOptions).should('have.length',3);
+            cy.get(locationOptions).should('have.length.at.least', 3);
         });
-        it('input filter location as "ecuador"', function() {
+        it('input filter location as "ecuador"', function () {
             cy.get(inputLocation).click();
             cy.get(inputLocation).clear();
             cy.get(inputLocation).type('ecuador');
-            cy.get(locationOptions).should('have.length',1);
+            cy.get(locationOptions).should('have.length.at.least', 1);
             cy.get(`${locationOptions}:nth-child(1)`).click();
-            cy.get(':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon').click();
-
+            cy.get(inputLocation + '> :nth-child(2) > .q-icon').click();
         });
     });
-    describe('Fiscal-data',()=>{
-    const inputLocation = ':nth-child(6) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control';
-
+    describe('Fiscal-data', () => {
         beforeEach(() => {
             cy.viewport(1280, 720);
             cy.login('developer');
-            cy.visit('/#/supplier/567/fiscal-data', {timeout: 2000});
+            cy.visit('/#/supplier/567/fiscal-data', { timeout: 2000 });
             cy.waitForElement('.q-card');
         });
-
-        it('Show locations options', function() {
-            cy.get(inputLocation).click();
-            cy.get(locationOptions).should('have.length', 5);
+        it('Create postCode', function () {
+            cy.get(
+                ':nth-child(6) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(3) > .q-icon'
+            ).click();
+            cy.get(' .q-card > h1').should('have.text', 'New postcode');
+            cy.get(
+                '.q-card > :nth-child(4) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(1) > input'
+            ).clear('12');
+            cy.get(
+                '.q-card > :nth-child(4) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(1) > input'
+            ).type('1234453');
+            cy.selectOption(
+                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(4) > :nth-child(2) > .q-field > .q-field__inner > .q-field__control ',
+                'Valencia'
+            );
+            cy.selectOption(
+                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(5) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control ',
+                'Province one'
+            );
+            cy.selectOption(
+                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(5) > :nth-child(2) > .q-field > .q-field__inner > .q-field__control ',
+                'España'
+            );
+            cy.get('.q-mt-lg > .q-btn--standard').click();
         });
     });
-})
+});

test/cypress/integration/claim/claimDevelopment.spec.js

@@ -8,6 +8,7 @@ describe('ClaimDevelopment', () => {
         cy.viewport(1920, 1080);
         cy.login('developer');
         cy.visit(`/#/claim/${claimId}/development`);
+        cy.waitForElement('tbody');
     });
 
     it('should reset line', () => {

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/invoiceInBasicData.spec.js

@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 describe('InvoiceInBasicData', () => {
-    const selects = ':nth-child(1) > :nth-child(1) > .q-field';
+    const selects = '.q-form .q-card>:nth-child(1) > :nth-child(1) > .q-field';
     const appendBtns = 'label button';
     const dialogAppendBtns = '.q-dialog label button';
     const dialogInputs = '.q-dialog input';

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/ticket/ticketDescriptor.spec.js

@@ -1,7 +1,7 @@
 /// <reference types="cypress" />
 describe('Ticket descriptor', () => {
     const toCloneOpt = '.q-list > :nth-child(5)';
-    const warehouseValue = '.summaryBody > :nth-child(2) > :nth-child(6) > .value > span';
+    const warehouseValue = ':nth-child(1) > :nth-child(6) > .value > span';
     const summaryHeader = '.summaryHeader > div';
 
     beforeEach(() => {

test/cypress/integration/vnSearchBar.spec.js

@@ -36,7 +36,7 @@ describe('VnSearchBar', () => {
     const checkCardListAndUrl = (expectedLength) => {
         cy.get(cardList).then(($cardList) => {
             expect($cardList.find('.q-card').length).to.equal(expectedLength);
-            cy.url().then((currentUrl) => expect(currentUrl).to.equal(url));
+            cy.url().then((currentUrl) => expect(currentUrl).to.contain(url));
         });
     };
 });

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'

test/cypress/support/commands.js

@@ -72,6 +72,7 @@ Cypress.Commands.add('getValue', (selector) => {
 
 // Fill Inputs
 Cypress.Commands.add('selectOption', (selector, option) => {
+    cy.waitForElement(selector);
     cy.get(selector).find('.q-select__dropdown-icon').click();
     cy.get('.q-menu .q-item').contains(option).click();
 });
@@ -183,11 +184,11 @@ Cypress.Commands.add('closeSideMenu', (element) => {
 
 Cypress.Commands.add('clearSearchbar', (element) => {
     if (element) cy.waitForElement(element);
-    cy.get('#searchbar > form > label > div:nth-child(1) input').clear();
+    cy.get('#searchbar > form > div:nth-child(1) > label > div:nth-child(1) input').clear();
 });
 
 Cypress.Commands.add('writeSearchbar', (value) => {
-    cy.get('#searchbar > form > label > div:nth-child(1) input').type(value);
+    cy.get('#searchbar > form > div:nth-child(1) > label > div:nth-child(1) input').type(value);
 });
 Cypress.Commands.add('validateContent', (selector, expectedValue) => {
     cy.get(selector).should('have.text', expectedValue);

test/vitest/__tests__/components/common/VnLog.spec.js

@@ -38,10 +38,10 @@ describe('VnLog', () => {
             action: 'update',
             changedModel: 'Claim',
             oldInstance: {
-                hasToPickUp: false,
+                pickup: null,
             },
             newInstance: {
-                hasToPickUp: true,
+                pickup: 'agency',
             },
             creationDate: '2023-09-18T12:25:34.000Z',
             changedModelId: '1',

test/vitest/__tests__/composables/useArrayData.spec.js

@@ -0,0 +1,31 @@
+import { describe, expect, it, beforeAll } from 'vitest';
+import { axios } from 'app/test/vitest/helper';
+import { useArrayData } from 'composables/useArrayData';
+
+describe('useArrayData', () => {
+    let arrayData;
+    beforeAll(() => {
+        axios.get.mockResolvedValue({ data: [] });
+        arrayData = useArrayData('InvoiceIn', { url: 'invoice-in/list' });
+        Object.defineProperty(window.location, 'href', {
+            writable: true,
+            value: 'localhost:9000/invoice-in/list',
+        });
+
+        // Mock the window.history.pushState method within useArrayData
+        window.history.pushState = (data, title, url) => (window.location.href = url);
+
+        //  Mock the URL constructor within useArrayData
+        global.URL = class URL {
+            constructor(url) {
+                this.hash = url.split('localhost:9000/')[1];
+            }
+        };
+    });
+
+    it('should add the params to the url', async () => {
+        arrayData.store.userParams = { supplierFk: 2 };
+        arrayData.updateStateParams();
+        expect(window.location.href).contain('params=%7B%22supplierFk%22%3A2%7D');
+    });
+});

vitest.config.js

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