Merge branch 'dev' into 7220_cypressUnitTest

CHANGELOG.md

@@ -5,12 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2420.01]
+
 ## [2418.01]
 
 ## [2416.01] - 2024-04-18
 
 ### Added
 
+-   (Worker) => Se crea la sección Taquilla
+-   (General) => Se mantiene el filtro lateral en cualquier parte de la seccíon.
+
 ### Fixed
 
 -   (General) => Se vuelven a mostrar los parámetros en la url al aplicar un filtro
@@ -22,6 +27,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

Jenkinsfile

@@ -54,7 +54,6 @@ pipeline {
     }
     environment {
         PROJECT_NAME = 'lilium'
-        STACK_NAME   = "${env.PROJECT_NAME}-${env.BRANCH_NAME}"
     }
     stages {
         stage('Install') {
@@ -104,15 +103,18 @@ pipeline {
             when {
                 expression { PROTECTED_BRANCH }
             }
-            environment {
-                DOCKER_HOST = "${env.SWARM_HOST}"
-            }
             steps {
                 script {
                     def packageJson = readJSON file: 'package.json'
                     env.VERSION = packageJson.version
                 }
-                sh "docker stack deploy --with-registry-auth --compose-file docker-compose.yml ${env.STACK_NAME}"
+                withKubeConfig([
+                    serverUrl: "$KUBERNETES_API",
+                    credentialsId: 'kubernetes',
+                    namespace: 'lilium'
+                ]) {
+                    sh 'kubectl set image deployment/lilium-$BRANCH_NAME lilium-$BRANCH_NAME=$REGISTRY/salix-frontend:$VERSION'
+                }
             }
         }
     }

docker-compose.yml

@@ -1,17 +1,7 @@
 version: '3.7'
 services:
   main:
-    image: registry.verdnatura.es/salix-frontend:${BRANCH_NAME:?}
+    image: registry.verdnatura.es/salix-frontend:${VERSION:?}
     build:
       context: .
       dockerfile: ./Dockerfile
-    ports:
-      - 4000
-    deploy:
-      replicas: ${FRONT_REPLICAS:?}
-      placement:
-        constraints:
-          - node.role == worker
-      resources:
-        limits:
-          memory: 1G

package.json

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

quasar.config.js

@@ -29,7 +29,7 @@ module.exports = configure(function (/* ctx */) {
         // app boot file (/src/boot)
         // --> boot files are part of "main.js"
         // https://v2.quasar.dev/quasar-cli/boot-files
-        boot: ['i18n', 'axios', 'vnDate', 'validations', 'quasar.defaults'],
+        boot: ['i18n', 'axios', 'vnDate', 'validations', 'quasar', 'quasar.defaults'],
 
         // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
         css: ['app.scss'],

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

@@ -3,17 +3,12 @@ import { reactive, ref, onMounted, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnInput from 'src/components/common/VnInput.vue';
 
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import FormModelPopup from './FormModelPopup.vue';
 
-const props = defineProps({
+defineProps({ showEntityField: { type: Boolean, default: true } });
-    showEntityField: {
-        type: Boolean,
-        default: true,
-    },
-});
 
 const emit = defineEmits(['onDataSaved']);
 const { t } = useI18n();
@@ -26,7 +21,7 @@ const bankEntityFormData = reactive({
 });
 
 const countriesFilter = {
-    fields: ['id', 'country', 'code'],
+    fields: ['id', 'name', 'code'],
 };
 
 const countriesOptions = ref([]);
@@ -58,15 +53,12 @@ onMounted(async () => {
     >
         <template #form-inputs="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
                 <VnInput
                     :label="t('name')"
                     v-model="data.name"
                     :required="true"
                     :rules="validate('bankEntity.name')"
                 />
-                </div>
-                <div class="col">
                 <VnInput
                     ref="bicInputRef"
                     :label="t('swift')"
@@ -74,16 +66,15 @@ onMounted(async () => {
                     :required="true"
                     :rules="validate('bankEntity.bic')"
                 />
-                </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('country')"
                         v-model="data.countryFk"
                         :options="countriesOptions"
                         option-value="id"
-                        option-label="country"
+                        option-label="name"
                         hide-selected
                         :required="true"
                         :rules="validate('bankEntity.countryFk')"

src/components/CreateDepartmentChild.vue

@@ -52,9 +52,7 @@ onMounted(() => {
             </span>
             <h1 class="title">{{ t('New department') }}</h1>
             <VnRow class="row q-gutter-md q-mb-md" style="min-width: 250px">
-                <div class="col">
                 <VnInput :label="t('Name')" v-model="data.name" />
-                </div>
             </VnRow>
             <div class="q-mt-lg row justify-end">
                 <QBtn

src/components/CreateManualInvoiceForm.vue

@@ -5,7 +5,7 @@ import { useRouter } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModelPopup from './FormModelPopup.vue';
 import VnInputDate from './common/VnInputDate.vue';
@@ -48,7 +48,11 @@ const onDataSaved = async (formData, requestResponse) => {
     />
     <FetchData
         url="Tickets"
-        :filter="{ fields: ['id', 'nickname'], order: 'shipped DESC', limit: 30 }"
+        :filter="{
+            fields: ['id', 'nickname'],
+            where: { refFk: null },
+            order: 'shipped DESC',
+        }"
         @on-fetch="(data) => (ticketsOptions = data)"
         auto-load
     />
@@ -72,8 +76,7 @@ const onDataSaved = async (formData, requestResponse) => {
                 {{ t('Invoicing in progress...') }}
             </span>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
+                <VnSelect
-                    <VnSelectFilter
                     :label="t('Ticket')"
                     :options="ticketsOptions"
                     hide-selected
@@ -86,19 +89,15 @@ const onDataSaved = async (formData, requestResponse) => {
                         <QItem v-bind="scope.itemProps">
                             <QItemSection>
                                 <QItemLabel> #{{ scope.opt?.id }} </QItemLabel>
-                                    <QItemLabel caption>{{
+                                <QItemLabel caption>{{ scope.opt?.nickname }}</QItemLabel>
-                                        scope.opt?.nickname
-                                    }}</QItemLabel>
                             </QItemSection>
                         </QItem>
                     </template>
-                    </VnSelectFilter>
+                </VnSelect>
-                </div>
                 <span class="row items-center" style="max-width: max-content">{{
                     t('Or')
                 }}</span>
-                <div class="col">
+                <VnSelect
-                    <VnSelectFilter
                     :label="t('Client')"
                     :options="clientsOptions"
                     hide-selected
@@ -107,14 +106,10 @@ const onDataSaved = async (formData, requestResponse) => {
                     v-model="data.clientFk"
                     @update:model-value="data.ticketFk = null"
                 />
-                </div>
-                <div class="col">
                 <VnInputDate :label="t('Max date')" v-model="data.maxShipped" />
-                </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
+                <VnSelect
-                    <VnSelectFilter
                     :label="t('Serial')"
                     :options="invoiceOutSerialsOptions"
                     hide-selected
@@ -123,9 +118,7 @@ const onDataSaved = async (formData, requestResponse) => {
                     v-model="data.serial"
                     :required="true"
                 />
-                </div>
+                <VnSelect
-                <div class="col">
-                    <VnSelectFilter
                     :label="t('Area')"
                     :options="taxAreasOptions"
                     hide-selected
@@ -134,7 +127,6 @@ const onDataSaved = async (formData, requestResponse) => {
                     v-model="data.taxArea"
                     :required="true"
                 />
-                </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <VnInput

src/components/CreateNewCityForm.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModelPopup from './FormModelPopup.vue';
 
@@ -40,15 +40,12 @@ const onDataSaved = (dataSaved) => {
     >
         <template #form-inputs="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
                 <VnInput
                     :label="t('Name')"
                     v-model="data.name"
                     :rules="validate('city.name')"
                 />
-                </div>
+                <VnSelect
-                <div class="col">
-                    <VnSelectFilter
                     :label="t('Province')"
                     :options="provincesOptions"
                     hide-selected
@@ -57,7 +54,6 @@ const onDataSaved = (dataSaved) => {
                     v-model="data.provinceFk"
                     :rules="validate('city.provinceFk')"
                 />
-                </div>
             </VnRow>
         </template>
     </FormModelPopup>

src/components/CreateNewPostcodeForm.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import CreateNewCityForm from './CreateNewCityForm.vue';
 import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
@@ -30,7 +30,7 @@ const townsLocationOptions = ref([]);
 
 const onDataSaved = (formData) => {
     const newPostcode = {
-        ...formData
+        ...formData,
     };
     const townObject = townsLocationOptions.value.find(
         ({ id }) => id === formData.townFk
@@ -92,14 +92,11 @@ const onProvinceCreated = async ({ name }, formData) => {
     >
         <template #form-inputs="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
                 <VnInput
                     :label="t('Postcode')"
                     v-model="data.code"
                     :rules="validate('postcode.code')"
                 />
-                </div>
-                <div class="col">
                 <VnSelectDialog
                     :label="t('City')"
                     :options="townsLocationOptions"
@@ -111,15 +108,11 @@ const onProvinceCreated = async ({ name }, formData) => {
                     :roles-allowed-to-create="['deliveryAssistant']"
                 >
                     <template #form>
-                            <CreateNewCityForm
+                        <CreateNewCityForm @on-data-saved="onCityCreated($event, data)" />
-                                @on-data-saved="onCityCreated($event, data)"
-                            />
                     </template>
                 </VnSelectDialog>
-                </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-xl">
-                <div class="col">
                 <VnSelectDialog
                     :label="t('Province')"
                     :options="provincesOptions"
@@ -134,21 +127,20 @@ const onProvinceCreated = async ({ name }, formData) => {
                         <CreateNewProvinceForm
                             @on-data-saved="onProvinceCreated($event, data)"
                         />
-                        </template>
+                    </template> </VnSelectDialog
-                    </VnSelectDialog>
+            ></VnRow>
-                </div>
+            <VnRow class="row q-gutter-md q-mb-xl"
-                <div class="col">
+                ><VnSelect
-                    <VnSelectFilter
                     :label="t('Country')"
                     :options="countriesOptions"
                     hide-selected
-                        option-label="country"
+                    option-label="name"
                     option-value="id"
                     v-model="data.countryFk"
                     :rules="validate('postcode.countryFk')"
                 />
-                </div> </VnRow
+            </VnRow>
-        ></template>
+        </template>
     </FormModelPopup>
 </template>
 

src/components/CreateNewProvinceForm.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModelPopup from './FormModelPopup.vue';
 
@@ -40,15 +40,12 @@ const onDataSaved = (dataSaved) => {
     >
         <template #form-inputs="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
                 <VnInput
                     :label="t('Name')"
                     v-model="data.name"
                     :rules="validate('province.name')"
                 />
-                </div>
+                <VnSelect
-                <div class="col">
-                    <VnSelectFilter
                     :label="t('Autonomy')"
                     :options="autonomiesOptions"
                     hide-selected
@@ -57,7 +54,6 @@ const onDataSaved = (dataSaved) => {
                     v-model="data.autonomyFk"
                     :rules="validate('province.autonomyFk')"
                 />
-                </div>
             </VnRow>
         </template>
     </FormModelPopup>

src/components/CreateThermographForm.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModelPopup from './FormModelPopup.vue';
 
@@ -54,17 +54,13 @@ const onDataSaved = (dataSaved) => {
     >
         <template #form-inputs="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
                 <VnInput
                     :label="t('Identifier')"
                     v-model="data.thermographId"
                     :required="true"
                     :rules="validate('thermograph.id')"
                 />
-                </div>
+                <VnSelect
-
-                <div class="col">
-                    <VnSelectFilter
                     :label="t('Model')"
                     :options="thermographsModels"
                     hide-selected
@@ -74,11 +70,9 @@ const onDataSaved = (dataSaved) => {
                     :required="true"
                     :rules="validate('thermograph.model')"
                 />
-                </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-xl">
-                <div class="col">
+                <VnSelect
-                    <VnSelectFilter
                     :label="t('Warehouse')"
                     :options="warehousesOptions"
                     hide-selected
@@ -87,9 +81,7 @@ const onDataSaved = (dataSaved) => {
                     v-model="data.warehouseId"
                     :required="true"
                 />
-                </div>
+                <VnSelect
-                <div class="col">
-                    <VnSelectFilter
                     :label="t('Temperature')"
                     :options="temperaturesOptions"
                     hide-selected
@@ -98,7 +90,6 @@ const onDataSaved = (dataSaved) => {
                     v-model="data.temperatureFk"
                     :required="true"
                 />
-                </div>
             </VnRow>
         </template>
     </FormModelPopup>

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,8 @@ defineExpose({
     reset,
     hasChanges,
     saveChanges,
+    getChanges,
+    formData,
 });
 
 async function fetch(data) {
@@ -119,11 +125,16 @@ async function onSubmit() {
         });
     }
     isLoading.value = true;
-    await saveChanges();
+    await saveChanges($props.saveFn ? formData.value : null);
 }
 
 async function saveChanges(data) {
-    if ($props.saveFn) return $props.saveFn(data, getChanges);
+    if ($props.saveFn) {
+        $props.saveFn(data, getChanges);
+        isLoading.value = false;
+        hasChanges.value = false;
+        return;
+    }
     const changes = data || getChanges();
     try {
         await axios.post($props.saveUrl || $props.url + '/crud', changes);
@@ -260,6 +271,7 @@ watch(formUrl, async () => {
 <template>
     <VnPaginate
         :url="url"
+        :limit="limit"
         v-bind="$attrs"
         @on-fetch="fetch"
         :skeleton="false"

src/components/EditPictureForm.vue

@@ -2,7 +2,7 @@
 import { reactive, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
@@ -246,16 +246,13 @@ const makeRequest = async () => {
 
                 <div class="column">
                     <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
                         <QOptionGroup
                             :options="uploadMethodsOptions"
                             type="radio"
                             v-model="uploadMethodSelected"
                         />
-                        </div>
                     </VnRow>
                     <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
                         <QFile
                             v-if="uploadMethodSelected === 'computer'"
                             ref="inputFileRef"
@@ -289,18 +286,15 @@ const makeRequest = async () => {
                             @update:model-value="updatePhotoPreview($event)"
                             placeholder="https://"
                         />
-                        </div>
                     </VnRow>
                     <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
+                        <VnSelect
-                            <VnSelectFilter
                             :label="t('Orientation')"
                             :options="viewportTypes"
                             hide-selected
                             option-label="description"
                             v-model="viewportSelection"
                         />
-                        </div>
                     </VnRow>
                     <div class="q-mt-lg row justify-end">
                         <QBtn

src/components/EditTableCellValueForm.vue

@@ -1,9 +1,12 @@
 <script setup>
-import { ref, reactive } from 'vue';
+import { ref, markRaw } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import { QCheckbox } from 'quasar';
 
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
@@ -28,11 +31,16 @@ const $props = defineProps({
 const { t } = useI18n();
 const { notify } = useNotify();
 
-const formData = reactive({
+const inputs = {
-    field: null,
+    input: markRaw(VnInput),
-    newValue: null,
+    number: markRaw(VnInput),
-});
+    date: markRaw(VnInputDate),
+    checkbox: markRaw(QCheckbox),
+    select: markRaw(VnSelect),
+};
 
+const newValue = ref(null);
+const selectedField = ref(null);
 const closeButton = ref(null);
 const isLoading = ref(false);
 
@@ -47,8 +55,8 @@ const submitData = async () => {
         isLoading.value = true;
         const rowsToEdit = $props.rows.map((row) => ({ id: row.id, itemFk: row.itemFk }));
         const payload = {
-            field: formData.field,
+            field: selectedField.value.field,
-            newValue: formData.newValue,
+            newValue: newValue.value,
             lines: rowsToEdit,
         };
 
@@ -75,19 +83,20 @@ const closeForm = () => {
             <span class="countLines">{{ ` ${rows.length} ` }}</span>
             <span class="title">{{ t('buy(s)') }}</span>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
+                <VnSelect
-                    <VnSelectFilter
                     :label="t('Field to edit')"
                     :options="fieldsOptions"
                     hide-selected
                     option-label="label"
-                        option-value="field"
+                    v-model="selectedField"
-                        v-model="formData.field"
+                />
+                <component
+                    :is="inputs[selectedField?.component || 'input']"
+                    v-bind="selectedField?.attrs || {}"
+                    v-model="newValue"
+                    :label="t('Value')"
+                    style="width: 200px"
                 />
-                </div>
-                <div class="col">
-                    <VnInput :label="t('Value')" v-model="formData.newValue" />
-                </div>
             </VnRow>
             <div class="q-mt-lg row justify-end">
                 <QBtn

src/components/FilterItemForm.vue

@@ -1,21 +1,26 @@
 <script setup>
 import { ref, reactive, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
 
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
 import axios from 'axios';
 import { dashIfEmpty } from 'src/filters';
 
+const props = defineProps({
+    url: {
+        type: String,
+        required: true,
+    },
+});
+
 const emit = defineEmits(['itemSelected']);
 
 const { t } = useI18n();
-const route = useRoute();
 
 const itemFilter = {
     include: [
@@ -73,7 +78,7 @@ const tableColumns = computed(() => [
     {
         label: t('entry.buys.color'),
         name: 'ink',
-        field: 'inkName',
+        field: (row) => row?.ink?.name,
         align: 'left',
     },
 ]);
@@ -100,7 +105,7 @@ const fetchResults = async () => {
         }
         filter.where = where;
 
-        const { data } = await axios.get(`Entries/${route.params.id}/lastItemBuys`, {
+        const { data } = await axios.get(props.url, {
             params: { filter: JSON.stringify(filter) },
         });
         tableRows.value = data;
@@ -147,20 +152,9 @@ const selectItem = ({ id }) => {
             </span>
             <h1 class="title">{{ t('Filter item') }}</h1>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
+                <VnInput :label="t('entry.buys.name')" v-model="itemFilterParams.name" />
-                    <VnInput
+                <VnInput :label="t('entry.buys.size')" v-model="itemFilterParams.size" />
-                        :label="t('entry.buys.name')"
+                <VnSelect
-                        v-model="itemFilterParams.name"
-                    />
-                </div>
-                <div class="col">
-                    <VnInput
-                        :label="t('entry.buys.size')"
-                        v-model="itemFilterParams.size"
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectFilter
                     :label="t('entry.buys.producer')"
                     :options="producersOptions"
                     hide-selected
@@ -168,9 +162,7 @@ const selectItem = ({ id }) => {
                     option-value="id"
                     v-model="itemFilterParams.producerFk"
                 />
-                </div>
+                <VnSelect
-                <div class="col">
-                    <VnSelectFilter
                     :label="t('entry.buys.type')"
                     :options="ItemTypesOptions"
                     hide-selected
@@ -178,9 +170,7 @@ const selectItem = ({ id }) => {
                     option-value="id"
                     v-model="itemFilterParams.typeFk"
                 />
-                </div>
+                <VnSelect
-                <div class="col">
-                    <VnSelectFilter
                     :label="t('entry.buys.color')"
                     :options="InksOptions"
                     hide-selected
@@ -188,7 +178,6 @@ const selectItem = ({ id }) => {
                     option-value="id"
                     v-model="itemFilterParams.inkFk"
                 />
-                </div>
             </VnRow>
             <div class="q-mt-lg row justify-end">
                 <QBtn

src/components/FilterTravelForm.vue

@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
 
 import axios from 'axios';
@@ -145,8 +145,7 @@ const selectTravel = ({ id }) => {
             </span>
             <h1 class="title">{{ t('Filter travels') }}</h1>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
+                <VnSelect
-                    <VnSelectFilter
                     :label="t('entry.basicData.agency')"
                     :options="agenciesOptions"
                     hide-selected
@@ -154,9 +153,7 @@ const selectTravel = ({ id }) => {
                     option-value="id"
                     v-model="travelFilterParams.agencyModeFk"
                 />
-                </div>
+                <VnSelect
-                <div class="col">
-                    <VnSelectFilter
                     :label="t('entry.basicData.warehouseOut')"
                     :options="warehousesOptions"
                     hide-selected
@@ -164,9 +161,7 @@ const selectTravel = ({ id }) => {
                     option-value="id"
                     v-model="travelFilterParams.warehouseOutFk"
                 />
-                </div>
+                <VnSelect
-                <div class="col">
-                    <VnSelectFilter
                     :label="t('entry.basicData.warehouseIn')"
                     :options="warehousesOptions"
                     hide-selected
@@ -174,19 +169,14 @@ const selectTravel = ({ id }) => {
                     option-value="id"
                     v-model="travelFilterParams.warehouseInFk"
                 />
-                </div>
-                <div class="col">
                 <VnInputDate
                     :label="t('entry.basicData.shipped')"
                     v-model="travelFilterParams.shipped"
                 />
-                </div>
-                <div class="col">
                 <VnInputDate
                     :label="t('entry.basicData.landed')"
                     v-model="travelFilterParams.landed"
                 />
-                </div>
             </VnRow>
             <div class="q-mt-lg row justify-end">
                 <QBtn

src/components/FormModel.vue

@@ -81,6 +81,7 @@ const emit = defineEmits(['onFetch', 'onDataSaved']);
 const componentIsRendered = ref(false);
 
 onMounted(async () => {
+    originalData.value = $props.formInitialData;
     nextTick(() => {
         componentIsRendered.value = true;
     });
@@ -101,7 +102,7 @@ onMounted(async () => {
 });
 
 onBeforeRouteLeave((to, from, next) => {
-    if (hasChanges.value)
+    if (hasChanges.value && $props.observeFormChanges)
         quasar.dialog({
             component: VnConfirm,
             componentProps: {
@@ -126,7 +127,7 @@ const isLoading = ref(false);
 // Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas
 const isResetting = ref(false);
 const hasChanges = ref(!$props.observeFormChanges);
-const originalData = ref({ ...$props.formInitialData });
+const originalData = ref({});
 const formData = computed(() => state.get($props.model));
 const formUrl = computed(() => $props.url);
 const defaultButtons = computed(() => ({
@@ -154,14 +155,21 @@ const startFormWatcher = () => {
 };
 
 async function fetch() {
-    const { data } = await axios.get($props.url, {
+    try {
+        let { data } = await axios.get($props.url, {
             params: { filter: JSON.stringify($props.filter) },
         });
 
+        if (Array.isArray(data)) data = data[0] ?? {};
+
         state.set($props.model, data);
         originalData.value = data && JSON.parse(JSON.stringify(data));
 
         emit('onFetch', state.get($props.model));
+    } catch (error) {
+        state.set($props.model, {});
+        originalData.value = {};
+    }
 }
 
 async function save() {

src/components/FormModelPopup.vue

@@ -6,7 +6,7 @@ import FormModel from 'components/FormModel.vue';
 
 const emit = defineEmits(['onDataSaved']);
 
-const $props = defineProps({
+defineProps({
     title: {
         type: String,
         default: '',
@@ -76,25 +76,25 @@ defineExpose({
             <p>{{ subtitle }}</p>
             <slot name="form-inputs" :data="data" :validate="validate" />
             <div class="q-mt-lg row justify-end">
-                <QBtn
-                    :label="t('globals.save')"
-                    :title="t('globals.save')"
-                    type="submit"
-                    color="primary"
-                    :disabled="isLoading"
-                    :loading="isLoading"
-                />
                 <QBtn
                     :label="t('globals.cancel')"
                     :title="t('globals.cancel')"
                     type="reset"
                     color="primary"
                     flat
-                    class="q-ml-sm"
                     :disabled="isLoading"
                     :loading="isLoading"
                     v-close-popup
                 />
+                <QBtn
+                    :label="t('globals.save')"
+                    :title="t('globals.save')"
+                    type="submit"
+                    color="primary"
+                    class="q-ml-sm"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                />
             </div>
         </template>
     </FormModel>

src/components/FormPopup.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 const emit = defineEmits(['onSubmit']);
 
-const $props = defineProps({
+defineProps({
     title: {
         type: String,
         default: '',
@@ -56,14 +56,6 @@ const closeForm = () => {
             <p>{{ subtitle }}</p>
             <slot name="form-inputs" />
             <div class="q-mt-lg row justify-end">
-                <QBtn
-                    v-if="defaultSubmitButton"
-                    :label="customSubmitButtonLabel || t('globals.save')"
-                    type="submit"
-                    color="primary"
-                    :disabled="isLoading"
-                    :loading="isLoading"
-                />
                 <QBtn
                     v-if="defaultCancelButton"
                     :label="t('globals.cancel')"
@@ -74,6 +66,14 @@ const closeForm = () => {
                     :loading="isLoading"
                     v-close-popup
                 />
+                <QBtn
+                    v-if="defaultSubmitButton"
+                    :label="customSubmitButtonLabel || t('globals.save')"
+                    type="submit"
+                    color="primary"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                />
                 <slot name="customButtons" />
             </div>
         </QCard>

src/components/ItemsFilterPanel.vue

@@ -0,0 +1,359 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnInput from 'components/common/VnInput.vue';
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelect from 'components/common/VnSelect.vue';
+import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
+
+import axios from 'axios';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+    customTags: {
+        type: Array,
+        default: () => [],
+    },
+    exprBuilder: {
+        type: Function,
+        default: null,
+    },
+});
+
+const itemCategories = ref([]);
+const selectedCategoryFk = ref(null);
+const selectedTypeFk = ref(null);
+const itemTypesOptions = ref([]);
+const suppliersOptions = ref([]);
+const tagOptions = ref([]);
+const tagValues = ref([]);
+
+const categoryList = computed(() => {
+    return (itemCategories.value || [])
+        .filter((category) => category.display)
+        .map((category) => ({
+            ...category,
+            icon: `vn:${(category.icon || '').split('-')[1]}`,
+        }));
+});
+
+const selectedCategory = computed(() =>
+    (itemCategories.value || []).find(
+        (category) => category?.id === selectedCategoryFk.value
+    )
+);
+
+const selectedType = computed(() => {
+    return (itemTypesOptions.value || []).find(
+        (type) => type?.id === selectedTypeFk.value
+    );
+});
+
+const selectCategory = async (params, categoryId, search) => {
+    if (params.categoryFk === categoryId) {
+        resetCategory(params);
+        search();
+        return;
+    }
+    selectedCategoryFk.value = categoryId;
+    params.categoryFk = categoryId;
+    await fetchItemTypes(categoryId);
+    search();
+};
+
+const resetCategory = (params) => {
+    selectedCategoryFk.value = null;
+    itemTypesOptions.value = null;
+    if (params) {
+        params.categoryFk = null;
+        params.typeFk = null;
+    }
+};
+
+const applyTags = (params, search) => {
+    params.tags = tagValues.value
+        .filter((tag) => tag.selectedTag && tag.value)
+        .map((tag) => ({
+            tagFk: tag.selectedTag.id,
+            tagName: tag.selectedTag.name,
+            value: tag.value,
+        }));
+    search();
+};
+
+const fetchItemTypes = async (id) => {
+    try {
+        const filter = {
+            fields: ['id', 'name', 'categoryFk'],
+            where: { categoryFk: id },
+            include: 'category',
+            order: 'name ASC',
+        };
+        const { data } = await axios.get('ItemTypes', {
+            params: { filter: JSON.stringify(filter) },
+        });
+        itemTypesOptions.value = data;
+    } catch (err) {
+        console.error('Error fetching item types', err);
+    }
+};
+
+const getCategoryClass = (category, params) => {
+    if (category.id === params?.categoryFk) {
+        return 'active';
+    }
+};
+
+const getSelectedTagValues = async (tag) => {
+    try {
+        tag.value = null;
+        const filter = {
+            fields: ['value'],
+            order: 'value ASC',
+            limit: 30,
+        };
+
+        const params = { filter: JSON.stringify(filter) };
+        const { data } = await axios.get(`Tags/${tag.selectedTag.id}/filterValue`, {
+            params,
+        });
+        tag.valueOptions = data;
+    } catch (err) {
+        console.error('Error getting selected tag values');
+    }
+};
+
+const removeTag = (index, params, search) => {
+    (tagValues.value || []).splice(index, 1);
+    applyTags(params, search);
+};
+</script>
+
+<template>
+    <FetchData
+        url="ItemCategories"
+        limit="30"
+        auto-load
+        @on-fetch="(data) => (itemCategories = data)"
+    />
+    <FetchData
+        url="Suppliers"
+        limit="30"
+        auto-load
+        :filter="{ fields: ['id', 'name', 'nickname'], order: 'name ASC', limit: 30 }"
+        @on-fetch="(data) => (suppliersOptions = data)"
+    />
+    <FetchData
+        url="Tags"
+        :filter="{ fields: ['id', 'name', 'isFree'] }"
+        auto-load
+        limit="30"
+        @on-fetch="(data) => (tagOptions = data)"
+    />
+    <VnFilterPanel
+        :data-key="props.dataKey"
+        :expr-builder="exprBuilder"
+        :custom-tags="customTags"
+    >
+        <template #tags="{ tag, formatFn }">
+            <strong v-if="tag.label === 'categoryFk'">
+                {{ t(selectedCategory?.name || '') }}
+            </strong>
+            <strong v-else-if="tag.label === 'typeFk'">
+                {{ t(selectedType?.name || '') }}
+            </strong>
+            <div v-else class="q-gutter-x-xs">
+                <strong>{{ t(`components.itemsFilterPanel.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #customTags="{ tags, params }">
+            <template v-for="tag in tags" :key="tag.label">
+                <VnFilterPanelChip
+                    v-for="chip in tag.value"
+                    :key="chip"
+                    removable
+                    @remove="removeTagChip(chip, params, searchFn)"
+                >
+                    <div class="q-gutter-x-xs">
+                        <strong>{{ chip.tagName }}: </strong>
+                        <span>"{{ chip.value }}"</span>
+                    </div>
+                </VnFilterPanelChip>
+            </template>
+        </template>
+        <template #body="{ params, searchFn }">
+            <QItem class="category-filter q-mt-md">
+                <QBtn
+                    dense
+                    flat
+                    round
+                    v-for="category in categoryList"
+                    :key="category.name"
+                    :class="['category', getCategoryClass(category, params)]"
+                    :icon="category.icon"
+                    @click="selectCategory(params, category.id, searchFn)"
+                >
+                    <QTooltip>
+                        {{ t(category.name) }}
+                    </QTooltip>
+                </QBtn>
+            </QItem>
+            <QItem class="q-my-md">
+                <QItemSection>
+                    <VnSelect
+                        :label="t('components.itemsFilterPanel.typeFk')"
+                        v-model="params.typeFk"
+                        :options="itemTypesOptions"
+                        option-value="id"
+                        option-label="name"
+                        dense
+                        outlined
+                        rounded
+                        use-input
+                        :disable="!selectedCategoryFk"
+                        @update:model-value="
+                            (value) => {
+                                selectedTypeFk = value;
+                                searchFn();
+                            }
+                        "
+                    >
+                        <template #option="{ itemProps, opt }">
+                            <QItem v-bind="itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ opt.name }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        {{ opt.categoryName }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelect>
+                </QItemSection>
+            </QItem>
+            <QSeparator />
+            <slot name="body" :params="params" :search-fn="searchFn" />
+            <QItem
+                v-for="(value, index) in tagValues"
+                :key="value"
+                class="q-mt-md filter-value"
+            >
+                <QItemSection class="col">
+                    <VnSelect
+                        :label="t('components.itemsFilterPanel.tag')"
+                        v-model="value.selectedTag"
+                        :options="tagOptions"
+                        option-label="name"
+                        dense
+                        outlined
+                        rounded
+                        :emit-value="false"
+                        use-input
+                        :is-clearable="false"
+                        @update:model-value="getSelectedTagValues(value)"
+                    />
+                </QItemSection>
+                <QItemSection class="col">
+                    <VnSelect
+                        v-if="!value?.selectedTag?.isFree && value.valueOptions"
+                        :label="t('components.itemsFilterPanel.value')"
+                        v-model="value.value"
+                        :options="value.valueOptions || []"
+                        option-value="value"
+                        option-label="value"
+                        dense
+                        outlined
+                        rounded
+                        emit-value
+                        use-input
+                        :disable="!value"
+                        :is-clearable="false"
+                        @update:model-value="applyTags(params, searchFn)"
+                    />
+                    <VnInput
+                        v-else
+                        v-model="value.value"
+                        :label="t('components.itemsFilterPanel.value')"
+                        :disable="!value"
+                        is-outlined
+                        :is-clearable="false"
+                        @keyup.enter="applyTags(params, searchFn)"
+                    />
+                </QItemSection>
+                <QIcon
+                    name="delete"
+                    class="fill-icon-on-hover q-px-xs"
+                    color="primary"
+                    size="sm"
+                    @click="removeTag(index, params, searchFn)"
+                />
+            </QItem>
+            <QItem class="q-mt-lg">
+                <QIcon
+                    name="add_circle"
+                    class="fill-icon-on-hover q-px-xs"
+                    color="primary"
+                    size="sm"
+                    @click="tagValues.push({})"
+                />
+            </QItem>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<style lang="scss" scoped>
+.category-filter {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 12px;
+
+    .category {
+        padding: 8px;
+        width: 60px;
+        height: 60px;
+        font-size: 1.4rem;
+        background-color: var(--vn-accent-color);
+
+        &.active {
+            background-color: $primary;
+        }
+    }
+}
+
+.filter-value {
+    display: flex;
+    align-items: center;
+}
+</style>
+
+<i18n>
+en:
+    params:
+        supplier: Supplier
+        from: From
+        to: To
+        active: Is active
+        visible: Is visible
+        floramondo: Is floramondo
+        salesPersonFk: Buyer
+        categoryFk: Category
+
+es:
+    params:
+        supplier: Proveedor
+        from: Desde
+        to: Hasta
+        active: Activo
+        visible: Visible
+        floramondo: Floramondo
+        salesPersonFk: Comprador
+        categoryFk: Categoría
+</i18n>

src/components/LeftMenu.vue

@@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { QSeparator, useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
@@ -22,6 +22,8 @@ const props = defineProps({
     },
 });
 
+const expansionItemElements = reactive({});
+
 onMounted(async () => {
     await navigation.fetchPinned();
     getRoutes();
@@ -108,6 +110,10 @@ async function togglePinned(item, event) {
         type: 'positive',
     });
 }
+
+const handleItemExpansion = (itemName) => {
+    expansionItemElements[itemName].scrollToLastElement();
+};
 </script>
 
 <template>
@@ -213,8 +219,12 @@ async function togglePinned(item, event) {
                         :icon="item.icon"
                         :label="t(item.title)"
                         :content-inset-level="0.5"
+                        @after-show="handleItemExpansion(item.name)"
                     >
-                        <LeftMenuItemGroup :item="item" />
+                        <LeftMenuItemGroup
+                            :ref="(el) => (expansionItemElements[item.name] = el)"
+                            :item="item"
+                        />
                     </QExpansionItem>
                 </QList>
             </template>

src/components/LeftMenuItemGroup.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import LeftMenuItem from './LeftMenuItem.vue';
+import { elementIsVisibleInViewport } from 'src/composables/elementIsVisibleInViewport';
 
 const props = defineProps({
     item: {
@@ -13,10 +14,27 @@ const props = defineProps({
     },
 });
 
+const groupEnd = ref(null);
+
+const scrollToLastElement = () => {
+    if (groupEnd.value && !elementIsVisibleInViewport(groupEnd.value)) {
+        groupEnd.value.scrollIntoView({
+            behavior: 'smooth',
+            block: 'end',
+        });
+    }
+};
+
 const item = computed(() => props.item); // eslint-disable-line vue/no-dupe-keys
+
+defineExpose({
+    scrollToLastElement,
+});
 </script>
+
 <template>
     <template v-for="section in item.children" :key="section.name">
         <LeftMenuItem :item="section" />
     </template>
+    <div ref="groupEnd" />
 </template>

src/components/RegularizeStockForm.vue

@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import FormModelPopup from './FormModelPopup.vue';
@@ -50,16 +50,15 @@ const onDataSaved = (data) => {
     >
         <template #form-inputs="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
                 <QInput
                     :label="t('Type the visible quantity')"
                     v-model.number="data.quantity"
+                    autofocus
                 />
-                </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Warehouse')"
                         v-model="data.warehouseFk"
                         :options="warehousesOptions"

src/components/TransferInvoiceForm.vue

@@ -5,7 +5,7 @@ import { useRouter } from 'vue-router';
 
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import FormPopup from './FormPopup.vue';
 
 import axios from 'axios';
@@ -83,8 +83,7 @@ const transferInvoice = async () => {
     >
         <template #form-inputs>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
+                <VnSelect
-                    <VnSelectFilter
                     :label="t('Client')"
                     :options="clientsOptions"
                     hide-selected
@@ -103,10 +102,8 @@ const transferInvoice = async () => {
                             </QItemSection>
                         </QItem>
                     </template>
-                    </VnSelectFilter>
+                </VnSelect>
-                </div>
+                <VnSelect
-                <div class="col">
-                    <VnSelectFilter
                     :label="t('Rectificative type')"
                     :options="rectificativeTypeOptions"
                     hide-selected
@@ -115,11 +112,9 @@ const transferInvoice = async () => {
                     v-model="transferInvoiceParams.cplusRectificationTypeFk"
                     :required="true"
                 />
-                </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
+                <VnSelect
-                    <VnSelectFilter
                     :label="t('Class')"
                     :options="siiTypeInvoiceOutsOptions"
                     hide-selected
@@ -138,10 +133,8 @@ const transferInvoice = async () => {
                             </QItemSection>
                         </QItem>
                     </template>
-                    </VnSelectFilter>
+                </VnSelect>
-                </div>
+                <VnSelect
-                <div class="col">
-                    <VnSelectFilter
                     :label="t('Type')"
                     :options="invoiceCorrectionTypesOptions"
                     hide-selected
@@ -150,7 +143,6 @@ const transferInvoice = async () => {
                     v-model="transferInvoiceParams.invoiceCorrectionTypeFk"
                     :required="true"
                 />
-                </div>
             </VnRow>
         </template>
     </FormPopup>

src/components/UserPanel.vue

@@ -7,7 +7,7 @@ import axios from 'axios';
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
 import { localeEquivalence } from 'src/i18n/index';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
 
@@ -172,42 +172,57 @@ function copyUserToken() {
         <QSeparator inset class="q-mx-lg" />
         <div class="col q-gutter-xs q-pa-md">
             <VnRow>
-                <VnSelectFilter
+                <VnSelect
                     :label="t('components.userPanel.localWarehouse')"
                     v-model="user.localWarehouseFk"
                     :options="warehousesData"
                     option-label="name"
                     option-value="id"
-                />
+                    input-debounce="0"
-                <VnSelectFilter
-                    :label="t('components.userPanel.localBank')"
                     hide-selected
+                />
+                <VnSelect
+                    :label="t('components.userPanel.localBank')"
                     v-model="user.localBankFk"
                     :options="accountBankData"
                     option-label="bank"
                     option-value="id"
-                ></VnSelectFilter>
+                    input-debounce="0"
+                    hide-selected
+                >
+                    <template #option="{ itemProps, opt }">
+                        <QItem v-bind="itemProps">
+                            <QItemSection>
+                                <QItemLabel>
+                                    {{ `${opt.id}: ${opt.bank}` }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelect>
             </VnRow>
             <VnRow>
-                <VnSelectFilter
+                <VnSelect
                     :label="t('components.userPanel.localCompany')"
                     hide-selected
-                    v-model="user.companyFk"
+                    v-model="user.localCompanyFk"
                     :options="companiesData"
                     option-label="code"
                     option-value="id"
+                    input-debounce="0"
                 />
-                <VnSelectFilter
+                <VnSelect
                     :label="t('components.userPanel.userWarehouse')"
                     hide-selected
                     v-model="user.warehouseFk"
                     :options="warehousesData"
                     option-label="name"
                     option-value="id"
+                    input-debounce="0"
                 />
             </VnRow>
             <VnRow>
-                <VnSelectFilter
+                <VnSelect
                     :label="t('components.userPanel.userCompany')"
                     hide-selected
                     v-model="user.companyFk"
@@ -215,6 +230,8 @@ function copyUserToken() {
                     option-label="code"
                     option-value="id"
                     style="flex: 0"
+                    dense
+                    input-debounce="0"
                 />
             </VnRow>
         </div>

src/components/common/RightMenu.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { ref, onMounted, useSlots } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+
+const slots = useSlots();
+const hasContent = ref(false);
+const rightPanel = ref(null);
+
+onMounted(() => {
+    rightPanel.value = document.querySelector('#right-panel');
+    if (rightPanel.value.childNodes.length) hasContent.value = true;
+
+    // Check if there's content to display
+    const observer = new MutationObserver(() => {
+        hasContent.value = rightPanel.value.childNodes.length;
+    });
+
+    if (rightPanel.value)
+        observer.observe(rightPanel.value, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+        });
+
+    if (!slots['right-panel'] && !hasContent.value) stateStore.rightDrawer = false;
+});
+
+const { t } = useI18n();
+const stateStore = useStateStore();
+</script>
+<template>
+    <Teleport to="#actions-append">
+        <div class="row q-gutter-x-sm">
+            <QBtn
+                v-if="hasContent || $slots['right-panel']"
+                flat
+                @click="stateStore.toggleRightDrawer()"
+                round
+                dense
+                icon="menu"
+            >
+                <QTooltip bottom anchor="bottom right">
+                    {{ t('globals.collapseMenu') }}
+                </QTooltip>
+            </QBtn>
+        </div>
+    </Teleport>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <div id="right-panel"></div>
+            <slot v-if="!hasContent" name="right-panel" />
+        </QScrollArea>
+    </QDrawer>
+</template>

src/components/common/SendEmailDialog.vue

@@ -29,10 +29,12 @@ async function confirm() {
     const response = { address: address.value };
     if (props.promise) {
         isLoading.value = true;
-        const { address: _address, ...restData } = props.data;
 
         try {
-            Object.assign(response, restData);
+            const dataCopy = JSON.parse(JSON.stringify({ ...props.data }));
+            delete dataCopy.address;
+
+            Object.assign(response, dataCopy);
             await props.promise(response);
         } finally {
             isLoading.value = false;

src/components/common/VnCard.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { onBeforeMount, computed, watchEffect } from 'vue';
+import { useRoute, onBeforeRouteUpdate } from 'vue-router';
+import { useArrayData } from 'src/composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
+import useCardSize from 'src/composables/useCardSize';
+import VnSubToolbar from '../ui/VnSubToolbar.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import LeftMenu from 'components/LeftMenu.vue';
+import RightMenu from 'components/common/RightMenu.vue';
+
+const props = defineProps({
+    dataKey: { type: String, required: true },
+    baseUrl: { type: String, default: undefined },
+    customUrl: { type: String, default: undefined },
+    filter: { type: Object, default: () => {} },
+    descriptor: { type: Object, required: true },
+    filterPanel: { type: Object, default: undefined },
+    searchDataKey: { type: String, default: undefined },
+    searchUrl: { type: String, default: undefined },
+    searchbarLabel: { type: String, default: '' },
+    searchbarInfo: { type: String, default: '' },
+});
+
+const stateStore = useStateStore();
+const route = useRoute();
+const url = computed(() => {
+    if (props.baseUrl) return `${props.baseUrl}/${route.params.id}`;
+    return props.customUrl;
+});
+
+const arrayData = useArrayData(props.dataKey, {
+    url: url.value,
+    filter: props.filter,
+});
+
+onBeforeMount(async () => {
+    if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
+    await arrayData.fetch({ append: false });
+});
+
+if (props.baseUrl) {
+    onBeforeRouteUpdate(async (to, from) => {
+        if (to.params.id !== from.params.id) {
+            arrayData.store.url = `${props.baseUrl}/${route.params.id}`;
+            await arrayData.fetch({ append: false });
+        }
+    });
+}
+
+watchEffect(() => {
+    if (Array.isArray(arrayData.store.data))
+        arrayData.store.data = arrayData.store.data[0];
+});
+</script>
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar" v-if="props.searchDataKey">
+            <slot name="searchbar">
+                <VnSearchbar
+                    :data-key="props.searchDataKey"
+                    :url="props.searchUrl"
+                    :label="props.searchbarLabel"
+                    :info="props.searchbarInfo"
+                />
+            </slot>
+        </Teleport>
+        <slot v-else name="searchbar" />
+        <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+            <QScrollArea class="fit">
+                <component :is="descriptor" />
+                <QSeparator />
+                <LeftMenu source="card" />
+            </QScrollArea>
+        </QDrawer>
+        <RightMenu>
+            <template #right-panel v-if="props.filterPanel">
+                <component :is="props.filterPanel" :data-key="props.searchDataKey" />
+            </template>
+        </RightMenu>
+    </template>
+    <QPageContainer>
+        <QPage>
+            <VnSubToolbar />
+            <div :class="[useCardSize(), $attrs.class]">
+                <RouterView />
+            </div>
+        </QPage>
+    </QPageContainer>
+</template>

src/components/common/VnDms.vue

@@ -6,7 +6,7 @@ import axios from 'axios';
 
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModelPopup from 'components/FormModelPopup.vue';
 
@@ -123,7 +123,7 @@ function addDefaultData(data) {
             <div class="q-gutter-y-ms">
                 <VnRow>
                     <VnInput :label="t('globals.reference')" v-model="dms.reference" />
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('globals.company')"
                         v-model="dms.companyFk"
                         :options="companies"
@@ -133,7 +133,7 @@ function addDefaultData(data) {
                     />
                 </VnRow>
                 <VnRow>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('globals.warehouse')"
                         v-model="dms.warehouseFk"
                         :options="warehouses"
@@ -141,7 +141,7 @@ function addDefaultData(data) {
                         option-label="name"
                         input-debounce="0"
                     />
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('globals.type')"
                         v-model="dms.dmsTypeFk"
                         :options="dmsTypes"

src/components/common/VnDmsList.vue

@@ -35,7 +35,7 @@ const $props = defineProps({
     downloadModel: {
         type: String,
         required: false,
-        default: null,
+        default: undefined,
     },
     defaultDmsCode: {
         type: String,
@@ -187,7 +187,7 @@ const columns = computed(() => [
                     downloadFile(
                         prop.row.id,
                         $props.downloadModel,
-                        null,
+                        undefined,
                         prop.row.download
                     ),
             },

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
         ? {
@@ -37,10 +37,6 @@ const styleAttrs = computed(() => {
         : {};
 });
 
-const onEnterPress = () => {
-    emit('keyup.enter');
-};
-
 const focus = () => {
     vnInputRef.value.focus();
 };
@@ -48,23 +44,52 @@ const focus = () => {
 defineExpose({
     focus,
 });
+
+const inputRules = [
+    (val) => {
+        const { min } = vnInputRef.value.$attrs;
+        if (min >= 0) if (Math.floor(val) < min) return t('inputMin', { value: min });
+    },
+];
 </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()"
+            @keyup.enter="emit('keyup.enter')"
-        :rules="$attrs.required ? [requiredFieldRule] : null"
+            :clearable="false"
+            :rules="inputRules"
+            :lazy-rules="true"
+            hide-bottom-space
         >
             <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 && !$attrs.disabled" />
+                <QIcon
+                    name="close"
+                    size="xs"
+                    v-if="$slots.append && hover && value && !$attrs.disabled"
+                    @click="value = null"
+                ></QIcon>
             </template>
         </QInput>
+    </div>
 </template>
+<i18n>
+    en:
+        inputMin: Must be more than {value}
+    es:
+        inputMin: Debe ser mayor a {value}
+</i18n>

src/components/common/VnInputDate.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue';
-import VnInput from 'components/common/VnInput.vue';
+import isValidDate from 'filters/isValidDate';
-import isValidDate from "filters/isValidDate";
 
 const props = defineProps({
     modelValue: {
@@ -16,7 +15,13 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    emitDateFormat: {
+        type: Boolean,
+        default: false,
+    },
 });
+const hover = ref(false);
+
 const emit = defineEmits(['update:modelValue']);
 
 const joinDateAndTime = (date, time) => {
@@ -36,7 +41,10 @@ const value = computed({
         return props.modelValue;
     },
     set(value) {
-        emit('update:modelValue', joinDateAndTime(value, time.value));
+        emit(
+            'update:modelValue',
+            props.emitDateFormat ? new Date(value) : joinDateAndTime(value, time.value)
+        );
     },
 });
 
@@ -77,14 +85,21 @@ const styleAttrs = computed(() => {
 </script>
 
 <template>
-    <VnInput
+    <div @mouseover="hover = true" @mouseleave="hover = false">
+        <QInput
             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,13 +109,15 @@ const styleAttrs = computed(() => {
                         :no-parent-event="props.readonly"
                     >
                         <QDate
+                            :today-btn="true"
                             :model-value="formatDate(value)"
                             @update:model-value="onDateUpdate"
                         />
                     </QPopupProxy>
                 </QIcon>
             </template>
-    </VnInput>
+        </QInput>
+    </div>
 </template>
 
 <style lang="scss">

src/components/common/VnInputTime.vue

@@ -2,7 +2,7 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import isValidDate from 'filters/isValidDate';
-import VnInput from "components/common/VnInput.vue";
+import VnInput from 'components/common/VnInput.vue';
 
 const props = defineProps({
     modelValue: {
@@ -20,6 +20,7 @@ const props = defineProps({
 });
 const { t } = useI18n();
 const emit = defineEmits(['update:modelValue']);
+
 const value = computed({
     get() {
         return props.modelValue;
@@ -27,12 +28,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 +67,7 @@ const styleAttrs = computed(() => {
 </script>
 
 <template>
-    <VnInput
+    <QInput
         class="vn-input-time"
         readonly
         :model-value="formatTime(value)"
@@ -79,7 +75,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 +107,7 @@ const styleAttrs = computed(() => {
                 </QPopupProxy>
             </QIcon>
         </template>
-    </VnInput>
+    </QInput>
 </template>
 
 <style lang="scss">

src/components/common/VnLog.vue

@@ -12,7 +12,7 @@ import { useValidator } from 'src/composables/useValidator';
 import VnAvatar from '../ui/VnAvatar.vue';
 import VnJsonValue from '../common/VnJsonValue.vue';
 import FetchData from '../FetchData.vue';
-import VnSelectFilter from './VnSelectFilter.vue';
+import VnSelect from './VnSelect.vue';
 import VnUserLink from '../ui/VnUserLink.vue';
 
 const stateStore = useStateStore();
@@ -421,12 +421,13 @@ setLogTree();
         >
             <div class="timeline">
                 <div class="user-avatar">
-                    <VnUserLink :worker-id="userLog.user.id">
+                    <VnUserLink :worker-id="userLog?.user?.id">
                         <template #link>
                             <VnAvatar
-                                :class="{ 'cursor-pointer': userLog.user.id }"
+                                :class="{ 'cursor-pointer': userLog?.user?.id }"
-                                :worker-id="userLog.user.id"
+                                :worker-id="userLog?.user?.id"
-                                :title="userLog.user.nickname"
+                                :title="userLog?.user?.nickname"
+                                :show-letter="!userLog?.user"
                                 size="lg"
                             />
                         </template>
@@ -659,7 +660,7 @@ setLogTree();
                     </QInput>
                 </QItem>
                 <QItem>
-                    <VnSelectFilter
+                    <VnSelect
                         class="full-width"
                         :label="t('globals.entity')"
                         v-model="selectedFilters.changedModel"
@@ -689,7 +690,7 @@ setLogTree();
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
                     <QItemSection v-if="workers && userRadio !== null">
-                        <VnSelectFilter
+                        <VnSelect
                             class="full-width"
                             :label="t('globals.user')"
                             v-model="userSelect"
@@ -713,7 +714,7 @@ setLogTree();
                                     </QItemSection>
                                 </QItem>
                             </template>
-                        </VnSelectFilter>
+                        </VnSelect>
                     </QItemSection>
                 </QItem>
                 <QItem class="q-mt-sm">

src/components/common/VnSelect.vue

@@ -22,6 +22,10 @@ const $props = defineProps({
         type: String,
         default: '',
     },
+    optionFilter: {
+        type: String,
+        default: null,
+    },
     url: {
         type: String,
         default: '',
@@ -57,9 +61,9 @@ const $props = defineProps({
 });
 
 const { t } = useI18n();
-const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
+const requiredFieldRule = (val) => val ?? t('globals.fieldRequired');
 
-const { optionLabel, optionValue, options, modelValue } = toRefs($props);
+const { optionLabel, optionValue, optionFilter, options, modelValue } = toRefs($props);
 const myOptions = ref([]);
 const myOptionsOriginal = ref([]);
 const vnSelectRef = ref();
@@ -109,9 +113,9 @@ async function fetchFilter(val) {
     const { fields, sortBy, limit } = $props;
     let key = optionLabel.value;
 
-    if (new RegExp(/\d/g).test(val)) key = optionValue.value;
+    if (new RegExp(/\d/g).test(val)) key = optionFilter.value ?? optionValue.value;
 
-    const where = { [key]: { like: `%${val}%` } };
+    const where = { ...{ [key]: { like: `%${val}%` } }, ...$props.where };
     return dataRef.value.fetch({ fields, where, order: sortBy, limit });
 }
 
@@ -167,8 +171,10 @@ watch(modelValue, (newValue) => {
         hide-selected
         fill-input
         ref="vnSelectRef"
+        lazy-rules
         :class="{ required: $attrs.required }"
         :rules="$attrs.required ? [requiredFieldRule] : null"
+        virtual-scroll-slice-size="options.length"
     >
         <template v-if="isClearable" #append>
             <QIcon

src/components/common/VnSelectDialog.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue';
 
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 import { useRole } from 'src/composables/useRole';
 
@@ -52,7 +52,7 @@ const toggleForm = () => {
 </script>
 
 <template>
-    <VnSelectFilter v-model="value" :options="options" v-bind="$attrs">
+    <VnSelect v-model="value" :options="options" v-bind="$attrs">
         <template v-if="isAllowedToCreate" #append>
             <QIcon
                 @click.stop.prevent="toggleForm()"
@@ -72,7 +72,7 @@ const toggleForm = () => {
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
             <slot :name="slotName" v-bind="slotData" :key="slotName" />
         </template>
-    </VnSelectFilter>
+    </VnSelect>
 </template>
 
 <style lang="scss" scoped>

src/components/common/VnSmsDialog.vue

@@ -21,7 +21,8 @@ const props = defineProps({
     },
     template: {
         type: String,
-        required: true,
+        required: false,
+        default: '',
     },
     locale: {
         type: String,
@@ -49,7 +50,7 @@ updateMessage();
 
 function updateMessage() {
     const params = props.data;
-    const key = `templates['${props.template}']`;
+    const key = props.template ? `templates['${props.template}']` : '';
 
     message.value = t(key, params, { locale: locale.value });
 }
@@ -104,15 +105,14 @@ async function send() {
                     map-options
                     :input-debounce="0"
                     rounded
-                    outlined
                     dense
                 />
             </QCardSection>
             <QCardSection class="q-pb-xs">
-                <VnInput :label="t('Phone')" v-model="phone" is-outlined />
+                <VnInput :label="t('Phone')" v-model="phone" />
             </QCardSection>
             <QCardSection class="q-pb-xs">
-                <VnInput v-model="subject" :label="t('Subject')" is-outlined />
+                <VnInput v-model="subject" :label="t('Subject')" />
             </QCardSection>
             <QCardSection class="q-mb-md" q-input>
                 <QInput
@@ -125,7 +125,6 @@ async function send() {
                     :bottom-slots="true"
                     :rules="[(value) => value.length < maxLength || 'Error!']"
                     stack-label
-                    outlined
                     autofocus
                 >
                     <template #append>
@@ -135,6 +134,11 @@ async function send() {
                             @click="message = ''"
                             class="cursor-pointer"
                         />
+                        <QIcon name="info" class="cursor-pointer">
+                            <QTooltip>
+                                {{ t('messageTooltip') }}
+                            </QTooltip>
+                        </QIcon>
                     </template>
                     <template #counter>
                         <QChip :color="color" dense>
@@ -184,18 +188,21 @@ en:
     es: Spanish
     fr: French
     pt: Portuguese
+    messageTooltip: Special characters like accents counts as multiple
 es:
     Send SMS: Enviar SMS
     Language: Idioma
     Phone: Móvil
     Subject: Asunto
     Message: Mensaje
+    messageTooltip: Carácteres especiales como acentos cuentan como varios
     templates:
         pendingPayment: 'Su pedido está pendiente de pago.
             Por favor, entre en la página web y efectue el pago con tarjeta. Muchas gracias.'
-        minAmount: 'Es necesario un importe mínimo de 50€ (Sin IVA) en su pedido
+        minAmount: 'Te recordamos que tu pedido {orderId} es inferior a 50€.
-            { orderId } del día { shipped } para recibirlo sin portes adicionales.'
+            Te recomendamos amplíes para no generar costes extra, provocarán un incremento de tu tarifa.
-        orderChanges: 'Pedido {orderId} día { shipped }: { changes }'
+            ¡Un saludo!'
+        orderChanges: 'Pedido {orderId} con llegada estimada día { landing }: { changes }'
     en: Inglés
     es: Español
     fr: Francés
@@ -207,12 +214,14 @@ fr:
     Phone: Mobile
     Subject: Affaire
     Message: Message
+    messageTooltip: Les caractères spéciaux comme les accents comptent comme plusieurs
     templates:
-        pendingPayment: 'Votre commande est en attente de paiement.
+        pendingPayment: 'Verdnatura : Commande en attente de règlement. Veuillez régler votre commande avant 9h.
-            Veuillez vous connecter sur le site web et effectuer le paiement par carte. Merci beaucoup.'
+            Sinon elle sera décalée en fonction de vos jours de livraison . Merci'
-        minAmount: 'Un montant minimum de 50€ (TVA non incluse) est requis pour votre commande
+        minAmount: 'Verdnatura vous rappelle :
-            { orderId } du { shipped } afin de la recevoir sans frais de port supplémentaires.'
+            Montant minimum nécessaire de 50 euros pour recevoir la commande { orderId } livraison { landing }.
-        orderChanges: 'Commande { orderId } du { shipped }: { changes }'
+            Merci.'
+        orderChanges: 'Commande {orderId} livraison {landing} indisponible/s. Désolés pour le dérangement.'
     en: Anglais
     es: Espagnol
     fr: Français
@@ -224,12 +233,13 @@ pt:
     Phone: Móvel
     Subject: Assunto
     Message: Mensagem
+    messageTooltip: Caracteres especiais como acentos contam como vários
     templates:
         pendingPayment: 'Seu pedido está pendente de pagamento.
             Por favor, acesse o site e faça o pagamento com cartão. Muito obrigado.'
         minAmount: 'É necessário um valor mínimo de 50€ (sem IVA) em seu pedido
-            { orderId } do dia { shipped } para recebê-lo sem custos de envio adicionais.'
+            { orderId } do dia { landing } para recebê-lo sem custos de envio adicionais.'
-        orderChanges: 'Pedido { orderId } dia { shipped }: { changes }'
+        orderChanges: 'Pedido { orderId } com chegada dia { landing }: { changes }'
     en: Inglês
     es: Espanhol
     fr: Francês

src/components/ui/CardDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onBeforeMount, useSlots, watch, computed, ref } from 'vue';
+import { onBeforeMount, watch, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
@@ -38,7 +38,6 @@ const $props = defineProps({
 });
 
 const state = useState();
-const slots = useSlots();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 const arrayData = useArrayData($props.dataKey || $props.module, {
@@ -47,7 +46,7 @@ const arrayData = useArrayData($props.dataKey || $props.module, {
     skip: 0,
 });
 const { store } = arrayData;
-const entity = computed(() =>Array.isArray( store.data) ? store.data[0] : store.data);
+const entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
 const isLoading = ref(false);
 
 defineExpose({
@@ -55,14 +54,12 @@ defineExpose({
 });
 onBeforeMount(async () => {
     await getData();
-    watch(
+    watch($props, async () => await getData());
-        () => $props.url,
-        async () => await getData()
-    );
 });
 
 async function getData() {
     store.url = $props.url;
+    store.filter = $props.filter ?? {};
     isLoading.value = true;
     try {
         const { data } = await arrayData.fetch({ append: false, updateRouter: false });
@@ -117,7 +114,7 @@ const emit = defineEmits(['onFetch']);
                     icon="more_vert"
                     round
                     size="md"
-                    :class="{ invisible: !slots.menu }"
+                    :class="{ invisible: !$slots.menu }"
                 >
                     <QTooltip>
                         {{ t('components.cardDescriptor.moreOptions') }}

src/components/ui/CardSummary.vue

@@ -15,7 +15,7 @@ const props = defineProps({
         default: null,
     },
     entityId: {
-        type: Number,
+        type: [Number, String],
         default: null,
     },
     dataKey: {
@@ -32,7 +32,7 @@ const arrayData = useArrayData(props.dataKey || route.meta.moduleName, {
     skip: 0,
 });
 const { store } = arrayData;
-const entity = computed(() => Array.isArray(store.data) ? store.data[0] : store.data);
+const entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
 const isLoading = ref(false);
 
 defineExpose({
@@ -48,11 +48,28 @@ onBeforeMount(async () => {
 
 async function fetch() {
     store.url = props.url;
+    store.filter = props.filter ?? {};
     isLoading.value = true;
     const { data } = await arrayData.fetch({ append: false, updateRouter: false });
-    emit('onFetch', data);
+    emit('onFetch', Array.isArray(data) ? data[0] : data);
     isLoading.value = false;
 }
+
+const showRedirectToSummaryIcon = computed(() => {
+    const exist = existSummary(route.matched);
+    return !isSummary.value && route.meta.moduleName && exist;
+});
+
+function existSummary(routes) {
+    const hasSummary = routes.some((r) => r.name === `${route.meta.moduleName}Summary`);
+    if (hasSummary) return hasSummary;
+    for (const current of routes) {
+        if (current.path != '/' && current.children) {
+            const exist = existSummary(current.children);
+            if (exist) return exist;
+        }
+    }
+}
 </script>
 
 <template>
@@ -63,7 +80,7 @@ async function fetch() {
                 <div class="summaryHeader bg-primary q-pa-sm text-weight-bolder">
                     <slot name="header-left">
                         <router-link
-                            v-if="!isSummary && route.meta.moduleName"
+                            v-if="showRedirectToSummaryIcon"
                             class="header link"
                             :to="{
                                 name: `${route.meta.moduleName}Summary`,
@@ -134,6 +151,9 @@ async function fetch() {
             box-shadow: none;
 
             .vn-label-value {
+                &.negative > .value span {
+                    color: $alert;
+                }
                 display: flex;
                 flex-direction: row;
                 margin-top: 2px;

src/components/ui/FetchedTags.vue

@@ -1,5 +1,7 @@
 <script setup>
-defineProps({
+import { computed } from 'vue';
+
+const $props = defineProps({
     maxLength: {
         type: Number,
         required: true,
@@ -8,53 +10,40 @@ defineProps({
         type: Object,
         required: true,
     },
+    tag: {
+        type: String,
+        required: false,
+        default: 'tag',
+    },
+    value: {
+        type: String,
+        required: false,
+        default: 'value',
+    },
+});
+const tags = computed(() => {
+    return Object.keys($props.item)
+        .filter((i) => i.startsWith(`${$props.tag}`))
+        .reduce((acc, tag) => {
+            const n = tag.split(`${$props.tag}`)[1];
+            const key = `${$props.tag}${n}`;
+            const value = `${$props.value}${n}`;
+            acc[$props.item[key] ?? key] = $props.item[value] ?? '';
+            return acc;
+        }, {});
 });
 </script>
 <template>
     <div class="fetchedTags">
         <div class="wrap">
             <div
+                v-for="(val, key) in tags"
+                :key="key"
                 class="inline-tag"
-                :class="{ empty: !$props.item.value5 }"
+                :title="`${key}: ${val}`"
-                :title="$props.item.tag5 + ': ' + $props.item.value5"
+                :class="{ empty: !val }"
             >
-                {{ $props.item.value5 }}
+                {{ val }}
-            </div>
-            <div
-                class="inline-tag"
-                :class="{ empty: !$props.item.tag6 }"
-                :title="$props.item.tag6 + ': ' + $props.item.value6"
-            >
-                {{ $props.item.value6 }}
-            </div>
-
-            <div
-                class="inline-tag"
-                :class="{ empty: !$props.item.value7 }"
-                :title="$props.item.tag7 + ': ' + $props.item.value7"
-            >
-                {{ $props.item.value7 }}
-            </div>
-            <div
-                class="inline-tag"
-                :class="{ empty: !$props.item.value8 }"
-                :title="$props.item.tag8 + ': ' + $props.item.value8"
-            >
-                {{ $props.item.value8 }}
-            </div>
-            <div
-                class="inline-tag"
-                :class="{ empty: !$props.item.value9 }"
-                :title="$props.item.tag9 + ': ' + $props.item.value9"
-            >
-                {{ $props.item.value9 }}
-            </div>
-            <div
-                class="inline-tag"
-                :class="{ empty: !$props.item.value10 }"
-                :title="$props.item.tag10 + ': ' + $props.item.value10"
-            >
-                {{ $props.item.value10 }}
             </div>
         </div>
     </div>
@@ -72,7 +61,7 @@ defineProps({
     .inline-tag {
         height: 1rem;
         margin: 0.05rem;
-        color: $secondary;
+        color: $color-font-secondary;
         text-align: center;
         font-size: smaller;
         padding: 1px;
@@ -83,9 +72,8 @@ defineProps({
         min-width: 4rem;
         max-width: 4rem;
     }
-
     .empty {
-        border: 1px solid $color-spacer-light;
+        border: 1px solid #2b2b2b;
     }
 }
 </style>

src/components/ui/QCalendarMonthWrapper.vue

@@ -0,0 +1,165 @@
+<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,
+    },
+    viewCustomization: {
+        type: String,
+        default: '',
+    },
+});
+
+const $q = useQuasar();
+
+// El objetivo de asignar las clases de personalización desde el wrapper es no tener conflictos entre vistas que usen el mismo componente
+const viewCustomizationClasses = {
+    workerCalendar: 'worker-calendar-customizations',
+};
+
+const containerClasses = computed(() => {
+    const classes = ['main-container-background'];
+    if (viewCustomizationClasses[$props.viewCustomization])
+        classes.push(viewCustomizationClasses[$props.viewCustomization]);
+    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">
+@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: #84d0e2;
+    // Colores de fondo del calendario en dark mode
+    --calendar-outside-background-dark: #222;
+    --calendar-background-dark: #222;
+}
+
+// Clases para modificar el color de fecha seleccionada en componente QCalendarMonth
+.q-dark div .q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
+    background-color: $primary !important;
+}
+
+.q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
+    background-color: $primary !important;
+}
+
+.q-calendar-month__head--weekday {
+    // Transforma los nombres de los días de la semana a mayúsculas
+    text-transform: capitalize;
+}
+
+.transparent-background {
+    --calendar-background-dark: transparent;
+    --calendar-background: transparent;
+    --calendar-outside-background-dark: transparent;
+}
+
+.q-calendar__button {
+    &:hover {
+        background-color: var(--vn-accent-color);
+        cursor: pointer;
+    }
+}
+
+.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 #222;
+    }
+}
+
+.worker-calendar-customizations {
+    .q-calendar__button {
+        width: 32px;
+        height: 32px;
+        font-size: 13px;
+
+        &:hover {
+            background-color: var(--vn-label-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;
+    }
+
+    .q-calendar-month__workweek,
+    .q-calendar-month__head--workweek,
+    .q-calendar-month__head--weekday.q-calendar__center.q-calendar__ellipsis {
+        text-transform: capitalize;
+        color: var(---color-font-secondary);
+        font-weight: bold;
+        font-size: 0.8rem;
+        text-align: center;
+    }
+}
+
+.nav-container {
+    display: flex;
+    align-items: center;
+
+    &.--bordered {
+        border: 1px solid black;
+    }
+}
+</style>

src/components/ui/SkeletonForm.vue

@@ -1,29 +1,17 @@
 <template>
     <div class="q-pa-md">
         <div class="row q-gutter-md q-mb-md">
-            <div class="col">
             <QSkeleton type="QInput" square />
-            </div>
-            <div class="col">
             <QSkeleton type="QInput" square />
         </div>
-        </div>
         <div class="row q-gutter-md q-mb-md">
-            <div class="col">
             <QSkeleton type="QInput" square />
-            </div>
-            <div class="col">
             <QSkeleton type="QInput" square />
         </div>
-        </div>
         <div class="row q-gutter-md q-mb-md">
-            <div class="col">
             <QSkeleton type="QInput" square />
-            </div>
-            <div class="col">
             <QSkeleton type="QInput" square />
         </div>
-        </div>
         <div class="row q-gutter-md">
             <QSkeleton type="QBtn" />
             <QSkeleton type="QBtn" />

src/components/ui/SkeletonSummary.vue

@@ -3,39 +3,30 @@
         <QSkeleton type="rect" square />
     </div>
     <div class="row q-pa-md q-col-gutter-md q-mb-md">
-        <div class="col">
         <QSkeleton type="rect" class="q-mb-md" square />
         <QSkeleton type="text" square />
         <QSkeleton type="text" square />
         <QSkeleton type="text" square />
         <QSkeleton type="text" square />
         <QSkeleton type="text" square />
-        </div>
-        <div class="col">
         <QSkeleton type="rect" class="q-mb-md" square />
         <QSkeleton type="text" square />
         <QSkeleton type="text" square />
         <QSkeleton type="text" square />
         <QSkeleton type="text" square />
         <QSkeleton type="text" square />
-        </div>
-        <div class="col">
         <QSkeleton type="rect" class="q-mb-md" square />
         <QSkeleton type="text" square />
         <QSkeleton type="text" square />
         <QSkeleton type="text" square />
         <QSkeleton type="text" square />
         <QSkeleton type="text" square />
-        </div>
-        <div class="col">
         <QSkeleton type="rect" class="q-mb-md" square />
         <QSkeleton type="text" square />
         <QSkeleton type="text" square />
         <QSkeleton type="text" square />
         <QSkeleton type="text" square />
         <QSkeleton type="text" square />
-        </div>
-        <div class="col">
         <QSkeleton type="rect" class="q-mb-md" square />
         <QSkeleton type="text" square />
         <QSkeleton type="text" square />
@@ -43,7 +34,6 @@
         <QSkeleton type="text" square />
         <QSkeleton type="text" square />
     </div>
-    </div>
 </template>
 
 <style lang="scss" scoped>

src/components/ui/SkeletonTable.vue

@@ -1,47 +1,22 @@
 <template>
     <div class="q-pa-md w">
         <div class="row q-gutter-md q-mb-md">
-            <div class="col-1">
+            <QSkeleton type="rect" square />
+            <QSkeleton type="rect" square />
+            <QSkeleton type="rect" square />
+            <QSkeleton type="rect" square />
+            <QSkeleton type="rect" square />
             <QSkeleton type="rect" square />
        </div>
-            <div class="col">
-                <QSkeleton type="rect" square />
-            </div>
-            <div class="col">
-                <QSkeleton type="rect" square />
-            </div>
-            <div class="col">
-                <QSkeleton type="rect" square />
-            </div>
-            <div class="col">
-                <QSkeleton type="rect" square />
-            </div>
-            <div class="col">
-                <QSkeleton type="rect" square />
-            </div>
-        </div>
-
        <div class="row q-gutter-md q-mb-md" v-for="n in 5" :key="n">
-            <div class="col-1">
             <QSkeleton type="QInput" square />
-            </div>
-            <div class="col">
             <QSkeleton type="QInput" square />
-            </div>
-            <div class="col">
             <QSkeleton type="QInput" square />
-            </div>
-            <div class="col">
             <QSkeleton type="QInput" square />
-            </div>
-            <div class="col">
             <QSkeleton type="QInput" square />
-            </div>
-            <div class="col">
             <QSkeleton type="QInput" square />
         </div>
     </div>
-    </div>
 </template>
 <style lang="scss" scoped>
 .w {

src/components/ui/VnFilterPanel.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
 import { useRoute } from 'vue-router';
 import toDate from 'filters/toDate';
-
+import useRedirect from 'src/composables/useRedirect';
 import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
 
 const { t } = useI18n();
@@ -56,6 +56,7 @@ const arrayData = useArrayData(props.dataKey, {
 const route = useRoute();
 const store = arrayData.store;
 const userParams = ref({});
+const { navigate } = useRedirect();
 
 onMounted(() => {
     if (props.params) userParams.value = JSON.parse(JSON.stringify(props.params));
@@ -79,6 +80,7 @@ watch(
 
 const isLoading = ref(false);
 async function search() {
+    store.filter.where = {};
     isLoading.value = true;
     const params = { ...userParams.value };
     store.userParamsChanged = true;
@@ -91,6 +93,7 @@ async function search() {
 
     isLoading.value = false;
     emit('search');
+    navigate(store.data, {});
 }
 
 async function reload() {
@@ -101,6 +104,7 @@ async function reload() {
     if (!props.showAll && !params.length) store.data = [];
     isLoading.value = false;
     emit('refresh');
+    navigate(store.data, {});
 }
 
 async function clearFilters() {
@@ -146,7 +150,7 @@ const customTags = computed(() =>
 
 async function remove(key) {
     userParams.value[key] = null;
-    await search();
+    await arrayData.applyFilter({ params: userParams.value });
     emit('remove', key);
 }
 

src/components/ui/VnLinkPhone.vue

@@ -1,21 +1,16 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
+defineProps({ phoneNumber: { type: [String, Number], default: null } });
-const props = defineProps({
-    phoneNumber: { type: [String, Number], default: null },
-});
-const { t } = useI18n();
 </script>
 <template>
     <QBtn
-        v-if="props.phoneNumber"
+        v-if="phoneNumber"
         flat
         round
         icon="phone"
         size="sm"
         color="primary"
         padding="none"
-        :href="`sip:${props.phoneNumber}`"
+        :href="`sip:${phoneNumber}`"
         @click.stop
     />
 </template>
-<style scoped></style>

src/components/ui/VnNotes.vue

@@ -1,11 +1,12 @@
 <script setup>
 import VnAvatar from 'src/components/ui/VnAvatar.vue';
-import { toDateHour } from 'src/filters';
+import { toDateHourMin } from 'src/filters';
 import { ref } from 'vue';
 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 :worker-id="currentUser.id" 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, index) in rows"
+                    :key="note.id ?? index"
+                >
+                    <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"
+                            />
+                            {{ toDateHourMin(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

@@ -42,6 +42,10 @@ const props = defineProps({
         type: Object,
         default: null,
     },
+    keepOpts: {
+        type: Array,
+        default: () => [],
+    },
     offset: {
         type: Number,
         default: 0,
@@ -76,8 +80,8 @@ const arrayData = useArrayData(props.dataKey, {
     order: props.order,
     userParams: props.userParams,
     exprBuilder: props.exprBuilder,
+    keepOpts: props.keepOpts,
 });
-const hasMoreData = ref();
 const store = arrayData.store;
 
 onMounted(() => {
@@ -96,8 +100,10 @@ const addFilter = async (filter, params) => {
 };
 
 async function fetch() {
+    store.filter.skip = 0;
+    store.skip = 0;
     await arrayData.fetch({ append: false });
-    if (!arrayData.hasMoreData.value) {
+    if (!store.hasMoreData) {
         isLoading.value = false;
     }
     emit('onFetch', store.data);
@@ -110,8 +116,8 @@ async function paginate() {
 
     isLoading.value = true;
     await arrayData.loadMore();
-    if (!arrayData.hasMoreData.value) {
+    if (!store.hasMoreData) {
-        if (store.userParamsChanged) arrayData.hasMoreData.value = true;
+        if (store.userParamsChanged) store.hasMoreData = true;
         store.userParamsChanged = false;
         endPagination();
         return;
@@ -127,15 +133,12 @@ async function paginate() {
 }
 
 function endPagination() {
-    hasMoreData.value = arrayData.hasMoreData.value;
     isLoading.value = false;
     emit('onFetch', store.data);
     emit('onPaginate');
 }
 async function onLoad(index, done) {
-    if (!store.data) {
+    if (!store.data) return done();
-        return done();
-    }
 
     if (store.data.length === 0 || !props.url) return done(false);
 
@@ -143,7 +146,7 @@ async function onLoad(index, done) {
 
     await paginate();
     let isDone = false;
-    if (store.userParamsChanged) isDone = !arrayData.hasMoreData.value;
+    if (store.userParamsChanged) isDone = !store.hasMoreData;
     done(isDone);
 }
 
@@ -187,8 +190,8 @@ defineExpose({ fetch, addFilter });
         v-if="store.data"
         @load="onLoad"
         :offset="offset"
-        :disable="disableInfiniteScroll || !arrayData.hasMoreData.value"
         class="full-width"
+        :disable="disableInfiniteScroll || !store.hasMoreData"
         v-bind="$attrs"
     >
         <slot name="body" :rows="store.data"></slot>
@@ -196,7 +199,10 @@ defineExpose({ fetch, addFilter });
             <QSpinner color="orange" size="md" />
         </div>
     </QInfiniteScroll>
-    <div v-if="!isLoading && hasMoreData" class="w-full flex justify-center q-mt-md">
+    <div
+        v-if="!isLoading && store.hasMoreData"
+        class="w-full flex justify-center q-mt-md"
+    >
         <QBtn color="primary" :label="t('Load more data')" @click="paginate()" />
     </div>
 </template>

src/components/ui/VnSearchbar.vue

@@ -1,11 +1,13 @@
 <script setup>
 import { onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 import { useArrayData } from 'composables/useArrayData';
 import VnInput from 'src/components/common/VnInput.vue';
+import useRedirect from 'src/composables/useRedirect';
+import { useI18n } from 'vue-i18n';
 
 const quasar = useQuasar();
+const { t } = useI18n();
 
 const props = defineProps({
     dataKey: {
@@ -65,10 +67,10 @@ const props = defineProps({
     },
 });
 
-const router = useRouter();
 const arrayData = useArrayData(props.dataKey, { ...props });
 const { store } = arrayData;
 const searchText = ref('');
+const { navigate } = useRedirect();
 
 onMounted(() => {
     const params = store.userParams;
@@ -81,34 +83,20 @@ async function search() {
     const staticParams = Object.entries(store.userParams).filter(
         ([key, value]) => value && (props.staticParams || []).includes(key)
     );
+    store.skip = 0;
     await arrayData.applyFilter({
         params: {
             ...Object.fromEntries(staticParams),
             search: searchText.value,
         },
     });
+
     if (!props.redirect) return;
 
-    if (props.customRouteRedirectName)
+    navigate(store.data, {
-        return router.push({
+        customRouteRedirectName: props.customRouteRedirectName,
-            name: props.customRouteRedirectName,
+        searchText: searchText.value,
-            params: { id: searchText.value },
     });
-
-    const { matched: matches } = router.currentRoute.value;
-    const { path } = matches.at(-1);
-    const [, moduleName] = path.split('/');
-
-    if (!store.data.length || store.data.length > 1)
-        return router.push({ path: `/${moduleName}/list` });
-
-    const targetId = store.data[0].id;
-    let targetUrl;
-
-    if (path.endsWith('/list')) targetUrl = path.replace('/list', `/${targetId}/summary`);
-    else if (path.includes(':id')) targetUrl = path.replace(':id', targetId);
-
-    await router.push({ path: targetUrl });
 }
 </script>
 
@@ -117,7 +105,7 @@ async function search() {
         <VnInput
             id="searchbar"
             v-model="searchText"
-            :placeholder="props.label"
+            :placeholder="t(props.label)"
             dense
             standout
             autofocus
@@ -131,19 +119,12 @@ async function search() {
                 />
             </template>
             <template #append>
-                <QIcon
-                    v-if="searchText !== ''"
-                    name="close"
-                    @click="searchText = ''"
-                    class="cursor-pointer"
-                />
-
                 <QIcon
                     v-if="props.info && $q.screen.gt.xs"
                     name="info"
                     class="cursor-info"
                 >
-                    <QTooltip>{{ props.info }}</QTooltip>
+                    <QTooltip>{{ t(props.info) }}</QTooltip>
                 </QIcon>
             </template>
         </VnInput>

src/components/ui/VnSubToolbar.vue

@@ -1,11 +1,27 @@
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { useStateStore } from 'stores/useStateStore';
-
 const stateStore = useStateStore();
+const actions = ref(null);
+const data = ref(null);
+const opts = { subtree: true, childList: true, attributes: true };
+const hasContent = ref(false);
 
 onMounted(() => {
     stateStore.toggleSubToolbar();
+    actions.value = document.querySelector('#st-actions');
+    data.value = document.querySelector('#st-data');
+
+    if (!actions.value && !data.value) return;
+
+    // Check if there's content to display
+    const observer = new MutationObserver(
+        () =>
+            (hasContent.value =
+                actions.value.childNodes.length + data.value.childNodes.length)
+    );
+    if (actions.value) observer.observe(actions.value, opts);
+    if (data.value) observer.observe(data.value, opts);
 });
 
 onUnmounted(() => {
@@ -14,7 +30,10 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <QToolbar class="bg-vn-section-color justify-end sticky">
+    <QToolbar
+        class="justify-end sticky"
+        v-show="hasContent || $slots['st-actions'] || $slots['st-data']"
+    >
         <slot name="st-data">
             <div id="st-data"></div>
         </slot>

src/components/ui/VnTree.vue

@@ -90,7 +90,7 @@ const onNodeCreated = async () => {
     await fetchNodeLeaves(creationNodeSelectedId.value);
 };
 
-onMounted(async (n) => {
+onMounted(async () => {
     const tree = [...state.get('Tree'), 1];
     const lastStateTree = state.get('TreeState');
     if (tree) {

src/components/ui/VnUserLink.vue

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

src/composables/elementIsVisibleInViewport.js

@@ -0,0 +1,6 @@
+export const elementIsVisibleInViewport = (el) => {
+    const { top, left, bottom, right } = el.getBoundingClientRect();
+    const { innerHeight, innerWidth } = window;
+
+    return top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
+};

src/composables/getDateQBadgeColor.js

@@ -0,0 +1,11 @@
+export function getDateQBadgeColor(date) {
+    let today = Date.vnNew();
+    today.setHours(0, 0, 0, 0);
+    let timeTicket = new Date(date);
+    timeTicket.setHours(0, 0, 0, 0);
+
+    let comparation = today - timeTicket;
+
+    if (comparation == 0) return 'warning';
+    if (comparation < 0) return 'negative';
+}

src/composables/useArrayData.js

@@ -9,12 +9,9 @@ const arrayDataStore = useArrayDataStore();
 export function useArrayData(key, userOptions) {
     if (!key) throw new Error('ArrayData: A key is required to use this composable');
 
-    if (!arrayDataStore.get(key)) {
+    if (!arrayDataStore.get(key)) arrayDataStore.set(key);
-        arrayDataStore.set(key);
-    }
 
     const store = arrayDataStore.get(key);
-    const hasMoreData = ref(false);
     const route = useRoute();
     let canceller = null;
 
@@ -22,6 +19,7 @@ export function useArrayData(key, userOptions) {
 
     onMounted(() => {
         setOptions();
+        store.skip = 0;
 
         const query = route.query;
         if (query.params) {
@@ -29,9 +27,7 @@ export function useArrayData(key, userOptions) {
         }
     });
 
-    if (key && userOptions) {
+    if (key && userOptions) setOptions();
-        setOptions();
-    }
 
     function setOptions() {
         const allowedOptions = [
@@ -51,7 +47,10 @@ export function useArrayData(key, userOptions) {
                 if (isEmpty || !allowedOptions.includes(option)) continue;
 
                 if (Object.prototype.hasOwnProperty.call(store, option)) {
-                    store[option] = userOptions[option];
+                    const defaultOpts = userOptions[option];
+                    store[option] = userOptions.keepOpts?.includes(option)
+                        ? Object.assign(defaultOpts, store[option])
+                        : defaultOpts;
                 }
             }
         }
@@ -96,8 +95,7 @@ export function useArrayData(key, userOptions) {
         });
 
         const { limit } = filter;
-
+        store.hasMoreData = limit && response.data.length >= limit;
-        hasMoreData.value = response.data.length >= limit;
 
         if (append) {
             if (!store.data) store.data = [];
@@ -132,7 +130,8 @@ export function useArrayData(key, userOptions) {
         store.filter = {};
         if (params) store.userParams = Object.assign({}, params);
 
-        await fetch({ append: false });
+        const response = await fetch({ append: false });
+        return response;
     }
 
     async function addFilter({ filter, params }) {
@@ -156,9 +155,10 @@ export function useArrayData(key, userOptions) {
                 delete store.userParams[param];
                 delete params[param];
                 if (store.filter?.where) {
-                    delete store.filter.where[
+                    const key = Object.keys(
-                        Object.keys(exprBuilder ? exprBuilder(param) : param)[0]
+                        exprBuilder && exprBuilder(param) ? exprBuilder(param) : param
-                    ];
+                    );
+                    if (key[0]) delete store.filter.where[key[0]];
                     if (Object.keys(store.filter.where).length === 0) {
                         delete store.filter.where;
                     }
@@ -169,7 +169,7 @@ export function useArrayData(key, userOptions) {
     }
 
     async function loadMore() {
-        if (!hasMoreData.value) return;
+        if (!store.hasMoreData) return;
 
         store.skip = store.limit * page.value;
         page.value += 1;
@@ -211,7 +211,6 @@ export function useArrayData(key, userOptions) {
         destroy,
         loadMore,
         store,
-        hasMoreData,
         totalRows,
         updateStateParams,
         isLoading,

src/composables/useRedirect.js

@@ -0,0 +1,25 @@
+import { useRouter } from 'vue-router';
+
+export default function useRedirect() {
+    const router = useRouter();
+
+    const navigate = (data, { customRouteRedirectName, searchText }) => {
+        if (customRouteRedirectName)
+            return router.push({
+                name: customRouteRedirectName,
+                params: { id: searchText },
+            });
+
+        const { matched: matches } = router.currentRoute.value;
+        const { path } = matches.at(-1);
+
+        const to =
+            data.length === 1
+                ? path.replace(/\/(list|:id)|-list/, `/${data[0].id}`)
+                : path.replace(/:id.*/, '');
+
+        router.push({ path: to });
+    };
+
+    return { navigate };
+}

src/composables/useSession.js

@@ -3,31 +3,46 @@ import { useRole } from './useRole';
 import { useUserConfig } from './useUserConfig';
 import axios from 'axios';
 import useNotify from './useNotify';
+import { useTokenConfig } from './useTokenConfig';
+const TOKEN_MULTIMEDIA = 'tokenMultimedia';
+const TOKEN = 'token';
 
 export function useSession() {
     const { notify } = useNotify();
+    let isCheckingToken = false;
+    let intervalId = null;
 
     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) {
+    function setSession(data) {
-        if (data.keepLogin) {
+        let keepLogin = data.keepLogin;
-            localStorage.setItem('token', data.token);
+        const storage = keepLogin ? localStorage : sessionStorage;
-            localStorage.setItem('tokenMultimedia', data.tokenMultimedia);
+        storage.setItem(TOKEN, data.token);
-        } else {
+        storage.setItem(TOKEN_MULTIMEDIA, data.tokenMultimedia);
-            sessionStorage.setItem('token', data.token);
+        storage.setItem('created', data.created);
-            sessionStorage.setItem('tokenMultimedia', data.tokenMultimedia);
+        storage.setItem('ttl', data.ttl);
+        sessionStorage.setItem('keepLogin', keepLogin);
     }
+
+    function keepLogin() {
+        return sessionStorage.getItem('keepLogin');
+    }
+
+    function setToken({ token, tokenMultimedia }) {
+        const storage = keepLogin() ? localStorage : sessionStorage;
+        storage.setItem(TOKEN, token);
+        storage.setItem(TOKEN_MULTIMEDIA, tokenMultimedia);
     }
     async function destroyToken(url, storage, key) {
         if (storage.getItem(key)) {
@@ -47,11 +62,15 @@ export function useSession() {
             tokenMultimedia: 'Accounts/logout',
             token: 'VnUsers/logout',
         };
+        const storage = keepLogin() ? localStorage : sessionStorage;
+
         for (const [key, url] of Object.entries(tokens)) {
-            await destroyToken(url, localStorage, key);
+            await destroyToken(url, storage, key);
-            await destroyToken(url, sessionStorage, key);
         }
 
+        localStorage.clear();
+        sessionStorage.clear();
+
         const { setUser } = useState();
 
         setUser({
@@ -61,22 +80,75 @@ export function useSession() {
             lang: '',
             darkMode: null,
         });
+
+        stopRenewer();
     }
 
-    async function login(token, tokenMultimedia, keepLogin) {
+    async function login(data) {
-        setToken({ token, tokenMultimedia, keepLogin });
+        setSession(data);
 
         await useRole().fetch();
         await useUserConfig().fetch();
+        await useTokenConfig().fetch();
+
+        startInterval();
     }
 
     function isLoggedIn() {
-        const localToken = localStorage.getItem('token');
+        const localToken = localStorage.getItem(TOKEN);
-        const sessionToken = sessionStorage.getItem('token');
+        const sessionToken = sessionStorage.getItem(TOKEN);
-
+        startInterval();
         return !!(localToken || sessionToken);
     }
 
+    function startInterval() {
+        stopRenewer();
+        const renewPeriod = +sessionStorage.getItem('renewPeriod');
+        if (!renewPeriod) return;
+        intervalId = setInterval(() => checkValidity(), renewPeriod * 1000);
+    }
+
+    function stopRenewer() {
+        clearInterval(intervalId);
+    }
+
+    async function renewToken() {
+        const _token = getToken();
+        const token = await axios.post('VnUsers/renewToken', {
+            headers: { Authorization: _token },
+        });
+        const _tokenMultimedia = getTokenMultimedia();
+        const tokenMultimedia = await axios.post('VnUsers/renewToken', {
+            headers: { Authorization: _tokenMultimedia },
+        });
+        setToken({ token: token.data.id, tokenMultimedia: tokenMultimedia.data.id });
+    }
+
+    async function checkValidity() {
+        const { getTokenConfig } = useState();
+
+        const tokenConfig = getTokenConfig() ?? sessionStorage.getItem('tokenConfig');
+        const storage = keepLogin() ? localStorage : sessionStorage;
+
+        const created = +storage.getItem('created');
+        const ttl = +storage.getItem('ttl');
+
+        if (isCheckingToken || !created) return;
+        isCheckingToken = true;
+
+        const renewPeriodInSeconds = Math.min(ttl, tokenConfig.value.renewPeriod) * 1000;
+
+        const maxDate = created + renewPeriodInSeconds;
+        const now = new Date().getTime();
+
+        if (isNaN(renewPeriodInSeconds) || now <= maxDate) {
+            return (isCheckingToken = false);
+        }
+
+        await renewToken();
+        isCheckingToken = false;
+    }
+
     return {
         getToken,
         getTokenMultimedia,
@@ -84,5 +156,8 @@ export function useSession() {
         destroy,
         login,
         isLoggedIn,
+        checkValidity,
+        setSession,
+        renewToken,
     };
 }

src/composables/useState.js

@@ -13,34 +13,19 @@ const user = ref({
 });
 
 const roles = ref([]);
+const tokenConfig = ref({});
 const drawer = ref(true);
 const headerMounted = ref(false);
 
 export function useState() {
     function getUser() {
         return computed(() => {
-            return {
+            return user.value;
-                id: user.value.id,
-                name: user.value.name,
-                nickname: user.value.nickname,
-                lang: user.value.lang,
-                darkMode: user.value.darkMode,
-                companyFk: user.value.companyFk,
-                warehouseFk: user.value.warehouseFk,
-            };
         });
     }
 
     function setUser(data) {
-        user.value = {
+        user.value = data;
-            id: data.id,
-            name: data.name,
-            nickname: data.nickname,
-            lang: data.lang,
-            darkMode: data.darkMode,
-            companyFk: data.companyFk,
-            warehouseFk: data.warehouseFk,
-        };
     }
 
     function getRoles() {
@@ -52,6 +37,15 @@ export function useState() {
     function setRoles(data) {
         roles.value = data;
     }
+    function getTokenConfig() {
+        return computed(() => {
+            return tokenConfig.value;
+        });
+    }
+
+    function setTokenConfig(data) {
+        tokenConfig.value = data;
+    }
 
     function set(name, data) {
         state.value[name] = ref(data);
@@ -70,6 +64,8 @@ export function useState() {
         setUser,
         getRoles,
         setRoles,
+        getTokenConfig,
+        setTokenConfig,
         set,
         get,
         unset,

src/composables/useTokenConfig.js

@@ -0,0 +1,28 @@
+import axios from 'axios';
+import { useState } from './useState';
+import useNotify from './useNotify';
+
+export function useTokenConfig() {
+    const state = useState();
+    const { notify } = useNotify();
+
+    async function fetch() {
+        try {
+            const { data } = await axios.get('AccessTokenConfigs/findOne', {
+                filter: { fields: ['renewInterval', 'renewPeriod'] },
+            });
+            if (!data) return;
+            state.setTokenConfig(data);
+            sessionStorage.setItem('renewPeriod', data.renewPeriod);
+            return data;
+        } catch (error) {
+            notify('errors.tokenConfig', 'negative');
+            console.error('Error fetching token config:', error);
+        }
+    }
+
+    return {
+        fetch,
+        state,
+    };
+}

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;
@@ -74,6 +75,10 @@ select:-webkit-autofill {
     background-color: #666666;
 }
 
+.color-vn-label {
+    color: var(--vn-label);
+}
+
 .color-vn-text {
     color: var(--vn-text-color);
 }
@@ -93,6 +98,10 @@ select:-webkit-autofill {
     border-radius: 8px;
 }
 
+.card-width {
+    width: 770px;
+}
+
 .vn-card-list {
     width: 100%;
     max-width: 60em;
@@ -110,6 +119,11 @@ select:-webkit-autofill {
     font-variation-settings: 'FILL' 1;
 }
 
+.fill-icon-on-hover:hover {
+    font-variation-settings: 'FILL' 1;
+    cursor: pointer;
+}
+
 .vn-table-separation-row {
     height: 16px !important;
     background-color: var(--vn-section-color) !important;
@@ -127,6 +141,10 @@ select:-webkit-autofill {
     background-color: var(--vn-section-color);
 }
 
+.tr-header {
+    color: var(--vn-label-color);
+}
+
 .q-chip,
 .q-notification__message,
 .q-notification__icon {
@@ -151,6 +169,13 @@ select:-webkit-autofill {
 
 /* q-notification row items-stretch q-notification--standard bg-negative text-white */
 
+.q-card,
+.q-table,
+.q-table__bottom,
+.q-drawer {
+    background-color: var(--vn-section-color);
+}
+
 input[type='number'] {
     -moz-appearance: textfield;
 }
@@ -160,3 +185,7 @@ input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     -moz-appearance: none;
 }
+
+.q-scrollarea__content {
+    max-width: 100%;
+}

src/css/fonts/icon.svg

@@ -80,7 +80,7 @@
 <glyph unicode="&#xe94b;" glyph-name="consignatarios" d="M409.6-64v349.867h204.8v-349.867h256v563.2h153.6l-512 460.8-512-460.8h153.6v-563.2h256z" />
 <glyph unicode="&#xe94c;" glyph-name="control" d="M418.133 315.733l-128-123.733 256-256 469.333 469.333-128 128-341.333-341.333zM546.133 311.467l34.133 34.133h-68.267zM230.4 128l-59.733 64 153.6 153.6h-68.267v102.4h426.667l204.8 204.8 85.333-85.333v187.733c0 55.467-46.933 102.4-102.4 102.4h-213.333c-21.333 59.733-76.8 102.4-145.067 102.4s-123.733-42.667-145.067-102.4h-213.333c-55.467 0-102.4-46.933-102.4-102.4v-716.8c0-55.467 46.933-102.4 102.4-102.4h273.067l-196.267 192zM512 857.6c29.867 0 51.2-21.333 51.2-51.2s-21.333-51.2-51.2-51.2-51.2 21.333-51.2 51.2c0 29.867 21.333 51.2 51.2 51.2zM256 652.8h512v-102.4h-512v102.4zM665.6-64h204.8c55.467 0 102.4 46.933 102.4 102.4v204.8l-307.2-307.2z" />
 <glyph unicode="&#xe94d;" glyph-name="credit" d="M921.6 849.067h-819.2c-55.467 0-102.4-42.667-102.4-98.133v-601.6c0-55.467 46.933-102.4 102.4-102.4h819.2c55.467 0 102.4 42.667 102.4 102.4v601.6c0 55.467-46.933 98.133-102.4 98.133zM921.6 145.067h-819.2v302.933h819.2v-302.933zM921.6 648.533h-819.2v102.4h819.2v-102.4z" />
-<glyph unicode="&#xe94e;" glyph-name="deaulter" d="M677.973-64c-30.72 35.84-61.867 70.827-91.307 107.52-40.96 51.2-80.64 103.253-121.173 154.88-16.64 21.333-21.76 20.48-30.72-4.693-13.227-36.693-25.6-73.387-40.107-109.653-5.12-12.8-13.227-26.88-24.32-34.56-51.627-34.987-104.107-69.12-157.867-100.693-10.667-6.4-30.72-5.547-41.813 0.853-8.107 4.693-12.373 23.893-11.093 35.84 0.853 8.96 11.093 19.627 19.627 25.6 39.253 26.453 78.933 51.627 119.040 76.8 18.347 11.52 30.293 26.027 35.84 47.787 12.373 48.213 27.307 95.573 39.253 143.36 8.533 33.707 26.88 58.88 56.32 77.227 40.533 25.173 80.64 52.053 120.747 78.507 6.4 4.267 10.24 11.52 15.36 17.493-7.253 2.56-14.933 7.253-22.187 6.827-75.52-6.4-151.467-13.227-226.987-20.48-2.133 0-4.693-0.853-6.827-0.853-22.613-1.707-39.253 10.24-40.96 29.867s12.373 33.707 35.413 35.84c45.227 4.267 90.88 8.96 136.107 12.8 65.707 5.547 131.84 10.667 197.547 15.36 26.027 1.707 53.76-21.76 67.413-55.467 9.813-23.893 5.12-46.080-18.347-65.28-49.92-40.107-100.693-78.933-151.040-118.187-23.040-17.92-23.893-23.467-6.4-46.507 58.453-78.080 116.48-156.587 174.933-234.667 27.307-36.693 25.173-50.773-12.373-75.52-5.12 0-9.813 0-14.080 0zM791.893 649.813c-43.093 1.28-76.373-31.573-77.227-75.52-0.853-44.373 29.44-76.8 72.107-77.653 45.227-1.28 77.653 29.44 78.080 73.813 0.427 45.227-29.44 78.080-72.96 79.36zM671.147 737.707c0-72.107-34.133-136.107-87.467-176.64l-235.52-21.76c-72.107 36.693-122.027 111.787-122.027 198.4 0 122.88 99.84 222.293 222.72 222.293 122.453 0 222.293-99.413 222.293-222.293zM592.213 680.533l-50.347 18.347c-2.133-8.533-5.12-16.213-9.813-22.613-5.12-6.4-10.24-11.947-16.213-17.067-5.973-4.267-12.373-8.107-19.2-11.093s-13.653-4.693-20.053-5.547c-17.92-2.987-33.707-0.427-48.64 6.827s-26.88 18.347-36.693 32.853l76.373 12.373 7.253 32.427-97.28-15.787c-1.28 5.547-2.987 11.093-3.84 16.64l-0.853 4.267 99.413 16.213 7.253 32.427-106.667-17.493c0.853 9.387 2.987 17.493 6.4 26.027 3.84 8.533 8.107 16.213 14.080 23.040 5.547 6.827 12.8 12.373 21.333 17.067s17.92 8.107 28.587 9.813c6.827 1.28 13.227 1.707 20.907 1.28s14.507-1.707 21.333-3.84c6.827-2.133 13.653-5.973 20.053-10.24 5.973-4.693 11.947-11.093 17.493-18.773l38.827 37.973c-13.227 17.92-30.293 31.147-52.053 39.253-21.76 8.533-46.080 10.667-73.387 6.4-19.627-2.987-36.267-9.387-51.2-17.92-14.507-8.533-26.88-19.2-37.547-32-10.667-12.373-18.773-26.027-23.893-40.96-5.547-14.507-8.96-29.867-9.813-45.653l-21.76-3.84-7.253-32.427 29.013 4.693 0.427-2.987c1.28-6.827 2.56-12.8 4.267-18.347l-23.467-3.84-8.107-32.427 43.52 7.253c6.827-13.653 15.787-26.027 26.027-36.693 10.24-11.52 22.187-20.48 35.413-27.733 13.227-7.68 27.307-12.8 42.667-15.787s31.573-3.413 47.36-0.853c12.373 2.133 24.32 5.12 35.84 10.667s22.613 11.52 32.853 19.2c10.24 8.107 18.347 16.64 26.027 26.453 6.827 9.387 12.373 20.48 15.36 32.427z" />
+<glyph unicode="&#xe94e;" glyph-name="defaulter" d="M677.973-64c-30.72 35.84-61.867 70.827-91.307 107.52-40.96 51.2-80.64 103.253-121.173 154.88-16.64 21.333-21.76 20.48-30.72-4.693-13.227-36.693-25.6-73.387-40.107-109.653-5.12-12.8-13.227-26.88-24.32-34.56-51.627-34.987-104.107-69.12-157.867-100.693-10.667-6.4-30.72-5.547-41.813 0.853-8.107 4.693-12.373 23.893-11.093 35.84 0.853 8.96 11.093 19.627 19.627 25.6 39.253 26.453 78.933 51.627 119.040 76.8 18.347 11.52 30.293 26.027 35.84 47.787 12.373 48.213 27.307 95.573 39.253 143.36 8.533 33.707 26.88 58.88 56.32 77.227 40.533 25.173 80.64 52.053 120.747 78.507 6.4 4.267 10.24 11.52 15.36 17.493-7.253 2.56-14.933 7.253-22.187 6.827-75.52-6.4-151.467-13.227-226.987-20.48-2.133 0-4.693-0.853-6.827-0.853-22.613-1.707-39.253 10.24-40.96 29.867s12.373 33.707 35.413 35.84c45.227 4.267 90.88 8.96 136.107 12.8 65.707 5.547 131.84 10.667 197.547 15.36 26.027 1.707 53.76-21.76 67.413-55.467 9.813-23.893 5.12-46.080-18.347-65.28-49.92-40.107-100.693-78.933-151.040-118.187-23.040-17.92-23.893-23.467-6.4-46.507 58.453-78.080 116.48-156.587 174.933-234.667 27.307-36.693 25.173-50.773-12.373-75.52-5.12 0-9.813 0-14.080 0zM791.893 649.813c-43.093 1.28-76.373-31.573-77.227-75.52-0.853-44.373 29.44-76.8 72.107-77.653 45.227-1.28 77.653 29.44 78.080 73.813 0.427 45.227-29.44 78.080-72.96 79.36zM671.147 737.707c0-72.107-34.133-136.107-87.467-176.64l-235.52-21.76c-72.107 36.693-122.027 111.787-122.027 198.4 0 122.88 99.84 222.293 222.72 222.293 122.453 0 222.293-99.413 222.293-222.293zM592.213 680.533l-50.347 18.347c-2.133-8.533-5.12-16.213-9.813-22.613-5.12-6.4-10.24-11.947-16.213-17.067-5.973-4.267-12.373-8.107-19.2-11.093s-13.653-4.693-20.053-5.547c-17.92-2.987-33.707-0.427-48.64 6.827s-26.88 18.347-36.693 32.853l76.373 12.373 7.253 32.427-97.28-15.787c-1.28 5.547-2.987 11.093-3.84 16.64l-0.853 4.267 99.413 16.213 7.253 32.427-106.667-17.493c0.853 9.387 2.987 17.493 6.4 26.027 3.84 8.533 8.107 16.213 14.080 23.040 5.547 6.827 12.8 12.373 21.333 17.067s17.92 8.107 28.587 9.813c6.827 1.28 13.227 1.707 20.907 1.28s14.507-1.707 21.333-3.84c6.827-2.133 13.653-5.973 20.053-10.24 5.973-4.693 11.947-11.093 17.493-18.773l38.827 37.973c-13.227 17.92-30.293 31.147-52.053 39.253-21.76 8.533-46.080 10.667-73.387 6.4-19.627-2.987-36.267-9.387-51.2-17.92-14.507-8.533-26.88-19.2-37.547-32-10.667-12.373-18.773-26.027-23.893-40.96-5.547-14.507-8.96-29.867-9.813-45.653l-21.76-3.84-7.253-32.427 29.013 4.693 0.427-2.987c1.28-6.827 2.56-12.8 4.267-18.347l-23.467-3.84-8.107-32.427 43.52 7.253c6.827-13.653 15.787-26.027 26.027-36.693 10.24-11.52 22.187-20.48 35.413-27.733 13.227-7.68 27.307-12.8 42.667-15.787s31.573-3.413 47.36-0.853c12.373 2.133 24.32 5.12 35.84 10.667s22.613 11.52 32.853 19.2c10.24 8.107 18.347 16.64 26.027 26.453 6.827 9.387 12.373 20.48 15.36 32.427z" />
 <glyph unicode="&#xe94f;" glyph-name="deletedTicket" d="M160.672 85.696h693.248v639.776c0 0-2.016 234.528-349.696 234.528s-343.552-234.528-343.552-234.528v-639.776zM291.328 652.704h170.976v152.256h102.336v-152.256h171.008v-102.336h-171.008v-356.96h-102.336v356.96h-170.976v102.336zM64 61.056v-123.456h899.008v123.456h-899.008z" />
 <glyph unicode="&#xe950;" glyph-name="deleteline" d="M354.133 192l-98.133 98.133 157.867 153.6-157.867 157.867 98.133 102.4 157.867-157.867 157.867 153.6 98.133-98.133-157.867-157.867 157.867-153.6-98.133-98.133-157.867 157.867-157.867-157.867zM780.8 507.733l-64-64 59.733-55.467h247.467v119.467h-243.2zM307.2 443.733l-64 64h-243.2v-119.467h251.733l55.467 55.467z" />
 <glyph unicode="&#xe951;" glyph-name="delivery" d="M789.333 264.533c-55.467 0-102.4-46.933-102.4-102.4s46.933-102.4 102.4-102.4 102.4 46.933 102.4 102.4c0 59.733-46.933 102.4-102.4 102.4zM789.333 110.933c-29.867 0-51.2 21.333-51.2 51.2s21.333 51.2 51.2 51.2 51.2-21.333 51.2-51.2c0-25.6-25.6-51.2-51.2-51.2zM251.733 264.533c-55.467 0-102.4-46.933-102.4-102.4s46.933-102.4 102.4-102.4c55.467 0 102.4 46.933 102.4 102.4 0 59.733-46.933 102.4-102.4 102.4zM251.733 110.933c-29.867 0-51.2 21.333-51.2 51.2s21.333 51.2 51.2 51.2c29.867 0 51.2-21.333 51.2-51.2 0-25.6-25.6-51.2-51.2-51.2zM1006.933 537.6l-196.267 192c-12.8 12.8-29.867 17.067-46.933 17.067h-98.133v38.4c0 25.6-21.333 51.2-51.2 51.2h-563.2c-29.867 0-51.2-21.333-51.2-51.2v-554.667c0-29.867 25.6-51.2 51.2-51.2h68.267c8.533 64 64 115.2 132.267 115.2 64 0 123.733-51.2 132.267-115.2h268.8c8.533 64 64 115.2 132.267 115.2s128-51.2 136.533-115.2h51.2c29.867 0 51.2 25.6 51.2 51.2v260.267c0 17.067-8.533 34.133-17.067 46.933zM725.333 682.667c0 4.267 4.267 8.533 8.533 8.533h34.133c0 0 4.267 0 4.267-4.267l153.6-145.067c4.267 0 0-12.8-4.267-12.8h-187.733c-8.533 0-8.533 4.267-8.533 8.533v145.067zM311.467 597.333c0 46.933 29.867 85.333 59.733 93.867 4.267 0 4.267 0 8.533 0l98.133 12.8v-51.2c0-46.933-29.867-85.333-59.733-93.867-4.267 0-4.267 0-8.533 0l-98.133-17.067v55.467zM311.467 516.267l46.933 8.533c17.067 4.267 29.867-17.067 29.867-38.4l4.267-29.867-51.2-4.267c-17.067-4.267-29.867 12.8-29.867 38.4v25.6zM149.333 597.333v51.2l85.333 12.8c34.133 4.267 55.467-25.6 55.467-72.533v-51.2l-85.333-12.8c-34.133 0-59.733 29.867-55.467 72.533zM285.867 512v-38.4c0-34.133-21.333-64-42.667-68.267h-4.267l-72.533-8.533v38.4c0 34.133 21.333 64 42.667 68.267h4.267l72.533 8.533z" />

src/css/icons.scss

@@ -10,7 +10,8 @@
     font-display: block;
 }
 
-[class^="icon-"], [class*=" icon-"] {
+[class^='icon-'],
+[class*=' icon-'] {
     /* use !important to prevent issues with browser extensions that change fonts */
     font-family: 'icon' !important;
     speak: never;
@@ -26,377 +27,392 @@
 }
 
 .icon-100:before {
-  content: "\e926";
+    content: '\e926';
 }
 .icon-Client_unpaid:before {
-  content: "\e925";
+    content: '\e925';
+}
+.icon-Client_unpaid:before {
+    content: '\e925';
 }
 .icon-History:before {
-  content: "\e964";
+    content: '\e964';
 }
 .icon-Person:before {
-  content: "\e984";
+    content: '\e984';
 }
 .icon-accessory:before {
-  content: "\e948";
+    content: '\e948';
 }
 .icon-account:before {
-  content: "\e927";
+    content: '\e927';
 }
 .icon-actions:before {
-  content: "\e928";
+    content: '\e928';
 }
 .icon-addperson:before {
-  content: "\e929";
+    content: '\e929';
 }
 .icon-agency:before {
-  content: "\e92a";
+    content: '\e92a';
+}
+.icon-agency:before {
+    content: '\e92a';
 }
 .icon-agency-term:before {
-  content: "\e92b";
+    content: '\e92b';
 }
 .icon-albaran:before {
-  content: "\e92c";
+    content: '\e92c';
+}
+.icon-albaran:before {
+    content: '\e92c';
 }
 .icon-anonymous:before {
-  content: "\e92d";
+    content: '\e92d';
 }
 .icon-apps:before {
-  content: "\e92e";
+    content: '\e92e';
 }
 .icon-artificial:before {
-  content: "\e92f";
+    content: '\e92f';
 }
 .icon-attach:before {
-  content: "\e930";
+    content: '\e930';
 }
 .icon-barcode:before {
-  content: "\e932";
+    content: '\e932';
 }
 .icon-basket:before {
-  content: "\e933";
+    content: '\e933';
 }
 .icon-basketadd:before {
-  content: "\e934";
+    content: '\e934';
 }
 .icon-bin:before {
-  content: "\e935";
+    content: '\e935';
 }
 .icon-botanical:before {
-  content: "\e936";
+    content: '\e936';
 }
 .icon-bucket:before {
-  content: "\e937";
+    content: '\e937';
 }
 .icon-buscaman:before {
-  content: "\e938";
+    content: '\e938';
 }
 .icon-buyrequest:before {
-  content: "\e939";
+    content: '\e939';
 }
 .icon-calc_volum:before {
-  content: "\e93a";
+    content: '\e93a';
 }
 .icon-calendar:before {
-  content: "\e940";
+    content: '\e940';
 }
 .icon-catalog:before {
-  content: "\e941";
+    content: '\e941';
 }
 .icon-claims:before {
-  content: "\e942";
+    content: '\e942';
 }
 .icon-client:before {
-  content: "\e943";
+    content: '\e943';
 }
 .icon-clone:before {
-  content: "\e945";
+    content: '\e945';
 }
 .icon-columnadd:before {
-  content: "\e946";
+    content: '\e946';
 }
 .icon-columndelete:before {
-  content: "\e947";
+    content: '\e947';
 }
 .icon-components:before {
-  content: "\e949";
+    content: '\e949';
 }
 .icon-consignatarios:before {
-  content: "\e94b";
+    content: '\e94b';
 }
 .icon-control:before {
-  content: "\e94c";
+    content: '\e94c';
 }
 .icon-credit:before {
-  content: "\e94d";
+    content: '\e94d';
 }
-.icon-deaulter:before {
+.icon-defaulter:before {
-  content: "\e94e";
+    content: '\e94e';
 }
 .icon-deletedTicket:before {
-  content: "\e94f";
+    content: '\e94f';
 }
 .icon-deleteline:before {
-  content: "\e950";
+    content: '\e950';
 }
 .icon-delivery:before {
-  content: "\e951";
+    content: '\e951';
 }
 .icon-deliveryprices:before {
-  content: "\e952";
+    content: '\e952';
 }
 .icon-details:before {
-  content: "\e954";
+    content: '\e954';
 }
 .icon-dfiscales:before {
-  content: "\e955";
+    content: '\e955';
 }
 .icon-disabled:before {
-  content: "\e965";
+    content: '\e965';
 }
 .icon-doc:before {
-  content: "\e956";
+    content: '\e956';
 }
 .icon-entry:before {
-  content: "\e958";
+    content: '\e958';
 }
 .icon-exit:before {
-  content: "\e959";
+    content: '\e959';
 }
 .icon-eye:before {
-  content: "\e95a";
+    content: '\e95a';
 }
 .icon-fixedPrice:before {
-  content: "\e95b";
+    content: '\e95b';
 }
 .icon-flower:before {
-  content: "\e95c";
+    content: '\e95c';
 }
 .icon-frozen:before {
-  content: "\e95d";
+    content: '\e95d';
 }
 .icon-fruit:before {
-  content: "\e95e";
+    content: '\e95e';
 }
 .icon-funeral:before {
-  content: "\e95f";
+    content: '\e95f';
 }
 .icon-grafana:before {
-  content: "\e931";
+    content: '\e931';
+}
+.icon-grafana:before {
+    content: '\e931';
 }
 .icon-greenery:before {
-  content: "\e91e";
+    content: '\e91e';
 }
 .icon-greuge:before {
-  content: "\e960";
+    content: '\e960';
 }
 .icon-grid:before {
-  content: "\e961";
+    content: '\e961';
 }
 .icon-handmade:before {
-  content: "\e94a";
+    content: '\e94a';
 }
 .icon-handmadeArtificial:before {
-  content: "\e962";
+    content: '\e962';
 }
 .icon-headercol:before {
-  content: "\e963";
+    content: '\e963';
 }
 .icon-info:before {
-  content: "\e966";
+    content: '\e966';
 }
 .icon-inventory:before {
-  content: "\e967";
+    content: '\e967';
 }
 .icon-invoice:before {
-  content: "\e969";
+    content: '\e969';
 }
 .icon-invoice-in:before {
-  content: "\e96a";
+    content: '\e96a';
 }
 .icon-invoice-in-create:before {
-  content: "\e96b";
+    content: '\e96b';
 }
 .icon-invoice-out:before {
-  content: "\e96c";
+    content: '\e96c';
 }
 .icon-isTooLittle:before {
-  content: "\e96e";
+    content: '\e96e';
 }
 .icon-item:before {
-  content: "\e96f";
+    content: '\e96f';
 }
 .icon-languaje:before {
-  content: "\e912";
+    content: '\e912';
 }
 .icon-lines:before {
-  content: "\e971";
+    content: '\e971';
 }
 .icon-linesprepaired:before {
-  content: "\e972";
+    content: '\e972';
 }
 .icon-link-to-corrected:before {
-  content: "\e900";
+    content: '\e900';
 }
 .icon-link-to-correcting:before {
-  content: "\e906";
+    content: '\e906';
 }
 .icon-logout:before {
-  content: "\e90a";
+    content: '\e90a';
 }
 .icon-mana:before {
-  content: "\e974";
+    content: '\e974';
 }
 .icon-mandatory:before {
-  content: "\e975";
+    content: '\e975';
 }
 .icon-net:before {
-  content: "\e976";
+    content: '\e976';
 }
 .icon-newalbaran:before {
-  content: "\e977";
+    content: '\e977';
 }
 .icon-niche:before {
-  content: "\e979";
+    content: '\e979';
 }
 .icon-no036:before {
-  content: "\e97a";
+    content: '\e97a';
 }
 .icon-noPayMethod:before {
-  content: "\e97b";
+    content: '\e97b';
 }
 .icon-notes:before {
-  content: "\e97c";
+    content: '\e97c';
 }
 .icon-noweb:before {
-  content: "\e97e";
+    content: '\e97e';
 }
 .icon-onlinepayment:before {
-  content: "\e97f";
+    content: '\e97f';
 }
 .icon-package:before {
-  content: "\e980";
+    content: '\e980';
 }
 .icon-payment:before {
-  content: "\e982";
+    content: '\e982';
 }
 .icon-pbx:before {
-  content: "\e983";
+    content: '\e983';
 }
 .icon-pets:before {
-  content: "\e985";
+    content: '\e985';
 }
 .icon-photo:before {
-  content: "\e986";
+    content: '\e986';
 }
 .icon-plant:before {
-  content: "\e987";
+    content: '\e987';
 }
 .icon-polizon:before {
-  content: "\e989";
+    content: '\e989';
 }
 .icon-preserved:before {
-  content: "\e98a";
+    content: '\e98a';
 }
 .icon-recovery:before {
-  content: "\e98b";
+    content: '\e98b';
 }
 .icon-regentry:before {
-  content: "\e901";
+    content: '\e901';
 }
 .icon-reserva:before {
-  content: "\e902";
+    content: '\e902';
 }
 .icon-revision:before {
-  content: "\e903";
+    content: '\e903';
 }
 .icon-risk:before {
-  content: "\e904";
+    content: '\e904';
 }
 .icon-services:before {
-  content: "\e905";
+    content: '\e905';
 }
 .icon-settings:before {
-  content: "\e907";
+    content: '\e907';
 }
 .icon-shipment:before {
-  content: "\e908";
+    content: '\e908';
 }
 .icon-sign:before {
-  content: "\e909";
+    content: '\e909';
 }
 .icon-sms:before {
-  content: "\e90b";
+    content: '\e90b';
 }
 .icon-solclaim:before {
-  content: "\e90c";
+    content: '\e90c';
 }
 .icon-solunion:before {
-  content: "\e90d";
+    content: '\e90d';
 }
 .icon-splitline:before {
-  content: "\e90e";
+    content: '\e90e';
 }
 .icon-splur:before {
-  content: "\e90f";
+    content: '\e90f';
 }
 .icon-stowaway:before {
-  content: "\e910";
+    content: '\e910';
 }
 .icon-supplier:before {
-  content: "\e911";
+    content: '\e911';
 }
 .icon-supplierfalse:before {
-  content: "\e913";
+    content: '\e913';
 }
 .icon-tags:before {
-  content: "\e914";
+    content: '\e914';
 }
 .icon-tax:before {
-  content: "\e915";
+    content: '\e915';
 }
 .icon-thermometer:before {
-  content: "\e916";
+    content: '\e916';
 }
 .icon-ticket:before {
-  content: "\e917";
+    content: '\e917';
 }
 .icon-ticketAdd:before {
-  content: "\e918";
+    content: '\e918';
 }
 .icon-traceability:before {
-  content: "\e919";
+    content: '\e919';
 }
 .icon-transaction:before {
-  content: "\e93b";
+    content: '\e93b';
+}
+.icon-transaction:before {
+    content: '\e93b';
 }
 .icon-treatments:before {
-  content: "\e91c";
+    content: '\e91c';
 }
 .icon-trolley:before {
-  content: "\e91a";
+    content: '\e91a';
 }
 .icon-troncales:before {
-  content: "\e91b";
+    content: '\e91b';
 }
 .icon-unavailable:before {
-  content: "\e91d";
+    content: '\e91d';
 }
 .icon-volume:before {
-  content: "\e91f";
+    content: '\e91f';
 }
 .icon-wand:before {
-  content: "\e920";
+    content: '\e920';
 }
 .icon-web:before {
-  content: "\e921";
+    content: '\e921';
 }
 .icon-wiki:before {
-  content: "\e922";
+    content: '\e922';
 }
 .icon-worker:before {
-  content: "\e923";
+    content: '\e923';
 }
 .icon-zone:before {
-  content: "\e924";
+    content: '\e924';
 }

src/css/quasar.variables.scss

@@ -32,7 +32,7 @@ $primary-light: lighten($primary, 35%);
 $dark-shadow-color: black;
 $layout-shadow-dark: 0 0 10px 2px #00000033, 0 0px 10px #0000003d;
 $spacing-md: 16px;
-
+$color-font-secondary: #777;
 .bg-success {
     background-color: $positive;
 }

src/filters/date.js

@@ -26,11 +26,11 @@ export function isValidDate(date) {
  * // returns "02/12/2022"
  * toDateFormat(new Date(2022, 11, 2));
  */
-export function toDateFormat(date) {
+export function toDateFormat(date, locale = 'es-ES') {
     if (!isValidDate(date)) {
         return '';
     }
-    return new Date(date).toLocaleDateString('es-ES', {
+    return new Date(date).toLocaleDateString(locale, {
         year: 'numeric',
         month: '2-digit',
         day: '2-digit',
@@ -56,7 +56,7 @@ export function toTimeFormat(date, showSeconds = false) {
     if (!isValidDate(date)) {
         return '';
     }
-    return new Date(date).toLocaleDateString('es-ES', {
+    return new Date(date).toLocaleTimeString('es-ES', {
         hour: '2-digit',
         minute: '2-digit',
         second: showSeconds ? '2-digit' : undefined,
@@ -91,3 +91,42 @@ export function toDateTimeFormat(date, showSeconds = false) {
         second: showSeconds ? '2-digit' : undefined,
     });
 }
+
+/**
+ * Converts seconds to a formatted string representing hours and minutes (hh:mm).
+ * @param {number} seconds - The number of seconds to convert.
+ * @param {boolean} includeHSuffix - Optional parameter indicating whether to include "h." after the hour.
+ * @returns {string} A string representing the time in the format "hh:mm" with optional "h." suffix.
+ */
+export function secondsToHoursMinutes(seconds, includeHSuffix = true) {
+    if (!seconds) return includeHSuffix ? '00:00 h.' : '00:00';
+
+    const hours = Math.floor(seconds / 3600);
+    const remainingMinutes = seconds % 3600;
+    const minutes = Math.floor(remainingMinutes / 60);
+    const formattedHours = hours < 10 ? '0' + hours : hours;
+    const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
+
+    // Append "h." if includeHSuffix is true
+    const suffix = includeHSuffix ? ' h.' : '';
+    // Return formatted string
+    return formattedHours + ':' + formattedMinutes + suffix;
+}
+
+export function getTimeDifferenceWithToday(date) {
+    let today = Date.vnNew();
+    today.setHours(0, 0, 0, 0);
+
+    date = new Date(date);
+    date.setHours(0, 0, 0, 0);
+
+    return today - date;
+}
+
+export function isLower(date) {
+    return getTimeDifferenceWithToday(date) > 0;
+}
+
+export function isBigger(date) {
+    return getTimeDifferenceWithToday(date) < 0;
+}

src/filters/dateRange.js

@@ -1,7 +1,7 @@
 export default function dateRange(value) {
     const minHour = new Date(value);
     minHour.setHours(0, 0, 0, 0);
-    const maxHour = new Date(value);
+    const maxHour = new Date();
     maxHour.setHours(23, 59, 59, 59);
 
     return [minHour, maxHour];

src/filters/index.js

@@ -1,7 +1,8 @@
 import toLowerCase from './toLowerCase';
 import toDate from './toDate';
 import toDateString from './toDateString';
-import toDateHour from './toDateHour';
+import toDateHourMin from './toDateHourMin';
+import toDateHourMinSec from './toDateHourMinSec';
 import toRelativeDate from './toRelativeDate';
 import toCurrency from './toCurrency';
 import toPercentage from './toPercentage';
@@ -16,7 +17,8 @@ export {
     toDate,
     toHour,
     toDateString,
-    toDateHour,
+    toDateHourMin,
+    toDateHourMinSec,
     toRelativeDate,
     toCurrency,
     toPercentage,

src/filters/toDateHourMin.js

@@ -0,0 +1,11 @@
+export default function toDateHourMin(date) {
+    const dateHour = new Date(date).toLocaleDateString('es-ES', {
+        timeZone: 'Europe/Madrid',
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+    return dateHour;
+}

src/filters/toDateHourMinSec.js

@@ -1,4 +1,4 @@
-export default function toDateHour(date) {
+export default function toDateHourMinSec(date) {
     const dateHour = new Date(date).toLocaleDateString('es-ES', {
         timeZone: 'Europe/Madrid',
         year: 'numeric',

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

@@ -28,9 +28,11 @@ globals:
     reset: Reset
     close: Close
     cancel: Cancel
+    clone: Clone
     confirm: Confirm
     assign: Assign
     back: Back
+    downloadPdf: Download PDF
     yes: 'Yes'
     no: 'No'
     noChanges: No changes to save
@@ -67,6 +69,7 @@ globals:
     reason: reason
     noResults: No results
     system: System
+    notificationSent: Notification sent
     warehouse: Warehouse
     company: Company
     fieldRequired: Field required
@@ -82,20 +85,33 @@ globals:
     selectFile: Select a file
     copyClipboard: Copy on clipboard
     salesPerson: SalesPerson
+    send: Send
     code: Code
     pageTitles:
         summary: Summary
         basicData: Basic data
         log: Logs
         parkingList: Parkings list
+        agencyList: Agencies list
+        agency: Agency
+        workCenters: Work centers
+        modes: Modes
+        zones: Zones
+        zonesList: Zones
+        deliveryList: Delivery days
+        upcomingList: Upcoming deliveries
     created: Created
     worker: Worker
+    now: Now
+    name: Name
+    new: New
 errors:
     statusUnauthorized: Access denied
     statusInternalServerError: An internal server error has ocurred
     statusBadGateway: It seems that the server has fall down
     statusGatewayTimeout: Could not contact the server
     userConfig: Error fetching user config
+    tokenConfig: Error fetching token config
     writeRequest: The requested operation could not be completed
 login:
     title: Login
@@ -150,6 +166,13 @@ customer:
         creditContracts: Credit contracts
         creditOpinion: Credit opinion
         others: Others
+        samples: Samples
+        consumption: Consumption
+        mandates: Mandates
+        contacts: Contacts
+        webPayment: Web payment
+        fileManagement: File management
+        unpaid: Unpaid
     list:
         phone: Phone
         email: Email
@@ -160,14 +183,18 @@ customer:
         customerId: Claim ID
         salesPerson: Sales person
         credit: Credit
+        risk: Risk
         securedCredit: Secured credit
         payMethod: Pay method
         debt: Debt
-        isDisabled: Customer is disabled
+        isFrozen: Customer frozen
-        isFrozen: Customer is frozen
         hasDebt: Customer has debt
-        notChecked: Customer not checked
+        isDisabled: Customer inactive
+        notChecked: Customer no checked
+        webAccountInactive: Web account inactive
         noWebAccess: Web access is disabled
+        businessType: Business type
+        passwordRequirements: 'The password must have at least { length } length characters, {nAlpha} alphabetic characters, {nUpper} capital letters, {nDigits} digits and {nPunct} symbols (Ex: $%&.)\n'
         businessTypeFk: Business type
     summary:
         basicData: Basic data
@@ -227,21 +254,25 @@ customer:
         recoverySince: Recovery since
         businessType: Business Type
         city: City
+        descriptorInfo: Invoices minus payments plus orders not yet
         rating: Rating
         recommendCredit: Recommended credit
     basicData:
         socialName: Fiscal name
         businessType: Business type
         contact: Contact
+        youCanSaveMultipleEmails: You can save multiple emails
         email: Email
         phone: Phone
         mobile: Mobile
         salesPerson: Sales person
         contactChannel: Contact channel
+        previousClient: Previous client
     extendedList:
         tableVisibleColumns:
             id: Identifier
             name: Name
+            socialName: Social name
             fi: Tax number
             salesPersonFk: Salesperson
             credit: Credit
@@ -401,6 +432,7 @@ ticket:
         boxing: Boxing
         sms: Sms
         notes: Notes
+        sale: Sale
     list:
         nickname: Nickname
         state: State
@@ -467,6 +499,12 @@ ticket:
         weight: Weight
         goTo: Go to
         summaryAmount: Summary
+    create:
+        client: Client
+        address: Address
+        landed: Landed
+        warehouse: Warehouse
+        agency: Agency
 claim:
     pageTitles:
         claims: Claims
@@ -490,7 +528,7 @@ claim:
         records: records
     card:
         claimId: Claim ID
-        assignedTo: Assigned
+        attendedBy: Attended by
         created: Created
         state: State
         ticketId: Ticket ID
@@ -528,6 +566,7 @@ claim:
         responsible: Responsible
         worker: Worker
         redelivery: Redelivery
+        changeState: Change state
     basicData:
         customer: Customer
         assignedTo: Assigned
@@ -788,6 +827,10 @@ worker:
         dms: My documentation
         pbx: Private Branch Exchange
         log: Log
+        calendar: Calendar
+        timeControl: Time control
+        locker: Locker
+
     list:
         name: Name
         email: Email
@@ -819,6 +862,15 @@ worker:
         role: Role
         sipExtension: Extension
         locker: Locker
+        fiDueDate: Fecha de caducidad del DNI
+        sex: Sexo
+        seniority: Antigüedad
+        fi: DNI/NIE/NIF
+        birth: Fecha de nacimiento
+        isFreelance: Autónomo
+        isSsDiscounted: Bonificación SS
+        hasMachineryAuthorized: Autorizado para llevar maquinaria
+        isDisable: Trabajador desactivado
     notificationsManager:
         activeNotifications: Active notifications
         availableNotifications: Available notifications
@@ -957,7 +1009,7 @@ supplier:
         billingData: Billing data
         payMethod: Pay method
         payDeadline: Pay deadline
-        payDay: Día de pago
+        payDay: Pay day
         account: Account
         fiscalData: Fiscal data
         sageTaxType: Sage tax type
@@ -1094,7 +1146,19 @@ item:
         list: List
         diary: Diary
         tags: Tags
+        create: Create
+        buyRequest: Buy requests
+        fixedPrice: Fixed prices
+        wasteBreakdown: Waste breakdown
         itemCreate: New item
+        barcode: Barcodes
+        tax: Tax
+        log: Log
+        botanical: Botanical
+        shelving: Shelving
+        itemTypeCreate: New item type
+        family: Item Type
+        lastEntries: Last entries
     descriptor:
         item: Item
         buyer: Buyer
@@ -1122,8 +1186,93 @@ item:
         stemMultiplier: Multiplier
         producer: Producer
         landed: Landed
+    fixedPrice:
+        itemId: Item ID
+        groupingPrice: Grouping price
+        packingPrice: Packing price
+        hasMinPrice: Has min price
+        minPrice: Min price
+        started: Started
+        ended: Ended
+        warehouse: Warehouse
+    create:
+        name: Name
+        tag: Tag
+        priority: Priority
+        type: Type
+        intrastat: Intrastat
+        origin: Origin
+    buyRequest:
+        ticketId: 'Ticket ID'
+        shipped: 'Shipped'
+        requester: 'Requester'
+        requested: 'Requested'
+        price: 'Price'
+        attender: 'Atender'
+        item: 'Item'
+        achieved: 'Achieved'
+        concept: 'Concept'
+        state: 'State'
+    summary:
+        basicData: 'Basic data'
+        otherData: 'Other data'
+        description: 'Description'
+        tax: 'Tax'
+        tags: 'Tags'
+        botanical: 'Botanical'
+        barcode: 'Barcode'
+        name: 'Nombre'
+        completeName: 'Nombre completo'
+        family: 'Familia'
+        size: 'Medida'
+        origin: 'Origen'
+        stems: 'Tallos'
+        multiplier: 'Multiplicador'
+        buyer: 'Comprador'
+        doPhoto: 'Do photo'
+        intrastatCode: 'Código intrastat'
+        intrastat: 'Intrastat'
+        ref: 'Referencia'
+        relevance: 'Relevancia'
+        weight: 'Peso (gramos)/tallo'
+        units: 'Unidades/caja'
+        expense: 'Gasto'
+        generic: 'Genérico'
+        recycledPlastic: 'Plástico reciclado'
+        nonRecycledPlastic: 'Plástico no reciclado'
+        minSalesQuantity: 'Cantidad mínima de venta'
+        genus: 'Genus'
+        specie: 'Specie'
+item/itemType:
+    pageTitles:
+        itemType: Item type
+        basicData: Basic data
+        summary: Summary
+monitor:
+    pageTitles:
+        monitors: Monitors
+        list: List
 components:
     topbar: {}
+    itemsFilterPanel:
+        typeFk: Type
+        tag: Tag
+        value: Value
+        # ItemFixedPriceFilter
+        buyerFk: Buyer
+        warehouseFk: Warehouse
+        started: From
+        ended: To
+        mine: For me
+        hasMinPrice: Minimum price
+        # LatestBuysFilter
+        salesPersonFk: Buyer
+        supplierFk: Supplier
+        from: From
+        to: To
+        active: Is active
+        visible: Is visible
+        floramondo: Is floramondo
     userPanel:
         copyToken: Token copied to clipboard
         settings: Settings
@@ -1148,3 +1297,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

@@ -28,6 +28,7 @@ globals:
     reset: Restaurar
     close: Cerrar
     cancel: Cancelar
+    clone: Clonar
     confirm: Confirmar
     assign: Asignar
     back: Volver
@@ -58,6 +59,7 @@ globals:
     amount: Importe
     packages: Bultos
     download: Descargar
+    downloadPdf: Descargar PDF
     selectRows: 'Seleccionar las { numberRows } filas(s)'
     allRows: 'Todo { numberRows } filas(s)'
     markAll: Marcar todo
@@ -67,6 +69,7 @@ globals:
     reason: motivo
     noResults: Sin resultados
     system: Sistema
+    notificationSent: Notificación enviada
     warehouse: Almacén
     company: Empresa
     fieldRequired: Campo requerido
@@ -82,20 +85,33 @@ globals:
     selectFile: Seleccione un fichero
     copyClipboard: Copiar en portapapeles
     salesPerson: Comercial
+    send: Enviar
     code: Código
     pageTitles:
         summary: Resumen
         basicData: Datos básicos
         log: Historial
         parkingList: Listado de parkings
+        agencyList: Listado de agencias
+        agency: Agencia
+        workCenters: Centros de trabajo
+        modes: Modos
+        zones: Zonas
+        zonesList: Zonas
+        deliveryList: Días de entrega
+        upcomingList: Próximos repartos
     created: Fecha creación
     worker: Trabajador
+    now: Ahora
+    name: Nombre
+    new: Nuevo
 errors:
     statusUnauthorized: Acceso denegado
     statusInternalServerError: Ha ocurrido un error interno del servidor
     statusBadGateway: Parece ser que el servidor ha caído
     statusGatewayTimeout: No se ha podido contactar con el servidor
     userConfig: Error al obtener configuración de usuario
+    tokenConfig: Error al obtener configuración de token
     writeRequest: No se pudo completar la operación solicitada
 login:
     title: Inicio de sesión
@@ -149,6 +165,13 @@ customer:
         creditContracts: Contratos de crédito
         creditOpinion: Opinión de crédito
         others: Otros
+        samples: Plantillas
+        consumption: Consumo
+        mandates: Mandatos
+        contacts: Contactos
+        webPayment: Pago web
+        fileManagement: Gestión documental
+        unpaid: Impago
     list:
         phone: Teléfono
         email: Email
@@ -158,14 +181,18 @@ customer:
         customerId: ID cliente
         salesPerson: Comercial
         credit: Crédito
+        risk: Riesgo
         securedCredit: Crédito asegurado
         payMethod: Método de pago
         debt: Riesgo
-    isDisabled: El cliente está desactivado
+        isFrozen: Cliente congelado
-    isFrozen: El cliente está congelado
+        hasDebt: Cliente con riesgo
-    hasDebt: El cliente tiene riesgo
+        isDisabled: Cliente inactivo
-    notChecked: El cliente no está comprobado
+        notChecked: Cliente no comprobado
+        webAccountInactive: Sin acceso web
         noWebAccess: El acceso web está desactivado
+        businessType: Tipo de negocio
+        passwordRequirements: 'La contraseña debe tener al menos { length } caracteres de longitud, {nAlpha} caracteres alfabéticos, {nUpper} letras mayúsculas, {nDigits} dígitos y {nPunct} símbolos (Ej: $%&.)'
         businessTypeFk: Tipo de negocio
     summary:
         basicData: Datos básicos
@@ -225,21 +252,25 @@ customer:
         recoverySince: Recobro desde
         businessType: Tipo de negocio
         city: Población
+        descriptorInfo: Facturas menos recibos mas pedidos sin facturar
         rating: Clasificación
         recommendCredit: Crédito recomendado
     basicData:
         socialName: Nombre fiscal
         businessType: Tipo de negocio
         contact: Contacto
+        youCanSaveMultipleEmails: Puede guardar varios correos electrónicos encadenándolos mediante comas sin espacios{','} ejemplo{':'} user{'@'}dominio{'.'}com, user2{'@'}dominio{'.'}com siendo el primer correo electrónico el principal
         email: Email
         phone: Teléfono
         mobile: Móvil
         salesPerson: Comercial
         contactChannel: Canal de contacto
+        previousClient: Cliente anterior
     extendedList:
         tableVisibleColumns:
             id: Identificador
             name: Nombre
+            socialName: Razón social
             fi: NIF / CIF
             salesPersonFk: Comercial
             credit: Crédito
@@ -399,6 +430,7 @@ ticket:
         boxing: Encajado
         sms: Sms
         notes: Notas
+        sale: Lineas del pedido
     list:
         nickname: Alias
         state: Estado
@@ -465,6 +497,12 @@ ticket:
         weight: Peso
         goTo: Ir a
         summaryAmount: Resumen
+    create:
+        client: Cliente
+        address: Dirección
+        landed: F. entrega
+        warehouse: Almacén
+        agency: Agencia
 claim:
     pageTitles:
         claims: Reclamaciones
@@ -488,7 +526,7 @@ claim:
         records: registros
     card:
         claimId: ID reclamación
-    assignedTo: Asignada a
+        attendedBy: Atendida por
         created: Creada
         state: Estado
         ticketId: ID ticket
@@ -526,6 +564,7 @@ claim:
         responsible: Responsable
         worker: Trabajador
         redelivery: Devolución
+        changeState: Cambiar estado
     basicData:
         customer: Cliente
         assignedTo: Asignada a
@@ -786,6 +825,9 @@ worker:
         dms: Mi documentación
         pbx: Centralita
         log: Historial
+        calendar: Calendario
+        timeControl: Control de horario
+        locker: Taquilla
     list:
         name: Nombre
         email: Email
@@ -1093,7 +1135,19 @@ item:
         list: Listado
         diary: Histórico
         tags: Etiquetas
+        fixedPrice: Precios fijados
+        buyRequest: Peticiones de compra
+        wasteBreakdown: Deglose de mermas
         itemCreate: Nuevo artículo
+        basicData: 'Datos básicos'
+        tax: 'IVA'
+        botanical: 'Botánico'
+        barcode: 'Código de barras'
+        log: Historial
+        shelving: Carros
+        itemTypeCreate: Nueva familia
+        family: Familia
+        lastEntries: Últimas entradas
     descriptor:
         item: Artículo
         buyer: Comprador
@@ -1121,8 +1175,99 @@ item:
         stemMultiplier: Multiplicador
         producer: Productor
         landed: F. entrega
+    fixedPrice:
+        itemId: ID Artículo
+        groupingPrice: Precio grouping
+        packingPrice: Precio packing
+        hasMinPrice: Tiene precio mínimo
+        minPrice: Precio min
+        started: Inicio
+        ended: Fin
+        warehouse: Almacén
+    create:
+        name: Nombre
+        tag: Etiqueta
+        priority: Prioridad
+        type: Tipo
+        intrastat: Intrastat
+        origin: Origen
+    summary:
+        basicData: 'Datos básicos'
+        otherData: 'Otros datos'
+        description: 'Descripción'
+        tax: 'IVA'
+        tags: 'Etiquetas'
+        botanical: 'Botánico'
+        barcode: 'Código de barras'
+        name: 'Nombre'
+        completeName: 'Nombre completo'
+        family: 'Familia'
+        size: 'Medida'
+        origin: 'Origen'
+        stems: 'Tallos'
+        multiplier: 'Multiplicador'
+        buyer: 'Comprador'
+        doPhoto: 'Hacer foto'
+        intrastatCode: 'Código intrastat'
+        intrastat: 'Intrastat'
+        ref: 'Referencia'
+        relevance: 'Relevancia'
+        weight: 'Peso (gramos)/tallo'
+        units: 'Unidades/caja'
+        expense: 'Gasto'
+        generic: 'Genérico'
+        recycledPlastic: 'Plástico reciclado'
+        nonRecycledPlastic: 'Plástico no reciclado'
+        minSalesQuantity: 'Cantidad mínima de venta'
+        genus: 'Genus'
+        specie: 'Specie'
+    buyRequest:
+        ticketId: 'ID Ticket'
+        shipped: 'F. envío'
+        requester: 'Solicitante'
+        requested: 'Solicitado'
+        price: 'Precio'
+        attender: 'Comprador'
+        item: 'Artículo'
+        achieved: 'Conseguido'
+        concept: 'Concepto'
+        state: 'Estado'
+item/itemType:
+    pageTitles:
+        itemType: Familia
+        basicData: Datos básicos
+        summary: Resumen
+zone:
+    pageTitles:
+        zones: Zona
+        zonesList: Zonas
+        deliveryList: Días de entrega
+        upcomingList: Próximos repartos
+monitor:
+    pageTitles:
+        monitors: Monitores
+        list: Listado
 components:
     topbar: {}
+    itemsFilterPanel:
+        typeFk: Tipo
+        tag: Etiqueta
+        value: Valor
+        # ItemFixedPriceFilter
+        buyerFk: Comprador
+        warehouseFk: Almacén
+        started: Desde
+        ended: Hasta
+        mine: Para mi
+        hasMinPrice: Precio mínimo
+        # LatestBuysFilter
+        salesPersonFk: Comprador
+        supplierFk: Proveedor
+        from: Desde
+        to: Hasta
+        active: Activo
+        visible: Visible
+        floramondo: Floramondo
     userPanel:
         copyToken: Token copiado al portapapeles
         settings: Configuración
@@ -1147,3 +1292,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/Agency/AgencyList.vue

@@ -0,0 +1,79 @@
+<script setup>
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import { useStateStore } from 'stores/useStateStore';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const router = useRouter();
+const stateStore = useStateStore();
+function navigate(id) {
+    router.push({ path: `/agency/${id}` });
+}
+function exprBuilder(param, value) {
+    if (!value) return;
+    if (param !== 'search') return;
+
+    if (!isNaN(value)) return { id: value };
+
+    return { name: { like: `%${value}%` } };
+}
+</script>
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                :info="t('You can search by name')"
+                :label="t('Search agency')"
+                data-key="AgencyList"
+                url="Agencies"
+            />
+        </Teleport>
+    </template>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="AgencyList"
+                url="Agencies"
+                order="name"
+                :expr-builder="exprBuilder"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        :id="row.id"
+                        :key="row.id"
+                        :title="row.name"
+                        @click="navigate(row.id)"
+                        v-for="row of rows"
+                    >
+                        <template #list-items>
+                            <QCheckbox
+                                :label="t('isOwn')"
+                                v-model="row.isOwn"
+                                :disable="true"
+                            />
+                            <QCheckbox
+                                :label="t('isAnyVolumeAllowed')"
+                                v-model="row.isAnyVolumeAllowed"
+                                :disable="true"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
+<i18n>
+    es: 
+        isOwn: Tiene propietario
+        isAnyVolumeAllowed: Permite cualquier volumen
+        Search agency: Buscar agencia
+        You can search by name: Puedes buscar por nombre
+    en:
+        isOwn: Has owner
+        isAnyVolumeAllowed: Allows any volume
+</i18n>

src/pages/Agency/Card/AgencyBasicData.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import FormModel from 'components/FormModel.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const routeId = route.params?.id || null;
+const warehouses = ref([]);
+</script>
+<template>
+    <FetchData
+        url="warehouses"
+        sort-by="name"
+        @on-fetch="(data) => (warehouses = data)"
+        auto-load
+    />
+    <FormModel :url="`Agencies/${routeId}`" model="agency" auto-load>
+        <template #form="{ data }">
+            <VnRow>
+                <VnInput v-model="data.name" :label="t('globals.name')" />
+            </VnRow>
+            <VnRow>
+                <VnSelect
+                    v-model="data.warehouseFk"
+                    option-value="id"
+                    option-label="name"
+                    :label="t('globals.warehouse')"
+                    :options="warehouses"
+                    use-input
+                    input-debounce="0"
+                    :is-clearable="false"
+                />
+            </VnRow>
+            <VnRow>
+                <QCheckbox :label="t('agency.isOwn')" v-model="data.isOwn" />
+            </VnRow>
+            <VnRow>
+                <QCheckbox
+                    :label="t('agency.isAnyVolumeAllowed')"
+                    v-model="data.isAnyVolumeAllowed"
+                />
+            </VnRow>
+        </template>
+    </FormModel>
+</template>

src/pages/Agency/Card/AgencyCard.vue

@@ -0,0 +1,15 @@
+<script setup>
+import AgencyDescriptor from 'pages/Agency/Card/AgencyDescriptor.vue';
+import VnCard from 'components/common/VnCard.vue';
+</script>
+<template>
+    <VnCard
+        data-key="Agency"
+        base-url="Agencies"
+        :descriptor="AgencyDescriptor"
+        search-data-key="AgencyList"
+        search-url="Agencies"
+        searchbar-label="agency.searchBar.label"
+        searchbar-info="agency.searchBar.info"
+    />
+</template>

src/pages/Agency/Card/AgencyDescriptor.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { useArrayData } from 'src/composables/useArrayData';
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import VnLv from 'components/ui/VnLv.vue';
+
+const props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const { t } = useI18n();
+const route = useRoute();
+const entityId = computed(() => props.id || route.params.id);
+const { store } = useArrayData('Parking');
+const card = computed(() => store.data);
+</script>
+<template>
+    <CardDescriptor
+        module="Agency"
+        data-key="Agency"
+        :url="`Agencies/${entityId}`"
+        :title="card?.name"
+        :subtitle="props.id"
+    >
+        <template #body="{ entity: agency }">
+            <VnLv :label="t('globals.name')" :value="agency.name" />
+        </template>
+    </CardDescriptor>
+</template>

src/pages/Agency/Card/AgencyLog.vue

@@ -0,0 +1,6 @@
+<script setup>
+import VnLog from 'src/components/common/VnLog.vue';
+</script>
+<template>
+    <VnLog model="Agency" url="/AgencyLogs" />
+</template>

src/pages/Agency/Card/AgencyModes.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CardList from 'src/components/ui/CardList.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const routeId = route.params.id;
+</script>
+<template>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="AgencyModes"
+                :url="`AgencyModes`"
+                :filter="{ where: { agencyFk: routeId } }"
+                order="name"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        :id="row.id"
+                        :key="row.id"
+                        :title="row.name"
+                        v-for="row of rows"
+                    >
+                        <template #list-items>
+                            <VnLv
+                                :label="t('globals.description')"
+                                :value="row?.description"
+                            />
+                            <VnLv
+                                :label="t('deliveryMethod')"
+                                :value="row?.deliveryMethodFk"
+                            />
+                            <VnLv label="m3" :value="row?.m3" />
+                            <VnLv :label="t('inflation')" :value="row?.inflation" />
+                            <VnLv :label="t('globals.code')" :value="row?.code" />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
+<i18n>
+    es: 
+        isOwn: Tiene propietario
+        isAnyVolumeAllowed: Permite cualquier volumen
+        Search agency: Buscar agencia
+        You can search by name: Puedes buscar por nombre
+        deliveryMethod: Método de entrega
+        inflation: Inflación
+    en:
+        isOwn: Has owner
+        isAnyVolumeAllowed: Allows any volume
+</i18n>

src/pages/Agency/Card/AgencySummary.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CardSummary from 'components/ui/CardSummary.vue';
+import VnLv from 'components/ui/VnLv.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
+
+const $props = defineProps({ id: { type: Number, default: 0 } });
+const { t } = useI18n();
+const entityId = computed(() => $props.id || useRoute().params.id);
+</script>
+
+<template>
+    <div class="q-pa-md">
+        <CardSummary :url="`Agencies/${entityId}`">
+            <template #header="{ entity: agency }">{{ agency.name }}</template>
+            <template #body="{ entity: agency }">
+                <QCard class="vn-one">
+                    <QCardSection class="q-pa-none">
+                        <VnTitle
+                            :url="`#/agency/${entityId}/basic-data`"
+                            :text="t('globals.pageTitles.basicData')"
+                        />
+                    </QCardSection>
+                    <VnLv :label="t('globals.name')" :value="agency.name" />
+                    <QCheckbox
+                        :label="t('agency.isOwn')"
+                        v-model="agency.isOwn"
+                        :disable="true"
+                    />
+                    <QCheckbox
+                        :label="t('agency.isAnyVolumeAllowed')"
+                        v-model="agency.isAnyVolumeAllowed"
+                        :disable="true"
+                    />
+                </QCard>
+            </template>
+        </CardSummary>
+    </div>
+</template>

src/pages/Agency/Card/AgencyWorkcenter.vue

@@ -0,0 +1,136 @@
+<script setup>
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'src/components/FetchData.vue';
+import FormModelPopup from 'src/components/FormModelPopup.vue';
+
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import VnRow from 'components/ui/VnRow.vue';
+
+import VnSelect from 'src/components/common/VnSelect.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const paginate = ref();
+const dialog = ref();
+const routeId = computed(() => route.params.id);
+const quasar = useQuasar();
+
+const initialData = computed(() => {
+    return {
+        agencyFk: routeId.value,
+        workCenterFk: null,
+    };
+});
+
+async function deleteWorCenter(id) {
+    try {
+        await axios.delete(`AgencyWorkCenters/${id}`).then(async () => {
+            quasar.notify({
+                message: t('agency.notification.removeItem'),
+                type: 'positive',
+            });
+        });
+    } catch (error) {
+        quasar.notify({
+            message: t('agency.notification.removeItemError'),
+            type: 'error',
+        });
+    }
+    paginate.value.fetch();
+}
+</script>
+<template>
+    <div class="centerCard">
+        <FetchData
+            url="workCenters"
+            sort-by="name"
+            @on-fetch="(data) => (warehouses = data)"
+            auto-load
+        />
+        <VnPaginate
+            ref="paginate"
+            data-key="AgencyWorkCenters"
+            url="AgencyWorkCenters"
+            :filter="{ where: { agencyFk: routeId } }"
+            order="id"
+            auto-load
+        >
+            <template #body="{ rows }">
+                <QCard
+                    flat
+                    bordered
+                    :key="row.id"
+                    v-for="row of rows"
+                    class="card q-pa-md q-mb-sm"
+                >
+                    <QItem>
+                        <QItemSection side-left>
+                            <VnLv :value="row?.workCenter?.name" icon="delete" />
+                        </QItemSection>
+                        <QItemSection side>
+                            <QBtn
+                                @click.stop="deleteWorCenter(row.id)"
+                                icon="delete"
+                                color="primary"
+                                round
+                                flat
+                            />
+                        </QItemSection>
+                    </QItem>
+                </QCard>
+            </template>
+        </VnPaginate>
+    </div>
+    <QPageSticky :offset="[18, 18]">
+        <QBtn @click.stop="dialog.show()" color="primary" fab icon="add">
+            <QDialog ref="dialog">
+                <FormModelPopup
+                    :title="t('Add work center')"
+                    url-create="AgencyWorkCenters"
+                    model="AgencyWorkCenter"
+                    :form-initial-data="initialData"
+                    @on-data-saved="paginate.fetch()"
+                >
+                    <template #form-inputs="{ data }">
+                        <VnRow class="row q-gutter-md q-mb-md">
+                            <VnSelect
+                                v-model="data.workCenterFk"
+                                option-value="id"
+                                option-label="name"
+                                :label="t('workCenter')"
+                                :options="warehouses"
+                                use-input
+                                input-debounce="0"
+                                :is-clearable="false"
+                            />
+                        </VnRow>
+                    </template>
+                </FormModelPopup>
+            </QDialog>
+        </QBtn>
+        <QTooltip>
+            {{ t('globals.new') }}
+        </QTooltip>
+    </QPageSticky>
+</template>
+<style lang="scss" scoped>
+.centerCard {
+    padding: 5%;
+    width: 100%;
+    max-width: 50%;
+    margin: 0 auto;
+}
+</style>
+<i18n>
+    es:
+        workCenter removed successfully: Centro de trabajo eliminado correctamente
+        This workCenter is already assigned to this agency: Este workCenter ya está asignado a esta agencia
+        Add work center: Añadir centro de trabajo
+        workCenter: Centro de trabajo
+</i18n>

src/pages/Agency/locale/en.yml

@@ -0,0 +1,11 @@
+agency:
+    isOwn: Own
+    isAnyVolumeAllowed: Any volume allowed
+    notification:
+        removeItemError: Error removing agency
+        removeItem: WorkCenter removed successfully
+    pageTitles:
+        agency: Agency
+    searchBar:
+        info: You can search by agency code
+        label: Search agency...

src/pages/Agency/locale/es.yml

@@ -0,0 +1,12 @@
+agency:
+    isOwn: Propio
+    isAnyVolumeAllowed: Cualquier volumen
+    removeItem: Agencia eliminada correctamente
+    notification:
+        removeItemError: Error al eliminar la agencia
+        removeItem: Centro de trabajo eliminado correctamente
+    pageTitles:
+        agency: Agencia
+    searchBar:
+        info: Puedes buscar por nombre o id
+        label: Buscar agencia...

src/pages/Claim/Card/ClaimAction.vue

@@ -2,22 +2,21 @@
 import { ref, computed, onMounted } from 'vue';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 import axios from 'axios';
 import { useStateStore } from 'src/stores/useStateStore';
 import { toDate, toPercentage, toCurrency } from 'filters/index';
 import { tMobile } from 'src/composables/tMobile';
 import CrudModel from 'src/components/CrudModel.vue';
 import FetchData from 'src/components/FetchData.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
-import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import { useArrayData } from 'composables/useArrayData';
 
 const { t } = useI18n();
 const quasar = useQuasar();
 const route = useRoute();
-const router = useRouter();
 const stateStore = computed(() => useStateStore());
 const claim = ref(null);
 const claimRef = ref();
@@ -38,10 +37,11 @@ const marker_labels = [
     { value: DEFAULT_MAX_RESPONSABILITY, label: t('claim.summary.person') },
 ];
 const multiplicatorValue = ref();
+const loading = ref(false);
 
 const columns = computed(() => [
     {
-        name: 'Id',
+        name: 'id',
         label: t('Id item'),
         field: (row) => row.itemFk,
     },
@@ -119,7 +119,7 @@ async function updateDestinations(claimDestinationFk) {
 
 async function updateDestination(claimDestinationFk, row, options = {}) {
     if (claimDestinationFk) {
-        await axios.post('Claims/updateClaimDestination', {
+        await post('Claims/updateClaimDestination', {
             claimDestinationFk,
             rows: Array.isArray(row) ? row : [row],
         });
@@ -128,7 +128,7 @@ async function updateDestination(claimDestinationFk, row, options = {}) {
 }
 
 async function regularizeClaim() {
-    await axios.post(`Claims/${claimId}/regularizeClaim`);
+    await post(`Claims/${claimId}/regularizeClaim`);
     await claimRef.value.fetch();
     await arrayData.fetch({ append: false });
     quasar.notify({
@@ -147,7 +147,7 @@ async function onUpdateGreugeAccept() {
     const freightPickUpPrice =
         (await axios.get(`GreugeConfigs/findOne`)).data.freightPickUpPrice *
         multiplicatorValue.value;
-    await axios.post(`Greuges`, {
+    await post(`Greuges`, {
         clientFk: claim.value.clientFk,
         description: `${t('ClaimGreugeDescription')} ${claimId}`.toUpperCase(),
         amount: freightPickUpPrice,
@@ -166,14 +166,22 @@ async function save(data) {
 }
 
 async function importToNewRefundTicket() {
-    const query = `ClaimBeginnings/${claimId}/importToNewRefundTicket`;
+    await post(`ClaimBeginnings/${claimId}/importToNewRefundTicket`);
-    await axios.post(query);
+    await claimActionsForm.value.reload();
-    claimActionsForm.value.reload();
     quasar.notify({
         message: t('globals.dataSaved'),
         type: 'positive',
     });
 }
+
+async function post(query, params) {
+    loading.value = true;
+    try {
+        await axios.post(query, params);
+    } finally {
+        loading.value = false;
+    }
+}
 </script>
 <template>
     <FetchData
@@ -193,30 +201,7 @@ async function importToNewRefundTicket() {
         auto-load
         @on-fetch="(data) => (destinationTypes = data)"
     />
-    <template v-if="stateStore.isHeaderMounted()">
+    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted() && claim">
-        <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="300"
-        show-if-above
-        v-if="claim"
-    >
         <QCard class="totalClaim q-my-md q-pa-sm no-box-shadow">
             {{ `${t('Total claimed')}: ${toCurrency(totalClaimed)}` }}
         </QCard>
@@ -266,7 +251,7 @@ async function importToNewRefundTicket() {
                 v-model="multiplicatorValue"
             />
         </QCard>
-    </QDrawer>
+    </Teleport>
     <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport>
     <CrudModel
         v-if="claim"
@@ -280,6 +265,7 @@ async function importToNewRefundTicket() {
         :default-save="false"
         :default-reset="false"
         @on-fetch="setData"
+        :limit="0"
         auto-load
     >
         <template #body>
@@ -292,6 +278,14 @@ async function importToNewRefundTicket() {
                 v-model:selected="selectedRows"
                 :grid="$q.screen.lt.md"
             >
+                <template #body-cell-id="{ value }">
+                    <QTd align="center">
+                        <span class="link">
+                            {{ value }}
+                            <ItemDescriptorProxy :id="value" />
+                        </span>
+                    </QTd>
+                </template>
                 <template #body-cell-ticket="{ value }">
                     <QTd align="center">
                         <span class="link">
@@ -302,7 +296,7 @@ async function importToNewRefundTicket() {
                 </template>
                 <template #body-cell-destination="{ row }">
                     <QTd>
-                        <VnSelectFilter
+                        <VnSelect
                             v-model="row.claimDestinationFk"
                             :options="destinationTypes"
                             option-label="description"
@@ -344,7 +338,7 @@ async function importToNewRefundTicket() {
                                     </QItemSection>
                                     <QItemSection side>
                                         <QItemLabel v-if="column.name === 'destination'">
-                                            <VnSelectFilter
+                                            <VnSelect
                                                 v-model="props.row.claimDestinationFk"
                                                 :options="destinationTypes"
                                                 option-label="description"
@@ -383,6 +377,7 @@ async function importToNewRefundTicket() {
                 icon="check"
                 @click="regularizeClaim"
                 :disable="claim.claimStateFk == resolvedStateId"
+                :loading="loading"
             />
 
             <QBtn
@@ -394,6 +389,7 @@ async function importToNewRefundTicket() {
                 :title="t('Change destination')"
                 icon="swap_horiz"
                 @click="dialogDestination = !dialogDestination"
+                :loading="loading"
             />
             <QBtn
                 color="primary"
@@ -404,6 +400,7 @@ async function importToNewRefundTicket() {
                 icon="Upload"
                 @click="importToNewRefundTicket"
                 :disable="claim.claimStateFk == resolvedStateId"
+                :loading="loading"
             />
         </template>
     </CrudModel>
@@ -418,7 +415,7 @@ async function importToNewRefundTicket() {
                 </QItem>
             </QCardSection>
             <QItemSection>
-                <VnSelectFilter
+                <VnSelect
                     class="q-pa-sm"
                     v-model="claimDestinationFk"
                     :options="destinationTypes"

src/pages/Claim/Card/ClaimBasicData.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-
+import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
@@ -37,23 +37,19 @@ const claimFilter = {
     ],
 };
 
-const workers = ref([]);
-const workersCopy = ref([]);
 const claimStates = ref([]);
 const claimStatesCopy = ref([]);
+const optionsList = ref([]);
 
-function setWorkers(data) {
+const workersOptions = ref([]);
-    workers.value = data;
-    workersCopy.value = data;
-}
 
 function setClaimStates(data) {
     claimStates.value = data;
     claimStatesCopy.value = data;
 }
-let optionsList;
+
 async function getEnumValues() {
-    optionsList = [{ id: null, description: t('claim.basicData.null') }];
+    optionsList.value = [{ id: null, description: t('claim.basicData.null') }];
     const { data } = await axios.get(`Applications/get-enum-values`, {
         params: {
             schema: 'vn',
@@ -62,29 +58,11 @@ async function getEnumValues() {
         },
     });
     for (let value of data)
-        optionsList.push({ id: value, description: t(`claim.basicData.${value}`) });
+        optionsList.value.push({ id: value, description: t(`claim.basicData.${value}`) });
 }
+
 getEnumValues();
 
-const workerFilter = {
-    options: workers,
-    filterFn: (options, value) => {
-        const search = value.toLowerCase();
-
-        if (value === '') return workersCopy.value;
-
-        return options.value.filter((row) => {
-            const id = row.id;
-            const name = row.name.toLowerCase();
-
-            const idMatches = id == search;
-            const nameMatches = name.indexOf(search) > -1;
-
-            return idMatches || nameMatches;
-        });
-    },
-};
-
 const statesFilter = {
     options: claimStates,
     filterFn: (options, value) => {
@@ -104,7 +82,7 @@ const statesFilter = {
     <FetchData
         url="Workers/activeWithInheritedRole"
         :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="setWorkers"
+        @on-fetch="(data) => (workersOptions = data)"
         auto-load
     />
     <FetchData url="ClaimStates" @on-fetch="setClaimStates" auto-load />
@@ -117,34 +95,26 @@ const statesFilter = {
     >
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
                 <VnInput
                     v-model="data.client.name"
                     :label="t('claim.basicData.customer')"
                     disable
                 />
-                </div>
-                <div class="col">
                 <VnInputDate
                     v-model="data.created"
                     :label="t('claim.basicData.created')"
                 />
-                </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
+                <VnSelect
-                    <QSelect
+                    :label="t('claim.basicData.assignedTo')"
                     v-model="data.workerFk"
-                        :options="workers"
+                    :options="workersOptions"
                     option-value="id"
                     option-label="name"
                     emit-value
-                        :label="t('claim.basicData.assignedTo')"
+                    auto-load
-                        map-options
-                        use-input
-                        @filter="(value, update) => filter(value, update, workerFilter)"
                     :rules="validate('claim.claimStateFk')"
-                        :input-debounce="0"
                 >
                     <template #before>
                         <QAvatar color="orange">
@@ -155,9 +125,7 @@ const statesFilter = {
                             />
                         </QAvatar>
                     </template>
-                    </QSelect>
+                </VnSelect>
-                </div>
-                <div class="col">
                 <QSelect
                     v-model="data.claimStateFk"
                     :options="claimStates"
@@ -172,18 +140,14 @@ const statesFilter = {
                     :input-debounce="0"
                 >
                 </QSelect>
-                </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
                 <QInput
                     v-model.number="data.packages"
                     :label="t('globals.packages')"
                     :rules="validate('claim.packages')"
                     type="number"
                 />
-                </div>
-                <div class="col">
                 <QSelect
                     v-model="data.pickup"
                     :options="optionsList"
@@ -196,7 +160,6 @@ const statesFilter = {
                     :input-debounce="0"
                 >
                 </QSelect>
-                </div>
             </VnRow>
         </template>
     </FormModel>

src/pages/Claim/Card/ClaimCard.vue

@@ -1,46 +1,17 @@
 <script setup>
-import LeftMenu from 'components/LeftMenu.vue';
+import VnCard from 'components/common/VnCard.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import { useStateStore } from 'stores/useStateStore';
-import { useI18n } from 'vue-i18n';
 import ClaimDescriptor from './ClaimDescriptor.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import ClaimFilter from '../ClaimFilter.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const { t } = useI18n();
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
+    <VnCard
-        <VnSearchbar
+        data-key="Claim"
-            data-key="ClaimList"
+        base-url="Claims"
-            url="Claims/filter"
+        :descriptor="ClaimDescriptor"
-            :label="t('Search claim')"
+        :filter-panel="ClaimFilter"
-            :info="t('You can search by claim id or customer name')"
+        search-data-key="ClaimList"
+        search-url="Claims/filter"
+        searchbar-label="Search claim"
+        searchbar-info="You can search by claim id or customer name"
     />
-    </Teleport>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <ClaimDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
 </template>
-
-<i18n>
-es:
-    Search claim: Buscar reclamación
-    You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
-    Details: Detalles
-    Notes: Notas
-    Action: Acción
-</i18n>

src/pages/Claim/Card/ClaimDescriptor.vue

@@ -11,6 +11,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import { getUrl } from 'src/composables/getUrl';
+import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
 
 const $props = defineProps({
     id: {
@@ -73,8 +74,9 @@ const filter = {
 
 const STATE_COLOR = {
     pending: 'warning',
-    managed: 'info',
+    incomplete: 'info',
     resolved: 'positive',
+    canceled: 'negative',
 };
 function stateColor(code) {
     return STATE_COLOR[code];
@@ -127,17 +129,24 @@ onMounted(async () => {
             </VnLv>
             <VnLv
                 v-if="entity.worker"
-                :label="t('claim.card.assignedTo')"
+                :label="t('claim.card.attendedBy')"
                 :value="entity.worker.user.name"
             >
                 <template #value>
                     <VnUserLink
-                        :name="entity.worker.user.name"
+                        :name="entity.worker.user.nickname"
                         :worker-id="entity.worker.id"
                     />
                 </template>
             </VnLv>
-            <VnLv :label="t('claim.card.zone')" :value="entity.ticket?.zone?.name" />
+            <VnLv :label="t('claim.card.zone')">
+                <template #value>
+                    <span class="link">
+                        {{ entity.ticket?.zone?.name }}
+                        <ZoneDescriptorProxy :id="entity.ticket?.zone?.id" />
+                    </span>
+                </template>
+            </VnLv>
             <VnLv
                 :label="t('claim.card.province')"
                 :value="entity.ticket?.address?.province?.name"

src/pages/Claim/Card/ClaimDevelopment.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import CrudModel from 'components/CrudModel.vue';
 import FetchData from 'components/FetchData.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import { tMobile } from 'composables/tMobile';
 
 const route = useRoute();
@@ -161,7 +161,7 @@ const columns = computed(() => [
                         auto-width
                         @keyup.ctrl.enter.stop="claimDevelopmentForm.saveChanges()"
                     >
-                        <VnSelectFilter
+                        <VnSelect
                             v-model="row[col.model]"
                             :options="col.options"
                             :option-value="col.optionValue"
@@ -181,7 +181,7 @@ const columns = computed(() => [
                                     </QItemSection>
                                 </QItem>
                             </template>
-                        </VnSelectFilter>
+                        </VnSelect>
                     </QTd>
                 </template>
                 <template #item="props">
@@ -198,7 +198,7 @@ const columns = computed(() => [
                             <QList dense>
                                 <QItem v-for="col in props.cols" :key="col.name">
                                     <QItemSection>
-                                        <VnSelectFilter
+                                        <VnSelect
                                             :label="col.label"
                                             v-model="props.row[col.model]"
                                             :options="col.options"

src/pages/Claim/Card/ClaimLines.vue

@@ -45,20 +45,25 @@ async function onFetchClaim(data) {
 
 const amount = ref();
 const amountClaimed = ref();
-async function onFetch(rows) {
+async function onFetch(rows, newRows) {
+    if (newRows) rows = newRows;
     amount.value = 0;
     amountClaimed.value = 0;
     if (!rows || !rows.length) return;
 
-    amount.value = rows.reduce(
+    for (const row of rows) {
-        (accumulator, { sale }) => accumulator + sale.price * sale.quantity,
+        const { sale } = row;
-        0
+        amount.value = amount.value + totalRow(sale);
-    );
+        const price = row.quantity * sale.price;
+        const discount = (sale.discount * price) / 100;
+        amountClaimed.value = amountClaimed.value + (price - discount);
+    }
+}
 
-    amountClaimed.value = rows.reduce(
+function totalRow({ price, quantity, discount }) {
-        (accumulator, line) => accumulator + line.sale.price * line.quantity,
+    const amount = price * quantity;
-        0
+    const appliedDiscount = (discount * amount) / 100;
-    );
+    return amount - appliedDiscount;
 }
 
 const columns = computed(() => [
@@ -102,12 +107,7 @@ const columns = computed(() => [
     {
         name: 'total',
         label: t('Total'),
-        field: ({ sale }) => {
+        field: ({ sale }) => totalRow(sale),
-            const amount = sale.price * sale.quantity;
-            const appliedDiscount = (sale.discount * amount) / 100;
-
-            return amount - appliedDiscount;
-        },
         format: (value) => toCurrency(value),
         sortable: true,
     },
@@ -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;
@@ -134,6 +129,7 @@ async function updateDiscount({ saleFk, discount, canceller }) {
     await axios.post(query, body, {
         signal: canceller.signal,
     });
+    await claimLinesForm.value.reload();
 }
 
 function onUpdateDiscount(response) {
@@ -155,6 +151,13 @@ function showImportDialog() {
         })
         .onOk(() => claimLinesForm.value.reload());
 }
+
+async function saveWhenHasChanges() {
+    if (claimLinesForm.value.getChanges().updates) {
+        await claimLinesForm.value.onSubmit();
+        await claimLinesForm.value.reload();
+    }
+}
 </script>
 <template>
     <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
@@ -181,8 +184,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"
@@ -190,11 +192,11 @@ function showImportDialog() {
             save-url="ClaimBeginnings/crud"
             :filter="linesFilter"
             @on-fetch="onFetch"
-                @save-changes="onFetch"
             v-model:selected="selected"
             :default-save="false"
             :default-reset="false"
             auto-load
+            :limit="0"
         >
             <template #body="{ rows }">
                 <QTable
@@ -206,26 +208,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 +263,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 +313,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]);
@@ -34,6 +35,7 @@ const columns = computed(() => [
         label: t('Quantity'),
         field: (row) => row.quantity,
         sortable: true,
+        default: 0,
     },
     {
         name: 'description',
@@ -74,7 +76,6 @@ async function importLines() {
     const body = sales.map((row) => ({
         claimFk: route.params.id,
         saleFk: row.saleFk,
-        quantity: row.quantity,
     }));
 
     canceller = new AbortController();
@@ -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

@@ -16,7 +16,7 @@ const claimId = computed(() => $props.id || route.params.id);
 
 const claimFilter = {
     where: { claimFk: claimId.value },
-    fields: ['created', 'workerFk', 'text'],
+    fields: ['id', 'created', 'workerFk', 'text'],
     include: {
         relation: 'worker',
         scope: {
@@ -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

@@ -1,6 +1,6 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toDate, toCurrency } from 'src/filters';
 import CardSummary from 'components/ui/CardSummary.vue';
@@ -13,8 +13,11 @@ import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import axios from 'axios';
+import dashIfEmpty from 'src/filters/dashIfEmpty';
 
 const route = useRoute();
+const router = useRouter();
 const { t } = useI18n();
 const { getTokenMultimedia } = useSession();
 const token = getTokenMultimedia();
@@ -27,7 +30,7 @@ const $props = defineProps({
 });
 
 const entityId = computed(() => $props.id || route.params.id);
-
+const ClaimStates = ref([]);
 const claimUrl = ref();
 const salixUrl = ref();
 const claimDmsRef = ref();
@@ -99,8 +102,9 @@ const detailsColumns = ref([
 
 const STATE_COLOR = {
     pending: 'warning',
-    managed: 'info',
+    incomplete: 'info',
     resolved: 'positive',
+    canceled: 'negative',
 };
 function stateColor(code) {
     return STATE_COLOR[code];
@@ -162,6 +166,10 @@ function openDialog(dmsId) {
     multimediaSlide.value = dmsId;
     multimediaDialog.value = true;
 }
+async function changeState(value) {
+    await axios.patch(`Claims/updateClaim/${entityId.value}`, { claimStateFk: value });
+    router.go(route.fullPath);
+}
 </script>
 
 <template>
@@ -171,6 +179,7 @@ function openDialog(dmsId) {
         @on-fetch="(data) => setClaimDms(data)"
         ref="claimDmsRef"
     />
+    <FetchData url="ClaimStates" @on-fetch="(data) => (ClaimStates = data)" auto-load />
     <CardSummary
         ref="summary"
         :url="`Claims/${entityId}/getSummary`"
@@ -180,6 +189,36 @@ function openDialog(dmsId) {
         <template #header="{ entity: { claim } }">
             {{ claim.id }} - {{ claim.client.name }} ({{ claim.client.id }})
         </template>
+        <template #header-right>
+            <QBtnDropdown
+                side
+                top
+                color="black"
+                text-color="white"
+                :label="t('ticket.summary.changeState')"
+            >
+                <QList>
+                    <QVirtualScroll
+                        style="max-height: 300px"
+                        :items="ClaimStates"
+                        separator
+                        v-slot="{ item, index }"
+                    >
+                        <QItem
+                            :key="index"
+                            dense
+                            clickable
+                            v-close-popup
+                            @click="changeState(item.id)"
+                        >
+                            <QItemSection>
+                                <QItemLabel>{{ item.description }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </QVirtualScroll>
+                </QList>
+            </QBtnDropdown>
+        </template>
         <template #body="{ entity: { claim, salesClaimed, developments } }">
             <QCard class="vn-one">
                 <VnTitle
@@ -222,8 +261,8 @@ function openDialog(dmsId) {
                     </template>
                 </VnLv>
                 <VnLv
-                    :label="t('claim.summary.pickup')"
+                    :label="t('claim.basicData.pickup')"
-                    :value="t(`claim.summary.${claim.pickup}`)"
+                    :value="`${dashIfEmpty(claim.pickup)}`"
                 />
             </QCard>
             <QCard class="vn-three">
@@ -280,6 +319,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 +383,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">
@@ -448,4 +486,8 @@ function openDialog(dmsId) {
 .zindex {
     z-index: 1;
 }
+
+.change-state {
+    width: 10%;
+}
 </style>

src/pages/Claim/ClaimFilter.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 
@@ -64,7 +64,7 @@ const states = ref();
                     <QSkeleton type="QInput" class="full-width" />
                 </QItemSection>
                 <QItemSection v-if="workers">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Salesperson')"
                         v-model="params.salesPersonFk"
                         @update:model-value="searchFn()"
@@ -87,7 +87,7 @@ const states = ref();
                     <QSkeleton type="QInput" class="full-width" />
                 </QItemSection>
                 <QItemSection v-if="workers">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Attender')"
                         v-model="params.attenderFk"
                         @update:model-value="searchFn()"
@@ -110,7 +110,7 @@ const states = ref();
                     <QSkeleton type="QInput" class="full-width" />
                 </QItemSection>
                 <QItemSection v-if="workers">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Responsible')"
                         v-model="params.claimResponsibleFk"
                         @update:model-value="searchFn()"
@@ -133,7 +133,7 @@ const states = ref();
                     <QSkeleton type="QInput" class="full-width" />
                 </QItemSection>
                 <QItemSection v-if="states">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('State')"
                         v-model="params.claimStateFk"
                         @update:model-value="searchFn()"
@@ -149,6 +149,15 @@ const states = ref();
                     />
                 </QItemSection>
             </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        v-model="params.myTeam"
+                        :label="t('myTeam')"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+            </QItem>
             <QSeparator />
             <QExpansionItem :label="t('More options')" expand-separator>
                 <!-- <QItem>
@@ -192,6 +201,7 @@ en:
         claimResponsibleFk: Responsible
         claimStateFk: State
         created: Created
+    myTeam: My team
 es:
     params:
         search: Contiene
@@ -211,4 +221,5 @@ es:
     Item: Artículo
     Created: Creada
     More options: Más opciones
+    myTeam: Mi equipo
 </i18n>

src/pages/Claim/ClaimList.vue

@@ -12,7 +12,6 @@ import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorP
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import ClaimSummary from './Card/ClaimSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import { getUrl } from 'src/composables/getUrl';
 
 const stateStore = useStateStore();
 const router = useRouter();

src/pages/Claim/locale/es.yml

@@ -0,0 +1,2 @@
+Search claim: Buscar reclamación
+You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente

src/pages/Customer/Card/CustomerAddress.vue

@@ -1,18 +1,21 @@
 <script setup>
-import { ref } from 'vue';
+import { onBeforeMount, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
+import axios from 'axios';
+
 import FetchData from 'components/FetchData.vue';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
 
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 
+const addresses = ref([]);
+const client = ref(null);
 const provincesLocation = ref([]);
 
-const consigneeFilter = {
+const addressFilter = {
     fields: [
         'id',
         'isDefaultAddress',
@@ -44,6 +47,42 @@ const consigneeFilter = {
     ],
 };
 
+onBeforeMount(() => {
+    const { id } = route.params;
+    getAddressesData(id);
+    getClientData(id);
+});
+
+watch(
+    () => route.params.id,
+    (newValue) => {
+        if (!newValue) return;
+        getAddressesData(newValue);
+        getClientData(newValue);
+    }
+);
+
+const getAddressesData = async (id) => {
+    try {
+        const { data } = await axios.get(`Clients/${id}/addresses`, {
+            params: { filter: JSON.stringify(addressFilter) },
+        });
+        addresses.value = data;
+        sortAddresses();
+    } catch (error) {
+        return error;
+    }
+};
+
+const getClientData = async (id) => {
+    try {
+        const { data } = await axios.get(`Clients/${id}`);
+        client.value = data;
+    } catch (error) {
+        return error;
+    }
+};
+
 const setProvince = (provinceFk) => {
     const result = provincesLocation.value.filter(
         (province) => province.id === provinceFk
@@ -51,16 +90,38 @@ const setProvince = (provinceFk) => {
     return result[0]?.name || '';
 };
 
-const toCustomerConsigneeCreate = () => {
+const isDefaultAddress = (address) => {
-    router.push({ name: 'CustomerConsigneeCreate' });
+    return client?.value?.defaultAddressFk === address.id ? 1 : 0;
 };
 
-const toCustomerConsigneeEdit = (consigneeId) => {
+const setDefault = (address) => {
+    const url = `Clients/${route.params.id}`;
+    const payload = { defaultAddressFk: address.id };
+    axios.patch(url, payload).then((res) => {
+        if (res.data) {
+            client.value.defaultAddressFk = res.data.defaultAddressFk;
+            sortAddresses();
+        }
+    });
+};
+
+const sortAddresses = () => {
+    if (!client.value || !addresses.value) return;
+    addresses.value = addresses.value.sort((a, b) => {
+        return isDefaultAddress(b) - isDefaultAddress(a);
+    });
+};
+
+const toCustomerAddressCreate = () => {
+    router.push({ name: 'CustomerAddressCreate' });
+};
+
+const toCustomerAddressEdit = (addressId) => {
     router.push({
-        name: 'CustomerConsigneeEdit',
+        name: 'CustomerAddressEdit',
         params: {
             id: route.params.id,
-            consigneeId,
+            addressId,
         },
     });
 };
@@ -73,26 +134,41 @@ const toCustomerConsigneeEdit = (consigneeId) => {
         url="Provinces/location"
     />
 
-    <QCard class="q-pa-lg">
+    <div class="full-width flex justify-center">
-        <VnPaginate
+        <QCard class="card-width q-pa-lg" v-if="addresses.length">
-            data-key="CustomerConsignees"
+            <QCardSection>
-            :url="`Clients/${route.params.id}/addresses`"
+                <div
-            order="id"
+                    v-for="(item, index) in addresses"
-            auto-load
-            :filter="consigneeFilter"
-        >
-            <template #body="{ rows }">
-                <QCard
-                    v-for="(item, index) in rows"
                     :key="index"
+                    class="address-card"
                     :class="{
-                        'consignees-card': true,
+                        'q-mb-md': index < addresses.length - 1,
-                        'q-mb-md': index < rows.length - 1,
+                        'item-disabled': !item.isActive,
                     }"
-                    @click="toCustomerConsigneeEdit(item.id)"
+                    @click="toCustomerAddressEdit(item.id)"
                 >
                     <div class="q-ml-xs q-mr-md flex items-center">
-                        <QIcon name="star" size="md" color="primary" />
+                        <QIcon
+                            :style="{
+                                'font-variation-settings': `'FILL' ${isDefaultAddress(
+                                    item
+                                )}`,
+                            }"
+                            color="primary"
+                            name="star"
+                            size="md"
+                            @click.stop="!isDefaultAddress(item) && setDefault(item)"
+                        >
+                            <QTooltip>
+                                {{
+                                    t(
+                                        isDefaultAddress(item)
+                                            ? 'Default address'
+                                            : 'Set as default'
+                                    )
+                                }}
+                            </QTooltip>
+                        </QIcon>
                     </div>
                     <div>
                         <div class="text-weight-bold q-mb-sm">
@@ -126,9 +202,9 @@ const toCustomerConsigneeEdit = (consigneeId) => {
 
                     <div v-if="item.observations.length">
                         <div
-                            :key="index"
+                            :key="obIndex"
                             class="flex q-mb-sm"
-                            v-for="(observation, index) in item.observations"
+                            v-for="(observation, obIndex) in item.observations"
                         >
                             <div class="text-weight-bold q-mr-sm">
                                 {{ observation.observationType.description }}:
@@ -136,12 +212,13 @@ const toCustomerConsigneeEdit = (consigneeId) => {
                             <div>{{ observation.description }}</div>
                         </div>
                     </div>
+                </div>
+            </QCardSection>
         </QCard>
-            </template>
+    </div>
-        </VnPaginate>
+
-    </QCard>
     <QPageSticky :offset="[18, 18]">
-        <QBtn @click.stop="toCustomerConsigneeCreate()" color="primary" fab icon="add" />
+        <QBtn @click.stop="toCustomerAddressCreate()" color="primary" fab icon="add" />
         <QTooltip>
             {{ t('New consignee') }}
         </QTooltip>
@@ -149,8 +226,8 @@ const toCustomerConsigneeEdit = (consigneeId) => {
 </template>
 
 <style lang="scss" scoped>
-.consignees-card {
+.address-card {
-    border: 2px solid var(--vn-accent-color);
+    border: 2px solid var(--vn-light-gray);
     border-radius: 10px;
     padding: 10px;
     display: flex;
@@ -160,6 +237,10 @@ const toCustomerConsigneeEdit = (consigneeId) => {
         background-color: var(--vn-accent-color);
     }
 }
+
+.item-disabled {
+    opacity: 0.6;
+}
 </style>
 
 <i18n>
@@ -167,4 +248,6 @@ es:
     Is equalizated: Recargo de equivalencia
     Is logiflora allowed: Compra directa en Holanda
     New consignee: Nuevo consignatario
+    Default address: Consignatario predeterminado
+    Set as default: Establecer como predeterminado
 </i18n>