Merge branch 'salix-dev' into feature/route-module

# Conflicts:
#	src/pages/Route/Card/RouteSummary.vue

src/components/CreateBankEntityForm.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, ref } from 'vue';
+import { reactive, ref, onMounted, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnInput from 'src/components/common/VnInput.vue';
 
@@ -16,9 +16,8 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['onDataSaved']);
-
 const { t } = useI18n();
-
+const bicInputRef = ref(null);
 const bankEntityFormData = reactive({
     name: null,
     bic: null,
@@ -32,9 +31,14 @@ const countriesFilter = {
 
 const countriesOptions = ref([]);
 
-const onDataSaved = (data) => {
-    emit('onDataSaved', data);
+const onDataSaved = (formData, requestResponse) => {
+    emit('onDataSaved', formData, requestResponse);
 };
+
+onMounted(async () => {
+    await nextTick();
+    bicInputRef.value.focus();
+});
 </script>
 
 <template>
@@ -50,7 +54,7 @@ const onDataSaved = (data) => {
         :title="t('title')"
         :subtitle="t('subtitle')"
         :form-initial-data="bankEntityFormData"
-        @on-data-saved="onDataSaved($event)"
+        @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
@@ -64,6 +68,7 @@ const onDataSaved = (data) => {
                 </div>
                 <div class="col">
                     <VnInput
+                        ref="bicInputRef"
                         :label="t('swift')"
                         v-model="data.bic"
                         :required="true"

src/components/EditTableCellValueForm.vue

@@ -71,13 +71,9 @@ const closeForm = () => {
             <span ref="closeButton" class="close-icon" v-close-popup>
                 <QIcon name="close" size="sm" />
             </span>
-            <h1 class="title">
-                {{
-                    t('editBuyTitle', {
-                        buysAmount: rows.length,
-                    })
-                }}
-            </h1>
+            <span class="title">{{ t('Edit') }}</span>
+            <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">
                     <VnSelectFilter
@@ -94,23 +90,23 @@ const closeForm = () => {
                 </div>
             </VnRow>
             <div class="q-mt-lg row justify-end">
-                <QBtn
-                    :label="t('globals.save')"
-                    type="submit"
-                    color="primary"
-                    :disabled="isLoading"
-                    :loading="isLoading"
-                />
                 <QBtn
                     :label="t('globals.cancel')"
                     type="reset"
                     color="primary"
                     flat
-                    class="q-ml-sm"
                     :disabled="isLoading"
                     :loading="isLoading"
                     v-close-popup
                 />
+                <QBtn
+                    :label="t('globals.save')"
+                    type="submit"
+                    color="primary"
+                    class="q-ml-sm"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                />
             </div>
         </QCard>
     </QForm>
@@ -129,13 +125,18 @@ const closeForm = () => {
     right: 20px;
     cursor: pointer;
 }
+
+.countLines {
+    font-size: 24px;
+    color: $primary;
+    font-weight: bold;
+}
 </style>
 
 <i18n>
-    en:
-        editBuyTitle: Edit {buysAmount} buy(s)
-    es:
-        editBuyTitle: Editar {buysAmount} compra(s)
+es:
+    Edit: Editar
+    buy(s): compra(s)
     Field to edit: Campo a editar
     Value: Valor
-    </i18n>
+</i18n>

src/components/FormModel.vue

@@ -10,6 +10,7 @@ import { useValidator } from 'src/composables/useValidator';
 import useNotify from 'src/composables/useNotify.js';
 import SkeletonForm from 'components/ui/SkeletonForm.vue';
 import VnConfirm from './ui/VnConfirm.vue';
+import { tMobile } from 'src/composables/tMobile';
 
 const quasar = useQuasar();
 const state = useState();
@@ -43,6 +44,10 @@ const $props = defineProps({
         type: Boolean,
         default: true,
     },
+    defaultButtons: {
+        type: Object,
+        default: () => {},
+    },
     autoLoad: {
         type: Boolean,
         default: false,
@@ -61,6 +66,10 @@ const $props = defineProps({
         type: Function,
         default: null,
     },
+    clearStoreOnUnmount: {
+        type: Boolean,
+        default: true,
+    },
     saveFn: {
         type: Function,
         default: null,
@@ -109,7 +118,12 @@ onBeforeRouteLeave((to, from, next) => {
 });
 
 onUnmounted(() => {
-    state.unset($props.model);
+    // Restauramos los datos originales en el store si se realizaron cambios en el formulario pero no se guardaron, evitando modificaciones erróneas.
+    if (hasChanges.value) {
+        state.set($props.model, originalData.value);
+        return;
+    }
+    if ($props.clearStoreOnUnmount) state.unset($props.model);
 });
 
 const isLoading = ref(false);
@@ -119,7 +133,19 @@ const hasChanges = ref(!$props.observeFormChanges);
 const originalData = ref({ ...$props.formInitialData });
 const formData = computed(() => state.get($props.model));
 const formUrl = computed(() => $props.url);
-
+const defaultButtons = computed(() => ({
+    save: {
+        color: 'primary',
+        icon: 'restart_alt',
+        label: 'globals.save',
+    },
+    reset: {
+        color: 'primary',
+        icon: 'save',
+        label: 'globals.reset',
+    },
+    ...$props.defaultButtons,
+}));
 const startFormWatcher = () => {
     watch(
         () => formData.value,
@@ -131,10 +157,6 @@ const startFormWatcher = () => {
     );
 };
 
-function tMobile(...args) {
-    if (!quasar.platform.is.mobile) return t(...args);
-}
-
 async function fetch() {
     const { data } = await axios.get($props.url, {
         params: { filter: JSON.stringify($props.filter) },
@@ -233,21 +255,21 @@ watch(formUrl, async () => {
             <QBtnGroup push class="q-gutter-x-sm">
                 <slot name="moreActions" />
                 <QBtn
-                    :label="tMobile('globals.reset')"
-                    color="primary"
-                    icon="restart_alt"
+                    :label="tMobile(defaultButtons.reset.label)"
+                    :color="defaultButtons.reset.color"
+                    :icon="defaultButtons.reset.icon"
                     flat
                     @click="reset"
                     :disable="!hasChanges"
-                    :title="t('globals.reset')"
+                    :title="t(defaultButtons.reset.label)"
                 />
                 <QBtn
-                    :label="tMobile('globals.save')"
-                    color="primary"
-                    icon="save"
+                    :label="tMobile(defaultButtons.save.label)"
+                    :color="defaultButtons.save.color"
+                    :icon="defaultButtons.save.icon"
                     @click="save"
                     :disable="!hasChanges"
-                    :title="t('globals.save')"
+                    :title="t(defaultButtons.save.label)"
                 />
             </QBtnGroup>
         </div>

src/components/FormModelPopup.vue

@@ -42,8 +42,8 @@ const { t } = useI18n();
 const closeButton = ref(null);
 const isLoading = ref(false);
 
-const onDataSaved = (dataSaved) => {
-    emit('onDataSaved', dataSaved);
+const onDataSaved = (formData, requestResponse) => {
+    emit('onDataSaved', formData, requestResponse);
     closeForm();
 };
 
@@ -59,7 +59,7 @@ const closeForm = () => {
         :default-actions="false"
         :url-create="urlCreate"
         :model="model"
-        @on-data-saved="onDataSaved($event)"
+        @on-data-saved="onDataSaved"
     >
         <template #form="{ data, validate }">
             <span ref="closeButton" class="close-icon" v-close-popup>

src/components/common/VnInput.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const emit = defineEmits(['update:modelValue', 'update:options', 'keyup.enter']);
@@ -17,7 +17,7 @@ const $props = defineProps({
 
 const { t } = useI18n();
 const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
-
+const vnInputRef = ref(null);
 const value = computed({
     get() {
         return $props.modelValue;
@@ -40,6 +40,14 @@ const styleAttrs = computed(() => {
 const onEnterPress = () => {
     emit('keyup.enter');
 };
+
+const focus = () => {
+    vnInputRef.value.focus();
+};
+
+defineExpose({
+    focus,
+});
 </script>
 
 <template>

src/components/common/VnInputDate.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue';
-import { toDate } from 'src/filters';
+import VnInput from 'components/common/VnInput.vue';
+import isValidDate from "filters/isValidDate";
 
 const props = defineProps({
     modelValue: {
@@ -17,12 +18,25 @@ const props = defineProps({
     },
 });
 const emit = defineEmits(['update:modelValue']);
+
+const joinDateAndTime = (date, time) => {
+    if (!date) {
+        return null;
+    }
+    if (!time) {
+        return new Date(date).toISOString();
+    }
+    const [year, month, day] = date.split('/');
+    return new Date(`${year}-${month}-${day}T${time}`).toISOString();
+};
+
+const time = computed(() => (props.modelValue ? props.modelValue.split('T')?.[1] : null));
 const value = computed({
     get() {
         return props.modelValue;
     },
     set(value) {
-        emit('update:modelValue', value ? new Date(value).toISOString() : null);
+        emit('update:modelValue', joinDateAndTime(value, time.value));
     },
 });
 
@@ -40,6 +54,16 @@ const formatDate = (dateString) => {
         date.getDate()
     )}`;
 };
+const displayDate = (dateString) => {
+    if (!dateString || !isValidDate(dateString)) {
+        return '';
+    }
+    return new Date(dateString).toLocaleDateString([], {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+    });
+};
 
 const styleAttrs = computed(() => {
     return props.isOutlined
@@ -53,12 +77,12 @@ const styleAttrs = computed(() => {
 </script>
 
 <template>
-    <QInput
+    <VnInput
         class="vn-input-date"
-        rounded
-        readonly
-        :model-value="toDate(value)"
+        :model-value="displayDate(value)"
         v-bind="{ ...$attrs, ...styleAttrs }"
+        readonly
+        @click="isPopupOpen = true"
     >
         <template #append>
             <QIcon name="event" class="cursor-pointer">
@@ -76,7 +100,7 @@ const styleAttrs = computed(() => {
                 </QPopupProxy>
             </QIcon>
         </template>
-    </QInput>
+    </VnInput>
 </template>
 
 <style lang="scss">

src/components/common/VnInputTime.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { computed, ref } from 'vue';
-import { toHour } from 'src/filters';
 import { useI18n } from 'vue-i18n';
 import isValidDate from 'filters/isValidDate';
+import VnInput from "components/common/VnInput.vue";
 
 const props = defineProps({
     modelValue: {
@@ -26,8 +26,8 @@ const value = computed({
     },
     set(value) {
         const [hours, minutes] = value.split(':');
-        const date = new Date();
-        date.setUTCHours(
+        const date = new Date(props.modelValue);
+        date.setHours(
             Number.parseInt(hours) || 0,
             Number.parseInt(minutes) || 0,
             0,
@@ -37,6 +37,7 @@ const value = computed({
     },
 });
 
+const isPopupOpen = ref(false);
 const onDateUpdate = (date) => {
     internalValue.value = date;
 };
@@ -45,7 +46,7 @@ const save = () => {
     value.value = internalValue.value;
 };
 const formatTime = (dateString) => {
-    if (!isValidDate(dateString)) {
+    if (!dateString || !isValidDate(dateString)) {
         return '';
     }
 
@@ -70,16 +71,17 @@ const styleAttrs = computed(() => {
 </script>
 
 <template>
-    <QInput
+    <VnInput
         class="vn-input-time"
-        rounded
         readonly
-        :model-value="toHour(value)"
+        :model-value="formatTime(value)"
         v-bind="{ ...$attrs, ...styleAttrs }"
+        @click="isPopupOpen = true"
     >
         <template #append>
             <QIcon name="event" class="cursor-pointer">
                 <QPopupProxy
+                    v-model="isPopupOpen"
                     cover
                     transition-show="scale"
                     transition-hide="scale"
@@ -109,7 +111,7 @@ const styleAttrs = computed(() => {
                 </QPopupProxy>
             </QIcon>
         </template>
-    </QInput>
+    </VnInput>
 </template>
 
 <style lang="scss">

src/components/common/VnLog.vue

@@ -1036,7 +1036,6 @@ en:
         claimStateFk: Claim State
         workerFk: Worker
         clientFk: Customer
-        rma: RMA
         responsibility: Responsibility
         packages: Packages
 es:
@@ -1076,7 +1075,6 @@ es:
         claimStateFk: Estado de la reclamación
         workerFk: Trabajador
         clientFk: Cliente
-        rma: RMA
         responsibility: Responsabilidad
         packages: Bultos
 </i18n>

src/components/common/VnSelectDialog.vue

@@ -59,6 +59,9 @@ const toggleForm = () => {
                 :name="actionIcon"
                 :size="actionIcon === 'add' ? 'xs' : 'sm'"
                 :class="['default-icon', { '--add-icon': actionIcon === 'add' }]"
+                :style="{
+                    'font-variation-settings': `'FILL' ${1}`,
+                }"
             >
                 <QTooltip v-if="tooltip">{{ tooltip }}</QTooltip>
             </QIcon>

src/components/ui/CardDescriptor.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { useState } from 'src/composables/useState';
 
 const $props = defineProps({
     url: {
@@ -35,6 +36,8 @@ const $props = defineProps({
         default: null,
     },
 });
+
+const state = useState();
 const slots = useSlots();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
@@ -64,6 +67,7 @@ async function getData() {
     isLoading.value = true;
     try {
         const { data } = await arrayData.fetch({ append: false, updateRouter: false });
+        state.set($props.dataKey, data);
         emit('onFetch', data);
     } finally {
         isLoading.value = false;

src/components/ui/CardSummary.vue

@@ -1,11 +1,10 @@
 <script setup>
 import { onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 import axios from 'axios';
 import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 
-onMounted(() => fetch());
-
 const entity = ref();
 const props = defineProps({
     url: {
@@ -16,14 +15,25 @@ const props = defineProps({
         type: Object,
         default: null,
     },
+    entityId: {
+        type: Number,
+        default: null,
+    },
 });
 const emit = defineEmits(['onFetch']);
+const route = useRoute();
+const isSummary = ref();
 
 defineExpose({
     entity,
     fetch,
 });
 
+onMounted(() => {
+    isSummary.value = String(route.path).endsWith('/summary');
+    fetch();
+});
+
 async function fetch() {
     const params = {};
 
@@ -48,7 +58,17 @@ watch(props, async () => {
             <template v-if="entity">
                 <div class="summaryHeader bg-primary q-pa-sm text-weight-bolder">
                     <slot name="header-left">
-                        <span></span>
+                        <router-link
+                            v-if="!isSummary && route.meta.moduleName"
+                            class="header link"
+                            :to="{
+                                name: `${route.meta.moduleName}Summary`,
+                                params: { id: entityId || entity.id },
+                            }"
+                        >
+                            <QIcon name="open_in_new" color="white" size="sm" />
+                        </router-link>
+                        <span v-else></span>
                     </slot>
                     <slot name="header" :entity="entity">
                         <VnLv :label="`${entity.id} -`" :value="entity.name" />
@@ -142,13 +162,12 @@ watch(props, async () => {
                 display: flex;
                 margin-bottom: 9px;
                 & .q-checkbox__label {
-                    margin-left: 25px;
+                    margin-left: 31px;
                     color: var(--vn-text);
                 }
                 & .q-checkbox__inner {
                     position: absolute;
                     left: 0;
-                    margin-left: 5px;
                     color: var(--vn-label);
                 }
             }

src/components/ui/VnSearchbar.vue

@@ -118,7 +118,12 @@ async function search() {
             autofocus
         >
             <template #prepend>
-                <QIcon name="search" v-if="!quasar.platform.is.mobile" />
+                <QIcon
+                    v-if="!quasar.platform.is.mobile"
+                    class="cursor-pointer"
+                    name="search"
+                    @click="search"
+                />
             </template>
             <template #append>
                 <QIcon

src/css/app.scss

@@ -97,6 +97,11 @@ select:-webkit-autofill {
     background-color: var(--vn-light-gray);
 }
 
+.vn-table-separation-row {
+    height: 16px !important;
+    background-color: var(--vn-gray) !important;
+}
+
 /* Estilo para el asterisco en campos requeridos */
 .q-field.required .q-field__label:after {
     content: ' *';

src/filters/date.js

@@ -0,0 +1,93 @@
+/**
+ * Checks if a given date is valid.
+ *
+ * @param {number|string|Date} date - The date to be checked.
+ * @returns {boolean} True if the date is valid, false otherwise.
+ *
+ * @example
+ * // returns true
+ * isValidDate(new Date());
+ *
+ * @example
+ * // returns false
+ * isValidDate('invalid date');
+ */
+export function isValidDate(date) {
+    return date && !isNaN(new Date(date).getTime());
+}
+
+/**
+ * Converts a given date to a specific format.
+ *
+ * @param {number|string|Date} date - The date to be formatted.
+ * @returns {string} The formatted date as a string in 'dd/mm/yyyy' format. If the provided date is not valid, an empty string is returned.
+ *
+ * @example
+ * // returns "02/12/2022"
+ * toDateFormat(new Date(2022, 11, 2));
+ */
+export function toDateFormat(date) {
+    if (!isValidDate(date)) {
+        return '';
+    }
+    return new Date(date).toLocaleDateString('es-ES', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+    });
+}
+
+/**
+ * Converts a given date to a specific time format.
+ *
+ * @param {number|string|Date} date - The date to be formatted.
+ * @param {boolean} [showSeconds=false] - Whether to include seconds in the output format.
+ * @returns {string} The formatted time as a string in 'hh:mm:ss' format. If the provided date is not valid, an empty string is returned. If showSeconds is false, seconds are not included in the output format.
+ *
+ * @example
+ * // returns "00:00"
+ * toTimeFormat(new Date(2022, 11, 2));
+ *
+ * @example
+ * // returns "00:00:00"
+ * toTimeFormat(new Date(2022, 11, 2), true);
+ */
+export function toTimeFormat(date, showSeconds = false) {
+    if (!isValidDate(date)) {
+        return '';
+    }
+    return new Date(date).toLocaleDateString('es-ES', {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: showSeconds ? '2-digit' : undefined,
+    });
+}
+
+/**
+ * Converts a given date to a specific date and time format.
+ *
+ * @param {number|string|Date} date - The date to be formatted.
+ * @param {boolean} [showSeconds=false] - Whether to include seconds in the output format.
+ * @returns {string} The formatted date as a string in 'dd/mm/yyyy, hh:mm:ss' format. If the provided date is not valid, an empty string is returned. If showSeconds is false, seconds are not included in the output format.
+ *
+ * @example
+ * // returns "02/12/2022, 00:00"
+ * toDateTimeFormat(new Date(2022, 11, 2));
+ *
+ * @example
+ * // returns "02/12/2022, 00:00:00"
+ * toDateTimeFormat(new Date(2022, 11, 2), true);
+ */
+export function toDateTimeFormat(date, showSeconds = false) {
+    if (!isValidDate(date)) {
+        return '';
+    }
+    return new Date(date).toLocaleDateString('es-ES', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: showSeconds ? '2-digit' : undefined,
+    });
+}

src/i18n/en/index.js

@@ -31,6 +31,7 @@ export default {
         close: 'Close',
         cancel: 'Cancel',
         confirm: 'Confirm',
+        assign: 'Assign',
         back: 'Back',
         yes: 'Yes',
         no: 'No',
@@ -498,11 +499,9 @@ export default {
             claims: 'Claims',
             list: 'List',
             createClaim: 'Create claim',
-            rmaList: 'RMA',
             summary: 'Summary',
             basicData: 'Basic Data',
             lines: 'Lines',
-            rma: 'RMA',
             photos: 'Photos',
             development: 'Development',
             log: 'Audit logs',
@@ -519,10 +518,6 @@ export default {
             code: 'Code',
             records: 'records',
         },
-        rma: {
-            user: 'User',
-            created: 'Created',
-        },
         card: {
             claimId: 'Claim ID',
             assignedTo: 'Assigned',
@@ -563,7 +558,6 @@ export default {
             responsible: 'Responsible',
             worker: 'Worker',
             redelivery: 'Redelivery',
-            returnOfMaterial: 'RMA',
         },
         basicData: {
             customer: 'Customer',
@@ -571,7 +565,6 @@ export default {
             created: 'Created',
             state: 'State',
             picked: 'Picked',
-            returnOfMaterial: 'Return of material authorization (RMA)',
         },
         photo: {
             fileDescription: 'Claim id {claimId} from client {clientName} id {clientId}',
@@ -842,6 +835,7 @@ export default {
             notifications: 'Notifications',
             workerCreate: 'New worker',
             department: 'Department',
+            pda: 'PDA',
         },
         list: {
             name: 'Name',
@@ -883,6 +877,13 @@ export default {
             subscribed: 'Subscribed to the notification',
             unsubscribed: 'Unsubscribed from the notification',
         },
+        pda: {
+            newPDA: 'New PDA',
+            currentPDA: 'Current PDA',
+            model: 'Model',
+            serialNumber: 'Serial number',
+            removePDA: 'Deallocate PDA',
+        },
         create: {
             name: 'Name',
             lastName: 'Last name',

src/i18n/es/index.js

@@ -31,6 +31,7 @@ export default {
         close: 'Cerrar',
         cancel: 'Cancelar',
         confirm: 'Confirmar',
+        assign: 'Asignar',
         back: 'Volver',
         yes: 'Si',
         no: 'No',
@@ -310,8 +311,8 @@ export default {
             reference: 'Referencia',
             invoiceNumber: 'Núm. factura',
             ordered: 'Pedida',
-            confirmed: 'Confirmado',
-            booked: 'Asentado',
+            confirmed: 'Confirmada',
+            booked: 'Contabilizada',
             raid: 'Redada',
             excludedFromAvailable: 'Inventario',
             travelReference: 'Referencia',
@@ -497,11 +498,9 @@ export default {
             claims: 'Reclamaciones',
             list: 'Listado',
             createClaim: 'Crear reclamación',
-            rmaList: 'RMA',
             summary: 'Resumen',
             basicData: 'Datos básicos',
             lines: 'Líneas',
-            rma: 'RMA',
             development: 'Trazabilidad',
             photos: 'Fotos',
             log: 'Historial',
@@ -518,10 +517,6 @@ export default {
             code: 'Código',
             records: 'registros',
         },
-        rma: {
-            user: 'Usuario',
-            created: 'Creado',
-        },
         card: {
             claimId: 'ID reclamación',
             assignedTo: 'Asignada a',
@@ -562,7 +557,6 @@ export default {
             responsible: 'Responsable',
             worker: 'Trabajador',
             redelivery: 'Devolución',
-            returnOfMaterial: 'RMA',
         },
         basicData: {
             customer: 'Cliente',
@@ -570,7 +564,6 @@ export default {
             created: 'Creada',
             state: 'Estado',
             picked: 'Recogida',
-            returnOfMaterial: 'Autorización de retorno de materiales (RMA)',
         },
         photo: {
             fileDescription:
@@ -842,6 +835,7 @@ export default {
             notifications: 'Notificaciones',
             workerCreate: 'Nuevo trabajador',
             department: 'Departamentos',
+            pda: 'PDA',
         },
         list: {
             name: 'Nombre',
@@ -883,6 +877,13 @@ export default {
             subscribed: 'Se ha suscrito a la notificación',
             unsubscribed: 'Se ha dado de baja de la notificación',
         },
+        pda: {
+            newPDA: 'Nueva PDA',
+            currentPDA: 'PDA Actual',
+            model: 'Modelo',
+            serialNumber: 'Número de serie',
+            removePDA: 'Desasignar PDA',
+        },
         create: {
             name: 'Nombre',
             lastName: 'Apellido',

src/pages/Claim/Card/ClaimBasicData.vue

@@ -24,7 +24,6 @@ const claimFilter = {
         'workerFk',
         'claimStateFk',
         'packages',
-        'rma',
         'hasToPickUp',
     ],
     include: [
@@ -169,13 +168,6 @@ const statesFilter = {
                         type="number"
                     />
                 </div>
-                <div class="col">
-                    <VnInput
-                        v-model="data.rma"
-                        :label="t('claim.basicData.returnOfMaterial')"
-                        :rules="validate('claim.rma')"
-                    />
-                </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">

src/pages/Claim/Card/ClaimRma.vue

@@ -1,145 +0,0 @@
-<script setup>
-import axios from 'axios';
-import { watch, ref, computed, onUnmounted, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
-import CrudModel from 'components/CrudModel.vue';
-import { useState } from 'src/composables/useState';
-
-import { toDate } from 'src/filters';
-
-const quasar = useQuasar();
-const state = useState();
-const { t } = useI18n();
-const selected = ref([]);
-const claimRmaRef = ref();
-const claim = computed(() => state.get('ClaimDescriptor'));
-
-const claimRmaFilter = {
-    include: {
-        relation: 'worker',
-        scope: {
-            include: {
-                relation: 'user',
-            },
-        },
-    },
-    order: 'created DESC',
-    where: {
-        code: claim.value?.rma,
-    },
-};
-
-async function addRow() {
-    if (!claim.value.rma) {
-        return quasar.notify({
-            message: `This claim is not associated to any RMA`,
-            type: 'negative',
-        });
-    }
-    const formData = {
-        code: claim.value.rma,
-    };
-
-    await axios.post(`ClaimRmas`, formData);
-    await claimRmaRef.value.reload();
-
-    quasar.notify({
-        type: 'positive',
-        message: t('globals.rowAdded'),
-        icon: 'check',
-    });
-}
-
-onMounted(() => {
-    if (claim.value) claimRmaRef.value.reload();
-});
-watch(
-    claim,
-    () => {
-        claimRmaRef.value.reload();
-    },
-    { deep: true }
-);
-</script>
-<template>
-    <div class="column items-center">
-        <div class="list">
-            <CrudModel
-                data-key="ClaimRma"
-                url="ClaimRmas"
-                model="ClaimRma"
-                :filter="claimRmaFilter"
-                v-model:selected="selected"
-                ref="claimRmaRef"
-                :default-save="false"
-                :default-reset="false"
-                :default-remove="false"
-            >
-                <template #body="{ rows }">
-                    <QCard>
-                        <template v-for="(row, index) of rows" :key="row.id">
-                            <QItem class="q-pa-none items-start">
-                                <QItemSection class="q-pa-md">
-                                    <QList>
-                                        <QItem class="q-pa-none">
-                                            <QItemSection>
-                                                <QItemLabel caption>
-                                                    {{ t('claim.rma.user') }}
-                                                </QItemLabel>
-                                                <QItemLabel>
-                                                    {{ row?.worker?.user?.name }}
-                                                </QItemLabel>
-                                            </QItemSection>
-                                        </QItem>
-                                        <QItem class="q-pa-none">
-                                            <QItemSection>
-                                                <QItemLabel caption>
-                                                    {{ t('claim.rma.created') }}
-                                                </QItemLabel>
-                                                <QItemLabel>
-                                                    {{
-                                                        toDate(row.created, {
-                                                            timeStyle: 'medium',
-                                                        })
-                                                    }}
-                                                </QItemLabel>
-                                            </QItemSection>
-                                        </QItem>
-                                    </QList>
-                                </QItemSection>
-                                <QCardActions vertical class="justify-between">
-                                    <QBtn
-                                        flat
-                                        round
-                                        color="orange"
-                                        icon="vn:bin"
-                                        @click="claimRmaRef.remove([row])"
-                                    >
-                                        <QTooltip>{{ t('globals.remove') }}</QTooltip>
-                                    </QBtn>
-                                </QCardActions>
-                            </QItem>
-                            <QSeparator v-if="index !== rows.length - 1" />
-                        </template>
-                    </QCard>
-                </template>
-            </CrudModel>
-        </div>
-    </div>
-    <QPageSticky position="bottom-right" :offset="[25, 25]">
-        <QBtn fab color="primary" icon="add" @click="addRow()" />
-    </QPageSticky>
-</template>
-
-<style lang="scss" scoped>
-.list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
-<i18n>
-es:
-    This claim is not associated to any RMA: Esta reclamación no está asociada a ninguna ARM
-</i18n>

src/pages/Claim/Card/ClaimSummary.vue

@@ -172,6 +172,7 @@ function openDialog(dmsId) {
     <CardSummary
         ref="summary"
         :url="`Claims/${entityId}/getSummary`"
+        :entity-id="entityId"
         @on-fetch="getClaimDms"
     >
         <template #header="{ entity: { claim } }">

src/pages/Claim/ClaimRmaList.vue

@@ -1,171 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
-
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import VnConfirm from 'src/components/ui/VnConfirm.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-
-import { useArrayData } from 'src/composables/useArrayData';
-import axios from 'axios';
-
-const quasar = useQuasar();
-const { t } = useI18n();
-
-const arrayData = useArrayData('ClaimRmaList');
-const isLoading = ref(false);
-const input = ref();
-
-const newRma = ref({
-    code: '',
-    crated: Date.vnNew(),
-});
-
-function onInputUpdate(value) {
-    newRma.value.code = value.toUpperCase();
-}
-
-async function submit() {
-    const formData = newRma.value;
-    if (formData.code === '') return;
-
-    isLoading.value = true;
-    await axios.post('ClaimRmas', formData);
-    await arrayData.refresh();
-    isLoading.value = false;
-    input.value.$el.focus();
-
-    newRma.value = {
-        code: '',
-        created: Date.vnNew(),
-    };
-}
-
-function confirm(id) {
-    quasar
-        .dialog({
-            component: VnConfirm,
-            componentProps: {
-                data: { id },
-                promise: remove,
-            },
-        })
-        .onOk(async () => await arrayData.refresh());
-}
-
-async function remove({ id }) {
-    await axios.delete(`ClaimRmas/${id}`);
-    quasar.notify({
-        type: 'positive',
-        message: t('globals.rowRemoved'),
-    });
-}
-</script>
-
-<template>
-    <QPage class="column items-center q-pa-md sticky">
-        <QPageSticky expand position="top" :offset="[16, 16]">
-            <QCard class="card q-pa-md">
-                <QForm @submit="submit">
-                    <VnInput
-                        ref="input"
-                        v-model="newRma.code"
-                        :label="t('claim.rmaList.code')"
-                        @update:model-value="onInputUpdate"
-                        class="q-mb-md"
-                        :readonly="isLoading"
-                        :loading="isLoading"
-                        autofocus
-                    />
-                    <div class="text-caption">
-                        {{ arrayData.totalRows }} {{ t('claim.rmaList.records') }}
-                    </div>
-                </QForm>
-            </QCard>
-        </QPageSticky>
-        <div class="vn-card-list">
-            <VnPaginate
-                data-key="ClaimRmaList"
-                url="ClaimRmas"
-                order="id DESC"
-                :offset="50"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <QCard class="card">
-                        <template v-if="isLoading">
-                            <QItem class="q-pa-none items-start">
-                                <QItemSection class="q-pa-md">
-                                    <QList>
-                                        <QItem class="q-pa-none">
-                                            <QItemSection>
-                                                <QItemLabel caption>
-                                                    <QSkeleton />
-                                                </QItemLabel>
-                                                <QItemLabel>
-                                                    <QSkeleton type="text" />
-                                                </QItemLabel>
-                                            </QItemSection>
-                                        </QItem>
-                                    </QList>
-                                </QItemSection>
-                                <QCardActions vertical class="justify-between">
-                                    <QSkeleton
-                                        type="circle"
-                                        class="q-mb-md"
-                                        size="40px"
-                                    />
-                                </QCardActions>
-                            </QItem>
-                            <QSeparator />
-                        </template>
-                        <template v-for="row of rows" :key="row.id">
-                            <QItem class="q-pa-none items-start">
-                                <QItemSection class="q-pa-md">
-                                    <QList>
-                                        <QItem class="q-pa-none">
-                                            <QItemSection>
-                                                <QItemLabel caption>{{
-                                                    t('claim.rmaList.code')
-                                                }}</QItemLabel>
-                                                <QItemLabel>{{ row.code }}</QItemLabel>
-                                            </QItemSection>
-                                        </QItem>
-                                    </QList>
-                                </QItemSection>
-                                <QCardActions vertical class="justify-between">
-                                    <QBtn
-                                        flat
-                                        round
-                                        color="primary"
-                                        icon="vn:bin"
-                                        @click="confirm(row.id)"
-                                    >
-                                        <QTooltip>{{ t('globals.remove') }}</QTooltip>
-                                    </QBtn>
-                                </QCardActions>
-                            </QItem>
-                            <QSeparator />
-                        </template>
-                    </QCard>
-                </template>
-            </VnPaginate>
-        </div>
-    </QPage>
-</template>
-
-<style lang="scss" scoped>
-.sticky {
-    padding-top: 156px;
-}
-
-.card {
-    width: 100%;
-    max-width: 60em;
-}
-
-.q-page-sticky {
-    z-index: 2998;
-}
-</style>

src/pages/Customer/components/CustomerNewPayment.vue

@@ -112,7 +112,7 @@ const onDataSaved = async () => {
             :filter="filterBanks"
             @on-fetch="(data) => (bankOptions = data)"
             auto-load
-            url="Banks"
+            url="Accountings"
         />
         <fetch-data
             :filter="filterClientFindOne"

src/pages/Entry/Card/EntryBasicData.vue

@@ -61,6 +61,7 @@ const onFilterTravelSelected = (formData, id) => {
         :url-update="`Entries/${route.params.id}`"
         model="entry"
         auto-load
+        :clear-store-on-unmount="false"
     >
         <template #form="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">

src/pages/Entry/Card/EntryBuys.vue

@@ -43,7 +43,7 @@ const tableColumnComponents = computed(() => ({
     item: {
         component: QBtn,
         props: {
-            color: 'blue',
+            color: 'primary',
             flat: true,
         },
         event: () => ({}),
@@ -54,6 +54,7 @@ const tableColumnComponents = computed(() => ({
             type: 'number',
             min: 0,
             class: 'input-number',
+            dense: true,
         },
         event: getInputEvents,
     },
@@ -67,6 +68,7 @@ const tableColumnComponents = computed(() => ({
             'use-input': true,
             'hide-selected': true,
             options: packagingsOptions.value,
+            dense: true,
         },
         event: getInputEvents,
     },
@@ -76,6 +78,7 @@ const tableColumnComponents = computed(() => ({
             type: 'number',
             min: 0,
             class: 'input-number',
+            dense: true,
         },
         event: getInputEvents,
     },
@@ -84,6 +87,7 @@ const tableColumnComponents = computed(() => ({
         props: {
             type: 'number',
             min: 0,
+            dense: true,
         },
         event: getInputEvents,
     },
@@ -92,6 +96,7 @@ const tableColumnComponents = computed(() => ({
         props: {
             type: 'number',
             min: 0,
+            dense: true,
         },
         event: getInputEvents,
     },
@@ -100,6 +105,7 @@ const tableColumnComponents = computed(() => ({
         props: {
             type: 'number',
             min: 0,
+            dense: true,
         },
         event: getInputEvents,
     },
@@ -108,6 +114,7 @@ const tableColumnComponents = computed(() => ({
         props: {
             type: 'number',
             min: 0,
+            dense: true,
         },
         event: getInputEvents,
     },
@@ -116,6 +123,7 @@ const tableColumnComponents = computed(() => ({
         props: {
             type: 'number',
             min: 0,
+            dense: true,
         },
         event: getInputEvents,
     },
@@ -124,6 +132,7 @@ const tableColumnComponents = computed(() => ({
         props: {
             type: 'number',
             min: 0,
+            dense: true,
         },
         event: getInputEvents,
     },
@@ -276,7 +285,7 @@ const toggleGroupingMode = async (buy, mode) => {
     }
 };
 
-const showLockIcon = (groupingMode, mode) => {
+const lockIconType = (groupingMode, mode) => {
     if (mode === 'packing') {
         return groupingMode === 2 ? 'lock' : 'lock_open';
     } else {
@@ -320,17 +329,21 @@ const showLockIcon = (groupingMode, mode) => {
                 :columns="entriesTableColumns"
                 selection="multiple"
                 row-key="id"
-                hide-bottom
                 class="full-width q-mt-md"
                 :grid="$q.screen.lt.md"
                 v-model:selected="rowsSelected"
+                :no-data-label="t('globals.noResults')"
             >
                 <template #body="props">
                     <QTr>
                         <QTd>
                             <QCheckbox v-model="props.selected" />
                         </QTd>
-                        <QTd v-for="col in props.cols" :key="col.name">
+                        <QTd
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            style="max-width: 100px"
+                        >
                             <component
                                 :is="tableColumnComponents[col.name].component"
                                 v-bind="tableColumnComponents[col.name].props"
@@ -350,7 +363,7 @@ const showLockIcon = (groupingMode, mode) => {
                                 >
                                     <QBtn
                                         :icon="
-                                            showLockIcon(props.row.groupingMode, col.name)
+                                            lockIconType(props.row.groupingMode, col.name)
                                         "
                                         @click="toggleGroupingMode(props.row, col.name)"
                                         class="cursor-pointer"
@@ -359,6 +372,16 @@ const showLockIcon = (groupingMode, mode) => {
                                         dense
                                         unelevated
                                         push
+                                        :style="{
+                                            'font-variation-settings': `'FILL' ${
+                                                lockIconType(
+                                                    props.row.groupingMode,
+                                                    col.name
+                                                ) === 'lock'
+                                                    ? 1
+                                                    : 0
+                                            }`,
+                                        }"
                                     />
                                 </template>
                                 <template
@@ -397,7 +420,7 @@ const showLockIcon = (groupingMode, mode) => {
                     </QTr>
                     <!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->
                     <QTr v-if="props.rowIndex !== rows.length - 1" class="separation-row">
-                        <QTd colspan="12" style="height: 24px" />
+                        <QTd colspan="12" class="vn-table-separation-row" />
                     </QTr>
                 </template>
                 <template #item="props">
@@ -448,9 +471,6 @@ const showLockIcon = (groupingMode, mode) => {
 </template>
 
 <style lang="scss" scoped>
-.separation-row {
-    background-color: var(--vn-gray) !important;
-}
 .grid-style-transition {
     transition: transform 0.28s, background-color 0.28s;
 }

src/pages/Entry/Card/EntryDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -7,6 +7,7 @@ import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
 
+import { useState } from 'src/composables/useState';
 import { toDate } from 'src/filters';
 import { usePrintService } from 'composables/usePrintService';
 
@@ -25,6 +26,8 @@ const $props = defineProps({
 const route = useRoute();
 const { t } = useI18n();
 const { openReport } = usePrintService();
+const state = useState();
+const entryDescriptorRef = ref(null);
 
 const entryFilter = {
     include: [
@@ -71,6 +74,8 @@ const data = ref(useCardDescription());
 const setData = (entity) =>
     (data.value = useCardDescription(entity.supplier.nickname, entity.id));
 
+const currentEntry = computed(() => state.get('entry'));
+
 const getEntryRedirectionFilter = (entry) => {
     let entryTravel = entry && entry.travel;
 
@@ -95,17 +100,20 @@ const getEntryRedirectionFilter = (entry) => {
 const showEntryReport = () => {
     openReport(`Entries/${route.params.id}/entry-order-pdf`);
 };
+
+watch;
 </script>
 
 <template>
     <CardDescriptor
+        ref="entryDescriptorRef"
         module="Entry"
         :url="`Entries/${entityId}`"
         :filter="entryFilter"
         :title="data.title"
         :subtitle="data.subtitle"
         @on-fetch="setData"
-        data-key="entryData"
+        data-key="entry"
     >
         <template #menu="{ entity }">
             <QItem v-ripple clickable @click="showEntryReport(entity)">
@@ -126,17 +134,17 @@ const showEntryReport = () => {
                 :value="entity.travel?.warehouseOut?.name"
             />
         </template>
-        <template #icons="{ entity }">
+        <template #icons>
             <QCardActions class="q-gutter-x-md">
                 <QIcon
-                    v-if="entity.isExcludedFromAvailable"
+                    v-if="currentEntry.isExcludedFromAvailable"
                     name="vn:inventory"
                     color="primary"
                     size="xs"
                 >
                     <QTooltip>{{ t('Inventory entry') }}</QTooltip>
                 </QIcon>
-                <QIcon v-if="entity.isRaid" name="vn:web" color="primary" size="xs">
+                <QIcon v-if="currentEntry.isRaid" name="vn:net" color="primary" size="xs">
                     <QTooltip>{{ t('Virtual entry') }}</QTooltip>
                 </QIcon>
             </QCardActions>

src/pages/Entry/Card/EntrySummary.vue

@@ -165,20 +165,27 @@ const fetchEntryBuys = async () => {
         @on-fetch="(data) => setEntryData(data)"
     >
         <template #header-left>
-            <a class="header-link" :href="entryUrl">
+            <router-link
+                v-if="route.name !== 'EntrySummary'"
+                :to="{ name: 'EntrySummary', params: { id: entityId } }"
+                class="header link"
+                :href="entryUrl"
+            >
                 <QIcon name="open_in_new" color="white" size="sm" />
-            </a>
+            </router-link>
         </template>
         <template #header>
             <span>{{ entry.id }} - {{ entry.supplier.nickname }}</span>
         </template>
-
         <template #body>
             <QCard class="vn-one">
-                <a class="header header-link" :href="`#/entry/${entityId}/basic-data`">
+                <router-link
+                    :to="{ name: 'EntryBasicData', params: { id: entityId } }"
+                    class="header header-link"
+                >
                     {{ t('globals.summary.basicData') }}
                     <QIcon name="open_in_new" />
-                </a>
+                </router-link>
 
                 <VnLv :label="t('entry.summary.commission')" :value="entry.commission" />
 
@@ -192,37 +199,15 @@ const fetchEntryBuys = async () => {
                     :label="t('entry.summary.invoiceNumber')"
                     :value="entry.invoiceNumber"
                 />
-                <QCheckbox
-                    :label="t('entry.summary.ordered')"
-                    v-model="entry.isOrdered"
-                    :disable="true"
-                />
-                <QCheckbox
-                    :label="t('entry.summary.confirmed')"
-                    v-model="entry.isConfirmed"
-                    :disable="true"
-                />
-                <QCheckbox
-                    :label="t('entry.summary.booked')"
-                    v-model="entry.isBooked"
-                    :disable="true"
-                />
-                <QCheckbox
-                    :label="t('entry.summary.raid')"
-                    v-model="entry.isRaid"
-                    :disable="true"
-                />
-                <QCheckbox
-                    :label="t('entry.summary.excludedFromAvailable')"
-                    v-model="entry.isExcludedFromAvailable"
-                    :disable="true"
-                />
             </QCard>
             <QCard class="vn-one">
-                <a class="header header-link" :href="entryUrl">
-                    {{ t('Travel data') }}
+                <router-link
+                    :to="{ name: 'EntryBasicData', params: { id: entityId } }"
+                    class="header header-link"
+                >
+                    {{ t('globals.summary.basicData') }}
                     <QIcon name="open_in_new" />
-                </a>
+                </router-link>
 
                 <VnLv :label="t('entry.summary.travelReference')">
                     <template #value>
@@ -250,7 +235,7 @@ const fetchEntryBuys = async () => {
 
                 <QCheckbox
                     :label="t('entry.summary.travelDelivered')"
-                    v-model="entry.isDelivered"
+                    v-model="entry.travel.isDelivered"
                     :disable="true"
                 />
                 <VnLv
@@ -265,7 +250,41 @@ const fetchEntryBuys = async () => {
 
                 <QCheckbox
                     :label="t('entry.summary.travelReceived')"
-                    v-model="entry.isReceived"
+                    v-model="entry.travel.isReceived"
+                    :disable="true"
+                />
+            </QCard>
+            <QCard class="vn-one">
+                <router-link
+                    :to="{ name: 'TravelSummary', params: { id: entry.travel.id } }"
+                    class="header header-link"
+                >
+                    {{ t('Travel data') }}
+                    <QIcon name="open_in_new" />
+                </router-link>
+                <QCheckbox
+                    :label="t('entry.summary.ordered')"
+                    v-model="entry.isOrdered"
+                    :disable="true"
+                />
+                <QCheckbox
+                    :label="t('entry.summary.confirmed')"
+                    v-model="entry.isConfirmed"
+                    :disable="true"
+                />
+                <QCheckbox
+                    :label="t('entry.summary.booked')"
+                    v-model="entry.isBooked"
+                    :disable="true"
+                />
+                <QCheckbox
+                    :label="t('entry.summary.raid')"
+                    v-model="entry.isRaid"
+                    :disable="true"
+                />
+                <QCheckbox
+                    :label="t('entry.summary.excludedFromAvailable')"
+                    v-model="entry.isExcludedFromAvailable"
                     :disable="true"
                 />
             </QCard>
@@ -277,9 +296,9 @@ const fetchEntryBuys = async () => {
                 <QTable
                     :rows="entryBuys"
                     :columns="entriesTableColumns"
-                    hide-bottom
                     row-key="index"
                     class="full-width q-mt-md"
+                    :no-data-label="t('globals.noResults')"
                 >
                     <template #body="{ cols, row, rowIndex }">
                         <QTr no-hover>
@@ -325,11 +344,8 @@ const fetchEntryBuys = async () => {
                             </QTd>
                         </QTr>
                         <!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->
-                        <QTr
-                            v-if="rowIndex !== entryBuys.length - 1"
-                            class="separation-row"
-                        >
-                            <QTd colspan="10" style="height: 24px" />
+                        <QTr v-if="rowIndex !== entryBuys.length - 1">
+                            <QTd colspan="10" class="vn-table-separation-row" />
                         </QTr>
                     </template>
                 </QTable>
@@ -338,13 +354,7 @@ const fetchEntryBuys = async () => {
     </CardSummary>
 </template>
 
-<style lang="scss" scoped>
-.separation-row {
-    background-color: var(--vn-gray) !important;
-}
-</style>
-
 <i18n>
 es:
-    Travel data: 'Datos envío'
+    Travel data: Datos envío
 </i18n>

src/pages/Entry/EntryLatestBuys.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, ref, computed, reactive, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -8,11 +8,16 @@ import FetchedTags from 'components/ui/FetchedTags.vue';
 import EntryDescriptorProxy from './Card/EntryDescriptorProxy.vue';
 import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
 import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import EntryLatestBuysFilter from './EntryLatestBuysFilter.vue';
+import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { toDate, toCurrency } from 'src/filters';
 import { useSession } from 'composables/useSession';
 import { dashIfEmpty } from 'src/filters';
+import { useArrayData } from 'composables/useArrayData';
 
 const router = useRouter();
 const session = useSession();
@@ -21,11 +26,72 @@ const stateStore = useStateStore();
 const { t } = useI18n();
 
 const rowsFetchDataRef = ref(null);
+const itemTypesOptions = ref([]);
+const originsOptions = ref([]);
+const itemFamiliesOptions = ref([]);
+const intrastatOptions = ref([]);
+const packagingsOptions = ref([]);
 const editTableCellDialogRef = ref(null);
 const visibleColumns = ref([]);
 const allColumnNames = ref([]);
-const rows = ref([]);
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'id':
+        case 'size':
+        case 'weightByPiece':
+        case 'isActive':
+        case 'family':
+        case 'minPrice':
+        case 'packingOut':
+            return { [`i.${param}`]: value };
+        case 'name':
+        case 'description':
+            return { [`i.${param}`]: { like: `%${value}%` } };
+        case 'code':
+            return { 'it.code': value };
+        case 'intrastat':
+            return { 'intr.description': value };
+        case 'origin':
+            return { 'ori.code': value };
+        case 'landing':
+            return { [`lb.${param}`]: value };
+        case 'packing':
+        case 'grouping':
+        case 'quantity':
+        case 'entryFk':
+        case 'buyingValue':
+        case 'freightValue':
+        case 'comissionValue':
+        case 'packageValue':
+        case 'isIgnored':
+        case 'price2':
+        case 'price3':
+        case 'ektFk':
+        case 'weight':
+        case 'packagingFk':
+            return { [`b.${param}`]: value };
+    }
+};
+
+const params = reactive({});
+const arrayData = useArrayData('EntryLatestBuys', {
+    url: 'Buys/latestBuysFilter',
+    order: ['itemFk DESC'],
+    exprBuilder: exprBuilder,
+});
+const store = arrayData.store;
+const rows = computed(() => store.data);
 const rowsSelected = ref([]);
+
+const getInputEvents = (col) => {
+    return col.columnFilter.type === 'select'
+        ? { 'update:modelValue': () => applyColumnFilter(col) }
+        : {
+              'keyup.enter': () => applyColumnFilter(col),
+          };
+};
+
 const columns = computed(() => [
     {
         label: t('entry.latestBuys.picture'),
@@ -37,12 +103,32 @@ const columns = computed(() => [
         name: 'itemFk',
         field: 'itemFk',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.packing'),
         field: 'packing',
         name: 'packing',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => dashIfEmpty(val),
     },
     {
@@ -50,6 +136,16 @@ const columns = computed(() => [
         field: 'grouping',
         name: 'grouping',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => dashIfEmpty(val),
     },
     {
@@ -57,12 +153,32 @@ const columns = computed(() => [
         field: 'quantity',
         name: 'quantity',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('globals.description'),
         field: 'description',
         name: 'description',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => dashIfEmpty(val),
     },
     {
@@ -70,35 +186,104 @@ const columns = computed(() => [
         field: 'size',
         name: 'size',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.tags'),
         name: 'tags',
         align: 'left',
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.type'),
         field: 'code',
         name: 'type',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelectFilter,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: itemTypesOptions.value,
+                'option-value': 'code',
+                'option-label': 'code',
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.intrastat'),
         field: 'intrastat',
         name: 'intrastat',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelectFilter,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: intrastatOptions.value,
+                'option-value': 'description',
+                'option-label': 'description',
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.origin'),
         field: 'origin',
         name: 'origin',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelectFilter,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: originsOptions.value,
+                'option-value': 'code',
+                'option-label': 'code',
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.weightByPiece'),
         field: 'weightByPiece',
         name: 'weightByPiece',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+
         format: (val) => dashIfEmpty(val),
     },
     {
@@ -106,24 +291,67 @@ const columns = computed(() => [
         field: 'isActive',
         name: 'isActive',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.family'),
         field: 'family',
         name: 'family',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelectFilter,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: itemFamiliesOptions.value,
+                'option-value': 'code',
+                'option-label': 'code',
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.entryFk'),
         field: 'entryFk',
         name: 'entryFk',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.buyingValue'),
         field: 'buyingValue',
         name: 'buyingValue',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => toCurrency(val),
     },
     {
@@ -131,6 +359,16 @@ const columns = computed(() => [
         field: 'freightValue',
         name: 'freightValue',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => toCurrency(val),
     },
     {
@@ -138,6 +376,16 @@ const columns = computed(() => [
         field: 'comissionValue',
         name: 'comissionValue',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => toCurrency(val),
     },
     {
@@ -145,6 +393,16 @@ const columns = computed(() => [
         field: 'packageValue',
         name: 'packageValue',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => toCurrency(val),
     },
     {
@@ -152,12 +410,33 @@ const columns = computed(() => [
         field: 'isIgnored',
         name: 'isIgnored',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.price2'),
         field: 'price2',
         name: 'price2',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+
         format: (val) => toCurrency(val),
     },
     {
@@ -165,6 +444,16 @@ const columns = computed(() => [
         field: 'price3',
         name: 'price3',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => toCurrency(val),
     },
     {
@@ -172,6 +461,16 @@ const columns = computed(() => [
         field: 'minPrice',
         name: 'minPrice',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => toCurrency(val),
     },
     {
@@ -179,6 +478,16 @@ const columns = computed(() => [
         field: 'ektFk',
         name: 'ektFk',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => dashIfEmpty(val),
     },
     {
@@ -186,18 +495,51 @@ const columns = computed(() => [
         field: 'weight',
         name: 'weight',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.packagingFk'),
         field: 'packagingFk',
         name: 'packagingFk',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelectFilter,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: packagingsOptions.value,
+                'option-value': 'id',
+                'option-label': 'id',
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.packingOut'),
         field: 'packingOut',
         name: 'packingOut',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => dashIfEmpty(val),
     },
     {
@@ -205,6 +547,16 @@ const columns = computed(() => [
         field: 'landing',
         name: 'landing',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => toDate(val),
     },
 ]);
@@ -234,20 +586,55 @@ const redirectToEntryBuys = (entryFk) => {
     router.push({ name: 'EntryBuys', params: { id: entryFk } });
 };
 
+const applyColumnFilter = async (col) => {
+    try {
+        params[col.field] = col.columnFilter.filterValue;
+        await arrayData.addFilter({ params });
+    } catch (err) {
+        console.error('Error applying column filter', err);
+    }
+};
+
 onMounted(async () => {
     stateStore.rightDrawer = true;
     const filteredColumns = columns.value.filter((col) => col.name !== 'picture');
     allColumnNames.value = filteredColumns.map((col) => col.name);
+    await arrayData.fetch({ append: false });
 });
+
+onUnmounted(() => (stateStore.rightDrawer = false));
 </script>
 
 <template>
     <FetchData
-        ref="rowsFetchDataRef"
-        url="Buys/latestBuysFilter"
-        :filter="{ order: 'itemFk DESC', limit: 20 }"
-        @on-fetch="(data) => (rows = data)"
+        url="ItemTypes"
+        :filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
         auto-load
+        @on-fetch="(data) => (itemTypesOptions = data)"
+    />
+    <FetchData
+        url="Origins"
+        :filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
+        auto-load
+        @on-fetch="(data) => (originsOptions = data)"
+    />
+    <FetchData
+        url="ItemFamilies"
+        :filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
+        auto-load
+        @on-fetch="(data) => (itemFamiliesOptions = data)"
+    />
+    <FetchData
+        url="Packagings"
+        :filter="{ fields: ['id'], order: 'id ASC', limit: 30 }"
+        auto-load
+        @on-fetch="(data) => (packagingsOptions = data)"
+    />
+    <FetchData
+        url="Intrastats"
+        :filter="{ fields: ['description'], order: 'description ASC', limit: 30 }"
+        auto-load
+        @on-fetch="(data) => (intrastatOptions = data)"
     />
     <QToolbar class="bg-vn-dark justify-end">
         <div id="st-data">
@@ -261,19 +648,43 @@ onMounted(async () => {
         <QSpace />
         <div id="st-actions"></div>
     </QToolbar>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <EntryLatestBuysFilter data-key="EntryLatestBuys" :tags="tags" />
+        </QScrollArea>
+    </QDrawer>
     <QPage class="column items-center q-pa-md">
         <QTable
             :rows="rows"
             :columns="columns"
-            hide-bottom
             selection="multiple"
             row-key="id"
             :pagination="{ rowsPerPage: 0 }"
             class="full-width q-mt-md"
             :visible-columns="visibleColumns"
             v-model:selected="rowsSelected"
+            :no-data-label="t('globals.noResults')"
             @row-click="(_, row) => redirectToEntryBuys(row.entryFk)"
         >
+            <template #top-row="{ cols }">
+                <QTr>
+                    <QTd />
+                    <QTd
+                        v-for="(col, index) in cols"
+                        :key="index"
+                        style="max-width: 100px"
+                    >
+                        <component
+                            :is="col.columnFilter.component"
+                            v-if="col.name !== 'picture'"
+                            v-model="col.columnFilter.filterValue"
+                            v-bind="col.columnFilter.attrs"
+                            v-on="col.columnFilter.event(col)"
+                            dense
+                        />
+                    </QTd>
+                </QTr>
+            </template>
             <template #body-cell-picture="{ row }">
                 <QTd>
                     <QImg
@@ -288,9 +699,10 @@ onMounted(async () => {
             </template>
             <template #body-cell-itemFk="{ row }">
                 <QTd @click.stop>
-                    <QBtn flat color="blue">
+                    <QBtn flat color="primary">
                         {{ row.itemFk }}
                     </QBtn>
+                    <ItemDescriptorProxy :id="row.itemFk" />
                 </QTd>
             </template>
             <template #body-cell-tags="{ row }">
@@ -300,7 +712,7 @@ onMounted(async () => {
             </template>
             <template #body-cell-entryFk="{ row }">
                 <QTd @click.stop>
-                    <QBtn flat color="blue">
+                    <QBtn flat color="primary">
                         <EntryDescriptorProxy :id="row.entryFk" />
                         {{ row.entryFk }}
                     </QBtn>

src/pages/Entry/EntryLatestBuysFilter.vue

@@ -0,0 +1,474 @@
+<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 VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
+
+import axios from 'axios';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const itemCategories = ref([]);
+const selectedCategoryFk = ref(null);
+const selectedTypeFk = ref(null);
+const itemTypesOptions = ref([]);
+const itemTypeWorkersOptions = 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="TicketRequests/getItemTypeWorker"
+        limit="30"
+        auto-load
+        :filter="{ fields: ['id', 'nickname'], order: 'nickname ASC', limit: 30 }"
+        @on-fetch="(data) => (itemTypeWorkersOptions = 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="['tags']"
+        @init="onFilterInit"
+        @remove="clearFilter"
+    >
+        <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(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #customTags="{ tags: customTags, params }">
+            <template v-for="tag in customTags" :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>
+                    <VnSelectFilter
+                        :label="t('params.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>
+                    </VnSelectFilter>
+                </QItemSection>
+            </QItem>
+            <QSeparator />
+            <QItem class="q-my-md">
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.salesPersonFk')"
+                        v-model="params.salesPersonFk"
+                        :options="itemTypeWorkersOptions"
+                        option-value="id"
+                        option-label="nickname"
+                        dense
+                        outlined
+                        rounded
+                        use-input
+                        @update:model-value="searchFn()"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-my-md">
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.supplier')"
+                        v-model="params.supplierFk"
+                        :options="suppliersOptions"
+                        option-value="id"
+                        option-label="name"
+                        dense
+                        outlined
+                        rounded
+                        use-input
+                        @update:model-value="searchFn()"
+                    >
+                        <template #option="{ itemProps, opt }">
+                            <QItem v-bind="itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ opt.name }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        {{ opt.nickname }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </QItemSection>
+            </QItem>
+            <QItem class="q-my-md">
+                <QItemSection>
+                    <VnInputDate
+                        :label="t('params.from')"
+                        v-model="params.from"
+                        is-outlined
+                        @update:model-value="searchFn()"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-my-md">
+                <QItemSection>
+                    <VnInputDate
+                        :label="t('params.to')"
+                        v-model="params.to"
+                        is-outlined
+                        @update:model-value="searchFn()"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('params.active')"
+                        v-model="params.active"
+                        toggle-indeterminate
+                        @update:model-value="searchFn()"
+                    />
+                </QItemSection>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('params.visible')"
+                        v-model="params.visible"
+                        toggle-indeterminate
+                        @update:model-value="searchFn()"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('params.floramondo')"
+                        v-model="params.floramondo"
+                        toggle-indeterminate
+                        @update:model-value="searchFn()"
+                    />
+                </QItemSection>
+            </QItem>
+
+            <QItem
+                v-for="(value, index) in tagValues"
+                :key="value"
+                class="q-mt-md filter-value"
+            >
+                <QItemSection class="col">
+                    <VnSelectFilter
+                        :label="t('params.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">
+                    <VnSelectFilter
+                        v-if="!value?.selectedTag?.isFree && value.valueOptions"
+                        :label="t('params.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"
+                        class="filter-input"
+                        @update:model-value="applyTags(params, searchFn)"
+                    />
+                    <VnInput
+                        v-else
+                        v-model="value.value"
+                        :label="t('params.value')"
+                        :disable="!value"
+                        is-outlined
+                        class="filter-input"
+                        :is-clearable="false"
+                        @keyup.enter="applyTags(params, searchFn)"
+                    />
+                </QItemSection>
+                <QIcon
+                    name="delete"
+                    class="filter-icon"
+                    @click="removeTag(index, params, searchFn)"
+                />
+            </QItem>
+            <QItem class="q-mt-lg">
+                <QIcon
+                    name="add_circle"
+                    class="filter-icon"
+                    @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-light-gray);
+
+        &.active {
+            background-color: $primary;
+        }
+    }
+}
+
+.filter-icon {
+    font-size: 24px;
+    color: $primary;
+    padding: 0 4px;
+    cursor: pointer;
+}
+
+.filter-input {
+    flex-shrink: 1;
+    min-width: 0;
+}
+
+.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
+        typeFk: Type
+        tag: Tag
+        value: Value
+es:
+    params:
+        supplier: Proveedor
+        from: Desde
+        to: Hasta
+        active: Activo
+        visible: Visible
+        floramondo: Floramondo
+        salesPersonFk: Comprador
+        categoryFk: Categoría
+        typeFk: Tipo
+        tag: Etiqueta
+        value: Valor
+    Plant: Planta
+    Flower: Flor
+    Handmade: Confección
+    Green: Verde
+    Accessories: Complemento
+    Fruit: Fruta
+</i18n>

src/pages/Entry/EntryList.vue

@@ -74,7 +74,7 @@ onMounted(async () => {
                             </QIcon>
                             <QIcon
                                 v-if="row.isRaid"
-                                name="vn:web"
+                                name="vn:net"
                                 color="primary"
                                 size="xs"
                             >

src/pages/InvoiceIn/Card/InvoiceInDueDay.vue

@@ -75,7 +75,12 @@ async function insert() {
 }
 </script>
 <template>
-    <FetchData url="Banks" auto-load limit="30" @on-fetch="(data) => (banks = data)" />
+    <FetchData
+        url="Accountings"
+        auto-load
+        limit="30"
+        @on-fetch="(data) => (banks = data)"
+    />
     <CrudModel
         v-if="invoiceIn"
         ref="invoiceInFormRef"

src/pages/InvoiceOut/Card/InvoiceOutSummary.vue

@@ -95,7 +95,11 @@ const ticketsColumns = ref([
 </script>
 
 <template>
-    <CardSummary ref="summary" :url="`InvoiceOuts/${entityId}/summary`">
+    <CardSummary
+        ref="summary"
+        :url="`InvoiceOuts/${entityId}/summary`"
+        :entity-id="entityId"
+    >
         <template #header="{ entity: { invoiceOut } }">
             <div>{{ invoiceOut.ref }} - {{ invoiceOut.client?.socialName }}</div>
         </template>

src/pages/Route/Card/RouteSummary.vue

@@ -124,12 +124,11 @@ const ticketColumns = ref([
         </Teleport>
     </template>
     <div class="q-pa-md full-width">
-        <CardSummary ref="summary" :url="`Routes/${entityId}/summary`">
-            <template #header-left>
-                <RouterLink :to="{ name: `RouteSummary`, params: { id: entityId } }">
-                    <QIcon name="open_in_new" color="white" size="sm" />
-                </RouterLink>
-            </template>
+        <CardSummary
+            ref="summary"
+            :url="`Routes/${entityId}/summary`"
+            :entity-id="entityId"
+        >
             <template #header="{ entity }">
                 <span>{{ `${entity?.route.id} - ${entity?.route?.description}` }}</span>
             </template>

src/pages/Route/Cmr/CmrList.vue

@@ -91,6 +91,24 @@ function downloadPdfs() {
 }
 </script>
 <template>
+      <template v-if="stateStore.isHeaderMounted()">
+
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
     <div class="column items-center">
         <div class="list">
             <VnPaginate

src/pages/Supplier/Card/SupplierAccounts.vue

@@ -18,13 +18,16 @@ const quasar = useQuasar();
 const { notify } = useNotify();
 const route = useRoute();
 const { t } = useI18n();
+
+const bankEntitiesRef = ref(null);
 const supplier = ref(null);
 const supplierAccountRef = ref(null);
 const wireTransferFk = ref(null);
 const bankEntitiesOptions = ref([]);
 
-const onBankEntityCreated = (data) => {
-    bankEntitiesOptions.value.push(data);
+const onBankEntityCreated = async (dataSaved, rowData) => {
+    await bankEntitiesRef.value.fetch();
+    rowData.bankEntityFk = dataSaved.id;
 };
 
 const onChangesSaved = () => {
@@ -63,6 +66,7 @@ onMounted(() => {
 </script>
 <template>
     <FetchData
+        ref="bankEntitiesRef"
         url="BankEntities"
         @on-fetch="(data) => (bankEntitiesOptions = data)"
         auto-load
@@ -114,13 +118,16 @@ onMounted(() => {
                             :label="t('worker.create.bankEntity')"
                             v-model="row.bankEntityFk"
                             :options="bankEntitiesOptions"
-                            option-label="name"
+                            option-label="bic"
                             option-value="id"
                             hide-selected
                         >
                             <template #form>
                                 <CreateBankEntityForm
-                                    @on-data-saved="onBankEntityCreated($event)"
+                                    @on-data-saved="
+                                        (_, requestResponse) =>
+                                            onBankEntityCreated(requestResponse, row)
+                                    "
                                     :show-entity-field="false"
                                 />
                             </template>

src/pages/Supplier/Card/SupplierAddresses.vue

@@ -83,8 +83,13 @@ const redirectToUpdateView = (addressData) => {
         <QPageSticky :offset="[20, 20]">
             <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
             <QTooltip>
-                {{ t('supplier.list.newSupplier') }}
+                {{ t('New address') }}
             </QTooltip>
         </QPageSticky>
     </QPage>
 </template>
+
+<i18n>
+es:
+    New address: Nueva dirección
+</i18n>

src/pages/Supplier/Card/SupplierBasicData.vue

@@ -26,6 +26,7 @@ const workersOptions = ref([]);
         :url-update="`Suppliers/${route.params.id}`"
         model="supplier"
         auto-load
+        :clear-store-on-unmount="false"
     >
         <template #form="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">

src/pages/Supplier/Card/SupplierBillingData.vue

@@ -33,6 +33,7 @@ const formatPayDems = (data) => {
         :url-update="`Suppliers/${route.params.id}`"
         model="supplier"
         auto-load
+        :clear-store-on-unmount="false"
     >
         <template #form="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">

src/pages/Supplier/Card/SupplierContacts.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, nextTick } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -11,6 +11,15 @@ const route = useRoute();
 const { t } = useI18n();
 const supplierContactRef = ref(null);
 
+const insertRow = () => {
+    supplierContactRef.value.insert();
+    nextTick(() => {
+        const inputs = document.querySelectorAll('[input-name-focusable]');
+        const lastInput = inputs[inputs.length - 1];
+        if (lastInput) lastInput.focus();
+    });
+};
+
 onMounted(() => {
     if (supplierContactRef.value) supplierContactRef.value.reload();
 });
@@ -38,6 +47,7 @@ onMounted(() => {
                     <VnRow class="row q-gutter-md">
                         <div class="col">
                             <VnInput
+                                input-name-focusable
                                 :label="t('supplier.contacts.name')"
                                 v-model="row.name"
                             />
@@ -92,7 +102,7 @@ onMounted(() => {
                         size="sm"
                         class="cursor-pointer"
                         color="primary"
-                        @click="supplierContactRef.insert()"
+                        @click="insertRow()"
                     >
                         <QTooltip>
                             {{ t('Add contact') }}

src/pages/Supplier/Card/SupplierDescriptor.vue

@@ -9,6 +9,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import { toDateString } from 'src/filters';
 import useCardDescription from 'src/composables/useCardDescription';
 import { getUrl } from 'src/composables/getUrl';
+import { useState } from 'src/composables/useState';
 
 const $props = defineProps({
     id: {
@@ -21,6 +22,7 @@ const $props = defineProps({
 const route = useRoute();
 const { t } = useI18n();
 const url = ref();
+const state = useState();
 
 const filter = {
     fields: [
@@ -71,6 +73,8 @@ const setData = (entity) => {
     data.value = useCardDescription(entity.ref, entity.id);
 };
 
+const supplier = computed(() => state.get('supplier'));
+
 const getEntryQueryParams = (supplier) => {
     if (!supplier) return null;
 
@@ -101,7 +105,7 @@ const getEntryQueryParams = (supplier) => {
         :subtitle="data.subtitle"
         :filter="filter"
         @on-fetch="setData"
-        data-key="Supplier"
+        data-key="supplier"
     >
         <template #header-extra-action>
             <QBtn
@@ -133,10 +137,10 @@ const getEntryQueryParams = (supplier) => {
             <VnLv :label="t('supplier.summary.payDay')" :value="entity.payDay" />
             <VnLv :label="t('supplier.summary.account')" :value="entity.account" />
         </template>
-        <template #icons="{ entity }">
-            <QCardActions class="q-gutter-x-md">
+        <template #icons>
+            <QCardActions v-if="supplier" class="q-gutter-x-md">
                 <QIcon
-                    v-if="!entity.isActive"
+                    v-if="!supplier.isActive"
                     name="vn:disabled"
                     color="primary"
                     size="xs"
@@ -144,7 +148,7 @@ const getEntryQueryParams = (supplier) => {
                     <QTooltip>{{ t('Inactive supplier') }}</QTooltip>
                 </QIcon>
                 <QIcon
-                    v-if="!entity.isSerious"
+                    v-if="!supplier.isSerious"
                     name="vn:supplierfalse"
                     color="primary"
                     size="xs"
@@ -167,6 +171,7 @@ const getEntryQueryParams = (supplier) => {
                     <QTooltip>{{ t('All entries with current supplier') }}</QTooltip>
                 </QBtn>
                 <QBtn
+                    v-if="entity.client?.fi"
                     :to="{
                         name: 'CustomerCard',
                         params: { id: entity.client?.id },

src/pages/Supplier/Card/SupplierFiscalData.vue

@@ -53,6 +53,7 @@ function handleLocation(data, location) {
         :url-update="`Suppliers/${route.params.id}/updateFiscalData`"
         model="supplier"
         auto-load
+        :clear-store-on-unmount="false"
     >
         <template #form="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">

src/pages/Supplier/Card/SupplierSummary.vue

@@ -51,25 +51,20 @@ const isAdministrative = computed(() => {
         :url="`Suppliers/${entityId}/getSummary`"
         @on-fetch="(data) => setData(data)"
     >
-        <template #header-left>
-            <a v-if="isAdministrative" class="header header-link" :href="supplierUrl">
-                <QIcon name="open_in_new" color="white" size="sm" />
-            </a>
-        </template>
         <template #header>
             <span>{{ supplier.name }} - {{ supplier.id }}</span>
         </template>
 
         <template #body>
             <QCard class="vn-one">
-                <a
+                <router-link
                     v-if="isAdministrative"
-                    class="header header-link"
-                    :href="`#/supplier/${entityId}/basic-data`"
+                    class="header link"
+                    :to="{ name: 'SupplierBasicData', params: { id: entityId } }"
                 >
                     {{ t('globals.summary.basicData') }}
                     <QIcon name="open_in_new" />
-                </a>
+                </router-link>
                 <span v-else> {{ t('globals.summary.basicData') }}</span>
                 <VnLv label="Id" :value="supplier.id" />
                 <VnLv label="Alias" :value="supplier.nickname" />
@@ -98,14 +93,14 @@ const isAdministrative = computed(() => {
                 />
             </QCard>
             <QCard class="vn-one">
-                <a
+                <router-link
                     v-if="isAdministrative"
-                    class="header header-link"
-                    :href="`#/supplier/${entityId}/billing-data`"
+                    class="header link"
+                    :to="{ name: 'SupplierBillingData', params: { id: entityId } }"
                 >
                     {{ t('supplier.summary.billingData') }}
                     <QIcon name="open_in_new" />
-                </a>
+                </router-link>
                 <span v-else> {{ t('supplier.summary.billingData') }}</span>
                 <VnLv
                     :label="t('supplier.summary.payMethod')"
@@ -121,14 +116,14 @@ const isAdministrative = computed(() => {
                 <VnLv :label="t('supplier.summary.account')" :value="supplier.account" />
             </QCard>
             <QCard class="vn-one">
-                <a
+                <router-link
                     v-if="isAdministrative"
-                    class="header header-link"
-                    :href="`#/supplier/${entityId}/fiscal-data`"
+                    class="header link"
+                    :to="{ name: 'SupplierFiscalData', params: { id: entityId } }"
                 >
                     {{ t('supplier.summary.fiscalData') }}
                     <QIcon name="open_in_new" />
-                </a>
+                </router-link>
                 <span v-else> {{ t('supplier.summary.fiscalData') }}</span>
                 <VnLv
                     :label="t('supplier.summary.sageTaxType')"
@@ -156,14 +151,14 @@ const isAdministrative = computed(() => {
                 />
             </QCard>
             <QCard class="vn-one">
-                <a
+                <router-link
                     v-if="isAdministrative"
-                    class="header header-link"
-                    :href="`#/supplier/${entityId}/fiscal-data`"
+                    class="header link"
+                    :to="{ name: 'SupplierFiscalData', params: { id: entityId } }"
                 >
                     {{ t('supplier.summary.fiscalAddress') }}
                     <QIcon name="open_in_new" />
-                </a>
+                </router-link>
                 <span v-else> {{ t('supplier.summary.fiscalAddress') }}</span>
                 <VnLv :label="t('supplier.summary.socialName')" :value="supplier.name" />
                 <VnLv :label="t('supplier.summary.taxNumber')" :value="supplier.nif" />

src/pages/Supplier/SupplierList.vue

@@ -42,7 +42,7 @@ const redirectToCreateView = () => {
             </QScrollArea>
         </QDrawer>
         <div class="vn-card-list">
-            <VnPaginate data-key="SuppliersList" url="Suppliers/filter" auto-load>
+            <VnPaginate data-key="SuppliersList" url="Suppliers/filter">
                 <template #body="{ rows }">
                     <CardList
                         v-for="row of rows"

src/pages/Travel/Card/TravelSummary.vue

@@ -236,19 +236,9 @@ async function setTravelData(travelData) {
         :url="`Travels/${entityId}/getTravel`"
         @on-fetch="(data) => setTravelData(data)"
     >
-        <template #header-left>
-            <router-link
-                class="header link"
-                :to="{ name: 'TravelSummary', params: { id: entityId } }"
-            >
-                <QIcon name="open_in_new" color="white" size="sm" />
-                <QTooltip>{{ t('travel.pageTitles.summary') }}</QTooltip>
-            </router-link>
-        </template>
         <template #header>
             <span>{{ travel.ref }} - {{ travel.id }}</span>
         </template>
-
         <template #header-right>
             <QBtn color="white" dense flat icon="more_vert" round size="md">
                 <QTooltip>

src/pages/Worker/Card/WorkerPda.vue

@@ -0,0 +1,140 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { onMounted, ref, computed } from 'vue';
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import useNotify from 'src/composables/useNotify.js';
+import axios from 'axios';
+import { useRole } from 'src/composables/useRole';
+
+const route = useRoute();
+const { t } = useI18n();
+const { notify } = useNotify();
+const { hasAny } = useRole();
+
+const fetchCurrentDeviceRef = ref(null);
+const deviceProductionsFilter = {
+    fields: ['id', 'serialNumber', 'modelFk'],
+    where: { stateFk: 'idle' },
+    order: 'id',
+};
+const deviceProductionsOptions = ref([]);
+const newPDA = ref({});
+const currentPDA = ref(null);
+
+const isAllowedToEdit = computed(() => hasAny(['hr', 'productionAssi']));
+
+const setCurrentPDA = (data) => {
+    currentPDA.value = data;
+    currentPDA.value.description = `ID: ${currentPDA.value.deviceProductionFk} ${t(
+        'worker.pda.model'
+    )}: ${currentPDA.value.deviceProduction.modelFk} ${t('worker.pda.serialNumber')}: ${
+        currentPDA.value.deviceProduction.serialNumber
+    }`;
+};
+
+const deallocatePDA = async (data) => {
+    try {
+        await axios.post(`Workers/${route.params.id}/deallocatePDA`, {
+            pda: currentPDA.value.deviceProductionFk,
+        });
+        data.pda = null;
+        currentPDA.value = null;
+        await fetchCurrentDeviceRef.value.fetch();
+        notify(t('PDA deallocated'), 'positive');
+    } catch (err) {
+        console.error('Error deallocating PDA');
+    }
+};
+
+onMounted(async () => await fetchCurrentDeviceRef.value.fetch());
+</script>
+
+<template>
+    <FetchData
+        url="DeviceProductions"
+        :filter="deviceProductionsFilter"
+        auto-load
+        @on-fetch="(data) => (deviceProductionsOptions = data)"
+    />
+    <FetchData
+        ref="fetchCurrentDeviceRef"
+        url="DeviceProductionUsers"
+        :filter="{
+            where: { userFk: route.params.id },
+            include: { relation: 'deviceProduction' },
+        }"
+        auto-load
+        @on-fetch="(data) => setCurrentPDA(data[0])"
+    />
+    <QPage class="column items-center q-pa-md">
+        <FormModel
+            url="DeviceProductionUsers"
+            :url-create="`Workers/${route.params.id}/allocatePDA`"
+            model="DeviceProductionUser"
+            :form-initial-data="newPDA"
+            auto-load
+            :default-buttons="{ save: { label: 'globals.assign', color: 'primary' } }"
+            @on-data-saved="(_, data) => setCurrentPDA(data)"
+        >
+            <template #form="{ data }">
+                <QField
+                    v-if="currentPDA && currentPDA.description"
+                    :label="t('worker.pda.currentPDA')"
+                    :model-value="currentPDA.description"
+                    :editable="false"
+                    class="full-width"
+                >
+                    <template #control>
+                        <div tabindex="0">
+                            {{ currentPDA.description }}
+                        </div>
+                    </template>
+                    <template v-if="isAllowedToEdit" #append>
+                        <QIcon
+                            name="delete"
+                            size="sm"
+                            class="cursor-pointer"
+                            color="primary"
+                            @click="deallocatePDA(data)"
+                        >
+                            <QTooltip>
+                                {{ t('worker.pda.removePDA') }}
+                            </QTooltip>
+                        </QIcon>
+                    </template>
+                </QField>
+
+                <VnSelectFilter
+                    v-else
+                    :label="t('worker.pda.newPDA')"
+                    v-model="data.pda"
+                    :options="deviceProductionsOptions"
+                    option-label="serialNumber"
+                    option-value="id"
+                    hide-selected
+                    :disable="!isAllowedToEdit"
+                >
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            <QItemSection>
+                                <QItemLabel>ID: {{ scope.opt?.id }}</QItemLabel>
+                                <QItemLabel caption>
+                                    {{ scope.opt?.modelFk }},
+                                    {{ scope.opt?.serialNumber }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelectFilter>
+            </template>
+        </FormModel>
+    </QPage>
+</template>
+
+<i18n>
+es:
+    PDA deallocated: PDA desasignada
+</i18n>

src/router/modules/Supplier.js

@@ -6,6 +6,7 @@ export default {
     meta: {
         title: 'suppliers',
         icon: 'vn:supplier',
+        moduleName: 'Supplier',
     },
     component: RouterView,
     redirect: { name: 'SupplierMain' },

src/router/modules/claim.js

@@ -6,15 +6,15 @@ export default {
     meta: {
         title: 'claims',
         icon: 'vn:claims',
+        moduleName: 'Claim',
     },
     component: RouterView,
     redirect: { name: 'ClaimMain' },
     menus: {
-        main: ['ClaimList', 'ClaimRmaList'],
+        main: ['ClaimList'],
         card: [
             'ClaimBasicData',
             'ClaimLines',
-            'ClaimRma',
             'ClaimPhotos',
             'ClaimNotes',
             'ClaimDevelopment',
@@ -38,16 +38,6 @@ export default {
                     },
                     component: () => import('src/pages/Claim/ClaimList.vue'),
                 },
-                {
-                    name: 'ClaimRmaList',
-                    path: 'rma',
-                    meta: {
-                        title: 'rmaList',
-                        icon: 'vn:barcode',
-                        roles: ['claimManager'],
-                    },
-                    component: () => import('src/pages/Claim/ClaimRmaList.vue'),
-                },
             ],
         },
         {
@@ -84,16 +74,6 @@ export default {
                     },
                     component: () => import('src/pages/Claim/Card/ClaimLines.vue'),
                 },
-                {
-                    name: 'ClaimRma',
-                    path: 'rma',
-                    meta: {
-                        title: 'rma',
-                        icon: 'vn:barcode',
-                        roles: ['claimManager'],
-                    },
-                    component: () => import('src/pages/Claim/Card/ClaimRma.vue'),
-                },
                 {
                     name: 'ClaimPhotos',
                     path: 'photos',

src/router/modules/customer.js

@@ -6,6 +6,7 @@ export default {
     meta: {
         title: 'customers',
         icon: 'vn:client',
+        moduleName: 'Customer',
     },
     component: RouterView,
     redirect: { name: 'CustomerMain' },

src/router/modules/entry.js

@@ -6,6 +6,7 @@ export default {
     meta: {
         title: 'entries',
         icon: 'vn:entry',
+        moduleName: 'Entry',
     },
     component: RouterView,
     redirect: { name: 'EntryMain' },

src/router/modules/invoiceIn.js

@@ -6,6 +6,7 @@ export default {
     meta: {
         title: 'invoiceIns',
         icon: 'vn:invoice-in',
+        moduleName: 'InvoiceIn',
     },
     component: RouterView,
     redirect: { name: 'InvoiceInMain' },

src/router/modules/invoiceOut.js

@@ -6,6 +6,7 @@ export default {
     meta: {
         title: 'invoiceOuts',
         icon: 'vn:invoice-out',
+        moduleName: 'InvoiceOut',
     },
     component: RouterView,
     redirect: { name: 'InvoiceOutMain' },

src/router/modules/order.js

@@ -6,6 +6,7 @@ export default {
     meta: {
         title: 'order',
         icon: 'vn:basket',
+        moduleName: 'Order',
     },
     component: RouterView,
     redirect: { name: 'OrderMain' },

src/router/modules/route.js

@@ -6,6 +6,7 @@ export default {
     meta: {
         title: 'routes',
         icon: 'vn:delivery',
+        moduleName: 'Route',
     },
     component: RouterView,
     redirect: { name: 'RouteMain' },

src/router/modules/shelving.js

@@ -1,17 +1,18 @@
-import {RouterView} from "vue-router";
+import { RouterView } from 'vue-router';
 
 export default {
     path: '/shelving',
     name: 'Shelving',
     meta: {
         title: 'shelving',
-        icon: 'vn:inventory'
+        icon: 'vn:inventory',
+        moduleName: 'Shelving',
     },
     component: RouterView,
     redirect: { name: 'ShelvingMain' },
     menus: {
         main: ['ShelvingList'],
-        card: ['ShelvingBasicData', 'ShelvingLog']
+        card: ['ShelvingBasicData', 'ShelvingLog'],
     },
     children: [
         {
@@ -51,8 +52,7 @@ export default {
                     meta: {
                         title: 'summary',
                     },
-                    component: () =>
-                        import('pages/Shelving/Card/ShelvingSummary.vue'),
+                    component: () => import('pages/Shelving/Card/ShelvingSummary.vue'),
                 },
                 {
                     name: 'ShelvingBasicData',
@@ -75,6 +75,5 @@ export default {
                 },
             ],
         },
-    ]
+    ],
 };
-

src/router/modules/ticket.js

@@ -6,6 +6,7 @@ export default {
     meta: {
         title: 'tickets',
         icon: 'vn:ticket',
+        moduleName: 'Ticket',
     },
     component: RouterView,
     redirect: { name: 'TicketMain' },

src/router/modules/travel.js

@@ -6,6 +6,7 @@ export default {
     meta: {
         title: 'travel',
         icon: 'local_airport',
+        moduleName: 'Travel',
     },
     component: RouterView,
     redirect: { name: 'TravelMain' },

src/router/modules/wagon.js

@@ -6,6 +6,7 @@ export default {
     meta: {
         title: 'wagons',
         icon: 'vn:trolley',
+        moduleName: 'Wagon',
     },
     component: RouterView,
     redirect: { name: 'WagonMain' },

src/router/modules/worker.js

@@ -6,12 +6,13 @@ export default {
     meta: {
         title: 'workers',
         icon: 'vn:worker',
+        moduleName: 'Worker',
     },
     component: RouterView,
     redirect: { name: 'WorkerMain' },
     menus: {
         main: ['WorkerList', 'WorkerDepartment'],
-        card: ['WorkerNotificationsManager'],
+        card: ['WorkerNotificationsManager', 'WorkerPda'],
         departmentCard: ['BasicData'],
     },
     children: [
@@ -75,6 +76,15 @@ export default {
                     component: () =>
                         import('src/pages/Worker/Card/WorkerNotificationsManager.vue'),
                 },
+                {
+                    name: 'WorkerPda',
+                    path: 'pda',
+                    meta: {
+                        title: 'pda',
+                        icon: 'phone_android',
+                    },
+                    component: () => import('src/pages/Worker/Card/WorkerPda.vue'),
+                },
             ],
         },
     ],