CHANGELOG.md

@@ -22,6 +22,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   (Tickets) => Se añade la opción de clonar ticket. #6951
 -   (Parking) => Se añade la sección Parking. #5186
 
+-   (Rutas) => Se añade el campo "servida" a la tabla y se añade también a los filtros. #7130
+
 ### Changed
 
 ### Fixed

package.json

@@ -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.extensions.json

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

src/boot/i18n.js

@@ -1,7 +1,6 @@
 import { boot } from 'quasar/wrappers';
 import { createI18n } from 'vue-i18n';
 import messages from 'src/i18n';
-import { locales } from 'src/i18n/handle';
 
 const i18n = createI18n({
     locale: navigator.language || navigator.userLanguage,
@@ -13,9 +12,8 @@ const i18n = createI18n({
     legacy: false,
 });
 
-export default boot(async ({ app }) => {
+export default boot(({ app }) => {
     // Set i18n instance on app
-    await locales();
     app.use(i18n);
 });
 

src/components/CrudModel.vue

@@ -24,6 +24,10 @@ const $props = defineProps({
         type: String,
         default: '',
     },
+    limit: {
+        type: Number,
+        default: 20,
+    },
     saveUrl: {
         type: String,
         default: null,
@@ -76,6 +80,7 @@ defineExpose({
     reset,
     hasChanges,
     saveChanges,
+    getChanges,
 });
 
 async function fetch(data) {
@@ -260,6 +265,7 @@ watch(formUrl, async () => {
 <template>
     <VnPaginate
         :url="url"
+        :limit="limit"
         v-bind="$attrs"
         @on-fetch="fetch"
         :skeleton="false"

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>
+    <div
+        @mouseover="hover = true"
+        @mouseleave="hover = false"
+        :rules="$attrs.required ? [requiredFieldRule] : null"
+    >
         <QInput
             ref="vnInputRef"
             v-model="value"
             v-bind="{ ...$attrs, ...styleAttrs }"
-        type="text"
+            :type="$attrs.type"
             :class="{ required: $attrs.required }"
             @keyup.enter="onEnterPress()"
-        :rules="$attrs.required ? [requiredFieldRule] : null"
+            :clearable="false"
         >
             <template v-if="$slots.prepend" #prepend>
                 <slot name="prepend" />
             </template>
-        <template v-if="$slots.append" #append>
+
-            <slot name="append" />
+            <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

@@ -17,6 +17,8 @@ const props = defineProps({
         default: false,
     },
 });
+const hover = ref(false);
+
 const emit = defineEmits(['update:modelValue']);
 
 const joinDateAndTime = (date, time) => {
@@ -77,14 +79,21 @@ const styleAttrs = computed(() => {
 </script>
 
 <template>
+    <div @mouseover="hover = true" @mouseleave="hover = false">
         <VnInput
             class="vn-input-date"
+            readonly
             :model-value="displayDate(value)"
             v-bind="{ ...$attrs, ...styleAttrs }"
-        readonly
             @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"
@@ -94,6 +103,7 @@ const styleAttrs = computed(() => {
                         :no-parent-event="props.readonly"
                     >
                         <QDate
+                            :today-btn="true"
                             :model-value="formatDate(value)"
                             @update:model-value="onDateUpdate"
                         />
@@ -101,6 +111,7 @@ const styleAttrs = computed(() => {
                 </QIcon>
             </template>
         </VnInput>
+    </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(
+        date.setHours(Number.parseInt(hours) || 0, Number.parseInt(minutes) || 0, 0, 0);
-            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/ui/CardDescriptor.vue

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

src/components/ui/CardSummary.vue

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

src/components/ui/QCalendarMonthWrapper.vue

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

src/components/ui/VnNotes.vue

@@ -6,6 +6,7 @@ import axios from 'axios';
 import { useI18n } from 'vue-i18n';
 import VnPaginate from './VnPaginate.vue';
 import VnUserLink from '../ui/VnUserLink.vue';
+import { useState } from 'src/composables/useState';
 
 const $props = defineProps({
     url: { type: String, default: null },
@@ -13,8 +14,10 @@ const $props = defineProps({
     body: { type: Object, default: () => {} },
     addNote: { type: Boolean, default: false },
 });
+
 const { t } = useI18n();
-const noteModal = ref(false);
+const state = useState();
+const currentUser = ref(state.getUser());
 const newNote = ref('');
 const vnPaginateRef = ref();
 
@@ -22,98 +25,83 @@ async function insert() {
     const body = $props.body;
     Object.assign(body, { text: newNote.value });
     await axios.post($props.url, body);
-    vnPaginateRef.value.fetch();
+    await vnPaginateRef.value.fetch();
     newNote.value = '';
 }
 </script>
 <template>
-    <div class="column items-center full-height full-width">
+    <QCard class="q-pa-xs q-mb-xl full-width" v-if="$props.addNote">
-        <VnPaginate
-            :data-key="$props.url"
-            :url="$props.url"
-            order="created DESC"
-            :limit="20"
-            :filter="$props.filter"
-            auto-load
-            ref="vnPaginateRef"
-        >
-            <template #body="{ rows }">
-                <div class="column items-center full-width">
-                    <QCard
-                        class="q-pa-xs q-mb-sm full-width"
-                        v-for="(note, index) in rows"
-                        :key="index"
-                    >
         <QCardSection horizontal>
-                            <slot name="picture">
+            <VnAvatar :descriptor="false" :worker-id="1" size="md" />
-                                <VnAvatar
-                                    :descriptor="false"
-                                    :worker-id="note.workerFk"
-                                    size="md"
-                                />
-                            </slot>
             <div class="full-width row justify-between q-pa-xs">
-                                <VnUserLink
+                <VnUserLink :name="t('New note')" :worker-id="currentUser.id" />
-                                    :name="`${note.worker.user.nickname}`"
+                {{ t('globals.now') }}
-                                    :worker-id="note.worker.id"
-                                />
-
-                                <slot name="actions">
-                                    {{ toDateHour(note.created) }}
-                                </slot>
             </div>
         </QCardSection>
-                        <QCardSection class="q-pa-xs q-my-none q-py-none">
+        <QCardSection class="q-pa-xs q-my-none q-py-none" horizontal>
-                            <slot name="text">
-                                {{ note.text }}
-                            </slot>
-                        </QCardSection>
-                    </QCard>
-                </div>
-            </template>
-        </VnPaginate>
-        <QPageSticky position="bottom-right" :offset="[25, 25]" v-if="addNote">
-            <QBtn color="primary" icon="add" size="lg" round @click="noteModal = true" />
-        </QPageSticky>
-        <QDialog v-model="noteModal" @hide="newNote = ''">
-            <QCard>
-                <QCardSection>
-                    <QItem class="q-px-none">
-                        <span class="text-primary text-h6 full-width">
-                            <QIcon name="draft" class="q-mr-xs" />
-                            {{ t('Add note') }}
-                        </span>
-                        <QBtn icon="close" flat round dense v-close-popup />
-                    </QItem>
-                </QCardSection>
-                <QCardSection>
             <QInput
-                        autofocus
+                v-model="newNote"
+                class="full-width"
                 type="textarea"
                 :label="t('Add note here...')"
                 filled
                 size="lg"
                 autogrow
-                        v-model="newNote"
+                autofocus
-                    ></QInput>
+                @keyup.ctrl.enter.stop="insert"
-                </QCardSection>
+                clearable
-                <QCardActions class="justify-end q-mr-sm">
+            >
-                    <QBtn
+                <template #append
+                    ><QBtn
+                        :title="t('Save (ctrl + Enter)')"
+                        icon="save"
+                        color="primary"
                         flat
-                        :label="t('globals.close')"
-                        color="primary"
-                        v-close-popup
-                    />
-                    <QBtn
-                        :label="t('globals.save')"
-                        color="primary"
-                        v-close-popup
                         @click="insert"
                     />
-                </QCardActions>
+                </template>
+            </QInput>
+        </QCardSection>
     </QCard>
-        </QDialog>
+    <VnPaginate
+        :data-key="$props.url"
+        :url="$props.url"
+        order="created DESC"
+        :limit="0"
+        :filter="$props.filter"
+        auto-load
+        ref="vnPaginateRef"
+        class="show"
+        v-bind="$attrs"
+    >
+        <template #body="{ rows }">
+            <TransitionGroup name="list" tag="div" class="column items-center full-width">
+                <QCard
+                    class="q-pa-xs q-mb-sm full-width"
+                    v-for="note in rows"
+                    :key="note.id"
+                >
+                    <QCardSection horizontal>
+                        <VnAvatar
+                            :descriptor="false"
+                            :worker-id="note.workerFk"
+                            size="md"
+                        />
+                        <div class="full-width row justify-between q-pa-xs">
+                            <VnUserLink
+                                :name="`${note.worker.user.nickname}`"
+                                :worker-id="note.worker.id"
+                            />
+                            {{ toDateHour(note.created) }}
                         </div>
+                    </QCardSection>
+                    <QCardSection class="q-pa-xs q-my-none q-py-none">
+                        {{ note.text }}
+                    </QCardSection>
+                </QCard>
+            </TransitionGroup>
+        </template>
+    </VnPaginate>
 </template>
 <style lang="scss" scoped>
 .q-card {
@@ -128,9 +116,20 @@ async function insert() {
 .q-dialog .q-card {
     width: 400px;
 }
+.list-enter-active,
+.list-leave-active {
+    transition: all 1s ease;
+}
+.list-enter-from,
+.list-leave-to {
+    opacity: 0;
+    background-color: $primary;
+}
 </style>
 <i18n>
     es:
         Add note here...: Añadir nota aquí...
-        Add note: Añadir nota
+        New note: Nueva nota
+        Save (ctrl + Enter): Guardar (Ctrl + Intro)
+
 </i18n>

src/components/ui/VnPaginate.vue

@@ -127,7 +127,6 @@ async function paginate() {
 }
 
 function endPagination() {
-    hasMoreData.value = arrayData.hasMoreData.value;
     isLoading.value = false;
     emit('onFetch', store.data);
     emit('onPaginate');
@@ -183,11 +182,12 @@ defineExpose({ fetch, addFilter });
             </QCard>
         </div>
     </div>
+    
     <QInfiniteScroll
         v-if="store.data"
         @load="onLoad"
         :offset="offset"
-        :disable="disableInfiniteScroll || !arrayData.hasMoreData.value"
+        :disable="disableInfiniteScroll || !arrayData.hasMoreData"
         class="full-width"
         v-bind="$attrs"
     >

src/composables/useArrayData.js

@@ -96,8 +96,8 @@ export function useArrayData(key, userOptions) {
         });
 
         const { limit } = filter;
-
+        hasMoreData.value = limit && response.data.length >= limit;
-        hasMoreData.value = response.data.length >= limit;
+        store.hasMoreData = hasMoreData.value;
 
         if (append) {
             if (!store.data) store.data = [];
@@ -170,7 +170,7 @@ export function useArrayData(key, userOptions) {
     }
 
     async function loadMore() {
-        if (!hasMoreData.value) return;
+        if (!hasMoreData.value && !store.hasMoreData) return;
 
         store.skip = store.limit * page.value;
         page.value += 1;

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 localToken = localStorage.getItem(TOKEN);
-        const sessionToken = sessionStorage.getItem('token');
+        const sessionToken = sessionStorage.getItem(TOKEN);
 
         return localToken || sessionToken || '';
     }
     function getTokenMultimedia() {
-        const localTokenMultimedia = localStorage.getItem('token'); // Temporal
+        const localTokenMultimedia = localStorage.getItem(TOKEN_MULTIMEDIA);
-        const sessionTokenMultimedia = sessionStorage.getItem('token'); // Temporal
+        const sessionTokenMultimedia = sessionStorage.getItem(TOKEN_MULTIMEDIA);
 
         return localTokenMultimedia || sessionTokenMultimedia || '';
     }
 
     function setToken(data) {
-        if (data.keepLogin) {
+        const storage = data.keepLogin ? localStorage : sessionStorage;
-            localStorage.setItem('token', data.token);
+        storage.setItem(TOKEN, data.token);
-            localStorage.setItem('tokenMultimedia', data.tokenMultimedia);
+        storage.setItem(TOKEN_MULTIMEDIA, data.tokenMultimedia);
-        } else {
-            sessionStorage.setItem('token', data.token);
-            sessionStorage.setItem('tokenMultimedia', 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 localToken = localStorage.getItem(TOKEN);
-        const sessionToken = sessionStorage.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;

src/i18n/handle.js

@@ -1,17 +0,0 @@
-const modules = import.meta.glob(`../pages/**/locale/**.yml`);
-import translations from './index';
-const LOCALE_EXTENSION = '.yml';
-
-export async function locales() {
-    for await (const module of Object.keys(modules)) {
-        const splittedFile = module.split('/');
-        const lang = splittedFile.pop().split(LOCALE_EXTENSION)[0];
-        const moduleFiles = splittedFile.join('/') + '/' + lang + LOCALE_EXTENSION;
-        import(moduleFiles).then((t) => {
-            Object.assign(translations[lang], t.default);
-        });
-    }
-    return translations;
-}
-
-export default translations;

src/i18n/index.js

@@ -1,10 +1,23 @@
 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];
-    import(file).then((t) => {
+
-        translations[lang] = t.default;
+    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);
+                })
+            }
     });
 }
 

src/i18n/locale/en.yml

@@ -90,6 +90,7 @@ globals:
         parkingList: Parkings list
     created: Created
     worker: Worker
+    now: Now
 errors:
     statusUnauthorized: Access denied
     statusInternalServerError: An internal server error has ocurred
@@ -127,13 +128,12 @@ dashboard:
 customer:
     pageTitles:
         customers: Customers
-        create: Create
         list: List
         webPayments: Web Payments
         extendedList: Extended list
         notifications: Notifications
         defaulter: Defaulter
-        createCustomer: Create customer
+        customerCreate: New customer
         summary: Summary
         basicData: Basic data
         fiscalData: Fiscal data
@@ -281,7 +281,7 @@ entry:
         notes: Notes
         dms: File management
         log: Log
-        create: Create
+        entryCreate: New entry
         latestBuys: Latest buys
     list:
         newEntry: New entry
@@ -396,7 +396,7 @@ ticket:
     pageTitles:
         tickets: Tickets
         list: List
-        createTicket: Create ticket
+        ticketCreate: New ticket
         summary: Summary
         basicData: Basic Data
         boxing: Boxing
@@ -472,7 +472,7 @@ claim:
     pageTitles:
         claims: Claims
         list: List
-        createClaim: Create claim
+        claimCreate: New claim
         summary: Summary
         basicData: Basic Data
         lines: Lines
@@ -545,7 +545,7 @@ invoiceOut:
         list: List
         negativeBases: Negative Bases
         globalInvoicing: Global invoicing
-        createInvoiceOut: Create invoice out
+        invoiceOutCreate: Create invoice out
         summary: Summary
         basicData: Basic Data
     list:
@@ -618,7 +618,7 @@ shelving:
     pageTitles:
         shelving: Shelving
         shelvingList: Shelving List
-        create: Create
+        shelvingCreate: New shelving
         summary: Summary
         basicData: Basic Data
         log: Logs
@@ -651,7 +651,7 @@ invoiceIn:
     pageTitles:
         invoiceIns: Invoices In
         list: List
-        createInvoiceIn: Create invoice in
+        invoiceInCreate: Create invoice in
         summary: Summary
         basicData: Basic data
         vat: VAT
@@ -712,7 +712,7 @@ order:
     pageTitles:
         order: Orders
         orderList: List
-        create: Create
+        orderCreate: New order
         summary: Summary
         basicData: Basic Data
         catalog: Catalog
@@ -789,6 +789,7 @@ worker:
         dms: My documentation
         pbx: Private Branch Exchange
         log: Log
+        calendar: Calendar
     list:
         name: Name
         email: Email
@@ -905,7 +906,7 @@ route:
         routes: Routes
         cmrsList: External CMRs list
         RouteList: List
-        create: Create
+        routeCreate: New route
         basicData: Basic Data
         summary: Summary
         RouteRoadmap: Roadmaps
@@ -932,7 +933,7 @@ supplier:
         suppliers: Suppliers
         supplier: Supplier
         list: List
-        create: Create
+        supplierCreate: New supplier
         summary: Summary
         basicData: Basic data
         fiscalData: Fiscal data
@@ -1038,7 +1039,6 @@ travel:
     pageTitles:
         travel: Travels
         list: List
-        create: Create
         summary: Summary
         extraCommunity: Extra community
         travelCreate: New travel
@@ -1096,8 +1096,9 @@ item:
         list: List
         diary: Diary
         tags: Tags
-        create: Create
         fixedPrice: Fixed prices
+        wasteBreakdown: Waste breakdown
+        itemCreate: New item
     descriptor:
         item: Item
         buyer: Buyer
@@ -1134,6 +1135,13 @@ item:
         started: Started
         ended: Ended
         warehouse: Warehouse
+    create:
+        name: Name
+        tag: Tag
+        priority: Priority
+        type: Type
+        intrastat: Intrastat
+        origin: Origin
 components:
     topbar: {}
     itemsFilterPanel:
@@ -1142,11 +1150,11 @@ components:
         value: Value
         # ItemFixedPriceFilter
         buyerFk: Buyer
-        warehouseFk: Almacén
+        warehouseFk: Warehouse
-        started: Desde
+        started: From
-        ended: Hasta
+        ended: To
-        mine: Para mi
+        mine: For me
-        hasMinPrice: Precio mínimo
+        hasMinPrice: Minimum price
         # LatestBuysFilter
         salesPersonFk: Buyer
         supplierFk: Supplier
@@ -1179,3 +1187,24 @@ components:
     VnLv:
         copyText: '{copyValue} has been copied to the clipboard'
     iban_tooltip: 'IBAN: ES21 1234 5678 90 0123456789'
+weekdays:
+    sun: Sunday
+    mon: Monday
+    tue: Tuesday
+    wed: Wednesday
+    thu: Thursday
+    fri: Friday
+    sat: Saturday
+months:
+    jan: January
+    feb: February
+    mar: March
+    apr: April
+    may: May
+    jun: June
+    jul: July
+    aug: August
+    sep: September
+    oct: October
+    nov: November
+    dec: December

src/i18n/locale/es.yml

@@ -90,6 +90,7 @@ globals:
         parkingList: Listado de parkings
     created: Fecha creación
     worker: Trabajador
+    now: Ahora
 errors:
     statusUnauthorized: Acceso denegado
     statusInternalServerError: Ha ocurrido un error interno del servidor
@@ -125,7 +126,7 @@ dashboard:
 customer:
     pageTitles:
         customers: Clientes
-        create: Crear
+        customerCreate: Nuevo cliente
         list: Listado
         webPayments: Pagos Web
         extendedList: Listado extendido
@@ -278,7 +279,7 @@ entry:
         notes: Notas
         dms: Gestión documental
         log: Historial
-        create: Crear
+        entryCreate: Nueva entrada
         latestBuys: Últimas compras
     list:
         newEntry: Nueva entrada
@@ -393,7 +394,7 @@ ticket:
     pageTitles:
         tickets: Tickets
         list: Listado
-        createTicket: Crear ticket
+        ticketCreate: Nuevo ticket
         summary: Resumen
         basicData: Datos básicos
         boxing: Encajado
@@ -469,7 +470,7 @@ claim:
     pageTitles:
         claims: Reclamaciones
         list: Listado
-        createClaim: Crear reclamación
+        claimCreate: Crear reclamación
         summary: Resumen
         basicData: Datos básicos
         lines: Líneas
@@ -545,7 +546,7 @@ invoiceOut:
         list: Listado
         negativeBases: Bases Negativas
         globalInvoicing: Facturación global
-        createInvoiceOut: Crear fact. emitida
+        invoiceOutCreate: Crear fact. emitida
         summary: Resumen
         basicData: Datos básicos
     list:
@@ -618,7 +619,7 @@ order:
     pageTitles:
         order: Cesta
         orderList: Listado
-        create: Crear
+        orderCreate: Nueva orden
         summary: Resumen
         basicData: Datos básicos
         catalog: Catálogo
@@ -668,7 +669,7 @@ shelving:
     pageTitles:
         shelving: Carros
         shelvingList: Listado de carros
-        create: Crear
+        shelvingCreate: Nuevo carro
         summary: Resumen
         basicData: Datos básicos
         log: Historial
@@ -700,7 +701,7 @@ invoiceIn:
     pageTitles:
         invoiceIns: Fact. recibidas
         list: Listado
-        createInvoiceIn: Crear fact. recibida
+        invoiceInCreate: Crear fact. recibida
         summary: Resumen
         basicData: Datos básicos
         vat: IVA
@@ -786,6 +787,7 @@ worker:
         dms: Mi documentación
         pbx: Centralita
         log: Historial
+        calendar: Calendario
     list:
         name: Nombre
         email: Email
@@ -902,7 +904,7 @@ route:
         routes: Rutas
         cmrsList: Listado de CMRs externos
         RouteList: Listado
-        create: Crear
+        routeCreate: Nueva ruta
         basicData: Datos básicos
         summary: Resumen
         RouteRoadmap: Troncales
@@ -929,7 +931,7 @@ supplier:
         suppliers: Proveedores
         supplier: Proveedor
         list: Listado
-        create: Crear
+        supplierCreate: Nuevo proveedor
         summary: Resumen
         basicData: Datos básicos
         fiscalData: Datos fiscales
@@ -1093,8 +1095,9 @@ item:
         list: Listado
         diary: Histórico
         tags: Etiquetas
-        create: Crear
         fixedPrice: Precios fijados
+        wasteBreakdown: Deglose de mermas
+        itemCreate: Nuevo artículo
     descriptor:
         item: Artículo
         buyer: Comprador
@@ -1131,6 +1134,13 @@ item:
         started: Inicio
         ended: Fin
         warehouse: Almacén
+    create:
+        name: Nombre
+        tag: Etiqueta
+        priority: Prioridad
+        type: Tipo
+        intrastat: Intrastat
+        origin: Origen
 components:
     topbar: {}
     itemsFilterPanel:
@@ -1139,11 +1149,11 @@ components:
         value: Valor
         # ItemFixedPriceFilter
         buyerFk: Comprador
-        warehouseFk: Warehouse
+        warehouseFk: Almacén
-        started: From
+        started: Desde
-        ended: To
+        ended: Hasta
-        mine: For me
+        mine: Para mi
-        hasMinPrice: Minimum price
+        hasMinPrice: Precio mínimo
         # LatestBuysFilter
         salesPersonFk: Comprador
         supplierFk: Proveedor
@@ -1176,3 +1186,24 @@ components:
     VnLv:
         copyText: '{copyValue} se ha copiado al portapepeles'
     iban_tooltip: 'IBAN: ES21 1234 5678 90 0123456789'
+weekdays:
+    sun: Domingo
+    mon: Lunes
+    tue: Martes
+    wed: Miércoles
+    thu: Jueves
+    fri: Viernes
+    sat: Sábado
+months:
+    jan: Enero
+    feb: Febrero
+    mar: Marzo
+    apr: Abril
+    may: Mayo
+    jun: Junio
+    jul: Julio
+    aug: Agosto
+    sep: Septiembre
+    oct: Octubre
+    nov: Noviembre
+    dec: Diciembre

src/pages/Claim/Card/ClaimLines.vue

@@ -121,11 +121,6 @@ async function fetchMana() {
     mana.value = response.data;
 }
 
-async function updateQuantity({ id, quantity }) {
-    if (!id) return;
-    await axios.patch(`ClaimBeginnings/${id}`, { quantity });
-}
-
 async function updateDiscount({ saleFk, discount, canceller }) {
     const body = { salesIds: [saleFk], newDiscount: discount };
     const claimId = claim.value.ticketFk;
@@ -155,6 +150,10 @@ function showImportDialog() {
         })
         .onOk(() => claimLinesForm.value.reload());
 }
+
+function saveWhenHasChanges() {
+    claimLinesForm.value.getChanges().updates && claimLinesForm.value.onSubmit();
+}
 </script>
 <template>
     <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
@@ -181,8 +180,7 @@ function showImportDialog() {
         @on-fetch="onFetchClaim"
         auto-load
     />
-    <div class="column items-center">
+    <div class="q-pa-md">
-        <div class="list">
         <CrudModel
             data-key="ClaimLines"
             ref="claimLinesForm"
@@ -195,6 +193,7 @@ function showImportDialog() {
             :default-save="false"
             :default-reset="false"
             auto-load
+            :limit="0"
         >
             <template #body="{ rows }">
                 <QTable
@@ -206,26 +205,15 @@ function showImportDialog() {
                     v-model:selected="selected"
                     :grid="$q.screen.lt.md"
                 >
-                        <template #body-cell-claimed="{ row, value }">
+                    <template #body-cell-claimed="{ row }">
                         <QTd auto-width align="right" class="text-primary">
-                                <span>{{ value }}</span>
-
-                                <QPopupEdit
-                                    v-model="row.quantity"
-                                    v-slot="scope"
-                                    :title="t('Claimed quantity')"
-                                    @update:model-value="updateQuantity(row)"
-                                    buttons
-                                >
                             <QInput
-                                        v-model="scope.value"
+                                v-model="row.quantity"
                                 type="number"
                                 dense
-                                        autofocus
+                                @keyup.enter="saveWhenHasChanges()"
-                                        @keyup.enter="scope.set"
+                                @blur="saveWhenHasChanges()"
-                                        @focus="($event) => $event.target.select()"
                             />
-                                </QPopupEdit>
                         </QTd>
                     </template>
                     <template #body-cell-description="{ row, value }">
@@ -272,32 +260,18 @@ function showImportDialog() {
                                             </QItemLabel>
                                         </QItemSection>
                                         <QItemSection side>
-                                                <template
+                                            <template v-if="column.name === 'claimed'">
-                                                    v-if="column.name === 'claimed'"
-                                                >
                                                 <QItemLabel class="text-primary">
-                                                        {{ column.value }}
-                                                        <QPopupEdit
-                                                            v-model="props.row.quantity"
-                                                            v-slot="scope"
-                                                            :title="t('Claimed quantity')"
-                                                            @update:model-value="
-                                                                updateQuantity(props.row)
-                                                            "
-                                                            buttons
-                                                        >
                                                     <QInput
-                                                                v-model="scope.value"
+                                                        v-model="props.row.quantity"
                                                         type="number"
                                                         dense
                                                         autofocus
-                                                                @keyup.enter="scope.set"
+                                                        @keyup.enter="
-                                                                @focus="
+                                                            saveWhenHasChanges()
-                                                                    ($event) =>
-                                                                        $event.target.select()
                                                         "
+                                                        @blur="saveWhenHasChanges()"
                                                     />
-                                                        </QPopupEdit>
                                                 </QItemLabel>
                                             </template>
                                             <template
@@ -336,7 +310,6 @@ function showImportDialog() {
             </template>
         </CrudModel>
     </div>
-    </div>
 
     <QPageSticky position="bottom-right" :offset="[25, 25]">
         <QBtn fab color="primary" icon="add" @click="showImportDialog()" />

src/pages/Claim/Card/ClaimLinesImport.vue

@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import FetchData from 'components/FetchData.vue';
 import { toDate, toCurrency, toPercentage } from 'filters/index';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import axios from 'axios';
 
 defineEmits([...useDialogPluginComponent.emits]);
@@ -118,7 +119,6 @@ function cancel() {
                 <QBtn icon="close" flat round dense v-close-popup />
             </QCardSection>
             <QTable
-                class="my-sticky-header-table"
                 :columns="columns"
                 :rows="claimableSales"
                 row-key="saleFk"
@@ -126,7 +126,14 @@ function cancel() {
                 v-model:selected="selected"
                 square
                 flat
-            />
+            >
+                <template #body-cell-description="{ row, value }">
+                    <QTd auto-width align="right" class="link">
+                        {{ value }}
+                        <ItemDescriptorProxy :id="row.itemFk"></ItemDescriptorProxy>
+                    </QTd>
+                </template>
+            </QTable>
             <QSeparator />
             <QCardActions align="right">
                 <QBtn :label="t('globals.cancel')" color="primary" flat @click="cancel" />
@@ -148,33 +155,6 @@ function cancel() {
 }
 </style>
 
-<style lang="scss">
-.my-sticky-header-table {
-    height: 400px;
-
-    thead tr th {
-        position: sticky;
-        z-index: 1;
-    }
-
-    thead tr:first-child th {
-        /* this is when the loading indicator appears */
-        top: 0;
-    }
-
-    &.q-table--loading thead tr:last-child th {
-        /* height of all previous header rows */
-        top: 48px;
-    }
-
-    // /* prevent scrolling behind sticky top row on focus */
-    tbody {
-        /* height of all previous header rows */
-        scroll-margin-top: 48px;
-    }
-}
-</style>
-
 <i18n>
 es:
     Available sales lines: Líneas de venta disponibles

src/pages/Claim/Card/ClaimNotes.vue

@@ -38,10 +38,11 @@ const body = {
 </script>
 <template>
     <VnNotes
-        style="overflow-y: auto"
-        :add-note="$props.addNote"
         url="claimObservations"
+        :add-note="$props.addNote"
         :filter="claimFilter"
         :body="body"
+        v-bind="$attrs"
+        style="overflow-y: auto"
     />
 </template>

src/pages/Claim/Card/ClaimSummary.vue

@@ -222,8 +222,8 @@ function openDialog(dmsId) {
                     </template>
                 </VnLv>
                 <VnLv
-                    :label="t('claim.summary.pickup')"
+                    :label="t('claim.basicData.pickup')"
-                    :value="t(`claim.summary.${claim.pickup}`)"
+                    :value="t(`claim.basicData.${claim.pickup}`)"
                 />
             </QCard>
             <QCard class="vn-three">
@@ -280,6 +280,48 @@ function openDialog(dmsId) {
                     </template>
                 </QTable>
             </QCard>
+            <QCard class="vn-two" v-if="claimDms.length > 0">
+                <VnTitle
+                    :url="`#/claim/${entityId}/photos`"
+                    :text="t('claim.summary.photos')"
+                />
+                <div class="container">
+                    <div
+                        class="multimedia-container"
+                        v-for="(media, index) of claimDms"
+                        :key="index"
+                    >
+                        <div class="relative-position">
+                            <QIcon
+                                name="play_circle"
+                                color="primary"
+                                size="xl"
+                                class="absolute-center zindex"
+                                v-if="media.isVideo"
+                                @click.stop="openDialog(media.dmsFk)"
+                            >
+                                <QTooltip>Video</QTooltip>
+                            </QIcon>
+                            <QCard class="multimedia relative-position">
+                                <QImg
+                                    :src="media.url"
+                                    class="rounded-borders cursor-pointer fit"
+                                    @click="openDialog(media.dmsFk)"
+                                    v-if="!media.isVideo"
+                                >
+                                </QImg>
+                                <video
+                                    :src="media.url"
+                                    class="rounded-borders cursor-pointer fit"
+                                    muted="muted"
+                                    v-if="media.isVideo"
+                                    @click="openDialog(media.dmsFk)"
+                                />
+                            </QCard>
+                        </div>
+                    </div>
+                </div>
+            </QCard>
             <QCard class="vn-two" v-if="developments.length > 0">
                 <VnTitle
                     :url="claimUrl + 'development'"
@@ -302,49 +344,6 @@ function openDialog(dmsId) {
                     </template>
                 </QTable>
             </QCard>
-            <QCard class="vn-max" v-if="claimDms.length > 0">
-                <VnTitle
-                    :url="`#/claim/${entityId}/photos`"
-                    :text="t('claim.summary.photos')"
-                />
-                <div class="container">
-                    <div
-                        class="multimedia-container"
-                        v-for="(media, index) of claimDms"
-                        :key="index"
-                    >
-                        <div class="relative-position">
-                            <QIcon
-                                name="play_circle"
-                                color="primary"
-                                size="xl"
-                                class="absolute-center zindex"
-                                v-if="media.isVideo"
-                                @click.stop="openDialog(media.dmsFk)"
-                            >
-                                <QTooltip>Video</QTooltip>header
-                            </QIcon>
-                            <QCard class="multimedia relative-position">
-                                <QImg
-                                    :src="media.url"
-                                    class="rounded-borders cursor-pointer fit"
-                                    @click="openDialog(media.dmsFk)"
-                                    v-if="!media.isVideo"
-                                >
-                                </QImg>
-                                <video
-                                    :src="media.url"
-                                    class="rounded-borders cursor-pointer fit"
-                                    muted="muted"
-                                    v-if="media.isVideo"
-                                    @click="openDialog(media.dmsFk)"
-                                />
-                            </QCard>
-                        </div>
-                    </div>
-                </div>
-            </QCard>
-
             <QCard class="vn-max">
                 <VnTitle :url="claimUrl + 'action'" :text="t('claim.summary.actions')" />
                 <div id="slider-container" class="q-px-xl q-py-md">

src/pages/Entry/Card/EntryBasicData.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import { useRole } from 'src/composables/useRole';
 
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
@@ -15,6 +16,8 @@ import { toDate } from 'src/filters';
 
 const route = useRoute();
 const { t } = useI18n();
+const { hasAny } = useRole();
+const isAdministrative = () => hasAny(['administrative']);
 
 const suppliersOptions = ref([]);
 const travelsOptions = ref([]);
@@ -206,6 +209,7 @@ const onFilterTravelSelected = (formData, id) => {
                 </div>
                 <div class="col">
                     <QCheckbox
+                        v-if="isAdministrative()"
                         v-model="data.isBooked"
                         :label="t('entry.basicData.booked')"
                     />

src/pages/Entry/Card/EntryBuys.vue

@@ -268,16 +268,11 @@ const importBuys = () => {
 
 const toggleGroupingMode = async (buy, mode) => {
     try {
-        const grouping = 1;
+        const groupingMode = mode === 'grouping' ? mode : 'packing';
-        const packing = 2;
+        const newGroupingMode = buy.groupingMode === groupingMode ? null : groupingMode;
-        const groupingMode = mode === 'grouping' ? grouping : packing;
-
-        const newGroupingMode = buy.groupingMode === groupingMode ? 0 : 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/locale/en.yml

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

src/pages/Entry/locale/es.yml

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

src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue

@@ -257,7 +257,7 @@ const requiredFieldRule = (val) => val || t('globals.requiredField');
 const isAdministrative = () => hasAny(['administrative']);
 
 const isAgricultural = () =>
-    invoiceIn.value.supplier.sageWithholdingFk == config.value[0].sageWithholdingFk;
+    invoiceIn.value?.supplier?.sageWithholdingFk === config.value[0]?.sageWithholdingFk;
 
 function showPdfInvoice() {
     if (isAgricultural()) openReport(`InvoiceIns/${entityId.value}/invoice-in-pdf`);

src/pages/Item/Card/ItemBasicData.vue

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

src/pages/Item/ItemCreate.vue

@@ -1 +1,170 @@
-<template>Item create view</template>
+<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/Route/Card/RouteFilter.vue

@@ -197,6 +197,15 @@ const warehouseList = ref([]);
                     />
                 </QItemSection>
             </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        v-model="params.isOk"
+                        :label="t('Served')"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+            </QItem>
         </template>
     </VnFilterPanel>
 </template>
@@ -212,6 +221,7 @@ en:
         workerFk: Worker
         from: From
         to: To
+        Served: Served
 es:
     params:
         warehouseFk: Almacén
@@ -229,4 +239,5 @@ es:
     Worker: Trabajador
     From: Desde
     To: Hasta
+    Served: Servida
 </i18n>

src/pages/Route/Card/RouteForm.vue

@@ -11,8 +11,8 @@ import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInput from 'components/common/VnInput.vue';
 import axios from 'axios';
 import VnInputTime from 'components/common/VnInputTime.vue';
-import RouteSearchbar from "pages/Route/Card/RouteSearchbar.vue";
+import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
-import {useStateStore} from "stores/useStateStore";
+import { useStateStore } from 'stores/useStateStore';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -26,6 +26,7 @@ const defaultInitialData = {
     description: '',
     vehicleFk: null,
     workerFk: null,
+    isOk: false,
 };
 
 const workerList = ref([]);
@@ -211,6 +212,7 @@ const onSave = (data, response) => {
                             size="sm"
                             v-model="data.isOk"
                             :label="t('Is served')"
+                            clearable
                         />
                     </div>
                 </VnRow>

src/pages/Route/Card/RouteSummary.vue

@@ -73,9 +73,9 @@ const ticketColumns = ref([
         align: 'left',
     },
     {
-        name: 'warehouse',
+        name: 'state',
-        label: t('route.summary.warehouse'),
+        label: t('route.summary.state'),
-        field: (row) => row?.warehouseName,
+        field: (row) => row?.ticketStateName,
         sortable: false,
         align: 'left',
     },
@@ -187,6 +187,15 @@ const ticketColumns = ref([
                         :label="t('route.summary.packages')"
                         :value="getTotalPackages(entity.tickets)"
                     />
+                    <QCheckbox
+                        :label="
+                            entity.route.isOk
+                                ? t('route.summary.closed')
+                                : t('route.summary.open')
+                        "
+                        v-model="entity.route.isOk"
+                        :disable="true"
+                    />
                 </QCard>
                 <QCard class="vn-one">
                     <div class="header">
@@ -274,10 +283,14 @@ en:
             city: City
             pc: PC
             client: Client
-            warehouse: Warehouse
+            state: State
             m3: m³
             packaging: Packaging
             ticket: Ticket
+            closed: Closed
+            open: Open
+            yes: Yes
+            no: No
 es:
     route:
         summary:
@@ -299,6 +312,10 @@ es:
             city: Población
             pc: CP
             client: Cliente
-            warehouse: Almacén
+            state: Estado
             packaging: Encajado
+            closed: Cerrada
+            open: Abierta
+            yes: Sí
+            no: No
 </i18n>

src/pages/Route/RouteList.vue

@@ -95,6 +95,13 @@ const columns = computed(() => [
         sortable: true,
         align: 'left',
     },
+    {
+        name: 'isServed',
+        label: t('Served'),
+        field: (row) => Boolean(row.isOk),
+        sortable: true,
+        align: 'left',
+    },
     {
         name: 'actions',
         label: '',
@@ -265,7 +272,7 @@ const openTicketsDialog = (id) => {
                 auto-load
             >
                 <template #body="{ rows }">
-                    <div class="q-pa-md">
+                    <div class="q-pa-md route-table">
                         <QTable
                             v-model:selected="selectedRows"
                             :columns="columns"
@@ -279,7 +286,7 @@ const openTicketsDialog = (id) => {
                             :no-data-label="t('globals.noResults')"
                         >
                             <template #body-cell-worker="{ row }">
-                                <QTd>
+                                <QTd class="table-input-cell">
                                     <VnSelectFilter
                                         :label="t('Worker')"
                                         v-model="row.workerFk"
@@ -312,7 +319,7 @@ const openTicketsDialog = (id) => {
                                 </QTd>
                             </template>
                             <template #body-cell-agency="{ row }">
-                                <QTd>
+                                <QTd class="table-input-cell">
                                     <VnSelectFilter
                                         :label="t('Agency')"
                                         v-model="row.agencyModeFk"
@@ -329,7 +336,7 @@ const openTicketsDialog = (id) => {
                                 </QTd>
                             </template>
                             <template #body-cell-vehicle="{ row }">
-                                <QTd>
+                                <QTd class="table-input-cell">
                                     <VnSelectFilter
                                         :label="t('Vehicle')"
                                         v-model="row.vehicleFk"
@@ -397,6 +404,19 @@ const openTicketsDialog = (id) => {
                                     />
                                 </QTd>
                             </template>
+                            <template #body-cell-isServed="props">
+                                <QTd>
+                                    <QCheckbox v-model="props.value" disable>
+                                        <QTooltip>
+                                            {{
+                                                props.value
+                                                    ? t('Route is closed')
+                                                    : t('Route is not served')
+                                            }}
+                                        </QTooltip>
+                                    </QCheckbox>
+                                </QTd>
+                            </template>
                             <template #body-cell-actions="props">
                                 <QTd :props="props">
                                     <div class="flex items-center no-wrap table-actions">
@@ -455,7 +475,7 @@ const openTicketsDialog = (id) => {
 
 <style lang="scss" scoped>
 .table-input-cell {
-    min-width: 150px;
+    max-width: 143px;
 }
 
 .route-list {
@@ -466,6 +486,11 @@ const openTicketsDialog = (id) => {
 .table-actions {
     gap: 12px;
 }
+
+.lock-icon-cell {
+    text-align: center;
+    margin-left: -20%;
+}
 </style>
 <i18n>
 en:
@@ -479,6 +504,7 @@ es:
     Description: Descripción
     Hour started: Hora inicio
     Hour finished: Hora fin
+    Served: Servida
     newRoute: Nueva Ruta
     Clone Selected Routes: Clonar rutas seleccionadas
     Select the starting date: Seleccione la fecha de inicio
@@ -490,4 +516,6 @@ es:
     Add ticket: Añadir tickets
     Preview: Vista previa
     Summary: Resumen
+    Route is closed: La ruta está cerrada
+    Route is not served: La ruta no está servida
 </i18n>

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
+                <VnTitle
-                    v-if="isAdministrative"
+                    :url="getUrl('basic-data')"
-                    class="header link"
+                    :text="t('globals.summary.basicData')"
-                    :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>
                 <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
+                <VnTitle
-                    v-if="isAdministrative"
+                    :url="getUrl('billing-data')"
-                    class="header link"
+                    :text="t('supplier.summary.billingData')"
-                    :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>
                 <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
+                <VnTitle
-                    v-if="isAdministrative"
+                    :url="getUrl('fiscal-data')"
-                    class="header link"
+                    :text="t('supplier.summary.fiscalData')"
-                    :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>
                 <VnLv
                     :label="t('supplier.summary.sageTaxType')"
                     :value="supplier.sageTaxType?.vat"
@@ -152,15 +134,10 @@ const isAdministrative = computed(() => {
                 />
             </QCard>
             <QCard class="vn-one">
-                <router-link
+                <VnTitle
-                    v-if="isAdministrative"
+                    :url="getUrl('fiscal-data')"
-                    class="header link"
+                    :text="t('supplier.summary.fiscalAddress')"
-                    :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>
                 <VnLv :label="t('supplier.summary.socialName')" :value="supplier.name" />
                 <VnLv :label="t('supplier.summary.taxNumber')" :value="supplier.nif" />
                 <VnLv :label="t('supplier.summary.street')" :value="supplier.street" />

src/pages/Travel/locale/en.yml

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

src/pages/Travel/locale/es.yml

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

src/pages/Worker/Card/WorkerBasicData.vue

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

src/pages/Worker/Card/WorkerCalendar.vue

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

src/pages/Worker/Card/WorkerCalendarFilter.vue

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

src/pages/Worker/Card/WorkerCalendarItem.vue

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

src/pages/Worker/Card/WorkerDescriptor.vue

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

src/pages/Worker/Card/WorkerEventLabel.vue

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

src/pages/Worker/Card/WorkerNotes.vue

@@ -28,11 +28,5 @@ const body = {
 </script>
 
 <template>
-    <VnNotes
+    <VnNotes :add-note="true" url="WorkerObservations" :filter="filter" :body="body" />
-        style="overflow-y: auto"
-        :add-note="{ type: Boolean, default: true }"
-        url="WorkerObservations"
-        :filter="filter"
-        :body="body"
-    />
 </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 = {
+const filter = { where: { id: entityId.value } };
-    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',
-        },
-    ],
-};
 </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,8 +10,8 @@ export default {
     component: RouterView,
     redirect: { name: 'ItemMain' },
     menus: {
-        main: ['ItemList', 'ItemFixedPrice'],
+        main: ['ItemList', 'WasteBreakdown', 'ItemFixedPrice'],
-        card: [],
+        card: ['ItemBasicData'],
     },
     children: [
         {
@@ -42,10 +42,23 @@ export default {
                     path: 'create',
                     name: 'ItemCreate',
                     meta: {
-                        title: 'create',
+                        title: 'itemCreate',
                     },
                     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';
+                    },
+                },
             ],
         },
         {
@@ -81,6 +94,15 @@ export default {
                     },
                     component: () => import('src/pages/Item/Card/ItemTags.vue'),
                 },
+                {
+                    path: 'basic-data',
+                    name: 'ItemBasicData',
+                    meta: {
+                        title: 'basicData',
+                        icon: 'vn:settings',
+                    },
+                    component: () => import('src/pages/Item/Card/ItemBasicData.vue'),
+                },
             ],
         },
     ],

src/router/modules/order.js

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

src/router/modules/route.js

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

src/router/modules/shelving.js

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

src/router/modules/travel.js

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

src/router/modules/worker.js

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

src/stores/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',()=>{
+    describe('Create', () => {
-        const inputLocation = ':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control';
+        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() {
+        it('Show all options', function () {
             cy.get(inputLocation).click();
-            cy.get(locationOptions).should('have.length.at.least',5);
+            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.at.least',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.at.least',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',()=>{
+    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('Create postCode', function() {
+        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(
+                ':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(
-            cy.get('.q-card > :nth-child(4) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(1) > input').type('1234453');
+                '.q-card > :nth-child(4) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(1) > input'
-            cy.selectOption('.q-dialog__inner > .column > #formModel > .q-card > :nth-child(4) > :nth-child(2) > .q-field > .q-field__inner > .q-field__control ', 'Valencia');
+            ).clear('12');
-            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.get(
-            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');
+                '.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/claim/claimNotes.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 describe('ClaimNotes', () => {
     beforeEach(() => {
         cy.login('developer');
@@ -7,11 +6,8 @@ describe('ClaimNotes', () => {
 
     it('should add a new note', () => {
         const message = 'This is a new message.';
-        cy.get('.q-page-sticky > div > button').click();
+        cy.get('.q-textarea').type(message);
-        cy.get('.q-dialog .q-card__section:nth-child(2)').type(message);
+        cy.get('.q-field__append > .q-btn > .q-btn__content > .q-icon').click(); //save
-        cy.get('.q-card__actions button:nth-child(2)').click();
+        cy.get(':nth-child(1) > .q-card__section--vert').should('have.text', message);
-        cy.get('.q-card .q-card__section:nth-child(2)')
-            .eq(0)
-            .should('have.text', message);
     });
 });

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/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);

vitest.config.js

@@ -27,7 +27,10 @@ export default defineConfig({
             sassVariables: 'src/quasar-variables.scss',
         }),
         VueI18nPlugin({
-            include: path.resolve(__dirname, 'src/i18n/**'),
+            include: [
+                path.resolve(__dirname, 'src/i18n/**'),
+                path.resolve(__dirname, 'src/pages/**/locale/**'),
+            ],
         }),
         jsconfigPaths(),
     ],