Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into 6943_fix_customerSummaryTable

src/boot/keyShortcut.js

@@ -0,0 +1,34 @@
+export default {
+    mounted: function (el, binding) {
+        const shortcut = binding.value ?? '+';
+
+        const { key, ctrl, alt, callback } =
+            typeof shortcut === 'string'
+                ? {
+                      key: shortcut,
+                      ctrl: true,
+                      alt: true,
+                      callback: () =>
+                          document
+                              .querySelector(`button[shortcut="${shortcut}"]`)
+                              ?.click(),
+                  }
+                : binding.value;
+
+        const handleKeydown = (event) => {
+            if (event.key === key && (!ctrl || event.ctrlKey) && (!alt || event.altKey)) {
+                callback();
+            }
+        };
+
+        // Attach the event listener to the window
+        window.addEventListener('keydown', handleKeydown);
+
+        el._handleKeydown = handleKeydown;
+    },
+    unmounted: function (el) {
+        if (el._handleKeydown) {
+            window.removeEventListener('keydown', el._handleKeydown);
+        }
+    },
+};

src/boot/mainShortcutMixin.js

@@ -0,0 +1,38 @@
+import routes from 'src/router/modules';
+import { useRouter } from 'vue-router';
+
+let isNotified = false;
+
+export default {
+    created: function () {
+        const router = useRouter();
+        const keyBindingMap = routes
+            .filter((route) => route.meta.keyBinding)
+            .reduce((map, route) => {
+                map[route.meta.keyBinding.toLowerCase()] = route.path;
+                return map;
+            }, {});
+
+        const handleKeyDown = (event) => {
+            const { ctrlKey, altKey, key } = event;
+
+            if (ctrlKey && altKey && keyBindingMap[key] && !isNotified) {
+                event.preventDefault();
+                router.push(keyBindingMap[key]);
+                isNotified = true;
+            }
+        };
+
+        const handleKeyUp = (event) => {
+            const { ctrlKey, altKey } = event;
+
+            // Resetea la bandera cuando se sueltan las teclas ctrl o alt
+            if (!ctrlKey || !altKey) {
+                isNotified = false;
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('keyup', handleKeyUp);
+    },
+};

src/boot/quasar.js

@@ -1,6 +1,10 @@
 import { boot } from 'quasar/wrappers';
 import qFormMixin from './qformMixin';
+import mainShortcutMixin from './mainShortcutMixin';
+import keyShortcut from './keyShortcut';
 
 export default boot(({ app }) => {
     app.mixin(qFormMixin);
+    app.mixin(mainShortcutMixin);
+    app.directive('shortcut', keyShortcut);
 });

src/components/FormModel.vue

@@ -22,7 +22,7 @@ const { t } = useI18n();
 const { validate } = useValidator();
 const { notify } = useNotify();
 const route = useRoute();
-
+const myForm = ref(null);
 const $props = defineProps({
     url: {
         type: String,
@@ -109,11 +109,14 @@ const defaultButtons = computed(() => ({
         color: 'primary',
         icon: 'save',
         label: 'globals.save',
+        click: () => myForm.value.submit(),
+        type: 'submit',
     },
     reset: {
         color: 'primary',
         icon: 'restart_alt',
         label: 'globals.reset',
+        click: () => reset(),
     },
     ...$props.defaultButtons,
 }));
@@ -276,7 +279,14 @@ defineExpose({
 </script>
 <template>
     <div class="column items-center full-width">
-        <QForm @submit="save" @reset="reset" class="q-pa-md" id="formModel">
+        <QForm
+            ref="myForm"
+            v-if="formData"
+            @submit="save"
+            @reset="reset"
+            class="q-pa-md"
+            id="formModel"
+        >
             <QCard>
                 <slot
                     v-if="formData"
@@ -304,7 +314,7 @@ defineExpose({
                 :color="defaultButtons.reset.color"
                 :icon="defaultButtons.reset.icon"
                 flat
-                @click="reset"
+                @click="defaultButtons.reset.click"
                 :disable="!hasChanges"
                 :title="t(defaultButtons.reset.label)"
             />
@@ -344,7 +354,7 @@ defineExpose({
                 :label="tMobile('globals.save')"
                 color="primary"
                 icon="save"
-                @click="save"
+                @click="defaultButtons.save.click"
                 :disable="!hasChanges"
                 :title="t(defaultButtons.save.label)"
             />

src/components/NavBar.vue

@@ -24,7 +24,13 @@ const pinnedModulesRef = ref();
 <template>
     <QHeader color="white" elevated>
         <QToolbar class="q-py-sm q-px-md">
-            <QBtn @click="stateStore.toggleLeftDrawer()" icon="menu" round dense flat>
+            <QBtn
+                @click="stateStore.toggleLeftDrawer()"
+                icon="dock_to_right"
+                round
+                dense
+                flat
+            >
                 <QTooltip bottom anchor="bottom right">
                     {{ t('globals.collapseMenu') }}
                 </QTooltip>

src/components/RefundInvoiceForm.vue

@@ -0,0 +1,173 @@
+<script setup>
+import { ref, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useDialogPluginComponent } from 'quasar';
+import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'components/FetchData.vue';
+import VnSelect from 'components/common/VnSelect.vue';
+import FormPopup from './FormPopup.vue';
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+
+const $props = defineProps({
+    invoiceOutData: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const { dialogRef } = useDialogPluginComponent();
+const { t } = useI18n();
+const router = useRouter();
+const { notify } = useNotify();
+
+const rectificativeTypeOptions = ref([]);
+const siiTypeInvoiceOutsOptions = ref([]);
+const inheritWarehouse = ref(true);
+const invoiceParams = reactive({
+    id: $props.invoiceOutData?.id,
+});
+const invoiceCorrectionTypesOptions = ref([]);
+
+const refund = async () => {
+    const params = {
+        id: invoiceParams.id,
+        cplusRectificationTypeFk: invoiceParams.cplusRectificationTypeFk,
+        siiTypeInvoiceOutFk: invoiceParams.siiTypeInvoiceOutFk,
+        invoiceCorrectionTypeFk: invoiceParams.invoiceCorrectionTypeFk,
+    };
+
+    try {
+        const { data } = await axios.post('InvoiceOuts/refundAndInvoice', params);
+        notify(t('Refunded invoice'), 'positive');
+        const [id] = data?.refundId || [];
+        if (id) router.push({ name: 'InvoiceOutSummary', params: { id } });
+    } catch (err) {
+        console.error('Error refunding invoice', err);
+    }
+};
+</script>
+
+<template>
+    <FetchData
+        url="CplusRectificationTypes"
+        :filter="{ order: 'description' }"
+        @on-fetch="
+            (data) => (
+                (rectificativeTypeOptions = data),
+                (invoiceParams.cplusRectificationTypeFk = data.filter(
+                    (type) => type.description == 'I – Por diferencias'
+                )[0].id)
+            )
+        "
+        auto-load
+    />
+    <FetchData
+        url="SiiTypeInvoiceOuts"
+        :filter="{ where: { code: { like: 'R%' } } }"
+        @on-fetch="
+            (data) => (
+                (siiTypeInvoiceOutsOptions = data),
+                (invoiceParams.siiTypeInvoiceOutFk = data.filter(
+                    (type) => type.code == 'R4'
+                )[0].id)
+            )
+        "
+        auto-load
+    />
+    <FetchData
+        url="InvoiceCorrectionTypes"
+        @on-fetch="(data) => (invoiceCorrectionTypesOptions = data)"
+        auto-load
+    />
+
+    <QDialog ref="dialogRef">
+        <FormPopup
+            @on-submit="refund()"
+            :custom-submit-button-label="t('Accept')"
+            :default-cancel-button="false"
+        >
+            <template #form-inputs>
+                <VnRow>
+                    <VnSelect
+                        :label="t('Rectificative type')"
+                        :options="rectificativeTypeOptions"
+                        hide-selected
+                        option-label="description"
+                        option-value="id"
+                        v-model="invoiceParams.cplusRectificationTypeFk"
+                        :required="true"
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnSelect
+                        :label="t('Class')"
+                        :options="siiTypeInvoiceOutsOptions"
+                        hide-selected
+                        option-label="description"
+                        option-value="id"
+                        v-model="invoiceParams.siiTypeInvoiceOutFk"
+                        :required="true"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>
+                                        {{ scope.opt?.code }} -
+                                        {{ scope.opt?.description }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelect>
+                </VnRow>
+
+                <VnRow>
+                    <VnSelect
+                        :label="t('Type')"
+                        :options="invoiceCorrectionTypesOptions"
+                        hide-selected
+                        option-label="description"
+                        option-value="id"
+                        v-model="invoiceParams.invoiceCorrectionTypeFk"
+                        :required="true"
+                    /> </VnRow
+                ><VnRow>
+                    <div>
+                        <QCheckbox
+                            :label="t('Inherit warehouse')"
+                            v-model="inheritWarehouse"
+                        />
+                        <QIcon name="info" class="cursor-info q-ml-sm" size="sm">
+                            <QTooltip>{{ t('Inherit warehouse tooltip') }}</QTooltip>
+                        </QIcon>
+                    </div>
+                </VnRow>
+            </template>
+        </FormPopup>
+    </QDialog>
+</template>
+
+<i18n>
+en:
+    Refund invoice: Refund invoice
+    Rectificative type: Rectificative type
+    Class: Class
+    Type: Type
+    Refunded invoice: Refunded invoice
+    Inherit warehouse: Inherit the warehouse
+    Inherit warehouse tooltip: Select this option to inherit the warehouse when refunding the invoice
+    Accept: Accept
+    Error refunding invoice: Error refunding invoice
+es:
+    Refund invoice: Abonar factura
+    Rectificative type: Tipo rectificativa
+    Class: Clase
+    Type: Tipo
+    Refunded invoice: Factura abonada
+    Inherit warehouse: Heredar el almacén
+    Inherit warehouse tooltip: Seleccione esta opción para heredar el almacén al abonar la factura.
+    Accept: Aceptar
+    Error refunding invoice: Error abonando factura
+</i18n>

src/components/TransferInvoiceForm.vue

@@ -2,13 +2,12 @@
 import { ref, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
+import { useQuasar, useDialogPluginComponent } from 'quasar';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
 import VnSelect from 'components/common/VnSelect.vue';
 import FormPopup from './FormPopup.vue';
-import { useDialogPluginComponent } from 'quasar';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 
@@ -18,19 +17,19 @@ const $props = defineProps({
         default: () => {},
     },
 });
+
 const { dialogRef } = useDialogPluginComponent();
 const quasar = useQuasar();
 const { t } = useI18n();
 const router = useRouter();
 const { notify } = useNotify();
-const checked = ref(true);
-const transferInvoiceParams = reactive({
-    id: $props.invoiceOutData?.id,
-    refFk: $props.invoiceOutData?.ref,
-});
 
 const rectificativeTypeOptions = ref([]);
 const siiTypeInvoiceOutsOptions = ref([]);
+const checked = ref(true);
+const transferInvoiceParams = reactive({
+    id: $props.invoiceOutData?.id,
+});
 const invoiceCorrectionTypesOptions = ref([]);
 
 const selectedClient = (client) => {
@@ -44,10 +43,9 @@ const makeInvoice = async () => {
     const params = {
         id: transferInvoiceParams.id,
         cplusRectificationTypeFk: transferInvoiceParams.cplusRectificationTypeFk,
+        siiTypeInvoiceOutFk: transferInvoiceParams.siiTypeInvoiceOutFk,
         invoiceCorrectionTypeFk: transferInvoiceParams.invoiceCorrectionTypeFk,
         newClientFk: transferInvoiceParams.newClientFk,
-        refFk: transferInvoiceParams.refFk,
-        siiTypeInvoiceOutFk: transferInvoiceParams.siiTypeInvoiceOutFk,
         makeInvoice: checked.value,
     };
 
@@ -74,7 +72,7 @@ const makeInvoice = async () => {
             }
         }
 
-        const { data } = await axios.post('InvoiceOuts/transferInvoice', params);
+        const { data } = await axios.post('InvoiceOuts/transfer', params);
         notify(t('Transferred invoice'), 'positive');
         const id = data?.[0];
         if (id) router.push({ name: 'InvoiceOutSummary', params: { id } });

src/components/VnTable/VnTable.vue

@@ -182,10 +182,20 @@ function setUserParams(watchedParams, watchedOrder) {
     watchedParams = { ...watchedParams, ...where };
     delete watchedParams.filter;
     delete params.value?.filter;
-    params.value = { ...params.value, ...watchedParams };
+    params.value = { ...params.value, ...sanitizer(watchedParams) };
     orders.value = parseOrder(order);
 }
 
+function sanitizer(params) {
+    for (const [key, value] of Object.entries(params)) {
+        if (typeof value == 'object') {
+            const param = Object.values(value)[0];
+            if (typeof param == 'string') params[key] = param.replaceAll('%', '');
+        }
+    }
+    return params;
+}
+
 function splitColumns(columns) {
     splittedColumns.value = {
         columns: [],
@@ -339,6 +349,7 @@ defineExpose({
     <div class="q-px-md">
         <CrudModel
             v-bind="$attrs"
+            :class="$attrs['class'] ?? 'q-px-md'"
             :limit="$attrs['limit'] ?? 20"
             ref="CrudModelRef"
             @on-fetch="(...args) => emit('onFetch', ...args)"
@@ -495,7 +506,11 @@ defineExpose({
                                 :icon="btn.icon"
                                 class="q-px-sm"
                                 flat
-                                :class="'text-primary-light'"
+                                :class="
+                                    btn.isPrimary
+                                        ? 'text-primary-light'
+                                        : 'color-vn-text '
+                                "
                                 :style="`visibility: ${
                                     (btn.show && btn.show(row)) ?? true
                                         ? 'visible'
@@ -628,7 +643,7 @@ defineExpose({
         </CrudModel>
     </div>
     <QPageSticky v-if="create" :offset="[20, 20]" style="z-index: 2">
-        <QBtn @click="showForm = !showForm" color="primary" fab icon="add" />
+        <QBtn @click="showForm = !showForm" color="primary" fab icon="add" shortcut="+" />
         <QTooltip>
             {{ createForm.title }}
         </QTooltip>

src/components/common/RightMenu.vue

@@ -37,7 +37,7 @@ const stateStore = useStateStore();
                 @click="stateStore.toggleRightDrawer()"
                 round
                 dense
-                icon="menu"
+                icon="dock_to_left"
             >
                 <QTooltip bottom anchor="bottom right">
                     {{ t('globals.collapseMenu') }}

src/components/common/VnInput.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useValidator } from 'src/composables/useValidator';
 
 const emit = defineEmits([
     'update:modelValue',
@@ -27,9 +28,11 @@ const $props = defineProps({
         default: true,
     },
 });
+const { validations } = useValidator();
 
 const { t } = useI18n();
-const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
+const requiredFieldRule = (val) => validations().required($attrs.required, val);
+
 const vnInputRef = ref(null);
 const value = computed({
     get() {
@@ -57,21 +60,22 @@ const focus = () => {
 defineExpose({
     focus,
 });
+import { useAttrs } from 'vue';
+const $attrs = useAttrs();
 
-const inputRules = [
+const mixinRules = [
+    requiredFieldRule,
+    ...($attrs.rules ?? []),
     (val) => {
         const { min } = vnInputRef.value.$attrs;
+        if (!min) return null;
         if (min >= 0) if (Math.floor(val) < min) return t('inputMin', { value: min });
     },
 ];
 </script>
 
 <template>
-    <div
-        @mouseover="hover = true"
-        @mouseleave="hover = false"
-        :rules="$attrs.required ? [requiredFieldRule] : null"
-    >
+    <div @mouseover="hover = true" @mouseleave="hover = false">
         <QInput
             ref="vnInputRef"
             v-model="value"
@@ -80,7 +84,7 @@ const inputRules = [
             :class="{ required: $attrs.required }"
             @keyup.enter="emit('keyup.enter')"
             :clearable="false"
-            :rules="inputRules"
+            :rules="mixinRules"
             :lazy-rules="true"
             hide-bottom-space
         >

src/components/common/VnInputDate.vue

@@ -3,7 +3,7 @@ import { onMounted, watch, computed, ref } from 'vue';
 import { date } from 'quasar';
 import { useI18n } from 'vue-i18n';
 
-const model = defineModel({ type: String });
+const model = defineModel({ type: [String, Date] });
 const $props = defineProps({
     isOutlined: {
         type: Boolean,

src/components/common/VnInputTime.vue

@@ -14,7 +14,7 @@ const props = defineProps({
         default: false,
     },
 });
-const initialDate = ref(model.value);
+const initialDate = ref(model.value ?? Date.vnNew());
 const { t } = useI18n();
 const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
 

src/components/common/VnSelect.vue

@@ -77,6 +77,10 @@ const $props = defineProps({
         type: Object,
         default: null,
     },
+    noOne: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const { t } = useI18n();
@@ -89,6 +93,11 @@ const myOptionsOriginal = ref([]);
 const vnSelectRef = ref();
 const dataRef = ref();
 const lastVal = ref();
+const noOneText = t('globals.noOne');
+const noOneOpt = ref({
+    [optionValue.value]: false,
+    [optionLabel.value]: noOneText,
+});
 
 const value = computed({
     get() {
@@ -104,9 +113,11 @@ watch(options, (newValue) => {
     setOptions(newValue);
 });
 
-watch(modelValue, (newValue) => {
+watch(modelValue, async (newValue) => {
     if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
-        fetchFilter(newValue);
+        await fetchFilter(newValue);
+
+    if ($props.noOne) myOptions.value.unshift(noOneOpt.value);
 });
 
 onMounted(() => {
@@ -169,6 +180,7 @@ async function fetchFilter(val) {
     const fetchOptions = { where, include, limit };
     if (fields) fetchOptions.fields = fields;
     if (sortBy) fetchOptions.order = sortBy;
+
     return dataRef.value.fetch(fetchOptions);
 }
 
@@ -189,6 +201,9 @@ async function filterHandler(val, update) {
     } else newOptions = filter(val, myOptionsOriginal.value);
     update(
         () => {
+            if ($props.noOne && noOneText.toLowerCase().includes(val.toLowerCase()))
+                newOptions.unshift(noOneOpt.value);
+
             myOptions.value = newOptions;
         },
         (ref) => {

src/components/ui/FetchedTags.vue

@@ -2,10 +2,6 @@
 import { computed } from 'vue';
 
 const $props = defineProps({
-    maxLength: {
-        type: Number,
-        required: true,
-    },
     item: {
         type: Object,
         required: true,

src/components/ui/VnFilterPanel.vue

@@ -25,7 +25,7 @@ const $props = defineProps({
         type: Boolean,
         default: true,
     },
-    unRemovableParams: {
+    unremovableParams: {
         type: Array,
         required: false,
         default: () => [],
@@ -93,16 +93,18 @@ function setUserParams(watchedParams) {
     const order = watchedParams.filter?.order;
 
     delete watchedParams.filter;
-    userParams.value = { ...userParams.value, ...sanitizer(watchedParams) };
+    userParams.value = sanitizer(watchedParams);
     emit('setUserParams', userParams.value, order);
 }
 
 watch(
-    () => [route.query[$props.searchUrl], arrayData.store.userParams],
-    ([newSearchUrl, newUserParams], [oldSearchUrl, oldUserParams]) => {
-        if (newSearchUrl || oldSearchUrl) setUserParams(newSearchUrl);
-        if (newUserParams || oldUserParams) setUserParams(newUserParams);
-    }
+    () => route.query[$props.searchUrl],
+    (val, oldValue) => (val || oldValue) && setUserParams(val)
+);
+
+watch(
+    () => arrayData.store.userParams,
+    (val, oldValue) => (val || oldValue) && setUserParams(val)
 );
 
 watch(
@@ -149,7 +151,7 @@ async function clearFilters() {
         arrayData.reset(['skip', 'filter.skip', 'page']);
         // Filtrar los params no removibles
         const removableFilters = Object.keys(userParams.value).filter((param) =>
-            $props.unRemovableParams.includes(param)
+            $props.unremovableParams.includes(param)
         );
         const newParams = {};
         // Conservar solo los params que no son removibles
@@ -181,10 +183,10 @@ const tagsList = computed(() => {
 });
 
 const tags = computed(() => {
-    return tagsList.value.filter((tag) => !($props.customTags || []).includes(tag.key));
+    return tagsList.value.filter((tag) => !($props.customTags || []).includes(tag.label));
 });
 const customTags = computed(() =>
-    tagsList.value.filter((tag) => ($props.customTags || []).includes(tag.key))
+    tagsList.value.filter((tag) => ($props.customTags || []).includes(tag.label))
 );
 
 async function remove(key) {
@@ -270,7 +272,7 @@ function sanitizer(params) {
                     <VnFilterPanelChip
                         v-for="chip of tags"
                         :key="chip.label"
-                        :removable="!unRemovableParams.includes(chip.label)"
+                        :removable="!unremovableParams?.includes(chip.label)"
                         @remove="remove(chip.label)"
                     >
                         <slot name="tags" :tag="chip" :format-fn="formatValue">

src/components/ui/VnPaginate.vue

@@ -10,6 +10,10 @@ const props = defineProps({
         type: String,
         required: true,
     },
+    class: {
+        type: String,
+        default: '',
+    },
     autoLoad: {
         type: Boolean,
         default: false,
@@ -215,7 +219,7 @@ defineExpose({ fetch, addFilter, paginate });
         v-if="store.data"
         @load="onLoad"
         :offset="offset"
-        class="full-width"
+        :class="['full-width', props.class]"
         :disable="disableInfiniteScroll || !store.hasMoreData"
         v-bind="$attrs"
     >

src/components/ui/VnSearchbar.vue

@@ -63,17 +63,13 @@ const props = defineProps({
         type: String,
         default: '',
     },
-    makeFetch: {
-        type: Boolean,
-        default: true,
-    },
-    searchUrl: {
-        type: String,
-        default: 'params',
+    whereFilter: {
+        type: Function,
+        default: undefined,
     },
 });
 
-const searchText = ref('');
+const searchText = ref();
 let arrayDataProps = { ...props };
 if (props.redirect)
     arrayDataProps = {
@@ -107,13 +103,20 @@ async function search() {
     const staticParams = Object.entries(store.userParams);
     arrayData.reset(['skip', 'page']);
 
-    if (props.makeFetch)
-        await arrayData.applyFilter({
+    const filter = {
         params: {
             ...Object.fromEntries(staticParams),
             search: searchText.value,
         },
-        });
+    };
+
+    if (props.whereFilter) {
+        filter.filter = {
+            where: props.whereFilter(searchText.value),
+        };
+        delete filter.params.search;
+    }
+    await arrayData.applyFilter(filter);
 }
 </script>
 <template>

src/composables/useValidator.js

@@ -28,7 +28,7 @@ export function useValidator() {
     }
 
     const { t } = useI18n();
-    const validations = function (validation) {
+    const validations = function (validation = {}) {
         return {
             format: (value) => {
                 const { allowNull, with: format, allowBlank } = validation;
@@ -40,12 +40,15 @@ export function useValidator() {
                 if (!isValid) return message;
             },
             presence: (value) => {
-                let message = `Value can't be empty`;
+                let message = t(`globals.valueCantBeEmpty`);
                 if (validation.message)
                     message = t(validation.message) || validation.message;
 
                 return !validator.isEmpty(value ? String(value) : '') || message;
             },
+            required: (required, value) => {
+                return required ? !!value || t('globals.fieldRequired') : null;
+            },
             length: (value) => {
                 const options = {
                     min: validation.min || validation.is,
@@ -71,12 +74,17 @@ export function useValidator() {
                     return validator.isInt(value) || 'Value should be integer';
                 return validator.isNumeric(value) || 'Value should be a number';
             },
+            min: (value, min) => {
+                if (min >= 0)
+                    if (Math.floor(value) < min) return t('inputMin', { value: min });
+            },
             custom: (value) => validation.bindedFunction(value) || 'Invalid value',
         };
     };
 
     return {
         validate,
+        validations,
         models,
     };
 }

src/filters/date.js

@@ -20,21 +20,21 @@ export function isValidDate(date) {
  * Converts a given date to a specific format.
  *
  * @param {number|string|Date} date - The date to be formatted.
+ * @param {Object} opts - Optional parameters to customize the output format.
  * @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, locale = 'es-ES') {
-    if (!isValidDate(date)) {
-        return '';
-    }
-    return new Date(date).toLocaleDateString(locale, {
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit',
-    });
+export function toDateFormat(date, locale = 'es-ES', opts = {}) {
+    if (!isValidDate(date)) return '';
+
+    const format = Object.assign(
+        { year: 'numeric', month: '2-digit', day: '2-digit' },
+        opts
+    );
+    return new Date(date).toLocaleDateString(locale, format);
 }
 
 /**

src/filters/dateRange.js

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

src/i18n/locale/en.yml

@@ -68,6 +68,7 @@ globals:
     allRows: 'All { numberRows } row(s)'
     markAll: Mark all
     requiredField: Required field
+    valueCantBeEmpty: Value cannot be empty
     class: clase
     type: Type
     reason: reason
@@ -95,6 +96,7 @@ globals:
     from: From
     to: To
     notes: Notes
+    refresh: Refresh
     item: Item
     ticket: Ticket
     campaign: Campaign
@@ -259,7 +261,10 @@ globals:
         twoFactor: Two factor
         recoverPassword: Recover password
         resetPassword: Reset password
+        ticketsMonitor: Tickets monitor
+        clientsActionsMonitor: Clients and actions
         serial: Serial
+        medical: Mutual
     created: Created
     worker: Worker
     now: Now
@@ -273,6 +278,7 @@ globals:
         subtitle: Are you sure exit without saving?
     createInvoiceIn: Create invoice in
     myAccount: My account
+    noOne: No one
 errors:
     statusUnauthorized: Access denied
     statusInternalServerError: An internal server error has ocurred
@@ -748,6 +754,7 @@ worker:
         timeControl: Time control
         locker: Locker
         balance: Balance
+        medical: Medical
     list:
         name: Name
         email: Email
@@ -827,6 +834,15 @@ worker:
             amount: Importe
             remark: Bonficado
             hasDiploma: Diploma
+    medical:
+        tableVisibleColumns:
+            date: Date
+            time: Hour
+            center: Formation Center
+            invoice: Invoice
+            amount: Amount
+            isFit: Fit
+            remark: Observations
     imageNotFound: Image not found
     balance:
         tableVisibleColumns:

src/i18n/locale/es.yml

@@ -77,6 +77,9 @@ globals:
     warehouse: Almacén
     company: Empresa
     fieldRequired: Campo requerido
+    valueCantBeEmpty: El valor no puede estar vacío
+    Value can't be blank: El valor no puede estar en blanco
+    Value can't be null: El valor no puede ser nulo
     allowedFilesText: 'Tipos de archivo permitidos: { allowedContentTypes }'
     smsSent: SMS enviado
     confirmDeletion: Confirmar eliminación
@@ -95,6 +98,7 @@ globals:
     from: Desde
     to: Hasta
     notes: Notas
+    refresh: Actualizar
     item: Artículo
     ticket: Ticket
     campaign: Campaña
@@ -240,7 +244,7 @@ globals:
         purchaseRequest: Petición de compra
         weeklyTickets: Tickets programados
         formation: Formación
-        locations: Ubicaciones
+        locations: Localizaciones
         warehouses: Almacenes
         roles: Roles
         connections: Conexiones
@@ -261,7 +265,10 @@ globals:
         twoFactor: Doble factor
         recoverPassword: Recuperar contraseña
         resetPassword: Restablecer contraseña
+        ticketsMonitor: Monitor de tickets
+        clientsActionsMonitor: Clientes y acciones
         serial: Facturas por serie
+        medical: Mutua
     created: Fecha creación
     worker: Trabajador
     now: Ahora
@@ -275,6 +282,7 @@ globals:
         subtitle: ¿Seguro que quiere salir sin guardar?
     createInvoiceIn: Crear factura recibida
     myAccount: Mi cuenta
+    noOne: Nadie
 errors:
     statusUnauthorized: Acceso denegado
     statusInternalServerError: Ha ocurrido un error interno del servidor
@@ -750,6 +758,8 @@ worker:
         timeControl: Control de horario
         locker: Taquilla
         balance: Balance
+        formation: Formación
+        medical: Mutua
     list:
         name: Nombre
         email: Email
@@ -820,6 +830,15 @@ worker:
             amount: Importe
             remark: Bonficado
             hasDiploma: Diploma
+    medical:
+        tableVisibleColumns:
+            date: Fecha
+            time: Hora
+            center: Centro de Formación
+            invoice: Factura
+            amount: Importe
+            isFit: Apto
+            remark: Observaciones
     imageNotFound: No se ha encontrado la imagen
     balance:
         tableVisibleColumns:

src/layouts/MainLayout.vue

@@ -5,7 +5,7 @@ const quasar = useQuasar();
 </script>
 
 <template>
-    <QLayout view="hHh LpR fFf">
+    <QLayout view="hHh LpR fFf" v-shortcut>
         <Navbar />
         <RouterView></RouterView>
         <QFooter v-if="quasar.platform.is.mobile"></QFooter>

src/pages/Account/Card/AccountMailAlias.vue

@@ -169,7 +169,13 @@ onMounted(async () => await getAccountData(false));
             <AccountMailAliasCreateForm @on-submit-create-alias="createMailAlias" />
         </QDialog>
         <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn fab icon="add" color="primary" @click="openCreateMailAliasForm()">
+            <QBtn
+                fab
+                icon="add"
+                color="primary"
+                @click="openCreateMailAliasForm()"
+                shortcut="+"
+            >
                 <QTooltip>{{ t('warehouses.add') }}</QTooltip>
             </QBtn>
         </QPageSticky>

src/pages/Claim/Card/ClaimSummary.vue

@@ -1,11 +1,10 @@
 <script setup>
 import axios from 'axios';
-import { onMounted, ref, computed } from 'vue';
+import { ref, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toDate, toCurrency } from 'src/filters';
 import dashIfEmpty from 'src/filters/dashIfEmpty';
-import { getUrl } from 'src/composables/getUrl';
 import { useSession } from 'src/composables/useSession';
 
 import VnLv from 'src/components/ui/VnLv.vue';

src/pages/Customer/Card/CustomerAddress.vue

@@ -218,7 +218,13 @@ const toCustomerAddressEdit = (addressId) => {
     </div>
 
     <QPageSticky :offset="[18, 18]">
-        <QBtn @click.stop="toCustomerAddressCreate()" color="primary" fab icon="add" />
+        <QBtn
+            @click.stop="toCustomerAddressCreate()"
+            color="primary"
+            fab
+            icon="add"
+            shortcut="+"
+        />
         <QTooltip>
             {{ t('New consignee') }}
         </QTooltip>

src/pages/Customer/Card/CustomerBalance.vue

@@ -288,7 +288,13 @@ const showBalancePdf = ({ id }) => {
         </template>
     </VnTable>
     <QPageSticky :offset="[18, 18]" style="z-index: 2">
-        <QBtn @click.stop="showNewPaymentDialog()" color="primary" fab icon="add" />
+        <QBtn
+            @click.stop="showNewPaymentDialog()"
+            color="primary"
+            fab
+            icon="add"
+            shortcut="+"
+        />
         <QTooltip>
             {{ t('New payment') }}
         </QTooltip>

src/pages/Customer/Card/CustomerCreditContracts.vue

@@ -218,6 +218,7 @@ const updateData = () => {
             color="primary"
             fab
             icon="add"
+            shortcut="+"
         />
         <QTooltip>
             {{ t('New contract') }}

src/pages/Customer/Card/CustomerSummary.vue

@@ -230,7 +230,11 @@ const sumRisk = ({ clientRisks }) => {
                 />
             </QCard>
             <QCard class="vn-one" v-if="entity.account">
-                <VnTitle :text="t('customer.summary.businessData')" />
+                <VnTitle
+                    :url="`https://grafana.verdnatura.es/d/adjlxzv5yjt34d/analisis-de-clientes-7c-crm?orgId=1&var-clientFk=${entityId}`"
+                    :text="t('customer.summary.businessData')"
+                    icon="vn:grafana"
+                />
                 <VnLv
                     :label="t('customer.summary.totalGreuge')"
                     :value="toCurrency(entity.totalGreuge)"

src/pages/Entry/Card/EntryBasicData.vue

@@ -19,8 +19,6 @@ const { t } = useI18n();
 const { hasAny } = useRole();
 const isAdministrative = () => hasAny(['administrative']);
 
-const suppliersOptions = ref([]);
-const travelsOptions = ref([]);
 const companiesOptions = ref([]);
 const currenciesOptions = ref([]);
 
@@ -29,20 +27,6 @@ const onFilterTravelSelected = (formData, id) => {
 };
 </script>
 <template>
-    <FetchData
-        url="Suppliers"
-        :filter="{ fields: ['id', 'nickname'] }"
-        order="nickname"
-        @on-fetch="(data) => (suppliersOptions = data)"
-        auto-load
-    />
-    <FetchData
-        url="Travels/filter"
-        :filter="{ fields: ['id', 'warehouseInName'] }"
-        order="id"
-        @on-fetch="(data) => (travelsOptions = data)"
-        auto-load
-    />
     <FetchData
         ref="companiesRef"
         url="Companies"
@@ -71,9 +55,10 @@ const onFilterTravelSelected = (formData, id) => {
                 <VnSelect
                     :label="t('entry.basicData.supplier')"
                     v-model="data.supplierFk"
-                    :options="suppliersOptions"
+                    url="Suppliers"
                     option-value="id"
                     option-label="nickname"
+                    :fields="['id', 'nickname']"
                     hide-selected
                     :required="true"
                     map-options
@@ -92,7 +77,8 @@ const onFilterTravelSelected = (formData, id) => {
                 <VnSelectDialog
                     :label="t('entry.basicData.travel')"
                     v-model="data.travelFk"
-                    :options="travelsOptions"
+                    url="Travels/filter"
+                    :fields="['id', 'warehouseInName']"
                     option-value="id"
                     option-label="warehouseInName"
                     map-options

src/pages/Entry/Card/EntryBuys.vue

@@ -423,7 +423,7 @@ const lockIconType = (groupingMode, mode) => {
                             <span v-if="props.row.item.subName" class="subName">
                                 {{ props.row.item.subName }}
                             </span>
-                            <FetchedTags :item="props.row.item" :max-length="5" />
+                            <FetchedTags :item="props.row.item" />
                         </QTd>
                     </QTr>
                 </template>

src/pages/Entry/Card/EntrySummary.vue

@@ -319,7 +319,7 @@ const fetchEntryBuys = async () => {
                                 <span v-if="row.item.subName" class="subName">
                                     {{ row.item.subName }}
                                 </span>
-                                <FetchedTags :item="row.item" :max-length="5" />
+                                <FetchedTags :item="row.item" />
                             </QTd>
                         </QTr>
                         <!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->

src/pages/Entry/EntryFilter.vue

@@ -20,7 +20,6 @@ const props = defineProps({
 
 const currenciesOptions = ref([]);
 const companiesOptions = ref([]);
-const suppliersOptions = ref([]);
 
 const stateStore = useStateStore();
 onMounted(async () => {
@@ -45,14 +44,6 @@ onMounted(async () => {
         @on-fetch="(data) => (currenciesOptions = data)"
         auto-load
     />
-    <FetchData
-        url="Suppliers"
-        :filter="{ fields: ['id', 'nickname', 'name'] }"
-        order="nickname"
-        @on-fetch="(data) => (suppliersOptions = data)"
-        auto-load
-    />
-
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
@@ -135,9 +126,11 @@ onMounted(async () => {
                         :label="t('params.supplierFk')"
                         v-model="params.supplierFk"
                         @update:model-value="searchFn()"
-                        :options="suppliersOptions"
+                        url="Suppliers"
                         option-value="id"
                         option-label="name"
+                        :fields="['id', 'name', 'nickname']"
+                        sort-by="nickname"
                         hide-selected
                         dense
                         outlined

src/pages/Entry/EntryList.vue

@@ -9,9 +9,6 @@ import RightMenu from 'src/components/common/RightMenu.vue';
 import { toDate } from 'src/filters';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import EntrySummary from './Card/EntrySummary.vue';
-import VnUserLink from 'components/ui/VnUserLink.vue';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
-import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
 import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
 import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
 

src/pages/InvoiceOut/Card/InvoiceOutDescriptorMenu.vue

@@ -5,6 +5,7 @@ import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 
 import TransferInvoiceForm from 'src/components/TransferInvoiceForm.vue';
+import RefundInvoiceForm from 'src/components/RefundInvoiceForm.vue';
 import SendEmailDialog from 'components/common/SendEmailDialog.vue';
 
 import useNotify from 'src/composables/useNotify';
@@ -141,6 +142,15 @@ const showTransferInvoiceForm = async () => {
         },
     });
 };
+
+const showRefundInvoiceForm = () => {
+    quasar.dialog({
+        component: RefundInvoiceForm,
+        componentProps: {
+            invoiceOutData: $props.invoiceOutData,
+        },
+    });
+};
 </script>
 
 <template>
@@ -229,10 +239,13 @@ const showTransferInvoiceForm = async () => {
         <QMenu anchor="top end" self="top start">
             <QList>
                 <QItem v-ripple clickable @click="refundInvoice(true)">
-                    <QItemSection>{{ t('With warehouse') }}</QItemSection>
+                    <QItemSection>{{ t('With warehouse, no invoice') }}</QItemSection>
                 </QItem>
                 <QItem v-ripple clickable @click="refundInvoice(false)">
-                    <QItemSection>{{ t('Without warehouse') }}</QItemSection>
+                    <QItemSection>{{ t('Without warehouse, no invoice') }}</QItemSection>
+                </QItem>
+                <QItem v-ripple clickable @click="showRefundInvoiceForm()">
+                    <QItemSection>{{ t('Invoiced') }}</QItemSection>
                 </QItem>
             </QList>
         </QMenu>
@@ -255,8 +268,9 @@ es:
     As CSV: como CSV
     Send PDF: Enviar PDF
     Send CSV: Enviar CSV
-    With warehouse: Con almacén
-    Without warehouse: Sin almacén
+    With warehouse, no invoice: Con almacén, sin factura
+    Without warehouse, no invoice: Sin almacén, sin factura
+    Invoiced: Facturado
     InvoiceOut deleted: Factura eliminada
     Confirm deletion: Confirmar eliminación
     Are you sure you want to delete this invoice?: Estas seguro de eliminar esta factura?

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -19,7 +19,6 @@ const stateStore = useStateStore();
 const { viewSummary } = useSummaryDialog();
 const tableRef = ref();
 const invoiceOutSerialsOptions = ref([]);
-const ticketsOptions = ref([]);
 const customerOptions = ref([]);
 const selectedRows = ref([]);
 const hasSelectedCards = computed(() => selectedRows.value.length > 0);

src/pages/Item/Card/ItemBotanical.vue

@@ -14,20 +14,9 @@ const route = useRoute();
 const { t } = useI18n();
 
 const itemBotanicalsRef = ref(null);
-const itemGenusOptions = ref([]);
-const itemSpeciesOptions = ref([]);
 const itemBotanicals = ref([]);
 let itemBotanicalsForm = reactive({ itemFk: null });
 
-const onGenusCreated = (response, formData) => {
-    itemGenusOptions.value = [...itemGenusOptions.value, response];
-    formData.genusFk = response.id;
-};
-
-const onSpecieCreated = (response, formData) => {
-    itemSpeciesOptions.value = [...itemSpeciesOptions.value, response];
-    formData.specieFk = response.id;
-};
 const entityId = computed(() => {
     return route.params.id;
 });
@@ -47,18 +36,6 @@ onMounted(async () => {
         }"
         @on-fetch="(data) => (itemBotanicals = data)"
     />
-    <FetchData
-        url="Genera"
-        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
-        @on-fetch="(data) => (itemGenusOptions = data)"
-        auto-load
-    />
-    <FetchData
-        url="Species"
-        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
-        @on-fetch="(data) => (itemSpeciesOptions = data)"
-        auto-load
-    />
     <FormModel
         url-update="ItemBotanicals"
         model="entry"
@@ -69,36 +46,35 @@ onMounted(async () => {
         <template #form="{ data }">
             <VnRow>
                 <VnSelectDialog
+                    ref="genusRef"
                     :label="t('Genus')"
                     v-model="data.genusFk"
-                    :options="itemGenusOptions"
+                    url="Genera"
                     option-label="name"
                     option-value="id"
+                    :fields="['id', 'name']"
+                    sort-by="name ASC"
                     hide-selected
                 >
                     <template #form>
                         <CreateGenusForm
-                            @on-data-saved="
-                                (_, requestResponse) =>
-                                    onGenusCreated(requestResponse, data)
-                            "
+                            @on-data-saved="(_, res) => (data.genusFk = res.id)"
                         />
                     </template>
                 </VnSelectDialog>
                 <VnSelectDialog
                     :label="t('Species')"
                     v-model="data.specieFk"
-                    :options="itemSpeciesOptions"
+                    url="Species"
                     option-label="name"
                     option-value="id"
+                    :fields="['id', 'name']"
+                    sort-by="name ASC"
                     hide-selected
                 >
                     <template #form>
                         <CreateSpecieForm
-                            @on-data-saved="
-                                (_, requestResponse) =>
-                                    onSpecieCreated(requestResponse, data)
-                            "
+                            @on-data-saved="(_, res) => (data.specieFk = res.id)"
                         />
                     </template>
                 </VnSelectDialog>

src/pages/Item/Card/ItemShelving.vue

@@ -3,7 +3,6 @@ import { onMounted, ref, computed, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
-import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
@@ -24,8 +23,6 @@ const { notify } = useNotify();
 const { openConfirmationModal } = useVnConfirm();
 
 const rowsSelected = ref([]);
-const parkingsOptions = ref([]);
-const shelvingsOptions = ref([]);
 
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -104,7 +101,9 @@ const columns = computed(() => [
             filterValue: null,
             event: getInputEvents,
             attrs: {
-                options: parkingsOptions.value,
+                url: 'parkings',
+                fields: ['code'],
+                'sort-by': 'code ASC',
                 'option-value': 'code',
                 'option-label': 'code',
                 dense: true,
@@ -124,7 +123,9 @@ const columns = computed(() => [
             filterValue: null,
             event: getInputEvents,
             attrs: {
-                options: shelvingsOptions.value,
+                url: 'shelvings',
+                fields: ['code'],
+                'sort-by': 'code ASC',
                 'option-value': 'code',
                 'option-label': 'code',
                 dense: true,
@@ -188,18 +189,6 @@ onMounted(async () => {
 </script>
 
 <template>
-    <FetchData
-        url="parkings"
-        :filter="{ fields: ['code'], order: 'code ASC' }"
-        auto-load
-        @on-fetch="(data) => (parkingsOptions = data)"
-    />
-    <FetchData
-        url="shelvings"
-        :filter="{ fields: ['code'], order: 'code ASC' }"
-        auto-load
-        @on-fetch="(data) => (shelvingsOptions = data)"
-    />
     <template v-if="stateStore.isHeaderMounted()">
         <Teleport to="#st-data">
             <div class="q-pa-md q-mr-lg q-ma-xs" style="border: 2px solid #222">
@@ -237,7 +226,6 @@ onMounted(async () => {
             </QBtn>
         </Teleport>
     </template>
-
     <QPage class="column items-center q-pa-md">
         <QTable
             :rows="rows"

src/pages/Item/Card/ItemTags.vue

@@ -24,6 +24,7 @@ const getSelectedTagValues = async (tag) => {
         const filter = {
             fields: ['value'],
             order: 'value ASC',
+            limit: 30,
         };
 
         const params = { filter: JSON.stringify(filter) };
@@ -126,7 +127,7 @@ const insertTag = (rows) => {
                                 :key="row.tagFk"
                                 :label="t('Value')"
                                 v-model="row.value"
-                                :options="valueOptionsMap.get(row.tagFk)"
+                                :url="`Tags/${row.tagFk}/filterValue`"
                                 option-label="value"
                                 option-value="value"
                                 emit-value
@@ -135,6 +136,7 @@ const insertTag = (rows) => {
                                 :is-clearable="false"
                                 :required="false"
                                 :rules="validate('itemTag.tagFk')"
+                                :use-like="false"
                             />
                             <VnInput
                                 v-else-if="

src/pages/Item/ItemFixedPrice.vue

@@ -436,7 +436,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         {{ row.name }}
                     </span>
                     <ItemDescriptorProxy :id="row.itemFk" />
-                    <FetchedTags :item="row" :max-length="6" />
+                    <FetchedTags :item="row" />
                 </QTd>
             </template>
             <template #body-cell-groupingPrice="props">

src/pages/Item/ItemList.vue

@@ -517,7 +517,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     <template #body-cell-description="{ row }">
                         <QTd class="col">
                             <span>{{ row.name }} {{ row.subName }}</span>
-                            <FetchedTags :item="row" :max-length="6" />
+                            <FetchedTags :item="row" />
                         </QTd>
                     </template>
                     <template #body-cell-isActive="{ row }">
@@ -562,7 +562,13 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         </VnPaginate>
 
         <QPageSticky :offset="[20, 20]">
-            <QBtn @click="redirectToItemCreate()" color="primary" fab icon="add" />
+            <QBtn
+                @click="redirectToItemCreate()"
+                color="primary"
+                fab
+                icon="add"
+                shortcut="+"
+            />
             <QTooltip class="text-no-wrap">
                 {{ t('New item') }}
             </QTooltip>

src/pages/Item/ItemListFilter.vue

@@ -30,7 +30,7 @@ const itemTypesRef = ref(null);
 const categoriesOptions = ref([]);
 const itemTypesOptions = ref([]);
 const buyersOptions = ref([]);
-const suppliersOptions = ref([]);
+const tagOptions = ref([]);
 const tagValues = ref([]);
 const fieldFiltersValues = ref([]);
 const moreFields = ref([]);
@@ -161,12 +161,6 @@ onMounted(async () => {
         @on-fetch="(data) => (buyersOptions = data)"
         auto-load
     />
-    <FetchData
-        url="Suppliers"
-        :filter="{ fields: ['id', 'name', 'nickname'], order: 'name ASC' }"
-        @on-fetch="(data) => (suppliersOptions = data)"
-        auto-load
-    />
     <FetchData
         url="Tags"
         :filter="{ fields: ['id', 'name', 'isFree'] }"
@@ -261,9 +255,11 @@ onMounted(async () => {
                         :label="t('params.supplierFk')"
                         v-model="params.supplierFk"
                         @update:model-value="searchFn()"
-                        :options="suppliersOptions"
+                        url="Suppliers"
                         option-value="id"
                         option-label="name"
+                        :fields="['id', 'name', 'nickname']"
+                        sort-by="name ASC"
                         hide-selected
                         dense
                         outlined

src/pages/Item/ItemRequest.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref, computed, onMounted, onBeforeMount, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import FetchData from 'components/FetchData.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
@@ -22,7 +21,6 @@ import RightMenu from 'src/components/common/RightMenu.vue';
 const { t } = useI18n();
 const { notify } = useNotify();
 const stateStore = useStateStore();
-const workersOptions = ref([]);
 let filterParams = ref({});
 const denyFormRef = ref(null);
 const denyRequestId = ref(null);
@@ -208,13 +206,6 @@ onBeforeMount(() => {
 </script>
 
 <template>
-    <FetchData
-        url="Workers"
-        :filter="{ where: { role: 'buyer' } }"
-        order="id"
-        @on-fetch="(data) => (workersOptions = data)"
-        auto-load
-    />
     <VnSearchbar
         data-key="ItemRequests"
         url="TicketRequests/filter"
@@ -268,7 +259,9 @@ onBeforeMount(() => {
                 <QTd>
                     <VnSelect
                         v-model="row.attenderFk"
-                        :options="workersOptions"
+                        :where="{ role: 'buyer' }"
+                        sort-by="id"
+                        url="Workers"
                         hide-selected
                         option-label="firstName"
                         option-value="id"

src/pages/Item/ItemRequestFilter.vue

@@ -24,7 +24,6 @@ const stateOptions = [
 
 const itemTypesOptions = ref([]);
 const warehousesOptions = ref([]);
-const workersOptions = ref([]);
 
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -72,18 +71,6 @@ const decrement = (paramsObj, key) => {
         @on-fetch="(data) => (warehousesOptions = data)"
         auto-load
     />
-    <FetchData
-        url="Workers/search"
-        :filter="{
-            fields: ['id', 'name'],
-            order: 'name ASC',
-        }"
-        :params="{
-            departmentCodes: ['VT'],
-        }"
-        @on-fetch="(data) => (workersOptions = data)"
-        auto-load
-    />
     <VnFilterPanel
         :data-key="props.dataKey"
         :search-button="true"
@@ -162,7 +149,10 @@ const decrement = (paramsObj, key) => {
                         :label="t('params.requesterFk')"
                         v-model="params.requesterFk"
                         @update:model-value="searchFn()"
-                        :options="workersOptions"
+                        url="Workers/search"
+                        :fields="['id', 'name']"
+                        order="name ASC"
+                        :params="{ departmentCodes: ['VT'] }"
                         option-value="id"
                         option-label="name"
                         hide-selected

src/pages/Item/ItemTypeList.vue

@@ -99,7 +99,13 @@ const exprBuilder = (param, value) => {
         </div>
     </QPage>
     <QPageSticky :offset="[20, 20]">
-        <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
+        <QBtn
+            fab
+            icon="add"
+            color="primary"
+            @click="redirectToCreateView()"
+            shortcut="+"
+        />
         <QTooltip>
             {{ t('New item type') }}
         </QTooltip>

src/pages/Monitor/MonitorClients.vue

@@ -0,0 +1,145 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import { toDateFormat } from 'src/filters/date.js';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
+import { dateRange } from 'src/filters';
+const { t } = useI18n();
+
+const dates = dateRange(Date.vnNew());
+const from = ref(dates[0]);
+const to = ref(dates[1]);
+
+const filter = computed(() => {
+    const obj = {};
+    const formatFrom = setHours(from.value, 'from');
+    const formatTo = setHours(to.value, 'to');
+    let stamp;
+
+    if (!formatFrom && formatTo) stamp = { lte: formatTo };
+    else if (formatFrom && !formatTo) stamp = { gte: formatFrom };
+    else if (formatFrom && formatTo) stamp = { between: [formatFrom, formatTo] };
+
+    return Object.assign(obj, { where: { 'v.stamp': stamp } });
+});
+
+function exprBuilder(param, value) {
+    switch (param) {
+        case 'clientFk':
+            return { [`c.id`]: value };
+        case 'salesPersonFk':
+            return { [`c.${param}`]: value };
+    }
+}
+
+function setHours(date, type) {
+    if (!date) return null;
+
+    const d = new Date(date);
+    if (type == 'from') d.setHours(0, 0, 0, 0);
+    else d.setHours(23, 59, 59, 59);
+    return d;
+}
+
+const columns = computed(() => [
+    {
+        label: t('salesClientsTable.date'),
+        name: 'dated',
+        field: 'dated',
+        align: 'left',
+        columnFilter: false,
+        format: (row) => toDateFormat(row.dated, 'es-ES', { year: '2-digit' }),
+    },
+    {
+        label: t('salesClientsTable.hour'),
+        name: 'hour',
+        field: 'hour',
+        align: 'left',
+        columnFilter: false,
+    },
+    {
+        label: t('salesClientsTable.salesPerson'),
+        name: 'salesPersonFk',
+        field: 'salesPerson',
+        align: 'left',
+        columnField: {
+            component: null,
+        },
+        optionFilter: 'firstName',
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Workers/activeWithInheritedRole',
+                fields: ['id', 'name'],
+                sortBy: 'nickname ASC',
+                where: { role: 'salesPerson' },
+                useLike: false,
+            },
+        },
+        columnClass: 'no-padding',
+    },
+    {
+        label: t('salesClientsTable.client'),
+        field: 'clientName',
+        name: 'clientFk',
+        align: 'left',
+        columnField: {
+            component: null,
+        },
+        orderBy: 'c.name',
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Clients',
+                fields: ['id', 'name'],
+                sortBy: 'name ASC',
+            },
+        },
+        columnClass: 'no-padding',
+    },
+]);
+</script>
+
+<template>
+    <VnTable
+        ref="table"
+        data-key="SalesMonitorClients"
+        url="SalesMonitors/clientsFilter"
+        search-url="SalesMonitorClients"
+        :order="['dated DESC', 'hour DESC']"
+        :expr-builder="exprBuilder"
+        :filter="filter"
+        :offset="50"
+        auto-load
+        :columns="columns"
+        :right-search="false"
+        default-mode="table"
+        :disable-option="{ card: true }"
+        dense
+        class="q-px-none"
+    >
+        <template #top-left>
+            <VnRow>
+                <VnInputDate v-model="from" :label="$t('globals.from')" dense />
+                <VnInputDate v-model="to" :label="$t('globals.to')" dense />
+            </VnRow>
+        </template>
+        <template #column-salesPersonFk="{ row }">
+            <span class="link" :title="row.salesPerson" v-text="row.salesPerson" />
+            <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
+        </template>
+        <template #column-clientFk="{ row }">
+            <span class="link" :title="row.clientName" v-text="row.clientName" />
+            <CustomerDescriptorProxy :id="row.clientFk" />
+        </template>
+    </VnTable>
+</template>
+<style lang="scss" scoped>
+.full-width .vn-row > * {
+    flex: 0.4;
+}
+</style>

src/pages/Monitor/MonitorClientsActions.vue

@@ -0,0 +1,26 @@
+<script setup>
+import SalesClientTable from './MonitorClients.vue';
+import SalesOrdersTable from './MonitorOrders.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
+</script>
+<template>
+    <VnRow
+        class="q-pa-md"
+        :style="{ 'flex-direction': $q.screen.lt.lg ? 'column' : 'row', gap: '0px' }"
+    >
+        <div style="flex: 0.3">
+            <span
+                class="q-ml-md text-body1"
+                v-text="$t('salesMonitor.clientsOnWebsite')"
+            />
+            <SalesClientTable />
+        </div>
+        <div style="flex: 0.7">
+            <span
+                class="q-ml-md text-body1"
+                v-text="$t('salesMonitor.recentOrderActions')"
+            />
+            <SalesOrdersTable />
+        </div>
+    </VnRow>
+</template>

src/pages/Monitor/MonitorList.vue

@@ -1,90 +0,0 @@
-<script setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import { useStateStore } from 'stores/useStateStore';
-import SalesClientTable from './SalesClientsTable.vue';
-import SalesOrdersTable from './SalesOrdersTable.vue';
-import SalesTicketsTable from './SalesTicketsTable.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
-
-const { t } = useI18n();
-const stateStore = useStateStore();
-
-const expanded = ref(true);
-
-onMounted(async () => {
-    stateStore.leftDrawer = false;
-});
-
-onUnmounted(() => (stateStore.leftDrawer = true));
-</script>
-
-<template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="SalesMonitorTickets"
-                url="SalesMonitors/salesFilter"
-                :redirect="false"
-                :label="t('searchBar.label')"
-                :info="t('searchBar.info')"
-            />
-        </Teleport>
-    </template>
-    <QPage class="column items-center q-pa-md">
-        <QCard class="full-width q-mb-lg">
-            <QExpansionItem v-model="expanded" dense :duration="150">
-                <template v-if="!expanded" #header>
-                    <div class="row full-width">
-                        <span class="flex col text-body1">
-                            {{ t('salesMonitor.clientsOnWebsite') }}
-                        </span>
-                        <span class="flex col q-ml-xl text-body1">
-                            {{ t('salesMonitor.recentOrderActions') }}
-                        </span>
-                    </div>
-                </template>
-                <template #default>
-                    <div class="expansion-tables-container">
-                        <QCardSection class="col">
-                            <span class="flex col q-mb-sm text-body1">
-                                {{ t('salesMonitor.clientsOnWebsite') }}
-                            </span>
-                            <SalesClientTable />
-                        </QCardSection>
-                        <QCardSection class="col">
-                            <span class="flex col q-mb-sm text-body1">
-                                {{ t('salesMonitor.recentOrderActions') }}
-                            </span>
-                            <SalesOrdersTable />
-                        </QCardSection>
-                    </div>
-                </template>
-            </QExpansionItem>
-        </QCard>
-        <QCard class="full-width">
-            <QItem class="justify-between">
-                <QItemLabel class="col slider-container">
-                    <span class="text-body1"
-                        >{{ t('salesMonitor.ticketsMonitor') }}
-                    </span>
-                    <QCardSection class="col" style="padding-inline: 0"
-                        ><SalesTicketsTable />
-                    </QCardSection>
-                </QItemLabel>
-            </QItem>
-        </QCard>
-    </QPage>
-</template>
-
-<style lang="scss" scoped>
-.expansion-tables-container {
-    display: flex;
-    border-top: 1px solid $color-spacer;
-
-    @media (max-width: $breakpoint-md-max) {
-        flex-direction: column;
-    }
-}
-</style>

src/pages/Monitor/MonitorOrders.vue

@@ -0,0 +1,203 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import VnTable from 'components/VnTable/VnTable.vue';
+
+import { toDateFormat, toDateTimeFormat } from 'src/filters/date.js';
+import { toCurrency } from 'src/filters';
+import { useVnConfirm } from 'composables/useVnConfirm';
+import axios from 'axios';
+
+const { t } = useI18n();
+const { openConfirmationModal } = useVnConfirm();
+
+const table = ref();
+const selectedRows = ref([]);
+
+function exprBuilder(param, value) {
+    switch (param) {
+        case 'clientFk':
+            return { [`c.id`]: value };
+        case 'salesPersonFk':
+            return { [`c.salesPersonFk`]: value };
+    }
+}
+
+const columns = computed(() => [
+    {
+        label: t('salesOrdersTable.dateSend'),
+        name: 'dateSend',
+        field: 'dateSend',
+        align: 'left',
+        orderBy: 'date_send',
+        columnFilter: false,
+    },
+    {
+        label: t('salesOrdersTable.dateMake'),
+        name: 'dateMake',
+        field: 'dateMake',
+        align: 'left',
+        orderBy: 'date_make',
+        columnFilter: false,
+        format: (row) => toDateTimeFormat(row.date_make),
+    },
+    {
+        label: t('salesOrdersTable.client'),
+        name: 'clientFk',
+        align: 'left',
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Clients',
+                fields: ['id', 'name'],
+                sortBy: 'name ASC',
+            },
+        },
+    },
+    {
+        label: t('salesOrdersTable.agency'),
+        name: 'agencyName',
+        align: 'left',
+        columnFilter: false,
+    },
+    {
+        label: t('salesOrdersTable.salesPerson'),
+        name: 'salesPersonFk',
+        align: 'left',
+        optionFilter: 'firstName',
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Workers/activeWithInheritedRole',
+                fields: ['id', 'name'],
+                sortBy: 'nickname ASC',
+                where: { role: 'salesPerson' },
+                useLike: false,
+            },
+        },
+    },
+    {
+        label: t('salesOrdersTable.import'),
+        name: 'import',
+        field: 'import',
+        align: 'left',
+        columnFilter: false,
+        format: (row) => toCurrency(row.import),
+    },
+]);
+
+const getBadgeColor = (date) => {
+    const today = Date.vnNew();
+    today.setHours(0, 0, 0, 0);
+
+    const orderLanded = new Date(date);
+    orderLanded.setHours(0, 0, 0, 0);
+
+    const difference = today - orderLanded;
+
+    if (difference == 0) return 'warning';
+    if (difference < 0) return 'success';
+    if (difference > 0) return 'alert';
+};
+
+const removeOrders = async () => {
+    try {
+        const selectedIds = selectedRows.value.map((row) => row.id);
+        const params = { deletes: selectedIds };
+        await axios.post('SalesMonitors/deleteOrders', params);
+        selectedRows.value = [];
+        await table.value.reload();
+    } catch (err) {
+        console.error('Error deleting orders', err);
+    }
+};
+
+const openTab = (id) =>
+    window.open(`#/order/${id}/summary`, '_blank', 'noopener, noreferrer');
+</script>
+<template>
+    <VnTable
+        ref="table"
+        class="q-px-none"
+        data-key="SalesMonitorOrders"
+        url="SalesMonitors/ordersFilter"
+        search-url="SalesMonitorOrders"
+        order="date_send DESC"
+        :right-search="false"
+        :expr-builder="exprBuilder"
+        auto-load
+        :columns="columns"
+        :table="{
+            'row-key': 'id',
+            selection: 'multiple',
+            'hide-bottom': true,
+        }"
+        default-mode="table"
+        :row-click="({ id }) => openTab(id)"
+        v-model:selected="selectedRows"
+        :disable-option="{ card: true }"
+    >
+        <template #top-left>
+            <QBtn
+                icon="refresh"
+                size="md"
+                color="primary"
+                dense
+                flat
+                @click="$refs.table.reload()"
+            >
+                <QTooltip>{{ $t('globals.refresh') }}</QTooltip>
+            </QBtn>
+            <QBtn
+                v-if="selectedRows.length"
+                icon="delete"
+                size="md"
+                dense
+                flat
+                color="primary"
+                @click="
+                    openConfirmationModal(
+                        $t('salesOrdersTable.deleteConfirmTitle'),
+                        $t('salesOrdersTable.deleteConfirmMessage'),
+                        removeOrders
+                    )
+                "
+            >
+                <QTooltip>{{ t('salesOrdersTable.delete') }}</QTooltip>
+            </QBtn>
+        </template>
+        <template #column-dateSend="{ row }">
+            <QTd>
+                <QBadge
+                    :color="getBadgeColor(row.date_send)"
+                    text-color="black"
+                    class="q-pa-sm"
+                    style="font-size: 14px"
+                >
+                    {{ toDateFormat(row.date_send) }}
+                </QBadge>
+            </QTd>
+        </template>
+
+        <template #column-clientFk="{ row }">
+            <QTd @click.stop>
+                <span class="link" v-text="row.clientName" :title="row.clientName" />
+                <CustomerDescriptorProxy :id="row.clientFk" />
+            </QTd>
+        </template>
+
+        <template #column-salesPersonFk="{ row }">
+            <QTd @click.stop>
+                <span class="link" v-text="row.salesPerson" />
+                <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
+            </QTd>
+        </template>
+    </VnTable>
+</template>
+<style lang="scss" scoped>
+.q-td {
+    max-width: 140px;
+}
+</style>

src/pages/Monitor/SalesClientsTable.vue

@@ -1,147 +0,0 @@
-<script setup>
-import { ref, computed, reactive, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import FetchData from 'components/FetchData.vue';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
-import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
-
-import { toDateFormat } from 'src/filters/date.js';
-import VnTable from 'src/components/VnTable/VnTable.vue';
-
-const { t } = useI18n();
-
-const paginateRef = ref(null);
-const workersActiveOptions = ref([]);
-const clientsOptions = ref([]);
-
-const from = ref(Date.vnNew());
-const to = ref(Date.vnNew());
-
-const dateRange = computed(() => {
-    const minHour = new Date(from.value);
-    minHour.setHours(0, 0, 0, 0);
-    const maxHour = new Date(to.value);
-    maxHour.setHours(23, 59, 59, 59);
-    return [minHour, maxHour];
-});
-
-const filter = reactive({
-    where: {
-        'v.stamp': {
-            between: dateRange.value,
-        },
-    },
-});
-
-const refetch = async () => await paginateRef.value.fetch();
-
-watch(dateRange, (val) => {
-    filter.where['v.stamp'].between = val;
-    refetch();
-});
-
-function exprBuilder(param, value) {
-    switch (param) {
-        case 'clientFk':
-            return { [`c.id`]: value };
-        case 'salesPersonFk':
-            return { [`c.${param}`]: value };
-    }
-}
-
-const params = reactive({});
-
-const columns = computed(() => [
-    {
-        label: t('salesClientsTable.date'),
-        name: 'dated',
-        field: 'dated',
-        align: 'left',
-        columnFilter: null,
-        sortable: true,
-        format: (row) => toDateFormat(row.dated),
-    },
-    {
-        label: t('salesClientsTable.hour'),
-        name: 'hour',
-        field: 'hour',
-        align: 'left',
-        sortable: true,
-    },
-    {
-        label: t('salesClientsTable.salesPerson'),
-        name: 'salesPerson',
-        field: 'salesPerson',
-        align: 'left',
-        sortable: true,
-        columnField: {
-            component: null,
-        },
-    },
-    {
-        label: t('salesClientsTable.client'),
-        field: 'clientName',
-        name: 'client',
-        align: 'left',
-        sortable: true,
-        columnField: {
-            component: null,
-        },
-    },
-]);
-</script>
-
-<template>
-    <FetchData
-        url="Workers/activeWithInheritedRole"
-        :filter="{
-            fields: ['id', 'nickname'],
-            order: 'nickname ASC',
-            where: { role: 'salesPerson' },
-        }"
-        auto-load
-        @on-fetch="(data) => (workersActiveOptions = data)"
-    />
-    <FetchData
-        url="Clients"
-        :filter="{
-            fields: ['id', 'name'],
-            order: 'name ASC',
-        }"
-        auto-load
-        @on-fetch="(data) => (clientsOptions = data)"
-    />
-    <QCard style="max-height: 380px; overflow-y: scroll">
-        <VnTable
-            ref="paginateRef"
-            data-key="SalesMonitorClients"
-            url="SalesMonitors/clientsFilter"
-            :order="['dated DESC', 'hour DESC']"
-            :limit="6"
-            :expr-builder="exprBuilder"
-            :user-params="params"
-            :filter="filter"
-            :offset="50"
-            auto-load
-            :columns="columns"
-            :right-search="false"
-            default-mode="table"
-            dense
-            :without-header="true"
-        >
-            <template #column-salesPerson="{ row }">
-                <QTd>
-                    <span class="link">{{ row.salesPerson }}</span>
-                    <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
-                </QTd>
-            </template>
-            <template #column-client="{ row }">
-                <QTd>
-                    <span class="link">{{ row.clientName }}</span>
-                    <CustomerDescriptorProxy :id="row.clientFk" />
-                </QTd>
-            </template>
-        </VnTable>
-    </QCard>
-</template>

src/pages/Monitor/SalesOrdersTable.vue

@@ -1,204 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import FetchData from 'components/FetchData.vue';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
-import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import VnTable from 'components/VnTable/VnTable.vue';
-
-import { toDateFormat, toDateTimeFormat } from 'src/filters/date.js';
-import { toCurrency } from 'src/filters';
-import { useVnConfirm } from 'composables/useVnConfirm';
-import axios from 'axios';
-
-const { t } = useI18n();
-const { openConfirmationModal } = useVnConfirm();
-
-const paginateRef = ref(null);
-const workersActiveOptions = ref([]);
-const clientsOptions = ref([]);
-const selectedRows = ref([]);
-
-const dateRange = (value) => {
-    const minHour = new Date(value);
-    minHour.setHours(0, 0, 0, 0);
-    const maxHour = new Date(value);
-    maxHour.setHours(23, 59, 59, 59);
-
-    return [minHour, maxHour];
-};
-
-function exprBuilder(param, value) {
-    switch (param) {
-        case 'date_send':
-            return {
-                [`o.date_send`]: {
-                    between: dateRange(value),
-                },
-            };
-        case 'clientFk':
-            return { [`c.id`]: value };
-        case 'salesPersonFk':
-            return { [`c.${param}`]: value };
-    }
-}
-
-const columns = computed(() => [
-    {
-        label: t('salesOrdersTable.date'),
-        name: 'date',
-        field: 'dated',
-        align: 'left',
-        sortable: true,
-        cardVisible: true,
-    },
-    {
-        label: t('salesOrdersTable.client'),
-        name: 'client',
-        align: 'left',
-        sortable: true,
-        cardVisible: true,
-    },
-    {
-        label: t('salesOrdersTable.salesPerson'),
-        name: 'salesPerson',
-        align: 'left',
-        sortable: true,
-        cardVisible: true,
-    },
-]);
-
-const getBadgeColor = (date) => {
-    const today = Date.vnNew();
-    today.setHours(0, 0, 0, 0);
-
-    const orderLanded = new Date(date);
-    orderLanded.setHours(0, 0, 0, 0);
-
-    const difference = today - orderLanded;
-
-    if (difference == 0) return 'warning';
-    if (difference < 0) return 'success';
-    if (difference > 0) return 'alert';
-};
-
-const removeOrders = async () => {
-    try {
-        const selectedIds = selectedRows.value.map((row) => row.id);
-        const params = { deletes: selectedIds };
-        await axios.post('SalesMonitors/deleteOrders', params);
-        selectedRows.value = [];
-        await paginateRef.value.fetch();
-    } catch (err) {
-        console.error('Error deleting orders', err);
-    }
-};
-
-const redirectToOrderSummary = (orderId) => {
-    const url = `#/order/${orderId}/summary`;
-    window.open(url, '_blank');
-};
-</script>
-
-<template>
-    <FetchData
-        url="Workers/activeWithInheritedRole"
-        :filter="{
-            fields: ['id', 'nickname'],
-            order: 'nickname ASC',
-            where: { role: 'salesPerson' },
-        }"
-        auto-load
-        @on-fetch="(data) => (workersActiveOptions = data)"
-    />
-    <FetchData
-        url="Clients"
-        :filter="{
-            fields: ['id', 'name'],
-            order: 'name ASC',
-        }"
-        auto-load
-        @on-fetch="(data) => (clientsOptions = data)"
-    />
-
-    <VnSubToolbar />
-    <QCard style="max-height: 380px; overflow-y: scroll">
-        <VnTable
-            ref="paginateRef"
-            data-key="SalesMonitorOrders"
-            url="SalesMonitors/ordersFilter"
-            order="date_make DESC"
-            :limit="6"
-            :right-search="false"
-            :expr-builder="exprBuilder"
-            auto-load
-            :columns="columns"
-            :table="{
-                'row-key': 'id',
-                selection: 'multiple',
-                'hide-bottom': true,
-            }"
-            default-mode="table"
-            :without-header="false"
-            @row-click="(_, row) => redirectToOrderSummary(row.id)"
-            v-model:selected="selectedRows"
-        >
-            <template #top-left>
-                <QBtn
-                    v-if="selectedRows.length > 0"
-                    icon="delete"
-                    size="md"
-                    color="primary"
-                    @click="
-                        openConfirmationModal(
-                            t('salesOrdersTable.deleteConfirmTitle'),
-                            t('salesOrdersTable.deleteConfirmMessage'),
-                            removeOrders
-                        )
-                    "
-                >
-                    <QTooltip>{{ t('salesOrdersTable.delete') }}</QTooltip>
-                </QBtn>
-            </template>
-            <template #column-date="{ row }">
-                <QTd>
-                    <QBadge
-                        :color="getBadgeColor(row.date_send)"
-                        text-color="black"
-                        class="q-pa-sm q-mb-md"
-                        style="font-size: 14px"
-                    >
-                        {{ toDateFormat(row.date_send) }}
-                    </QBadge>
-                    <div>{{ toDateTimeFormat(row.date_make) }}</div>
-                </QTd>
-            </template>
-            <template #column-client="{ row }">
-                <QTd>
-                    <div class="q-mb-md">
-                        <span class="link">{{ row.clientName }}</span>
-                        <CustomerDescriptorProxy :id="row.clientFk" />
-                    </div>
-                    <span> {{ row.agencyName }}</span>
-                </QTd>
-            </template>
-
-            <template #column-salesPerson="{ row }">
-                <QTd>
-                    <div class="q-mb-md">
-                        <span class="link">{{ row.salesPerson }}</span>
-                        <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
-                    </div>
-                    <span>{{ toCurrency(row.import) }}</span>
-                </QTd>
-            </template>
-        </VnTable>
-    </QCard>
-</template>
-<style lang="scss" scoped>
-.q-td {
-    color: gray;
-}
-</style>

src/pages/Monitor/Ticket/MonitorTicketFilter.vue

@@ -0,0 +1,286 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnFilterPanelChip from 'src/components/ui/VnFilterPanelChip.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputNumber from 'src/components/common/VnInputNumber.vue';
+import FetchData from 'src/components/FetchData.vue';
+import { dateRange } from 'src/filters';
+
+defineProps({ dataKey: { type: String, required: true } });
+const { t } = useI18n();
+const warehouses = ref();
+const groupedStates = ref();
+
+const handleScopeDays = (params, days, callback) => {
+    const [from, to] = dateRange(Date.vnNew());
+    if (!days) {
+        Object.assign(params, { from, to, scopeDays: 1 });
+    } else {
+        params.from = from;
+        to.setDate(to.getDate() + days);
+        params.to = to;
+    }
+    if (callback) callback();
+};
+</script>
+<template>
+    <FetchData url="Warehouses" auto-load @on-fetch="(data) => (warehouses = data)" />
+    <FetchData
+        url="AlertLevels"
+        auto-load
+        @on-fetch="
+            (data) =>
+                (groupedStates = data.map((x) => Object.assign(x, { code: t(x.code) })))
+        "
+    />
+    <VnFilterPanel
+        :data-key="dataKey"
+        :search-button="true"
+        :hidden-tags="['from', 'to']"
+        :custom-tags="['scopeDays']"
+        :unremovable-params="['from', 'to', 'scopeDays']"
+    >
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong v-text="`${t(`params.${tag.label}`)}:`" />
+                <span v-text="formatFn(tag.value)" />
+            </div>
+        </template>
+        <template #customTags="{ params, searchFn, formatFn }">
+            <VnFilterPanelChip
+                v-if="params.scopeDays"
+                removable
+                @remove="handleScopeDays(params, null, searchFn)"
+            >
+                <strong v-text="`${t(`params.scopeDays`)}:`" />
+                <span v-text="formatFn(params.scopeDays)" />
+            </VnFilterPanelChip>
+        </template>
+        <template #body="{ params }">
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('params.clientFk')"
+                        v-model="params.clientFk"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('params.orderFk')"
+                        v-model="params.orderFk"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputNumber
+                        :label="t('params.scopeDays')"
+                        v-model="params.scopeDays"
+                        is-outlined
+                        @update:model-value="(val) => handleScopeDays(params, val)"
+                        @remove="(val) => handleScopeDays(params, val)"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('params.nickname')"
+                        v-model="params.nickname"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        outlined
+                        dense
+                        rounded
+                        :label="t('params.salesPersonFk')"
+                        v-model="params.salesPersonFk"
+                        url="Workers/search"
+                        :params="{ departmentCodes: ['VT'] }"
+                        is-outlined
+                        option-value="code"
+                        option-label="name"
+                        :no-one="true"
+                    >
+                        <template #option="{ opt, itemProps }">
+                            <QItem v-bind="itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ opt.name }}</QItemLabel>
+                                    <QItemLabel
+                                        v-if="opt.code"
+                                        class="text-grey text-caption"
+                                    >
+                                        {{ `${opt.nickname}, ${opt.code}` }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelect>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('params.refFk')"
+                        v-model="params.refFk"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        outlined
+                        dense
+                        rounded
+                        :label="t('params.agencyModeFk')"
+                        v-model="params.agencyModeFk"
+                        url="AgencyModes/isActive"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        outlined
+                        dense
+                        rounded
+                        :label="t('params.stateFk')"
+                        v-model="params.stateFk"
+                        url="States"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        outlined
+                        dense
+                        rounded
+                        :label="t('params.groupedStates')"
+                        v-model="params.alertLevel"
+                        :options="groupedStates"
+                        option-label="code"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        outlined
+                        dense
+                        rounded
+                        :label="t('params.warehouseFk')"
+                        v-model="params.warehouseFk"
+                        :options="warehouses"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        outlined
+                        dense
+                        rounded
+                        :label="t('params.provinceFk')"
+                        v-model="params.provinceFk"
+                        url="Provinces"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('params.myTeam')"
+                        v-model="params.myTeam"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('params.problems')"
+                        v-model="params.problems"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('params.pending')"
+                        v-model="params.pending"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnFilterPanel>
+</template>
+<i18n>
+en:
+    params:
+        clientFk: Client id
+        orderFk: Order id
+        scopeDays: Days onward
+        nickname: Nickname
+        salesPersonFk: Sales person
+        refFk: Invoice
+        agencyModeFk: Agency
+        stateFk: State
+        groupedStates: Grouped State
+        warehouseFk: Warehouse
+        provinceFk: Province
+        myTeam: My team
+        problems: With problems
+        pending: Pending
+        from: From
+        to: To
+        alertLevel: Grouped State
+    FREE: Free
+    DELIVERED: Delivered
+    ON_PREPARATION: On preparation
+    ON_PREVIOUS: On previous
+    PACKED: Packed
+    No one: No one
+    
+es:
+    params:
+        clientFk: Id cliente
+        orderFk: Id cesta
+        scopeDays: Días en adelante
+        nickname: Nombre mostrado
+        salesPersonFk: Comercial
+        refFk: Factura
+        agencyModeFk: Agencia
+        stateFk: Estado
+        groupedStates: Estado agrupado
+        warehouseFk: Almacén
+        provinceFk: Provincia
+        myTeam: Mi equipo
+        problems: Con problemas
+        pending: Pendiente
+        from: Desde
+        To: Hasta
+        alertLevel: Estado agrupado
+    FREE: Libre
+    DELIVERED: Servido
+    ON_PREPARATION: En preparación
+    ON_PREVIOUS: En previa
+    PACKED: Encajado
+</i18n>

src/pages/Monitor/Ticket/MonitorTicketSearchbar.vue

@@ -0,0 +1,12 @@
+<script setup>
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+</script>
+<template>
+    <VnSearchbar
+        data-key="SalesMonitorTickets"
+        url="SalesMonitors/salesFilter"
+        :redirect="false"
+        :label="$t('searchBar.label')"
+        :info="$t('searchBar.info')"
+    />
+</template>

src/pages/Monitor/Ticket/MonitorTickets.vue

@@ -1,37 +1,38 @@
 <script setup>
-import { ref, computed, reactive } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
-import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
 import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
 import TicketSummary from 'src/pages/Ticket/Card/TicketSummary.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import { toDateFormat, toTimeFormat } from 'src/filters/date.js';
-import { toCurrency, dateRange } from 'src/filters';
+import { toDateFormat } from 'src/filters/date.js';
+import { toCurrency, dateRange, dashIfEmpty } from 'src/filters';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import MonitorTicketSearchbar from './MonitorTicketSearchbar.vue';
+import MonitorTicketFilter from './MonitorTicketFilter.vue';
 
-const DEFAULT_AUTO_REFRESH = 1000;
+const DEFAULT_AUTO_REFRESH = 2 * 60 * 1000; // 2min in ms
 const { t } = useI18n();
 const autoRefresh = ref(false);
-const paginateRef = ref(null);
-const workersActiveOptions = ref([]);
-const provincesOptions = ref([]);
-const statesOptions = ref([]);
-const zonesOptions = ref([]);
+const tableRef = ref(null);
+const provinceOpts = ref([]);
+const stateOpts = ref([]);
+const zoneOpts = ref([]);
 const visibleColumns = ref([]);
-const allColumnNames = ref([]);
 const { viewSummary } = useSummaryDialog();
+const [from, to] = dateRange(Date.vnNew());
 
 function exprBuilder(param, value) {
     switch (param) {
         case 'stateFk':
             return { 'ts.stateFk': value };
         case 'salesPersonFk':
-            return { 'c.salesPersonFk': value };
+            return { 'c.salesPersonFk': !value ? null : value };
         case 'provinceFk':
             return { 'a.provinceFk': value };
         case 'theoreticalHour':
@@ -48,15 +49,12 @@ function exprBuilder(param, value) {
     }
 }
 
-const filter = { order: ['totalProblems DESC'] };
-let params = reactive({});
-
 const columns = computed(() => [
     {
         label: t('salesTicketsTable.problems'),
-        name: 'problems',
+        name: 'totalProblems',
         align: 'left',
-        sortable: true,
+
         columnFilter: false,
         attrs: {
             dense: true,
@@ -64,13 +62,12 @@ const columns = computed(() => [
     },
     {
         label: t('salesTicketsTable.identifier'),
-        name: 'identifier',
+        name: 'id',
         field: 'id',
         align: 'left',
-        sortable: true,
 
         columnFilter: {
-            component: 'input',
+            component: 'number',
             name: 'id',
             attrs: {
                 dense: true,
@@ -79,41 +76,41 @@ const columns = computed(() => [
     },
     {
         label: t('salesTicketsTable.client'),
-        name: 'client',
+        name: 'clientFk',
         align: 'left',
         field: 'nickname',
-        sortable: true,
         columnFilter: {
-            component: 'input',
-            name: 'nickname',
+            component: 'select',
             attrs: {
-                dense: true,
+                url: 'Clients',
+                fields: ['id', 'name', 'nickname'],
+                sortBy: 'name ASC',
             },
         },
     },
     {
         label: t('salesTicketsTable.salesPerson'),
-        name: 'salesPerson',
+        name: 'salesPersonFk',
         field: 'userName',
         align: 'left',
-        sortable: true,
+        optionFilter: 'firstName',
         columnFilter: {
             component: 'select',
-            name: 'salesPersonFk',
             attrs: {
-                options: workersActiveOptions.value,
-                'option-value': 'id',
-                'option-label': 'name',
-                dense: true,
+                url: 'Workers/activeWithInheritedRole',
+                fields: ['id', 'name'],
+                sortBy: 'nickname ASC',
+                where: { role: 'salesPerson' },
+                useLike: false,
             },
         },
     },
     {
         label: t('salesTicketsTable.date'),
-        name: 'date',
+        name: 'shippedDate',
         style: { 'max-width': '100px' },
         align: 'left',
-        sortable: true,
+
         columnFilter: {
             component: 'date',
             name: 'shippedDate',
@@ -124,61 +121,39 @@ const columns = computed(() => [
     },
     {
         label: t('salesTicketsTable.theoretical'),
-        name: 'theoretical',
+        name: 'theoreticalhour',
         field: 'zoneLanding',
         align: 'left',
-        sortable: true,
-        format: (val) => toTimeFormat(val),
-        columnFilter: {
-            component: 'input',
-            name: 'theoreticalHour',
-            attrs: {
-                dense: true,
-            },
-        },
+        format: (row) => row.theoreticalhour,
+        columnFilter: false,
     },
     {
         label: t('salesTicketsTable.practical'),
-        name: 'practical',
+        name: 'practicalHour',
         field: 'practicalHour',
         align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: 'input',
-            name: 'practicalHour',
-            attrs: {
-                dense: true,
-            },
-        },
+        format: (row) => row.practicalHour,
+        columnFilter: false,
     },
     {
         label: t('salesTicketsTable.preparation'),
-        name: 'preparation',
+        name: 'preparationHour',
         field: 'shipped',
         align: 'left',
-        sortable: true,
-        format: (val) => toTimeFormat(val),
-        columnFilter: {
-            component: 'input',
-            name: 'shippedDate',
-            attrs: {
-                dense: true,
+        format: (row) => row.preparationHour,
+        columnFilter: false,
     },
-        },
-    },
-
     {
         label: t('salesTicketsTable.province'),
-        name: 'province',
+        name: 'provinceFk',
         field: 'province',
         align: 'left',
-        style: { 'max-width': '100px' },
-        sortable: true,
+        format: (row) => row.province,
         columnFilter: {
             component: 'select',
             name: 'provinceFk',
             attrs: {
-                options: provincesOptions.value,
+                options: provinceOpts.value,
                 'option-value': 'id',
                 'option-label': 'name',
                 dense: true,
@@ -190,12 +165,11 @@ const columns = computed(() => [
         name: 'state',
         align: 'left',
         style: { 'max-width': '100px' },
-        sortable: true,
         columnFilter: {
             component: 'select',
             name: 'stateFk',
             attrs: {
-                options: statesOptions.value,
+                options: stateOpts.value,
                 'option-value': 'id',
                 'option-label': 'name',
                 dense: true,
@@ -207,10 +181,7 @@ const columns = computed(() => [
         name: 'isFragile',
         field: 'isFragile',
         align: 'left',
-        sortable: true,
-        columnFilter: {
-            inWhere: true,
-        },
+        columnFilter: false,
         attrs: {
             'checked-icon': 'local_bar',
             'unchecked-icon': 'local_bar',
@@ -220,14 +191,14 @@ const columns = computed(() => [
     },
     {
         label: t('salesTicketsTable.zone'),
-        name: 'zone',
+        name: 'zoneFk',
         align: 'left',
-        sortable: true,
+
         columnFilter: {
             component: 'select',
             name: 'zoneFk',
             attrs: {
-                options: zonesOptions.value,
+                options: zoneOpts.value,
                 'option-value': 'id',
                 'option-label': 'name',
                 dense: true,
@@ -236,13 +207,13 @@ const columns = computed(() => [
     },
     {
         label: t('salesTicketsTable.total'),
-        name: 'total',
+        name: 'totalWithVat',
         field: 'totalWithVat',
         align: 'left',
         style: { 'max-width': '75px' },
-        sortable: true,
+
         columnFilter: {
-            component: 'input',
+            component: 'number',
             name: 'totalWithVat',
             attrs: {
                 dense: true,
@@ -258,7 +229,7 @@ const columns = computed(() => [
                 title: t('salesTicketsTable.goToLines'),
                 icon: 'vn:lines',
                 color: 'priamry',
-                action: (row) => redirectToSales(row.id),
+                action: (row) => openTab(row.id),
                 isPrimary: true,
                 attrs: {
                     flat: true,
@@ -297,18 +268,13 @@ let refreshTimer = null;
 
 const autoRefreshHandler = (value) => {
     if (value)
-        refreshTimer = setInterval(() => paginateRef.value.fetch(), DEFAULT_AUTO_REFRESH);
+        refreshTimer = setInterval(() => tableRef.value.reload(), DEFAULT_AUTO_REFRESH);
     else {
         clearInterval(refreshTimer);
         refreshTimer = null;
     }
 };
 
-const redirectToTicketSummary = (id) => {
-    const url = `#/ticket/${id}/summary`;
-    window.open(url, '_blank');
-};
-
 const stateColors = {
     notice: 'info',
     success: 'positive',
@@ -329,23 +295,10 @@ const formatShippedDate = (date) => {
     return toDateFormat(_date);
 };
 
-const redirectToSales = (id) => {
-    const url = `#/ticket/${id}/sale`;
-    window.open(url, '_blank');
-};
+const openTab = (id) =>
+    window.open(`#/ticket/${id}/sale`, '_blank', 'noopener, noreferrer');
 </script>
-
 <template>
-    <FetchData
-        url="Workers/activeWithInheritedRole"
-        :filter="{
-            fields: ['id', 'nickname'],
-            order: 'nickname ASC',
-            where: { role: 'salesPerson' },
-        }"
-        auto-load
-        @on-fetch="(data) => (workersActiveOptions = data)"
-    />
     <FetchData
         url="Provinces"
         :filter="{
@@ -353,7 +306,7 @@ const redirectToSales = (id) => {
             order: 'name ASC',
         }"
         auto-load
-        @on-fetch="(data) => (provincesOptions = data)"
+        @on-fetch="(data) => (provinceOpts = data)"
     />
     <FetchData
         url="States"
@@ -362,7 +315,7 @@ const redirectToSales = (id) => {
             order: 'name ASC',
         }"
         auto-load
-        @on-fetch="(data) => (statesOptions = data)"
+        @on-fetch="(data) => (stateOpts = data)"
     />
     <FetchData
         url="Zones"
@@ -371,46 +324,60 @@ const redirectToSales = (id) => {
             order: 'name ASC',
         }"
         auto-load
-        @on-fetch="(data) => (zonesOptions = data)"
+        @on-fetch="(data) => (zoneOpts = data)"
     />
+    <MonitorTicketSearchbar />
+    <RightMenu>
+        <template #right-panel>
+            <MonitorTicketFilter data-key="saleMonitorTickets" />
+        </template>
+    </RightMenu>
     <VnTable
-        ref="paginateRef"
-        data-key="SalesMonitorTickets"
+        ref="tableRef"
+        data-key="saleMonitorTickets"
         url="SalesMonitors/salesFilter"
-        :filter="filter"
-        :limit="20"
+        search-url="saleMonitorTickets"
         :expr-builder="exprBuilder"
-        :user-params="params"
         :offset="50"
         :columns="columns"
         :visible-columns="visibleColumns"
         :right-search="false"
         default-mode="table"
         auto-load
-        @row-click="(_, row) => redirectToTicketSummary(row.id)"
+        :row-click="({ id }) => openTab(id)"
+        :disable-option="{ card: true }"
+        :user-params="{ from, to, scopeDays: 1 }"
     >
         <template #top-left>
-            <TableVisibleColumns
-                :all-columns="allColumnNames"
-                table-code="ticketsMonitor"
-                labels-traductions-path="salesTicketsTable"
-                @on-config-saved="visibleColumns = [...$event, 'rowActions']"
-            />
+            <QBtn
+                icon="refresh"
+                size="md"
+                color="primary"
+                class="q-mr-sm"
+                dense
+                flat
+                @click="$refs.tableRef.reload()"
+            >
+                <QTooltip>{{ $t('globals.refresh') }}</QTooltip>
+            </QBtn>
             <QCheckbox
                 v-model="autoRefresh"
-                :label="t('salesTicketsTable.autoRefresh')"
+                :label="$t('salesTicketsTable.autoRefresh')"
                 @update:model-value="autoRefreshHandler"
-            />
+                dense
+            >
+                <QTooltip>{{ $t('refreshInfo') }}</QTooltip>
+            </QCheckbox>
         </template>
-        <template #column-problems="{ row }">
-            <QTd class="no-padding" style="max-width: 50px">
+        <template #column-totalProblems="{ row }">
+            <QTd class="no-padding" style="max-width: 60px">
                 <QIcon
                     v-if="row.isTaxDataChecked === 0"
                     name="vn:no036"
                     color="primary"
                     size="xs"
                 >
-                    <QTooltip>{{ t('salesTicketsTable.noVerifiedData') }}</QTooltip>
+                    <QTooltip>{{ $t('salesTicketsTable.noVerifiedData') }}</QTooltip>
                 </QIcon>
                 <QIcon
                     v-if="row.hasTicketRequest"
@@ -418,7 +385,7 @@ const redirectToSales = (id) => {
                     color="primary"
                     size="xs"
                 >
-                    <QTooltip>{{ t('salesTicketsTable.purchaseRequest') }}</QTooltip>
+                    <QTooltip>{{ $t('salesTicketsTable.purchaseRequest') }}</QTooltip>
                 </QIcon>
                 <QIcon
                     v-if="row.itemShortage"
@@ -426,10 +393,10 @@ const redirectToSales = (id) => {
                     color="primary"
                     size="xs"
                 >
-                    <QTooltip>{{ t('salesTicketsTable.notVisible') }}</QTooltip>
+                    <QTooltip>{{ $t('salesTicketsTable.notVisible') }}</QTooltip>
                 </QIcon>
                 <QIcon v-if="row.isFreezed" name="vn:frozen" color="primary" size="xs">
-                    <QTooltip>{{ t('salesTicketsTable.clientFrozen') }}</QTooltip>
+                    <QTooltip>{{ $t('salesTicketsTable.clientFrozen') }}</QTooltip>
                 </QIcon>
                 <QIcon
                     v-if="row.risk"
@@ -437,7 +404,9 @@ const redirectToSales = (id) => {
                     :color="row.hasHighRisk ? 'negative' : 'primary'"
                     size="xs"
                 >
-                    <QTooltip>{{ t('salesTicketsTable.risk') }}: {{ row.risk }}</QTooltip>
+                    <QTooltip
+                        >{{ $t('salesTicketsTable.risk') }}: {{ row.risk }}</QTooltip
+                    >
                 </QIcon>
                 <QIcon
                     v-if="row.hasComponentLack"
@@ -445,7 +414,7 @@ const redirectToSales = (id) => {
                     color="primary"
                     size="xs"
                 >
-                    <QTooltip>{{ t('salesTicketsTable.componentLack') }}</QTooltip>
+                    <QTooltip>{{ $t('salesTicketsTable.componentLack') }}</QTooltip>
                 </QIcon>
                 <QIcon
                     v-if="row.isTooLittle"
@@ -453,11 +422,11 @@ const redirectToSales = (id) => {
                     color="primary"
                     size="xs"
                 >
-                    <QTooltip>{{ t('salesTicketsTable.tooLittle') }}</QTooltip>
+                    <QTooltip>{{ $t('salesTicketsTable.tooLittle') }}</QTooltip>
                 </QIcon>
             </QTd>
         </template>
-        <template #column-identifier="{ row }">
+        <template #column-id="{ row }">
             <QTd class="no-padding">
                 <span class="link" @click.stop.prevent>
                     {{ row.id }}
@@ -465,19 +434,19 @@ const redirectToSales = (id) => {
                 </span>
             </QTd>
         </template>
-        <template #column-client="{ row }">
-            <QTd class="no-padding" @click.stop.prevent>
+        <template #column-clientFk="{ row }">
+            <QTd class="no-padding" @click.stop :title="row.nickname">
                 <span class="link">{{ row.nickname }}</span>
                 <CustomerDescriptorProxy :id="row.clientFk" />
             </QTd>
         </template>
-        <template #column-salesPerson="{ row }">
-            <QTd class="no-padding" @click.stop.prevent>
-                <span class="link">{{ row.userName }}</span>
+        <template #column-salesPersonFk="{ row }">
+            <QTd class="no-padding" @click.stop :title="row.userName">
+                <span class="link" v-text="dashIfEmpty(row.userName)" />
                 <WorkerDescriptorProxy :id="row.salesPersonFk" />
             </QTd>
         </template>
-        <template #column-date="{ row }">
+        <template #column-shippedDate="{ row }">
             <QTd class="no-padding">
                 <QBadge
                     v-bind="getBadgeAttrs(row.shippedDate)"
@@ -488,6 +457,11 @@ const redirectToSales = (id) => {
                 </QBadge>
             </QTd>
         </template>
+        <template #column-provinceFk="{ row }">
+            <QTd class="no-padding">
+                <span :title="row.province" v-text="row.province" />
+            </QTd>
+        </template>
         <template #column-state="{ row }">
             <QTd class="no-padding" @click.stop.prevent>
                 <div v-if="row.refFk">
@@ -508,17 +482,17 @@ const redirectToSales = (id) => {
         <template #column-isFragile="{ row }">
             <QTd class="no-padding">
                 <QIcon v-if="row.isFragile" name="local_bar" color="primary" size="sm">
-                    <QTooltip>{{ t('salesTicketsTable.isFragile') }}</QTooltip>
+                    <QTooltip>{{ $t('salesTicketsTable.isFragile') }}</QTooltip>
                 </QIcon>
             </QTd>
         </template>
-        <template #column-zone="{ row }">
-            <QTd class="no-padding" @click.stop.prevent>
+        <template #column-zoneFk="{ row }">
+            <QTd class="no-padding" @click.stop.prevent :title="row.zoneName">
                 <span class="link">{{ row.zoneName }}</span>
                 <ZoneDescriptorProxy :id="row.zoneFk" />
             </QTd>
         </template>
-        <template #column-total="{ row }">
+        <template #column-totalWithVat="{ row }">
             <QTd class="no-padding">
                 <QBadge
                     :color="totalPriceColor(row) || 'transparent'"

src/pages/Monitor/locale/en.yml

@@ -11,11 +11,14 @@ salesClientsTable:
     client: Client
 salesOrdersTable:
     delete: Delete
-    date: Date
+    dateSend: Send date
+    dateMake: Make date
     client: Client
     salesPerson: Salesperson
     deleteConfirmTitle: Delete selected elements
     deleteConfirmMessage: All the selected elements will be deleted. Are you sure you want to continue?
+    agency: Agency
+    import: Import
 salesTicketsTable:
     autoRefresh: Auto-refresh
     problems: Problems
@@ -43,3 +46,4 @@ salesTicketsTable:
 searchBar:
     label: Search tickets
     info: Search tickets by id or alias
+refreshInfo: Toggle auto-refresh every 2 minutes

src/pages/Monitor/locale/es.yml

@@ -11,11 +11,14 @@ salesClientsTable:
     client: Cliente
 salesOrdersTable:
     delete: Eliminar
-    date: Fecha
+    dateSend: Fecha de envío
+    dateMake: Fecha de realización
     client: Cliente
     salesPerson: Comercial
     deleteConfirmTitle: Eliminar los elementos seleccionados
     deleteConfirmMessage: Todos los elementos seleccionados serán eliminados. ¿Seguro que quieres continuar?
+    agency: Agencia
+    import: Importe
 salesTicketsTable:
     autoRefresh: Auto-refresco
     problems: Problemas
@@ -43,3 +46,4 @@ salesTicketsTable:
 searchBar:
     label: Buscar tickets
     info: Buscar tickets por identificador o alias
+refreshInfo: Conmuta el refresco automático cada 2 minutos

src/pages/Order/Card/OrderCatalogFilter.vue

@@ -380,21 +380,6 @@ function addOrder(value, field, params) {
                     @click="tagValues.push({})"
                 />
             </QItem>
-            <!-- <QItem>
-                <QItemSection class="q-py-sm">
-                    <QBtn
-                        :label="t('Search')"
-                        class="full-width"
-                        color="primary"
-                        dense
-                        icon="search"
-                        rounded
-                        type="button"
-                        unelevated
-                        @click.stop="applyTagFilter(params, searchFn)"
-                    />
-                </QItemSection>
-            </QItem> -->
             <QSeparator />
         </template>
     </VnFilterPanel>

src/pages/Order/Card/OrderCatalogItemDialog.vue

@@ -77,10 +77,6 @@ const addToOrder = async () => {
 </template>
 
 <style lang="scss" scoped>
-// .container {
-//     max-width: 768px;
-//     width: 100%;
-// }
 .td {
     width: 200px;
 }

src/pages/Order/Card/OrderLines.vue

@@ -14,6 +14,7 @@ import FetchData from 'src/components/FetchData.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import FetchedTags from 'src/components/ui/FetchedTags.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
 const router = useRouter();
 const stateStore = useStateStore();
@@ -280,7 +281,12 @@ watch(
                 <VnImg :id="parseInt(row?.item?.image)" class="rounded" />
             </div>
         </template>
-
+        <template #column-id="{ row }">
+            <span class="link" @click.stop>
+                {{ row?.item?.id }}
+                <ItemDescriptorProxy :id="row?.item?.id" />
+            </span>
+        </template>
         <template #column-itemFk="{ row }">
             <div class="row column full-width justify-between items-start">
                 {{ row?.item?.name }}
@@ -288,7 +294,7 @@ watch(
                     {{ row?.item?.subName.toUpperCase() }}
                 </div>
             </div>
-            <FetchedTags :item="row?.item" :max-length="6" />
+            <FetchedTags :item="row?.item" />
         </template>
         <template #column-amount="{ row }">
             {{ toCurrency(row.quantity * row.price) }}

src/pages/Order/Card/OrderSummary.vue

@@ -192,7 +192,7 @@ const detailsColumns = ref([
                                             </span>
                                         </div>
                                     </div>
-                                    <FetchedTags :item="props.row.item" :max-length="5" />
+                                    <FetchedTags :item="props.row.item" />
                                 </QTd>
                                 <QTd key="quantity" :props="props">
                                     {{ props.row.quantity }}

src/pages/Order/Card/OrderVolume.vue

@@ -2,8 +2,9 @@
 import axios from 'axios';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import { dashIfEmpty } from 'src/filters';
+import { useStateStore } from 'stores/useStateStore';
 
 import FetchData from 'components/FetchData.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
@@ -58,6 +59,9 @@ const loadVolumes = async (rows) => {
     });
     volumes.value = rows;
 };
+
+const stateStore = useStateStore();
+onMounted(async () => (stateStore.rightDrawer = false));
 </script>
 
 <template>
@@ -84,6 +88,7 @@ const loadVolumes = async (rows) => {
         @on-fetch="(data) => loadVolumes(data)"
         :right-search="false"
         :column-search="false"
+        :disable-option="{ card: true }"
     >
         <template #column-itemFk="{ row }">
             <span class="link">
@@ -92,7 +97,13 @@ const loadVolumes = async (rows) => {
             </span>
         </template>
         <template #column-description="{ row }">
-            <FetchedTags :item="row.item" :max-length="5" />
+            <div class="row column full-width justify-between items-start">
+                {{ row?.item?.name }}
+                <div v-if="row?.item?.subName" class="subName">
+                    {{ row?.item?.subName.toUpperCase() }}
+                </div>
+            </div>
+            <FetchedTags :item="row?.item" />
         </template>
         <template #column-volume="{ rowIndex }">
             {{ volumes?.[rowIndex]?.volume }}
@@ -121,6 +132,11 @@ const loadVolumes = async (rows) => {
         }
     }
 }
+
+.subName {
+    color: var(--vn-label-color);
+    text-transform: uppercase;
+}
 </style>
 <i18n>
 en:

src/pages/Order/OrderList.vue

@@ -11,6 +11,9 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import OrderSearchbar from './Card/OrderSearchbar.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
 import OrderFilter from './Card/OrderFilter.vue';
+import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
+import WorkerDescriptorProxy from '../Worker/Card/WorkerDescriptorProxy.vue';
+import { toDateTimeFormat } from 'src/filters/date';
 
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
@@ -75,7 +78,7 @@ const columns = computed(() => [
         label: t('module.created'),
         component: 'date',
         cardVisible: true,
-        format: (row) => toDate(row?.landed),
+        format: (row) => toDateTimeFormat(row?.landed),
         columnField: {
             component: null,
         },
@@ -115,6 +118,7 @@ const columns = computed(() => [
             },
         },
         cardVisible: true,
+        columnClass: 'expand',
     },
     {
         align: 'left',
@@ -132,6 +136,7 @@ const columns = computed(() => [
                 title: t('InvoiceOutSummary'),
                 icon: 'preview',
                 action: (row) => viewSummary(row.id, OrderSummary),
+                isPrimary: true,
             },
         ],
     },
@@ -154,6 +159,16 @@ async function fetchAgencies({ landed, addressId }) {
     });
     agencyList.value = data;
 }
+
+const getDateColor = (date) => {
+    const today = Date.vnNew();
+    today.setHours(0, 0, 0, 0);
+    const timeTicket = new Date(date);
+    timeTicket.setHours(0, 0, 0, 0);
+    const comparation = today - timeTicket;
+    if (comparation == 0) return 'bg-warning';
+    if (comparation < 0) return 'bg-success';
+};
 </script>
 <template>
     <OrderSearchbar />
@@ -183,6 +198,25 @@ async function fetchAgencies({ landed, addressId }) {
         :columns="columns"
         redirect="order"
     >
+        <template #column-clientFk="{ row }">
+            <span class="link" @click.stop>
+                {{ row?.clientName }}
+                <CustomerDescriptorProxy :id="row?.clientFk" />
+            </span>
+        </template>
+        <template #column-salesPersonFk="{ row }">
+            <span class="link" @click.stop>
+                {{ row?.name }}
+                <WorkerDescriptorProxy :id="row?.salesPersonFk" />
+            </span>
+        </template>
+        <template #column-landed="{ row }">
+            <span v-if="getDateColor(row.landed)">
+                <QChip :class="getDateColor(row.landed)" dense square>
+                    {{ toDate(row?.landed) }}
+                </QChip>
+            </span>
+        </template>
         <template #more-create-dialog="{ data }">
             <VnSelect
                 url="Clients"

src/pages/Route/Card/RouteSummary.vue

@@ -217,7 +217,7 @@ const ticketColumns = ref([
                         <template #body-cell-city="{ value, row }">
                             <QTd auto-width>
                                 <span
-                                    class="text-primary cursor-pointer"
+                                    class="link cursor-pointer"
                                     @click="openBuscaman(entity?.route?.vehicleFk, [row])"
                                 >
                                     {{ value }}
@@ -226,7 +226,7 @@ const ticketColumns = ref([
                         </template>
                         <template #body-cell-client="{ value, row }">
                             <QTd auto-width>
-                                <span class="text-primary cursor-pointer">
+                                <span class="link cursor-pointer">
                                     {{ value }}
                                     <CustomerDescriptorProxy :id="row?.clientFk" />
                                 </span>
@@ -234,7 +234,7 @@ const ticketColumns = ref([
                         </template>
                         <template #body-cell-ticket="{ value, row }">
                             <QTd auto-width class="text-center">
-                                <span class="text-primary cursor-pointer">
+                                <span class="link cursor-pointer">
                                     {{ value }}
                                     <TicketDescriptorProxy :id="row?.id" />
                                 </span>

src/pages/Route/RouteList.vue

@@ -87,6 +87,7 @@ const columns = computed(() => [
                 label: 'agencyName',
             },
         },
+        columnClass: 'expand',
     },
     {
         align: 'left',
@@ -142,17 +143,9 @@ const columns = computed(() => [
     {
         align: 'center',
         name: 'm3',
-        label: 'volume',
+        label: t('Volume'),
         cardVisible: true,
-    },
-    {
-        align: 'left',
-        name: 'description',
-        label: t('Description'),
-        isTitle: true,
-        create: true,
-        component: 'input',
-        field: 'description',
+        columnClass: 'shrink',
     },
     {
         align: 'left',
@@ -168,12 +161,38 @@ const columns = computed(() => [
         component: 'time',
         columnFilter: false,
     },
+    {
+        align: 'center',
+        name: 'kmStart',
+        label: t('KmStart'),
+        columnClass: 'shrink',
+        create: true,
+        visible: false,
+    },
+    {
+        align: 'center',
+        name: 'kmEnd',
+        label: t('KmEnd'),
+        columnClass: 'shrink',
+        create: true,
+        visible: false,
+    },
+    {
+        align: 'left',
+        name: 'description',
+        label: t('Description'),
+        isTitle: true,
+        create: true,
+        component: 'input',
+        field: 'description',
+    },
     {
         align: 'left',
         name: 'isOk',
         label: t('Served'),
         component: 'checkbox',
         columnFilter: false,
+        columnClass: 'shrink',
     },
     {
         align: 'right',
@@ -368,10 +387,13 @@ es:
     Worker: Trabajador
     Agency: Agencia
     Vehicle: Vehículo
+    Volume: Volumen
     Date: Fecha
     Description: Descripción
     Hour started: Hora inicio
     Hour finished: Hora fin
+    KmStart: Km inicio
+    KmEnd: Km fin
     Served: Servida
     newRoute: Nueva Ruta
     Clone Selected Routes: Clonar rutas seleccionadas

src/pages/Shelving/Card/ShelvingFilter.vue

@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -15,25 +16,13 @@ const props = defineProps({
 const emit = defineEmits(['search']);
 
 const workers = ref();
-const parkings = ref();
 
 function setWorkers(data) {
     workers.value = data;
 }
-
-function setParkings(data) {
-    parkings.value = data;
-}
 </script>
 
 <template>
-    <FetchData
-        url="Parkings"
-        :filter="{ fields: ['id', 'code'] }"
-        sort-by="code ASC"
-        @on-fetch="setParkings"
-        auto-load
-    />
     <FetchData
         url="Workers/activeWithInheritedRole"
         :filter="{ where: { role: 'salesPerson' } }"
@@ -54,44 +43,36 @@ function setParkings(data) {
         </template>
         <template #body="{ params }">
             <QItem class="q-my-sm">
-                <QItemSection v-if="!parkings">
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-                <QItemSection v-if="parkings">
-                    <QSelect
+                <QItemSection>
+                    <VnSelect
+                        v-model="params.parkingFk"
+                        url="Parkings"
+                        :fields="['id', 'code']"
+                        :label="t('params.parkingFk')"
+                        option-value="id"
+                        option-label="code"
+                        :filter-options="['id', 'code']"
                         dense
                         outlined
                         rounded
-                        :label="t('params.parkingFk')"
-                        v-model="params.parkingFk"
-                        :options="parkings"
-                        option-value="id"
-                        option-label="code"
-                        emit-value
-                        map-options
-                        use-input
-                        :input-debounce="0"
+                        sort-by="code ASC"
                     />
                 </QItemSection>
             </QItem>
             <QItem class="q-mb-sm">
-                <QItemSection v-if="!workers">
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-                <QItemSection v-if="workers">
-                    <QSelect
+                <QItemSection>
+                    <VnSelect
                         dense
                         outlined
                         rounded
                         :label="t('params.userFk')"
                         v-model="params.userFk"
-                        :options="workers"
+                        url="Workers/activeWithInheritedRole"
                         option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                        use-input
-                        :input-debounce="0"
+                        option-label="firstName"
+                        :where="{ role: 'salesPerson' }"
+                        sort-by="firstName ASC"
+                        :use-like="false"
                     />
                 </QItemSection>
             </QItem>

src/pages/Shelving/Card/ShelvingForm.vue

@@ -1,12 +1,12 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import VnRow from 'components/ui/VnRow.vue';
-import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -20,30 +20,6 @@ const defaultInitialData = {
     isRecyclable: false,
 };
 
-const parkingFilter = { fields: ['id', 'code'] };
-const parkingList = ref([]);
-const parkingListCopy = ref([]);
-
-const setParkingList = (data) => {
-    parkingList.value = data;
-    parkingListCopy.value = data;
-};
-
-const parkingSelectFilter = {
-    options: parkingList,
-    filterFn: (options, value) => {
-        const search = value.trim().toLowerCase();
-
-        if (!search || search === '') {
-            return parkingListCopy.value;
-        }
-
-        return options.value.filter((option) =>
-            option.code.toLowerCase().startsWith(search)
-        );
-    },
-};
-
 const shelvingFilter = {
     include: [
         {
@@ -68,12 +44,6 @@ const onSave = (shelving, newShelving) => {
 </script>
 <template>
     <VnSubToolbar v-if="isNew" />
-    <FetchData
-        url="Parkings"
-        :filter="parkingFilter"
-        @on-fetch="setParkingList"
-        auto-load
-    />
     <FormModel
         :url="isNew ? null : `Shelvings/${entityId}`"
         :url-create="isNew ? 'Shelvings' : null"
@@ -84,27 +54,22 @@ const onSave = (shelving, newShelving) => {
         :form-initial-data="isNew ? defaultInitialData : null"
         @on-data-saved="onSave"
     >
-        <template #form="{ data, validate, filter }">
+        <template #form="{ data, validate }">
             <VnRow>
                 <VnInput
                     v-model="data.code"
                     :label="t('shelving.basicData.code')"
                     :rules="validate('Shelving.code')"
                 />
-                <QSelect
+                <VnSelect
                     v-model="data.parkingFk"
-                    :options="parkingList"
+                    url="Parkings"
                     option-value="id"
                     option-label="code"
-                    emit-value
+                    :filter-options="['id', 'code']"
+                    :fields="['id', 'code']"
                     :label="t('shelving.basicData.parking')"
-                    map-options
-                    use-input
-                    @filter="
-                        (value, update) => filter(value, update, parkingSelectFilter)
-                    "
                     :rules="validate('Shelving.parkingFk')"
-                    :input-debounce="0"
                 />
             </VnRow>
             <VnRow>

src/pages/Shelving/ShelvingList.vue

@@ -87,7 +87,7 @@ function exprBuilder(param, value) {
         </div>
         <QPageSticky :offset="[20, 20]">
             <RouterLink :to="{ name: 'ShelvingCreate' }">
-                <QBtn fab icon="add" color="primary" />
+                <QBtn fab icon="add" color="primary" shortcut="+" />
                 <QTooltip>
                     {{ t('shelving.list.newShelving') }}
                 </QTooltip>

src/pages/Supplier/Card/SupplierAddresses.vue

@@ -81,7 +81,13 @@ const redirectToUpdateView = (addressData) => {
             </VnPaginate>
         </div>
         <QPageSticky :offset="[20, 20]">
-            <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
+            <QBtn
+                fab
+                icon="add"
+                color="primary"
+                @click="redirectToCreateView()"
+                shortcut="+"
+            />
             <QTooltip>
                 {{ t('New address') }}
             </QTooltip>
@@ -93,3 +99,4 @@ const redirectToUpdateView = (addressData) => {
 es:
     New address: Nueva dirección
 </i18n>
+s

src/pages/Supplier/Card/SupplierAgencyTerm.vue

@@ -109,7 +109,13 @@ const redirectToCreateView = () => {
         </template>
     </CrudModel>
     <QPageSticky :offset="[20, 20]">
-        <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
+        <QBtn
+            fab
+            icon="add"
+            color="primary"
+            @click="redirectToCreateView()"
+            shortcut="+"
+        />
         <QTooltip>
             {{ t('supplier.agencyTerms.addRow') }}
         </QTooltip>

src/pages/Supplier/Card/SupplierConsumption.vue

@@ -208,7 +208,7 @@ onMounted(async () => {
 
                     <QTd no-hover>
                         <span>{{ buy.subName }}</span>
-                        <FetchedTags :item="buy" :max-length="5" />
+                        <FetchedTags :item="buy" />
                     </QTd>
                     <QTd no-hover> {{ dashIfEmpty(buy.quantity) }}</QTd>
                     <QTd no-hover> {{ dashIfEmpty(buy.price) }}</QTd>

src/pages/Ticket/Card/BasicData/BasicDataTable.vue

@@ -245,7 +245,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 <div class="column">
                     <span>{{ row.item.name }}</span>
                     <span class="color-vn-label">{{ row.item.subName }}</span>
-                    <FetchedTags :item="row.item" :max-length="6" />
+                    <FetchedTags :item="row.item" />
                 </div>
             </QTd>
         </template>

src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue

@@ -30,7 +30,6 @@ const { t } = useI18n();
 const agencyFetchRef = ref(null);
 const zonesFetchRef = ref(null);
 
-const clientsOptions = ref([]);
 const warehousesOptions = ref([]);
 const companiesOptions = ref([]);
 const agenciesOptions = ref([]);
@@ -273,15 +272,6 @@ const redirectToCustomerAddress = () => {
 onMounted(() => onFormModelInit());
 </script>
 <template>
-    <FetchData
-        url="Clients"
-        :filter="{
-            fields: ['id', 'name'],
-            order: 'id',
-        }"
-        @on-fetch="(data) => (clientsOptions = data)"
-        auto-load
-    />
     <FetchData
         url="Warehouses"
         @on-fetch="(data) => (warehousesOptions = data)"
@@ -317,7 +307,9 @@ onMounted(() => onFormModelInit());
                 v-model="clientId"
                 option-value="id"
                 option-label="name"
-                :options="clientsOptions"
+                url="Clients"
+                :fields="['id', 'name']"
+                sort-by="id"
                 hide-selected
                 map-options
                 :required="true"

src/pages/Ticket/Card/TicketComponents.vue

@@ -310,7 +310,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 <div class="column">
                     <span>{{ row.item.name }}</span>
                     <span class="color-vn-label">{{ row.item.subName }}</span>
-                    <FetchedTags :item="row.item" :max-length="6" />
+                    <FetchedTags :item="row.item" />
                 </div>
             </QTd>
         </template>

src/pages/Ticket/Card/TicketCreateTracking.vue

@@ -17,9 +17,7 @@ const { t } = useI18n();
 const state = useState();
 const user = state.getUser();
 const stateFetchDataRef = ref(null);
-
 const statesOptions = ref([]);
-const workersOptions = ref([]);
 
 const onStateFkChange = (formData) => (formData.userFk = user.value.id);
 </script>
@@ -30,12 +28,6 @@ const onStateFkChange = (formData) => (formData.userFk = user.value.id);
         auto-load
         @on-fetch="(data) => (statesOptions = data)"
     />
-    <FetchData
-        url="Workers/search"
-        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
-        auto-load
-        @on-fetch="(data) => (workersOptions = data)"
-    />
     <FormModelPopup
         :title="t('Create tracking')"
         url-create="Tickets/state"
@@ -57,7 +49,9 @@ const onStateFkChange = (formData) => (formData.userFk = user.value.id);
                 <VnSelect
                     :label="t('tracking.worker')"
                     v-model="data.userFk"
-                    :options="workersOptions"
+                    url="Workers/search"
+                    fields=" ['id', 'name']"
+                    sort-by="name ASC"
                     hide-selected
                     option-label="name"
                     option-value="id"

src/pages/Ticket/Card/TicketExpedition.vue

@@ -3,7 +3,6 @@ import { onMounted, ref, computed, onUnmounted, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
-import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import TicketEditManaProxy from './TicketEditMana.vue';
@@ -35,7 +34,6 @@ const selectedExpeditions = ref([]);
 const allColumnNames = ref([]);
 const visibleColumns = ref([]);
 const newTicketWithRoute = ref(false);
-const itemsOptions = ref([]);
 
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -139,7 +137,9 @@ const columns = computed(() => [
             filterValue: null,
             event: getInputEvents,
             attrs: {
-                options: itemsOptions.value,
+                url: 'Items',
+                fields: ['id', 'name'],
+                'sort-by': 'name ASC',
                 'option-value': 'id',
                 'option-label': 'name',
                 dense: true,
@@ -274,12 +274,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 </script>
 
 <template>
-    <FetchData
-        url="Items"
-        auto-load
-        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
-        @on-fetch="(data) => (itemsOptions = data)"
-    />
     <VnSubToolbar>
         <template #st-data>
             <TableVisibleColumns

src/pages/Ticket/Card/TicketPurchaseRequest.vue

@@ -252,7 +252,13 @@ const openCreateModal = () => createTicketRequestDialogRef.value.show();
             <TicketCreateRequest @on-request-created="crudModelRef.reload()" />
         </QDialog>
         <QPageSticky :offset="[20, 20]">
-            <QBtn @click="openCreateModal()" color="primary" fab icon="add" />
+            <QBtn
+                @click="openCreateModal()"
+                color="primary"
+                fab
+                icon="add"
+                shortcut="+"
+            />
             <QTooltip class="text-no-wrap">
                 {{ t('purchaseRequest.newRequest') }}
             </QTooltip>

src/pages/Ticket/Card/TicketSale.vue

@@ -38,7 +38,6 @@ const ticketConfig = ref(null);
 const isLocked = ref(false);
 const isTicketEditable = ref(false);
 const sales = ref([]);
-const itemsWithNameOptions = ref([]);
 const editableStatesOptions = ref([]);
 const selectedSales = ref([]);
 const mana = ref(null);
@@ -435,12 +434,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         auto-load
         @on-fetch="(data) => (isLocked = data)"
     />
-    <FetchData
-        url="Items/withName"
-        :filter="{ fields: ['id', 'name'], order: 'id DESC' }"
-        auto-load
-        @on-fetch="(data) => (itemsWithNameOptions = data)"
-    />
     <FetchData
         url="States/editableStates"
         :filter="{ fields: ['code', 'name', 'id', 'alertLevel'], order: 'name ASC' }"
@@ -626,10 +619,12 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 </div>
                 <VnSelect
                     v-else
-                    :options="itemsWithNameOptions"
                     hide-selected
                     option-label="name"
                     option-value="id"
+                    url="Items/withName"
+                    :fields="['id', 'name']"
+                    sort-by="id DESC"
                     @update:model-value="changeQuantity(row)"
                     v-model="row.itemFk"
                 >
@@ -661,7 +656,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 <div class="column">
                     <span>{{ row.concept }}</span>
                     <span class="color-vn-label">{{ row.item?.subName }}</span>
-                    <FetchedTags v-if="row.item" :item="row.item" :max-length="6" />
+                    <FetchedTags v-if="row.item" :item="row.item" />
                     <QPopupProxy v-if="row.id && isTicketEditable">
                         <VnInput v-model="row.concept" @change="updateConcept(row)" />
                     </QPopupProxy>

src/pages/Ticket/Card/TicketSaleTracking.vue

@@ -26,8 +26,6 @@ const saleTrackingFetchDataRef = ref(null);
 const sales = ref([]);
 const saleTrackings = ref([]);
 const itemShelvignsSales = ref([]);
-const shelvingsOptions = ref([]);
-const parkingsOptions = ref([]);
 const saleTrackingUrl = computed(() => `SaleTrackings/${route.params.id}/filter`);
 const oldQuantity = ref(null);
 
@@ -330,12 +328,6 @@ const qCheckBoxController = (sale, action) => {
         auto-load
         @on-fetch="(data) => (sales = data)"
     />
-    <FetchData
-        url="Shelvings"
-        auto-load
-        @on-fetch="(data) => (shelvingsOptions = data)"
-    />
-    <FetchData url="Parkings" auto-load @on-fetch="(data) => (parkingsOptions = data)" />
     <QTable
         :rows="sales"
         :columns="columns"
@@ -420,7 +412,7 @@ const qCheckBoxController = (sale, action) => {
                     <span v-if="row.subName" class="color-vn-label">
                         {{ row.subName }}
                     </span>
-                    <FetchedTags :item="row" :max-length="6" tag="value" />
+                    <FetchedTags :item="row" tag="value" />
                 </div>
             </QTd>
         </template>
@@ -500,7 +492,7 @@ const qCheckBoxController = (sale, action) => {
             <template #body-cell-shelving="{ row }">
                 <QTd auto-width>
                     <VnSelect
-                        :options="shelvingsOptions"
+                        url="Shelvings"
                         hide-selected
                         option-label="code"
                         option-value="code"
@@ -513,7 +505,7 @@ const qCheckBoxController = (sale, action) => {
             <template #body-cell-parking="{ row }">
                 <QTd auto-width>
                     <VnSelect
-                        :options="parkingsOptions"
+                        url="Parkings"
                         hide-selected
                         option-label="code"
                         option-value="id"

src/pages/Ticket/Card/TicketSummary.vue

@@ -400,7 +400,6 @@ async function changeState(value) {
                                 <FetchedTags
                                     class="fetched-tags"
                                     :item="props.row.item"
-                                    :max-length="5"
                                 ></FetchedTags>
                             </QTd>
                             <QTd>{{ props.row.price }} €</QTd>

src/pages/Ticket/Card/TicketTracking.vue

@@ -114,7 +114,13 @@ const openCreateModal = () => createTrackingDialogRef.value.show();
             <TicketCreateTracking @on-request-created="paginateRef.fetch()" />
         </QDialog>
         <QPageSticky :offset="[20, 20]">
-            <QBtn @click="openCreateModal()" color="primary" fab icon="add" />
+            <QBtn
+                @click="openCreateModal()"
+                color="primary"
+                fab
+                icon="add"
+                shortcut="+"
+            />
             <QTooltip class="text-no-wrap">
                 {{ t('tracking.addState') }}
             </QTooltip>

src/pages/Ticket/Card/TicketVolume.vue

@@ -145,7 +145,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 <div class="column">
                     <span>{{ row.item.name }}</span>
                     <span class="color-vn-label">{{ row.item.subName }}</span>
-                    <FetchedTags :item="row.item" :max-length="6" />
+                    <FetchedTags :item="row.item" />
                 </div>
             </QTd>
         </template>

src/pages/Travel/Card/TravelThermographs.vue

@@ -196,6 +196,7 @@ const removeThermograph = async (id) => {
             icon="add"
             color="primary"
             @click="redirectToThermographForm('create')"
+            shortcut="+"
         />
         <QTooltip class="text-no-wrap">
             {{ t('Add thermograph') }}

src/pages/Travel/ExtraCommunityFilter.vue

@@ -20,7 +20,6 @@ const props = defineProps({
 const warehousesOptions = ref([]);
 const continentsOptions = ref([]);
 const agenciesOptions = ref([]);
-const suppliersOptions = ref([]);
 const warehousesByContinent = ref({});
 
 const add = (paramsObj, key) => {
@@ -76,12 +75,6 @@ warehouses();
         @on-fetch="(data) => (agenciesOptions = data)"
         auto-load
     />
-    <FetchData
-        url="Suppliers"
-        @on-fetch="(data) => (suppliersOptions = data)"
-        auto-load
-    />
-
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
@@ -220,7 +213,7 @@ warehouses();
                     <VnSelect
                         :label="t('globals.pageTitles.supplier')"
                         v-model="params.cargoSupplierFk"
-                        :options="suppliersOptions"
+                        url="Suppliers"
                         option-value="id"
                         option-label="name"
                         hide-selected

src/pages/Wagon/Type/WagonTypeList.vue

@@ -74,7 +74,7 @@ async function remove(row) {
             </VnPaginate>
         </div>
         <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn @click="create" fab icon="add" color="primary" />
+            <QBtn @click="create" fab icon="add" color="primary" shortcut="+" />
         </QPageSticky>
     </QPage>
 </template>

src/pages/Wagon/WagonList.vue

@@ -94,7 +94,7 @@ async function remove(row) {
             </VnPaginate>
         </div>
         <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn @click="create" fab icon="add" color="primary" />
+            <QBtn @click="create" fab icon="add" color="primary" shortcut="+" />
         </QPageSticky>
     </QPage>
 </template>

src/pages/Worker/Card/WorkerMedical.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import VnTable from 'components/VnTable/VnTable.vue';
+const tableRef = ref();
+const { t } = useI18n();
+const route = useRoute();
+const entityId = computed(() => route.params.id);
+
+const columns = [
+    {
+        align: 'left',
+        name: 'date',
+        label: t('worker.medical.tableVisibleColumns.date'),
+        create: true,
+        component: 'date',
+    },
+    {
+        align: 'left',
+        name: 'time',
+        label: t('worker.medical.tableVisibleColumns.time'),
+        create: true,
+        component: 'time',
+        attrs: {
+            timeOnly: true,
+        },
+    },
+    {
+        align: 'left',
+        name: 'centerFk',
+        label: t('worker.medical.tableVisibleColumns.center'),
+        create: true,
+        component: 'select',
+        attrs: {
+            url: 'medicalCenters',
+            fields: ['id', 'name'],
+        },
+    },
+    {
+        align: 'left',
+        name: 'invoice',
+        label: t('worker.medical.tableVisibleColumns.invoice'),
+        create: true,
+        component: 'input',
+    },
+    {
+        align: 'left',
+        name: 'amount',
+        label: t('worker.medical.tableVisibleColumns.amount'),
+        create: true,
+        component: 'input',
+    },
+    {
+        align: 'left',
+        name: 'isFit',
+        label: t('worker.medical.tableVisibleColumns.isFit'),
+        create: true,
+        component: 'checkbox',
+    },
+    {
+        align: 'left',
+        name: 'remark',
+        label: t('worker.medical.tableVisibleColumns.remark'),
+        create: true,
+        component: 'input',
+    },
+];
+</script>
+<template>
+    <VnTable
+        ref="tableRef"
+        data-key="WorkerMedical"
+        :url="`Workers/${entityId}/medicalReview`"
+        save-url="MedicalReviews/crud"
+        :create="{
+            urlCreate: 'medicalReviews',
+            title: t('Create medicalReview'),
+            onDataSaved: () => tableRef.reload(),
+            formInitialData: {
+                workerFk: entityId,
+            },
+        }"
+        order="date DESC"
+        :columns="columns"
+        auto-load
+        :right-search="false"
+        :is-editable="true"
+        :use-model="true"
+    />
+</template>

src/pages/Worker/Card/WorkerPda.vue

@@ -116,7 +116,7 @@ function reloadData() {
             </template>
         </VnPaginate>
         <QPageSticky :offset="[18, 18]">
-            <QBtn @click.stop="dialog.show()" color="primary" fab icon="add">
+            <QBtn @click.stop="dialog.show()" color="primary" fab icon="add" shortcut="+">
                 <QDialog ref="dialog">
                     <FormModelPopup
                         :title="t('Add new device')"

src/pages/Worker/Card/WorkerSummary.vue

@@ -10,7 +10,6 @@ import CardSummary from 'components/ui/CardSummary.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 import RoleDescriptorProxy from 'src/pages/Account/Role/Card/RoleDescriptorProxy.vue';
-import VnRow from 'src/components/ui/VnRow.vue';
 import DepartmentDescriptorProxy from 'src/pages/Department/Card/DepartmentDescriptorProxy.vue';
 
 const route = useRoute();

src/pages/Zone/Card/ZoneBasicData.vue

@@ -83,6 +83,7 @@ const agencyOptions = ref([]);
                     :label="t('Price')"
                     type="number"
                     min="0"
+                    required="true"
                     clearable
                 />
                 <VnInput
@@ -95,7 +96,12 @@ const agencyOptions = ref([]);
             </VnRow>
 
             <VnRow>
-                <VnInput v-model="data.inflation" :label="t('Inflation')" clearable />
+                <VnInput
+                    v-model="data.inflation"
+                    :label="t('Inflation')"
+                    type="number"
+                    clearable
+                />
                 <QCheckbox
                     v-model="data.isVolumetric"
                     :label="t('Volumetric')"

src/pages/Zone/Card/ZoneCard.vue

@@ -2,36 +2,37 @@
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { computed } from 'vue';
+
 import VnCard from 'components/common/VnCard.vue';
 import ZoneDescriptor from './ZoneDescriptor.vue';
-import ZoneSearchbar from './ZoneSearchbar.vue';
+import ZoneFilterPanel from '../ZoneFilterPanel.vue';
 
 const { t } = useI18n();
 const route = useRoute();
-
 const routeName = computed(() => route.name);
-const searchBarDataKeys = {
-    ZoneWarehouses: 'ZoneWarehouses',
-    ZoneSummary: 'ZoneSummary',
-    ZoneLocations: 'ZoneLocations',
-    ZoneEvents: 'ZoneEvents',
-};
+
+function notIsLocations(ifIsFalse, ifIsTrue) {
+    if (routeName.value != 'ZoneLocations') return ifIsFalse;
+    return ifIsTrue;
+}
 </script>
 
 <template>
     <VnCard
-        data-key="Zone"
+        data-key="zone"
+        base-url="Zones"
         :descriptor="ZoneDescriptor"
-        :search-data-key="searchBarDataKeys[routeName]"
         :filter-panel="ZoneFilterPanel"
+        :search-data-key="notIsLocations('ZoneList', 'ZoneLocations')"
         :searchbar-props="{
             url: 'Zones',
-            label: t('list.searchZone'),
+            label: notIsLocations(t('list.searchZone'), t('list.searchLocation')),
             info: t('list.searchInfo'),
+            whereFilter: notIsLocations((value) => {
+                return /^\d+$/.test(value)
+                    ? { id: value }
+                    : { name: { like: `%${value}%` } };
+            }),
         }"
-    >
-        <template #searchbar>
-            <ZoneSearchbar />
-        </template>
-    </VnCard>
+    />
 </template>

src/pages/Zone/Card/ZoneDescriptorMenuItems.vue

@@ -8,13 +8,6 @@ import VnConfirm from 'components/ui/VnConfirm.vue';
 
 import axios from 'axios';
 
-const $props = defineProps({
-    zone: {
-        type: Object,
-        default: () => {},
-    },
-});
-
 const { t } = useI18n();
 const { push, currentRoute } = useRouter();
 const zoneId = currentRoute.value.params.id;
@@ -22,32 +15,21 @@ const zoneId = currentRoute.value.params.id;
 const actions = {
     clone: async () => {
         const opts = { message: t('Zone cloned'), type: 'positive' };
-        let clonedZoneId;
 
         try {
-            const { data } = await axios.post(`Zones/${zoneId}/clone`, {
-                shipped: $props.zone.value.shipped,
-            });
-            clonedZoneId = data;
+            const { data } = await axios.post(`Zones/${zoneId}/clone`, {});
+            notify(opts);
+            push(`/zone/${data.id}/basic-data`);
         } catch (e) {
             opts.message = t('It was not able to clone the zone');
             opts.type = 'negative';
-        } finally {
-            notify(opts);
-
-            if (clonedZoneId) push({ name: 'ZoneSummary', params: { id: clonedZoneId } });
         }
     },
     remove: async () => {
         try {
-            await axios.post(`Zones/${zoneId}/setDeleted`);
+            await axios.post(`Zones/${zoneId}/deleteZone`);
 
             notify({ message: t('Zone deleted'), type: 'positive' });
-            notify({
-                message: t('You can undo this action within the first hour'),
-                icon: 'info',
-            });
-
             push({ name: 'ZoneList' });
         } catch (e) {
             notify({ message: e.message, type: 'negative' });
@@ -64,30 +46,31 @@ function openConfirmDialog(callback) {
 }
 </script>
 <template>
-    <QItem @click="openConfirmDialog('clone')" v-ripple clickable>
-        <QItemSection avatar>
-            <QIcon name="content_copy" />
-        </QItemSection>
-        <QItemSection>{{ t('To clone zone') }}</QItemSection>
-    </QItem>
     <QItem @click="openConfirmDialog('remove')" v-ripple clickable>
         <QItemSection avatar>
             <QIcon name="delete" />
         </QItemSection>
         <QItemSection>{{ t('deleteZone') }}</QItemSection>
     </QItem>
+    <QItem @click="openConfirmDialog('clone')" v-ripple clickable>
+        <QItemSection avatar>
+            <QIcon name="content_copy" />
+        </QItemSection>
+        <QItemSection>{{ t('cloneZone') }}</QItemSection>
+    </QItem>
 </template>
 
 <i18n>
 en:
-    deleteZone: Delete zone
+    deleteZone: Delete
+    cloneZone: Clone
     confirmDeletion: Confirm deletion
     confirmDeletionMessage: Are you sure you want to delete this zone?
 
 es:
-    To clone zone: Clonar zone
-    deleteZone: Eliminar zona
+    cloneZone: Clonar
+    deleteZone: Eliminar
     confirmDeletion: Confirmar eliminación
     confirmDeletionMessage: Seguro que quieres eliminar este zona?
-
+    Zone deleted: Zona eliminada
 </i18n>

src/pages/Zone/Card/ZoneEventExclusionForm.vue

@@ -58,20 +58,12 @@ const arrayData = useArrayData('ZoneEvents');
 
 const exclusionGeoCreate = async () => {
     try {
-        if (isNew.value) {
         const params = {
             zoneFk: parseInt(route.params.id),
             date: dated.value,
             geoIds: tickedNodes.value,
         };
         await axios.post('Zones/exclusionGeo', params);
-        } else {
-            const params = {
-                zoneExclusionFk: props.event?.zoneExclusionFk,
-                geoIds: tickedNodes.value,
-            };
-            await axios.post('Zones/updateExclusionGeo', params);
-        }
         await refetchEvents();
     } catch (err) {
         console.error('Error creating exclusion geo: ', err);
@@ -85,7 +77,7 @@ const exclusionCreate = async () => {
                 { dated: dated.value },
             ]);
         else
-            await axios.put(`Zones/${route.params.id}/exclusions/${props.event?.id}`, {
+            await axios.post(`Zones/${route.params.id}/exclusions`, {
                 dated: dated.value,
             });
 
@@ -103,8 +95,7 @@ const onSubmit = async () => {
 const deleteEvent = async () => {
     try {
         if (!props.event) return;
-        const exclusionId = props.event?.zoneExclusionFk || props.event?.id;
-        await axios.delete(`Zones/${route.params.id}/exclusions/${exclusionId}`);
+        await axios.delete(`Zones/${route.params.id}/exclusions`);
         await refetchEvents();
     } catch (err) {
         console.error('Error deleting event: ', err);
@@ -141,7 +132,11 @@ onMounted(() => {
     >
         <template #form-inputs>
             <VnRow class="row q-gutter-md q-mb-lg">
-                <VnInputDate :label="t('eventsInclusionForm.day')" v-model="dated" />
+                <VnInputDate
+                    :label="t('eventsInclusionForm.day')"
+                    v-model="dated"
+                    :model-value="props.date"
+                />
             </VnRow>
             <div class="column q-gutter-y-sm q-mb-md">
                 <QRadio

src/pages/Zone/Card/ZoneEvents.vue

@@ -13,8 +13,8 @@ import { reactive } from 'vue';
 const { t } = useI18n();
 const stateStore = useStateStore();
 
-const firstDay = ref(null);
-const lastDay = ref(null);
+const firstDay = ref();
+const lastDay = ref();
 
 const events = ref([]);
 const formModeName = ref('include');
@@ -52,7 +52,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     @click="stateStore.toggleRightDrawer()"
                     round
                     dense
-                    icon="menu"
+                    icon="dock_to_left"
                 >
                     <QTooltip bottom anchor="bottom right">
                         {{ t('globals.collapseMenu') }}
@@ -102,6 +102,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 color="primary"
                 fab
                 icon="add"
+                shortcut="+"
             />
             <QTooltip class="text-no-wrap">
                 {{ t('eventsInclusionForm.addEvent') }}

src/pages/Zone/Card/ZoneLocationsTree.vue

@@ -1,10 +1,7 @@
 <script setup>
 import { onMounted, ref, computed, watch, onUnmounted } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
-import VnInput from 'src/components/common/VnInput.vue';
-
 import { useState } from 'src/composables/useState';
 import axios from 'axios';
 import { useArrayData } from 'composables/useArrayData';
@@ -30,7 +27,6 @@ const props = defineProps({
 
 const emit = defineEmits(['update:tickedNodes']);
 
-const { t } = useI18n();
 const route = useRoute();
 const state = useState();
 
@@ -186,16 +182,6 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <VnInput
-        v-if="showSearchBar"
-        v-model="store.userParams.search"
-        :placeholder="t('globals.search')"
-        @keydown.enter.prevent="reFetch()"
-    >
-        <template #prepend>
-            <QIcon class="cursor-pointer" name="search" />
-        </template>
-    </VnInput>
     <QTree
         ref="treeRef"
         :nodes="nodes"

src/pages/Zone/Card/ZoneSearchbar.vue

@@ -19,24 +19,14 @@ const exprBuilder = (param, value) => {
                 agencyModeFk: value,
             };
         case 'search':
-            if (value) {
-                if (!isNaN(value)) {
-                    return { id: value };
-                } else {
-                    return {
-                        name: {
-                            like: `%${value}%`,
-                        },
-                    };
-                }
-            }
+            return /^\d+$/.test(value) ? { id: value } : { name: { like: `%${value}%` } };
     }
 };
 </script>
 
 <template>
     <VnSearchbar
-        data-key="ZoneList"
+        data-key="Zones"
         url="Zones"
         :filter="{
             include: { relation: 'agencyMode', scope: { fields: ['name'] } },

src/pages/Zone/Card/ZoneWarehouses.vue

@@ -14,7 +14,7 @@ const { t } = useI18n();
 const route = useRoute();
 const { openConfirmationModal } = useVnConfirm();
 
-const paginateRef = ref(null);
+const paginateRef = ref();
 const createWarehouseDialogRef = ref(null);
 
 const arrayData = useArrayData('ZoneWarehouses');
@@ -111,7 +111,13 @@ const openCreateWarehouseForm = () => createWarehouseDialogRef.value.show();
             <ZoneCreateWarehouse @on-submit-create-warehouse="createZoneWarehouse" />
         </QDialog>
         <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn fab icon="add" color="primary" @click="openCreateWarehouseForm()">
+            <QBtn
+                fab
+                icon="add"
+                color="primary"
+                @click="openCreateWarehouseForm()"
+                shortcut="+"
+            >
                 <QTooltip>{{ t('warehouses.add') }}</QTooltip>
             </QBtn>
         </QPageSticky>

src/pages/Zone/ZoneDeliveryPanel.vue

@@ -1,47 +1,25 @@
 <script setup>
-import { onMounted, ref, reactive } from 'vue';
+import { onMounted, ref, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import VnSelect from 'src/components/common/VnSelect.vue';
-
 import { useArrayData } from 'src/composables/useArrayData';
-import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
-import { watch } from 'vue';
+import FetchData from 'src/components/FetchData.vue';
 
 const { t } = useI18n();
 const { notify } = useNotify();
 
-const deliveryMethodFk = ref(null);
-const deliveryMethods = ref([]);
+const deliveryMethodFk = ref('delivery');
+const deliveryMethods = ref({});
+const inq = ref([]);
 const formData = reactive({});
 
 const arrayData = useArrayData('ZoneDeliveryDays', {
     url: 'Zones/getEvents',
 });
 
-const fetchDeliveryMethods = async (filter) => {
-    try {
-        const params = { filter: JSON.stringify(filter) };
-        const { data } = await axios.get('DeliveryMethods', { params });
-        return data.map((deliveryMethod) => deliveryMethod.id);
-    } catch (err) {
-        console.error('Error fetching delivery methods: ', err);
-    }
-};
-
-watch(
-    () => deliveryMethodFk.value,
-    async (val) => {
-        let filter;
-        if (val === 'pickUp') filter = { where: { code: 'PICKUP' } };
-        else filter = { where: { code: { inq: ['DELIVERY', 'AGENCY'] } } };
-
-        deliveryMethods.value = await fetchDeliveryMethods(filter);
-    },
-    { immediate: true }
-);
-
+const deliveryMethodsConfig = { pickUp: ['PICKUP'], delivery: ['AGENCY', 'DELIVERY'] };
 const fetchData = async (params) => {
     try {
         const { data } = params
@@ -62,14 +40,38 @@ const onSubmit = async () => {
 };
 
 onMounted(async () => {
-    deliveryMethodFk.value = 'delivery';
     formData.geoFk = arrayData.store?.userParams?.geoFk;
     formData.agencyModeFk = arrayData.store?.userParams?.agencyModeFk;
     if (formData.geoFk || formData.agencyModeFk) await fetchData();
 });
+watch(
+    () => deliveryMethodFk.value,
+    () => {
+        inq.value = {
+            deliveryMethodFk: { inq: deliveryMethods.value[deliveryMethodFk.value] },
+        };
+    }
+);
 </script>
 
 <template>
+    <FetchData
+        url="DeliveryMethods"
+        :fields="['id', 'name', 'deliveryMethodFk']"
+        @on-fetch="
+            (data) => {
+                Object.entries(deliveryMethodsConfig).forEach(([key, value]) => {
+                    deliveryMethods[key] = data
+                        .filter((code) => value.includes(code.code))
+                        .map((method) => method.id);
+                });
+                inq = {
+                    deliveryMethodFk: { inq: deliveryMethods[deliveryMethodFk] },
+                };
+            }
+        "
+        auto-load
+    />
     <QForm @submit="onSubmit()" class="q-pa-md">
         <div class="column q-gutter-y-sm">
             <QRadio
@@ -90,7 +92,7 @@ onMounted(async () => {
                 :label="t('deliveryPanel.postcode')"
                 v-model="formData.geoFk"
                 url="Postcodes/location"
-                :fields="['geoFk', 'code', 'townFk']"
+                :fields="['geoFk', 'code', 'townFk', 'countryFk']"
                 sort-by="code, townFk"
                 option-value="geoFk"
                 option-label="code"
@@ -106,26 +108,35 @@ onMounted(async () => {
                             <QItemLabel>{{ opt.code }}</QItemLabel>
                             <QItemLabel caption
                                 >{{ opt.town?.province?.name }},
-                                {{ opt.town?.province?.country?.country }}</QItemLabel
+                                {{ opt.town?.province?.country?.name }}</QItemLabel
                             >
                         </QItemSection>
                     </QItem>
                 </template>
             </VnSelect>
             <VnSelect
-                :label="
-                    t(
-                        deliveryMethodFk === 'delivery'
-                            ? 'deliveryPanel.agency'
-                            : 'deliveryPanel.warehouse'
-                    )
-                "
+                data-key="delivery"
+                v-if="deliveryMethodFk == 'delivery'"
+                :label="t('deliveryPanel.agency')"
                 v-model="formData.agencyModeFk"
                 url="AgencyModes/isActive"
                 :fields="['id', 'name']"
-                :where="{
-                    deliveryMethodFk: { inq: deliveryMethods },
-                }"
+                :where="inq"
+                sort-by="name ASC"
+                option-value="id"
+                option-label="name"
+                hide-selected
+                dense
+                outlined
+                rounded
+            />
+            <VnSelect
+                v-else
+                :label="t('deliveryPanel.warehouse')"
+                v-model="formData.agencyModeFk"
+                url="AgencyModes/isActive"
+                :fields="['id', 'name']"
+                :where="inq"
                 sort-by="name ASC"
                 option-value="id"
                 option-label="name"

src/pages/Zone/ZoneFilterPanel.vue

@@ -27,6 +27,7 @@ const agencies = ref([]);
         :data-key="props.dataKey"
         :search-button="true"
         :hidden-tags="['search']"
+        search-url="table"
     >
         <template #tags="{ tag }">
             <div class="q-gutter-x-xs">

src/pages/Zone/ZoneList.vue

@@ -1,74 +1,120 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { onMounted, computed } from 'vue';
+import { computed, ref, onMounted } from 'vue';
+import axios from 'axios';
+
 import { toCurrency } from 'src/filters';
-
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import ZoneSummary from 'src/pages/Zone/Card/ZoneSummary.vue';
-
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { toTimeFormat } from 'src/filters/date';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import useNotify from 'src/composables/useNotify.js';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { useStateStore } from 'stores/useStateStore';
-import axios from 'axios';
+import ZoneSummary from 'src/pages/Zone/Card/ZoneSummary.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputTime from 'src/components/common/VnInputTime.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
 import ZoneFilterPanel from './ZoneFilterPanel.vue';
 import ZoneSearchbar from './Card/ZoneSearchbar.vue';
 
-const stateStore = useStateStore();
 const { t } = useI18n();
 const router = useRouter();
 const { notify } = useNotify();
 const { viewSummary } = useSummaryDialog();
 const { openConfirmationModal } = useVnConfirm();
+const stateStore = useStateStore();
+const tableRef = ref();
+const warehouseOptions = ref([]);
 
-const redirectToZoneSummary = (event, { id }) => {
-    router.push({ name: 'ZoneSummary', params: { id } });
+const tableFilter = {
+    include: [
+        {
+            relation: 'agencyMode',
+            scope: {
+                fields: ['id', 'name'],
+            },
+        },
+    ],
 };
 
 const columns = computed(() => [
     {
-        name: 'ID',
-        label: t('list.id'),
-        field: (row) => row.id,
-        sortable: true,
         align: 'left',
+        name: 'id',
+        label: t('list.id'),
+        chip: {
+            condition: () => true,
+        },
+        isId: true,
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
+        align: 'left',
         name: 'name',
         label: t('list.name'),
-        field: (row) => row.name,
-        sortable: true,
-        align: 'left',
+        isTitle: true,
+        create: true,
+        columnFilter: {
+            optionLabel: 'name',
+            optionValue: 'id',
+        },
     },
     {
-        name: 'agency',
+        align: 'left',
+        name: 'agencyModeFk',
         label: t('list.agency'),
-        field: (row) => row?.agencyMode?.name,
-        sortable: true,
-        align: 'left',
+        cardVisible: true,
+        columnFilter: {
+            component: 'select',
+            inWhere: true,
+            attrs: {
+                url: 'AgencyModes',
+            },
+        },
+        columnField: {
+            component: null,
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row?.agencyMode?.name),
     },
     {
-        name: 'close',
-        label: t('list.close'),
-        field: (row) => (row?.hour ? toTimeFormat(row?.hour) : '-'),
-        sortable: true,
         align: 'left',
-    },
-    {
         name: 'price',
         label: t('list.price'),
-        field: (row) => (row?.price ? toCurrency(row.price) : '-'),
-        sortable: true,
-        align: 'left',
+        cardVisible: true,
+        format: (row) => toCurrency(row.price),
+        columnFilter: {
+            inWhere: true,
+        },
+    },
+    {
+        align: 'left',
+        name: 'hour',
+        label: t('list.close'),
+        cardVisible: true,
+        format: (row) => toTimeFormat(row.hour),
+        hidden: true,
     },
     {
-        name: 'actions',
-        label: '',
-        sortable: false,
         align: 'right',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('list.zoneSummary'),
+                icon: 'preview',
+                action: (row) => viewSummary(row.id, ZoneSummary),
+                isPrimary: true,
+            },
+            {
+                title: t('globals.clone'),
+                icon: 'vn:clone',
+                action: (row) => handleClone(row.id),
+                isPrimary: true,
+            },
+        ],
     },
 ]);
 
@@ -84,6 +130,7 @@ const handleClone = (id) => {
         () => clone(id)
     );
 };
+
 onMounted(() => (stateStore.rightDrawer = true));
 </script>
 
@@ -91,82 +138,72 @@ onMounted(() => (stateStore.rightDrawer = true));
     <ZoneSearchbar />
     <RightMenu>
         <template #right-panel>
-            <ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" />
+            <ZoneFilterPanel data-key="Zones" />
         </template>
     </RightMenu>
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
-                data-key="ZoneList"
+    <VnTable
+        ref="tableRef"
+        data-key="Zones"
         url="Zones"
-                :filter="{
-                    include: { relation: 'agencyMode', scope: { fields: ['name'] } },
+        :create="{
+            urlCreate: 'Zones',
+            title: t('list.createZone'),
+            onDataSaved: ({ id }) => tableRef.redirect(`${id}/location`),
+            formInitialData: {},
         }"
-                :limit="20"
+        :user-filter="tableFilter"
+        :columns="columns"
+        redirect="zone"
+        :right-search="false"
         auto-load
     >
-                <template #body="{ rows }">
-                    <div class="q-pa-md">
-                        <QTable
-                            :rows="rows"
-                            :columns="columns"
-                            row-key="clientId"
-                            class="full-width"
-                            @row-click="redirectToZoneSummary"
-                        >
-                            <template #header="props">
-                                <QTr :props="props" class="bg">
-                                    <QTh
-                                        v-for="col in props.cols"
-                                        :key="col.name"
-                                        :props="props"
-                                    >
-                                        {{ t(col.label) }}
-                                        <QTooltip v-if="col.tooltip">{{
-                                            col.tooltip
-                                        }}</QTooltip>
-                                    </QTh>
-                                </QTr>
+        <template #more-create-dialog="{ data }">
+            <VnSelect
+                url="AgencyModes"
+                v-model="data.agencyModeFk"
+                option-value="id"
+                option-label="name"
+                :label="t('list.agency')"
+            />
+            <VnInput
+                v-model="data.price"
+                :label="t('list.price')"
+                min="0"
+                type="number"
+                required="true"
+            />
+            <VnInput
+                v-model="data.bonus"
+                :label="t('list.bonus')"
+                min="0"
+                type="number"
+            />
+            <VnInput
+                v-model="data.travelingDays"
+                :label="t('list.travelingDays')"
+                type="number"
+                min="0"
+            />
+            <VnInputTime v-model="data.hour" :label="t('list.close')" />
+            <VnSelect
+                url="Warehouses"
+                v-model="data.warehouseFK"
+                option-value="id"
+                option-label="name"
+                :label="t('list.warehouse')"
+                :options="warehouseOptions"
+            />
+            <QCheckbox
+                v-model="data.isVolumetric"
+                :label="t('list.isVolumetric')"
+                :toggle-indeterminate="false"
+            />
         </template>
-
-                            <template #body-cell="props">
-                                <QTd :props="props">
-                                    <QTr :props="props" class="cursor-pointer">
-                                        {{ props.value }}
-                                    </QTr>
-                                </QTd>
-                            </template>
-                            <template #body-cell-actions="props">
-                                <QTd :props="props" class="q-gutter-x-sm">
-                                    <QIcon
-                                        name="vn:clone"
-                                        size="sm"
-                                        color="primary"
-                                        @click.stop="handleClone(props.row.id)"
-                                    >
-                                        <QTooltip>{{ t('globals.clone') }}</QTooltip>
-                                    </QIcon>
-                                    <QIcon
-                                        name="preview"
-                                        size="sm"
-                                        color="primary"
-                                        @click.stop="
-                                            viewSummary(props.row.id, ZoneSummary)
-                                        "
-                                    >
-                                        <QTooltip>{{ t('Preview') }}</QTooltip>
-                                    </QIcon>
-                                </QTd>
-                            </template>
-                        </QTable>
-                    </div>
-                </template>
-            </VnPaginate>
-        </div>
-        <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn :to="{ path: `/zone/create` }" fab icon="add" color="primary">
-                <QTooltip>{{ t('list.create') }}</QTooltip>
-            </QBtn>
-        </QPageSticky>
-    </QPage>
+    </VnTable>
 </template>
+
+<i18n>
+es:
+    Search zone: Buscar zona
+    You can search zones by id or name: Puedes buscar zonas por id o nombre
+</i18n>

src/pages/Zone/locale/en.yml

@@ -18,9 +18,16 @@ list:
     create: Create zone
     openSummary: Details
     searchZone: Search zones
+    searchLocation: Search locations
     searchInfo: Search zone by id or name
     confirmCloneTitle: All it's properties will be copied
     confirmCloneSubtitle: Do you want to clone this zone?
+    travelingDays: Traveling days
+    warehouse: Warehouse
+    bonus: Bonus
+    isVolumetric: Volumetric
+    createZone: Create zone
+    zoneSummary: Summary
 create:
     name: Name
     warehouse: Warehouse
@@ -30,6 +37,8 @@ create:
     price: Price
     bonus: Bonus
     volumetric: Volumetric
+    itemMaxSize: Max m³
+    inflation: Inflation
 summary:
     agency: Agency
     price: Price