From a13ea900ce200ec49366dfbd27dd0b376c98638c Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 16 Aug 2024 13:54:37 +0200
Subject: [PATCH 01/24] fix: refs #7353 salesClientTable

---
 src/pages/Monitor/SalesClientsTable.vue | 170 ++++++++++++------------
 src/pages/Monitor/SalesOrdersTable.vue  |   1 +
 src/pages/Monitor/SalesTicketsTable.vue |   1 +
 3 files changed, 88 insertions(+), 84 deletions(-)

diff --git a/src/pages/Monitor/SalesClientsTable.vue b/src/pages/Monitor/SalesClientsTable.vue
index 2fb9e8e2f..e63df6a1b 100644
--- a/src/pages/Monitor/SalesClientsTable.vue
+++ b/src/pages/Monitor/SalesClientsTable.vue
@@ -1,44 +1,33 @@
 <script setup>
-import { ref, computed, reactive, watch } 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 { 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';
 
 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 = computed(() => {
+    const obj = {};
+    const formatFrom = setHours(from.value, 'from');
+    const formatTo = setHours(to.value, 'to');
 
-const filter = reactive({
-    where: {
-        'v.stamp': {
-            between: dateRange.value,
-        },
-    },
-});
+    if (!formatFrom && formatTo)
+        Object.assign(obj, { where: { 'v.stamp': { lte: formatTo } } });
+    else if (formatFrom && !formatTo)
+        Object.assign(obj, { where: { 'v.stamp': { gte: formatFrom } } });
+    else if (formatFrom && formatTo)
+        Object.assign(obj, {
+            where: { 'v.stamp': { between: [formatFrom, formatTo] } },
+        });
 
-const refetch = async () => await paginateRef.value.fetch();
-
-watch(dateRange, (val) => {
-    filter.where['v.stamp'].between = val;
-    refetch();
+    return obj;
 });
 
 function exprBuilder(param, value) {
@@ -50,7 +39,14 @@ function exprBuilder(param, value) {
     }
 }
 
-const params = reactive({});
+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(() => [
     {
@@ -58,8 +54,7 @@ const columns = computed(() => [
         name: 'dated',
         field: 'dated',
         align: 'left',
-        columnFilter: null,
-        sortable: true,
+        columnFilter: false,
         format: (row) => toDateFormat(row.dated),
     },
     {
@@ -67,81 +62,88 @@ const columns = computed(() => [
         name: 'hour',
         field: 'hour',
         align: 'left',
-        sortable: true,
+        columnFilter: false,
     },
     {
         label: t('salesClientsTable.salesPerson'),
-        name: 'salesPerson',
+        name: 'salesPersonFk',
         field: 'salesPerson',
         align: 'left',
-        sortable: true,
         columnField: {
             component: null,
         },
+        optionFilter: 'firstName',
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Workers/activeWithInheritedRole',
+                fields: ['id', 'name'],
+                sortBy: 'nickname ASC',
+                where: { role: 'salesPerson' },
+                useLike: false,
+            },
+        },
     },
     {
         label: t('salesClientsTable.client'),
         field: 'clientName',
-        name: 'client',
+        name: 'clientFk',
         align: 'left',
-        sortable: true,
         columnField: {
             component: null,
         },
+        orderBy: 'c.name',
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Clients',
+                fields: ['id', 'name'],
+                sortBy: 'name ASC',
+            },
+        },
     },
 ]);
 </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>
+        <QCardSection>
+            <VnRow>
+                <VnInputDate v-model="from" label="From" dense style="flex: 0.25" />
+                <VnInputDate v-model="to" label="To" dense style="flex: 0.25" />
+            </VnRow>
+        </QCardSection>
+        <QCardSection>
+            <VnTable
+                ref="table"
+                data-key="SalesMonitorClients"
+                url="SalesMonitors/clientsFilter"
+                search-url="SalesMonitorClients"
+                :order="['dated DESC', 'hour DESC']"
+                :limit="6"
+                :expr-builder="exprBuilder"
+                :filter="filter"
+                :offset="50"
+                auto-load
+                :columns="columns"
+                :right-search="false"
+                default-mode="table"
+                dense
+                :without-header="true"
+            >
+                <template #column-salesPersonFk="{ row }">
+                    <QTd>
+                        <span class="link">{{ row.salesPerson }}</span>
+                        <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
+                    </QTd>
+                </template>
+                <template #column-clientFk="{ row }">
+                    <QTd>
+                        <span class="link">{{ row.clientName }}</span>
+                        <CustomerDescriptorProxy :id="row.clientFk" />
+                    </QTd>
+                </template>
+            </VnTable>
+        </QCardSection>
     </QCard>
 </template>
diff --git a/src/pages/Monitor/SalesOrdersTable.vue b/src/pages/Monitor/SalesOrdersTable.vue
index f0c389aa6..74383e9a4 100644
--- a/src/pages/Monitor/SalesOrdersTable.vue
+++ b/src/pages/Monitor/SalesOrdersTable.vue
@@ -129,6 +129,7 @@ const redirectToOrderSummary = (orderId) => {
             ref="paginateRef"
             data-key="SalesMonitorOrders"
             url="SalesMonitors/ordersFilter"
+            search-url="SalesMonitorOrders"
             order="date_make DESC"
             :limit="6"
             :right-search="false"
diff --git a/src/pages/Monitor/SalesTicketsTable.vue b/src/pages/Monitor/SalesTicketsTable.vue
index 1ca68240b..b617266ef 100644
--- a/src/pages/Monitor/SalesTicketsTable.vue
+++ b/src/pages/Monitor/SalesTicketsTable.vue
@@ -430,6 +430,7 @@ const redirectToSales = (id) => {
         ref="paginateRef"
         data-key="SalesMonitorTickets"
         url="SalesMonitors/salesFilter"
+        search-url="SalesMonitorTickets"
         :filter="filter"
         :limit="20"
         :expr-builder="exprBuilder"

From a69f41834ec74cbb97babbd1757d60203a7ba55b Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 16 Aug 2024 14:19:02 +0200
Subject: [PATCH 02/24] fix: refs #7353 padding

---
 src/pages/Monitor/SalesClientsTable.vue | 62 ++++++++++++-------------
 1 file changed, 30 insertions(+), 32 deletions(-)

diff --git a/src/pages/Monitor/SalesClientsTable.vue b/src/pages/Monitor/SalesClientsTable.vue
index e63df6a1b..ed6695d1f 100644
--- a/src/pages/Monitor/SalesClientsTable.vue
+++ b/src/pages/Monitor/SalesClientsTable.vue
@@ -113,37 +113,35 @@ const columns = computed(() => [
                 <VnInputDate v-model="to" label="To" dense style="flex: 0.25" />
             </VnRow>
         </QCardSection>
-        <QCardSection>
-            <VnTable
-                ref="table"
-                data-key="SalesMonitorClients"
-                url="SalesMonitors/clientsFilter"
-                search-url="SalesMonitorClients"
-                :order="['dated DESC', 'hour DESC']"
-                :limit="6"
-                :expr-builder="exprBuilder"
-                :filter="filter"
-                :offset="50"
-                auto-load
-                :columns="columns"
-                :right-search="false"
-                default-mode="table"
-                dense
-                :without-header="true"
-            >
-                <template #column-salesPersonFk="{ row }">
-                    <QTd>
-                        <span class="link">{{ row.salesPerson }}</span>
-                        <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
-                    </QTd>
-                </template>
-                <template #column-clientFk="{ row }">
-                    <QTd>
-                        <span class="link">{{ row.clientName }}</span>
-                        <CustomerDescriptorProxy :id="row.clientFk" />
-                    </QTd>
-                </template>
-            </VnTable>
-        </QCardSection>
+        <VnTable
+            ref="table"
+            data-key="SalesMonitorClients"
+            url="SalesMonitors/clientsFilter"
+            search-url="SalesMonitorClients"
+            :order="['dated DESC', 'hour DESC']"
+            :limit="6"
+            :expr-builder="exprBuilder"
+            :filter="filter"
+            :offset="50"
+            auto-load
+            :columns="columns"
+            :right-search="false"
+            default-mode="table"
+            dense
+            :without-header="true"
+        >
+            <template #column-salesPersonFk="{ row }">
+                <QTd>
+                    <span class="link">{{ row.salesPerson }}</span>
+                    <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
+                </QTd>
+            </template>
+            <template #column-clientFk="{ row }">
+                <QTd>
+                    <span class="link">{{ row.clientName }}</span>
+                    <CustomerDescriptorProxy :id="row.clientFk" />
+                </QTd>
+            </template>
+        </VnTable>
     </QCard>
 </template>

From bd9aea767a45eda8098dce7f61345586508fdd96 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 16 Aug 2024 18:10:10 +0200
Subject: [PATCH 03/24] fix: refs #7353 salesorderTable

---
 src/pages/Monitor/SalesOrdersTable.vue | 113 +++++++++++--------------
 1 file changed, 49 insertions(+), 64 deletions(-)

diff --git a/src/pages/Monitor/SalesOrdersTable.vue b/src/pages/Monitor/SalesOrdersTable.vue
index 74383e9a4..496d5134c 100644
--- a/src/pages/Monitor/SalesOrdersTable.vue
+++ b/src/pages/Monitor/SalesOrdersTable.vue
@@ -1,11 +1,8 @@
 <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';
@@ -16,32 +13,15 @@ import axios from 'axios';
 const { t } = useI18n();
 const { openConfirmationModal } = useVnConfirm();
 
-const paginateRef = ref(null);
-const workersActiveOptions = ref([]);
-const clientsOptions = ref([]);
+const table = 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 };
+            return { [`c.salesPersonFk`]: value };
     }
 }
 
@@ -51,22 +31,37 @@ const columns = computed(() => [
         name: 'date',
         field: 'dated',
         align: 'left',
-        sortable: true,
-        cardVisible: true,
+        orderBy: 'date_send',
+        columnFilter: false,
     },
     {
         label: t('salesOrdersTable.client'),
-        name: 'client',
+        name: 'clientFk',
         align: 'left',
-        sortable: true,
-        cardVisible: true,
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Clients',
+                fields: ['id', 'name'],
+                sortBy: 'name ASC',
+            },
+        },
     },
     {
         label: t('salesOrdersTable.salesPerson'),
-        name: 'salesPerson',
+        name: 'salesPersonFk',
         align: 'left',
-        sortable: true,
-        cardVisible: true,
+        optionFilter: 'firstName',
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Workers/activeWithInheritedRole',
+                fields: ['id', 'name'],
+                sortBy: 'nickname ASC',
+                where: { role: 'salesPerson' },
+                useLike: false,
+            },
+        },
     },
 ]);
 
@@ -90,47 +85,23 @@ const removeOrders = async () => {
         const params = { deletes: selectedIds };
         await axios.post('SalesMonitors/deleteOrders', params);
         selectedRows.value = [];
-        await paginateRef.value.fetch();
+        await table.value.reload();
     } catch (err) {
         console.error('Error deleting orders', err);
     }
 };
 
-const redirectToOrderSummary = (orderId) => {
-    const url = `#/order/${orderId}/summary`;
-    window.open(url, '_blank');
-};
+const openTab = (id) =>
+    window.open(`#/order/${id}/summary`, '_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="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"
+            ref="table"
             data-key="SalesMonitorOrders"
             url="SalesMonitors/ordersFilter"
             search-url="SalesMonitorOrders"
-            order="date_make DESC"
+            order="date_send DESC"
             :limit="6"
             :right-search="false"
             :expr-builder="exprBuilder"
@@ -142,15 +113,25 @@ const redirectToOrderSummary = (orderId) => {
                 'hide-bottom': true,
             }"
             default-mode="table"
-            :without-header="false"
-            @row-click="(_, row) => redirectToOrderSummary(row.id)"
+            :row-click="({ id }) => openTab(id)"
             v-model:selected="selectedRows"
+            :disable-option="{ card: true }"
         >
             <template #top-left>
                 <QBtn
-                    v-if="selectedRows.length > 0"
+                    icon="refresh"
+                    size="md"
+                    color="primary"
+                    dense
+                    flat
+                    @click="$refs.table.reload()"
+                />
+                <QBtn
+                    v-if="selectedRows.length"
                     icon="delete"
                     size="md"
+                    dense
+                    flat
                     color="primary"
                     @click="
                         openConfirmationModal(
@@ -176,7 +157,7 @@ const redirectToOrderSummary = (orderId) => {
                     <div>{{ toDateTimeFormat(row.date_make) }}</div>
                 </QTd>
             </template>
-            <template #column-client="{ row }">
+            <template #column-clientFk="{ row }">
                 <QTd>
                     <div class="q-mb-md">
                         <span class="link">{{ row.clientName }}</span>
@@ -186,7 +167,7 @@ const redirectToOrderSummary = (orderId) => {
                 </QTd>
             </template>
 
-            <template #column-salesPerson="{ row }">
+            <template #column-salesPersonFk="{ row }">
                 <QTd>
                     <div class="q-mb-md">
                         <span class="link">{{ row.salesPerson }}</span>
@@ -202,4 +183,8 @@ const redirectToOrderSummary = (orderId) => {
 .q-td {
     color: gray;
 }
+
+:deep(.q-table__container > div:first-child) {
+    background-color: var(--vn-section-color);
+}
 </style>

From ada1c948f62dc71350717b1dd3056e5a4f264586 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 19 Aug 2024 10:14:02 +0200
Subject: [PATCH 04/24] feat: refs #7353 split sections

---
 src/i18n/locale/en.yml                      |  2 +
 src/i18n/locale/es.yml                      |  2 +
 src/pages/Monitor/MonitorClientsActions.vue | 47 +++++++++++
 src/pages/Monitor/MonitorList.vue           | 90 ---------------------
 src/pages/Monitor/MonitorTickets.vue        | 27 +++++++
 src/pages/Monitor/SalesOrdersTable.vue      | 22 +++--
 src/pages/Monitor/locale/en.yml             |  3 +-
 src/pages/Monitor/locale/es.yml             |  3 +-
 src/router/modules/monitor.js               | 22 +++--
 9 files changed, 115 insertions(+), 103 deletions(-)
 create mode 100644 src/pages/Monitor/MonitorClientsActions.vue
 delete mode 100644 src/pages/Monitor/MonitorList.vue
 create mode 100644 src/pages/Monitor/MonitorTickets.vue

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 7d3682525..d468d3bdb 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -254,6 +254,8 @@ globals:
         twoFactor: Two factor
         recoverPassword: Recover password
         resetPassword: Reset password
+        ticketsMonitor: Tickets monitor
+        clientsActionsMonitor: Clients and actions
     created: Created
     worker: Worker
     now: Now
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 8157f1803..d471c8ecc 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -256,6 +256,8 @@ globals:
         twoFactor: Doble factor
         recoverPassword: Recuperar contraseña
         resetPassword: Restablecer contraseña
+        ticketsMonitor: Monitor de tickets
+        clientsActionsMonitor: Clientes y acciones
     created: Fecha creación
     worker: Trabajador
     now: Ahora
diff --git a/src/pages/Monitor/MonitorClientsActions.vue b/src/pages/Monitor/MonitorClientsActions.vue
new file mode 100644
index 000000000..9d0cf05fb
--- /dev/null
+++ b/src/pages/Monitor/MonitorClientsActions.vue
@@ -0,0 +1,47 @@
+<script setup>
+import { onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import SalesClientTable from './SalesClientsTable.vue';
+import SalesOrdersTable from './SalesOrdersTable.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+
+const { t } = useI18n();
+const stateStore = useStateStore();
+
+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>
+    <div class="q-pa-md container" style="gap: 10px">
+        <div style="flex: 0.4">
+            <span class="text-body1" v-text="t('salesMonitor.clientsOnWebsite')" />
+            <SalesClientTable />
+        </div>
+        <div style="flex: 0.6">
+            <span class="text-body1" v-text="t('salesMonitor.recentOrderActions')" />
+            <SalesOrdersTable />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.container {
+    display: flex;
+
+    @media (max-width: $breakpoint-md-max) {
+        flex-direction: column;
+    }
+}
+</style>
diff --git a/src/pages/Monitor/MonitorList.vue b/src/pages/Monitor/MonitorList.vue
deleted file mode 100644
index 4906247e8..000000000
--- a/src/pages/Monitor/MonitorList.vue
+++ /dev/null
@@ -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>
diff --git a/src/pages/Monitor/MonitorTickets.vue b/src/pages/Monitor/MonitorTickets.vue
new file mode 100644
index 000000000..57ba00e57
--- /dev/null
+++ b/src/pages/Monitor/MonitorTickets.vue
@@ -0,0 +1,27 @@
+<script setup>
+import { onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import SalesTicketsTable from './SalesTicketsTable.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+
+const { t } = useI18n();
+const stateStore = useStateStore();
+
+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>
+    <SalesTicketsTable />
+</template>
diff --git a/src/pages/Monitor/SalesOrdersTable.vue b/src/pages/Monitor/SalesOrdersTable.vue
index 496d5134c..dc723e541 100644
--- a/src/pages/Monitor/SalesOrdersTable.vue
+++ b/src/pages/Monitor/SalesOrdersTable.vue
@@ -27,13 +27,21 @@ function exprBuilder(param, value) {
 
 const columns = computed(() => [
     {
-        label: t('salesOrdersTable.date'),
-        name: 'date',
-        field: 'dated',
+        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,
+    },
     {
         label: t('salesOrdersTable.client'),
         name: 'clientFk',
@@ -144,7 +152,7 @@ const openTab = (id) =>
                     <QTooltip>{{ t('salesOrdersTable.delete') }}</QTooltip>
                 </QBtn>
             </template>
-            <template #column-date="{ row }">
+            <template #column-dateSend="{ row }">
                 <QTd>
                     <QBadge
                         :color="getBadgeColor(row.date_send)"
@@ -154,7 +162,11 @@ const openTab = (id) =>
                     >
                         {{ toDateFormat(row.date_send) }}
                     </QBadge>
-                    <div>{{ toDateTimeFormat(row.date_make) }}</div>
+                </QTd>
+            </template>
+            <template #column-dateMake="{ row }">
+                <QTd>
+                    {{ row.date_make }}
                 </QTd>
             </template>
             <template #column-clientFk="{ row }">
diff --git a/src/pages/Monitor/locale/en.yml b/src/pages/Monitor/locale/en.yml
index f58db7854..629005191 100644
--- a/src/pages/Monitor/locale/en.yml
+++ b/src/pages/Monitor/locale/en.yml
@@ -11,7 +11,8 @@ salesClientsTable:
     client: Client
 salesOrdersTable:
     delete: Delete
-    date: Date
+    dateSend: Send date
+    dateMake: Make date
     client: Client
     salesPerson: Salesperson
     deleteConfirmTitle: Delete selected elements
diff --git a/src/pages/Monitor/locale/es.yml b/src/pages/Monitor/locale/es.yml
index 918b51813..cf73550be 100644
--- a/src/pages/Monitor/locale/es.yml
+++ b/src/pages/Monitor/locale/es.yml
@@ -11,7 +11,8 @@ 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
diff --git a/src/router/modules/monitor.js b/src/router/modules/monitor.js
index f0db8d3f3..904f2db74 100644
--- a/src/router/modules/monitor.js
+++ b/src/router/modules/monitor.js
@@ -11,7 +11,7 @@ export default {
     component: RouterView,
     redirect: { name: 'MonitorMain' },
     menus: {
-        main: ['MonitorList'],
+        main: ['MonitorTickets', 'MonitorClientsActions'],
         card: [],
     },
     children: [
@@ -19,16 +19,26 @@ export default {
             path: '',
             name: 'MonitorMain',
             component: () => import('src/components/common/VnSectionMain.vue'),
-            redirect: { name: 'MonitorList' },
+            redirect: { name: 'MonitorTickets' },
             children: [
                 {
-                    path: 'list',
-                    name: 'MonitorList',
+                    path: 'tickets',
+                    name: 'MonitorTickets',
                     meta: {
-                        title: 'list',
+                        title: 'ticketsMonitor',
                         icon: 'grid_view',
                     },
-                    component: () => import('src/pages/Monitor/MonitorList.vue'),
+                    component: () => import('src/pages/Monitor/MonitorTickets.vue'),
+                },
+                {
+                    path: 'clients-actions',
+                    name: 'MonitorClientsActions',
+                    meta: {
+                        title: 'clientsActionsMonitor',
+                        icon: 'grid_view',
+                    },
+                    component: () =>
+                        import('src/pages/Monitor/MonitorClientsActions.vue'),
                 },
             ],
         },

From 9a4a51fadb65a5c196b71172e61dbc7abffa8b7d Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 19 Aug 2024 10:29:55 +0200
Subject: [PATCH 05/24] refactor: refs #7353 simplify code

---
 src/pages/Monitor/MonitorClientsActions.vue | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/pages/Monitor/MonitorClientsActions.vue b/src/pages/Monitor/MonitorClientsActions.vue
index 9d0cf05fb..52195f7f4 100644
--- a/src/pages/Monitor/MonitorClientsActions.vue
+++ b/src/pages/Monitor/MonitorClientsActions.vue
@@ -5,6 +5,7 @@ import { useStateStore } from 'stores/useStateStore';
 import SalesClientTable from './SalesClientsTable.vue';
 import SalesOrdersTable from './SalesOrdersTable.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 
 const { t } = useI18n();
 const stateStore = useStateStore();
@@ -24,7 +25,10 @@ onUnmounted(() => (stateStore.leftDrawer = true));
             />
         </Teleport>
     </template>
-    <div class="q-pa-md container" style="gap: 10px">
+    <VnRow
+        class="q-pa-md"
+        :style="{ 'flex-direction': $q.screen.lt.lg ? 'column' : 'row' }"
+    >
         <div style="flex: 0.4">
             <span class="text-body1" v-text="t('salesMonitor.clientsOnWebsite')" />
             <SalesClientTable />
@@ -33,15 +37,5 @@ onUnmounted(() => (stateStore.leftDrawer = true));
             <span class="text-body1" v-text="t('salesMonitor.recentOrderActions')" />
             <SalesOrdersTable />
         </div>
-    </div>
+    </VnRow>
 </template>
-
-<style lang="scss" scoped>
-.container {
-    display: flex;
-
-    @media (max-width: $breakpoint-md-max) {
-        flex-direction: column;
-    }
-}
-</style>

From e6e61e5717ddbc443c4633ed3b245b0109e68846 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 19 Aug 2024 13:40:35 +0200
Subject: [PATCH 06/24] fix: refs #7353 vnTable colors

---
 src/components/VnTable/VnTable.vue | 14 ++++++++------
 src/css/app.scss                   |  1 -
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 6c77d44df..c6826aa69 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -685,12 +685,14 @@ es:
     color: var(--vn-text-color);
 }
 
-.q-table--dark .q-table__bottom,
-.q-table--dark thead,
-.q-table--dark tr,
-.q-table--dark th,
-.q-table--dark td {
-    border-color: var(--vn-section-color);
+.q-table--dark {
+    &__bottom,
+    thead,
+    tr,
+    th,
+    td {
+        border-color: black;
+    }
 }
 
 .q-table__container > div:first-child {
diff --git a/src/css/app.scss b/src/css/app.scss
index c233b14f0..af1a14175 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -257,7 +257,6 @@ input::-webkit-inner-spin-button {
         }
         td {
             font-size: 11pt;
-            border-top: 1px solid var(--vn-page-color);
             border-collapse: collapse;
         }
     }

From 3f9bdfcc9cbd4422779882ffabde48f5f6f55b54 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 19 Aug 2024 14:21:36 +0200
Subject: [PATCH 07/24] fix: refs #7353 saleTicketMonitors

---
 src/pages/Monitor/MonitorClientsActions.vue |  16 +-
 src/pages/Monitor/MonitorTickets.vue        | 486 +++++++++++++++-
 src/pages/Monitor/SalesClientsTable.vue     |  67 ++-
 src/pages/Monitor/SalesOrdersTable.vue      | 176 +++---
 src/pages/Monitor/SalesTicketsTable.vue     | 588 --------------------
 5 files changed, 596 insertions(+), 737 deletions(-)
 delete mode 100644 src/pages/Monitor/SalesTicketsTable.vue

diff --git a/src/pages/Monitor/MonitorClientsActions.vue b/src/pages/Monitor/MonitorClientsActions.vue
index 52195f7f4..1173ee119 100644
--- a/src/pages/Monitor/MonitorClientsActions.vue
+++ b/src/pages/Monitor/MonitorClientsActions.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import SalesClientTable from './SalesClientsTable.vue';
@@ -9,9 +8,6 @@ import VnRow from 'src/components/ui/VnRow.vue';
 
 const { t } = useI18n();
 const stateStore = useStateStore();
-
-onMounted(async () => (stateStore.leftDrawer = false));
-onUnmounted(() => (stateStore.leftDrawer = true));
 </script>
 <template>
     <template v-if="stateStore.isHeaderMounted()">
@@ -27,14 +23,20 @@ onUnmounted(() => (stateStore.leftDrawer = true));
     </template>
     <VnRow
         class="q-pa-md"
-        :style="{ 'flex-direction': $q.screen.lt.lg ? 'column' : 'row' }"
+        :style="{ 'flex-direction': $q.screen.lt.lg ? 'column' : 'row', gap: '0px' }"
     >
         <div style="flex: 0.4">
-            <span class="text-body1" v-text="t('salesMonitor.clientsOnWebsite')" />
+            <span
+                class="q-ml-md text-body1"
+                v-text="t('salesMonitor.clientsOnWebsite')"
+            />
             <SalesClientTable />
         </div>
         <div style="flex: 0.6">
-            <span class="text-body1" v-text="t('salesMonitor.recentOrderActions')" />
+            <span
+                class="q-ml-md text-body1"
+                v-text="t('salesMonitor.recentOrderActions')"
+            />
             <SalesOrdersTable />
         </div>
     </VnRow>
diff --git a/src/pages/Monitor/MonitorTickets.vue b/src/pages/Monitor/MonitorTickets.vue
index 57ba00e57..764388c56 100644
--- a/src/pages/Monitor/MonitorTickets.vue
+++ b/src/pages/Monitor/MonitorTickets.vue
@@ -1,27 +1,477 @@
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
-import SalesTicketsTable from './SalesTicketsTable.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
+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 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 } from 'src/filters/date.js';
+import { toCurrency, dateRange } from 'src/filters';
 
+const DEFAULT_AUTO_REFRESH = 2 * 60 * 1000; // 2min in ms
 const { t } = useI18n();
-const stateStore = useStateStore();
+const autoRefresh = ref(false);
+const tableRef = ref(null);
+const provinceOpts = ref([]);
+const stateOpts = ref([]);
+const zoneOpts = ref([]);
+const visibleColumns = ref([]);
+const { viewSummary } = useSummaryDialog();
 
-onMounted(async () => (stateStore.leftDrawer = false));
-onUnmounted(() => (stateStore.leftDrawer = true));
+function exprBuilder(param, value) {
+    switch (param) {
+        case 'stateFk':
+            return { 'ts.stateFk': value };
+        case 'salesPersonFk':
+            return { 'c.salesPersonFk': value };
+        case 'provinceFk':
+            return { 'a.provinceFk': value };
+        case 'theoreticalHour':
+            return { 'z.hour': value };
+        case 'practicalHour':
+            return { 'zed.etc': value };
+        case 'shippedDate':
+            return { 't.shipped': { between: dateRange(value) } };
+        case 'nickname':
+            return { [`t.nickname`]: { like: `%${value}%` } };
+        case 'zoneFk':
+        case 'totalWithVat':
+            return { [`t.${param}`]: value };
+    }
+}
+
+const columns = computed(() => [
+    {
+        label: t('salesTicketsTable.problems'),
+        name: 'totalProblems',
+        align: 'left',
+
+        columnFilter: false,
+        attrs: {
+            dense: true,
+        },
+    },
+    {
+        label: t('salesTicketsTable.identifier'),
+        name: 'id',
+        field: 'id',
+        align: 'left',
+
+        columnFilter: {
+            component: 'number',
+            name: 'id',
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.client'),
+        name: 'clientFk',
+        align: 'left',
+        field: 'nickname',
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Clients',
+                fields: ['id', 'name', 'nickname'],
+                sortBy: 'name ASC',
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.salesPerson'),
+        name: 'salesPersonFk',
+        field: 'userName',
+        align: 'left',
+        optionFilter: 'firstName',
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Workers/activeWithInheritedRole',
+                fields: ['id', 'name'],
+                sortBy: 'nickname ASC',
+                where: { role: 'salesPerson' },
+                useLike: false,
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.date'),
+        name: 'shippedDate',
+        style: { 'max-width': '100px' },
+        align: 'left',
+
+        columnFilter: {
+            component: 'date',
+            name: 'shippedDate',
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.theoretical'),
+        name: 'theoreticalhour',
+        field: 'zoneLanding',
+        align: 'left',
+        format: (row) => row.theoreticalhour,
+        columnFilter: false,
+    },
+    {
+        label: t('salesTicketsTable.practical'),
+        name: 'practicalHour',
+        field: 'practicalHour',
+        align: 'left',
+        format: (row) => row.practicalHour,
+        columnFilter: false,
+    },
+    {
+        label: t('salesTicketsTable.preparation'),
+        name: 'preparationHour',
+        field: 'shipped',
+        align: 'left',
+        format: (row) => row.preparationHour,
+        columnFilter: false,
+    },
+    {
+        label: t('salesTicketsTable.province'),
+        name: 'provinceFk',
+        field: 'province',
+        align: 'left',
+        format: (row) => row.province,
+        columnFilter: {
+            component: 'select',
+            name: 'provinceFk',
+            attrs: {
+                options: provinceOpts.value,
+                'option-value': 'id',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.state'),
+        name: 'state',
+        align: 'left',
+        style: { 'max-width': '100px' },
+        columnFilter: {
+            component: 'select',
+            name: 'stateFk',
+            attrs: {
+                options: stateOpts.value,
+                'option-value': 'id',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.isFragile'),
+        name: 'isFragile',
+        field: 'isFragile',
+        align: 'left',
+        columnFilter: false,
+        attrs: {
+            'checked-icon': 'local_bar',
+            'unchecked-icon': 'local_bar',
+            'false-value': 0,
+            'true-value': 1,
+        },
+    },
+    {
+        label: t('salesTicketsTable.zone'),
+        name: 'zoneFk',
+        align: 'left',
+
+        columnFilter: {
+            component: 'select',
+            name: 'zoneFk',
+            attrs: {
+                options: zoneOpts.value,
+                'option-value': 'id',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.total'),
+        name: 'totalWithVat',
+        field: 'totalWithVat',
+        align: 'left',
+        style: { 'max-width': '75px' },
+
+        columnFilter: {
+            component: 'number',
+            name: 'totalWithVat',
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        align: 'right',
+        name: 'tableActions',
+        label: '',
+        actions: [
+            {
+                title: t('salesTicketsTable.goToLines'),
+                icon: 'vn:lines',
+                color: 'priamry',
+                action: (row) => openTab(row.id),
+                isPrimary: true,
+                attrs: {
+                    flat: true,
+                    dense: true,
+                },
+            },
+            {
+                title: t('salesTicketsTable.preview'),
+                icon: 'preview',
+                color: 'priamry',
+                action: (row) => viewSummary(row.id, TicketSummary),
+                isPrimary: true,
+                attrs: {
+                    flat: true,
+                    dense: true,
+                },
+            },
+        ],
+    },
+]);
+
+const getBadgeAttrs = (date) => {
+    let today = Date.vnNew();
+    today.setHours(0, 0, 0, 0);
+    let timeTicket = new Date(date);
+    timeTicket.setHours(0, 0, 0, 0);
+
+    let comparation = today - timeTicket;
+
+    if (comparation == 0) return { color: 'warning', 'text-color': 'black' };
+    if (comparation < 0) return { color: 'success', 'text-color': 'black' };
+    return { color: 'transparent', 'text-color': 'white' };
+};
+
+let refreshTimer = null;
+
+const autoRefreshHandler = (value) => {
+    if (value)
+        refreshTimer = setInterval(() => tableRef.value.reload(), DEFAULT_AUTO_REFRESH);
+    else {
+        clearInterval(refreshTimer);
+        refreshTimer = null;
+    }
+};
+
+const stateColors = {
+    notice: 'info',
+    success: 'positive',
+    warning: 'warning',
+    alert: 'negative',
+};
+
+const totalPriceColor = (ticket) => {
+    const total = parseInt(ticket.totalWithVat);
+    if (total > 0 && total < 50) return 'warning';
+};
+
+const formatShippedDate = (date) => {
+    if (!date) return '-';
+    const split1 = date.split('T');
+    const [year, month, day] = split1[0].split('-');
+    const _date = new Date(year, month - 1, day);
+    return toDateFormat(_date);
+};
+
+const openTab = (id) =>
+    window.open(`#/ticket/${id}/sale`, '_blank', 'noopener, noreferrer');
 </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')"
+    <FetchData
+        url="Provinces"
+        :filter="{
+            fields: ['id', 'name'],
+            order: 'name ASC',
+        }"
+        auto-load
+        @on-fetch="(data) => (provinceOpts = data)"
+    />
+    <FetchData
+        url="States"
+        :filter="{
+            fields: ['id', 'name'],
+            order: 'name ASC',
+        }"
+        auto-load
+        @on-fetch="(data) => (stateOpts = data)"
+    />
+    <FetchData
+        url="Zones"
+        :filter="{
+            fields: ['id', 'name'],
+            order: 'name ASC',
+        }"
+        auto-load
+        @on-fetch="(data) => (zoneOpts = data)"
+    />
+    <VnTable
+        ref="tableRef"
+        data-key="SalesMonitorTickets"
+        url="SalesMonitors/salesFilter"
+        search-url="SalesMonitorTickets"
+        :limit="20"
+        :expr-builder="exprBuilder"
+        :offset="50"
+        :columns="columns"
+        :visible-columns="visibleColumns"
+        :right-search="false"
+        default-mode="table"
+        auto-load
+        :row-click="({ id }) => openTab(id)"
+        :disable-option="{ card: true }"
+    >
+        <template #top-left>
+            <QCheckbox
+                v-model="autoRefresh"
+                :label="t('salesTicketsTable.autoRefresh')"
+                @update:model-value="autoRefreshHandler"
             />
-        </Teleport>
-    </template>
-    <SalesTicketsTable />
+        </template>
+        <template #column-totalProblems="{ row }">
+            <QTd class="no-padding" style="max-width: 50px">
+                <QIcon
+                    v-if="row.isTaxDataChecked === 0"
+                    name="vn:no036"
+                    color="primary"
+                    size="xs"
+                >
+                    <QTooltip>{{ t('salesTicketsTable.noVerifiedData') }}</QTooltip>
+                </QIcon>
+                <QIcon
+                    v-if="row.hasTicketRequest"
+                    name="vn:buyrequest"
+                    color="primary"
+                    size="xs"
+                >
+                    <QTooltip>{{ t('salesTicketsTable.purchaseRequest') }}</QTooltip>
+                </QIcon>
+                <QIcon
+                    v-if="row.itemShortage"
+                    name="vn:unavailable"
+                    color="primary"
+                    size="xs"
+                >
+                    <QTooltip>{{ t('salesTicketsTable.notVisible') }}</QTooltip>
+                </QIcon>
+                <QIcon v-if="row.isFreezed" name="vn:frozen" color="primary" size="xs">
+                    <QTooltip>{{ t('salesTicketsTable.clientFrozen') }}</QTooltip>
+                </QIcon>
+                <QIcon
+                    v-if="row.risk"
+                    name="vn:risk"
+                    :color="row.hasHighRisk ? 'negative' : 'primary'"
+                    size="xs"
+                >
+                    <QTooltip>{{ t('salesTicketsTable.risk') }}: {{ row.risk }}</QTooltip>
+                </QIcon>
+                <QIcon
+                    v-if="row.hasComponentLack"
+                    name="vn:components"
+                    color="primary"
+                    size="xs"
+                >
+                    <QTooltip>{{ t('salesTicketsTable.componentLack') }}</QTooltip>
+                </QIcon>
+                <QIcon
+                    v-if="row.isTooLittle"
+                    name="vn:isTooLittle"
+                    color="primary"
+                    size="xs"
+                >
+                    <QTooltip>{{ t('salesTicketsTable.tooLittle') }}</QTooltip>
+                </QIcon>
+            </QTd>
+        </template>
+        <template #column-id="{ row }">
+            <QTd class="no-padding">
+                <span class="link" @click.stop.prevent>
+                    {{ row.id }}
+                    <TicketDescriptorProxy :id="row.id" />
+                </span>
+            </QTd>
+        </template>
+        <template #column-clientFk="{ row }">
+            <QTd class="no-padding" @click.stop.prevent>
+                <span class="link">{{ row.nickname }}</span>
+                <CustomerDescriptorProxy :id="row.clientFk" />
+            </QTd>
+        </template>
+        <template #column-salesPersonFk="{ row }">
+            <QTd class="no-padding" @click.stop.prevent>
+                <span class="link">{{ row.userName }}</span>
+                <WorkerDescriptorProxy :id="row.salesPersonFk" />
+            </QTd>
+        </template>
+        <template #column-shippedDate="{ row }">
+            <QTd class="no-padding">
+                <QBadge
+                    v-bind="getBadgeAttrs(row.shippedDate)"
+                    class="q-pa-sm"
+                    style="font-size: 14px"
+                >
+                    {{ formatShippedDate(row.shippedDate) }}
+                </QBadge>
+            </QTd>
+        </template>
+        <template #column-state="{ row }">
+            <QTd class="no-padding" @click.stop.prevent>
+                <div v-if="row.refFk">
+                    <span class="link">{{ row.refFk }}</span>
+                    <InvoiceOutDescriptorProxy :id="row.invoiceOutId" />
+                </div>
+                <QBadge
+                    v-else
+                    :color="stateColors[row.classColor] || 'transparent'"
+                    :text-color="stateColors[row.classColor] ? 'black' : 'white'"
+                    class="q-pa-sm"
+                    style="font-size: 14px"
+                >
+                    {{ row.state }}
+                </QBadge>
+            </QTd>
+        </template>
+        <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>
+                </QIcon>
+            </QTd>
+        </template>
+        <template #column-zoneFk="{ row }">
+            <QTd class="no-padding" @click.stop.prevent>
+                <span class="link">{{ row.zoneName }}</span>
+                <ZoneDescriptorProxy :id="row.zoneFk" />
+            </QTd>
+        </template>
+        <template #column-totalWithVat="{ row }">
+            <QTd class="no-padding">
+                <QBadge
+                    :color="totalPriceColor(row) || 'transparent'"
+                    :text-color="totalPriceColor(row) ? 'black' : 'white'"
+                    class="q-pa-sm"
+                    style="font-size: 14px"
+                >
+                    {{ toCurrency(row.totalWithVat) }}
+                </QBadge>
+            </QTd>
+        </template>
+    </VnTable>
 </template>
diff --git a/src/pages/Monitor/SalesClientsTable.vue b/src/pages/Monitor/SalesClientsTable.vue
index ed6695d1f..b481f490a 100644
--- a/src/pages/Monitor/SalesClientsTable.vue
+++ b/src/pages/Monitor/SalesClientsTable.vue
@@ -106,42 +106,41 @@ const columns = computed(() => [
 </script>
 
 <template>
-    <QCard style="max-height: 380px; overflow-y: scroll">
-        <QCardSection>
+    <VnTable
+        ref="table"
+        data-key="SalesMonitorClients"
+        url="SalesMonitors/clientsFilter"
+        search-url="SalesMonitorClients"
+        :order="['dated DESC', 'hour DESC']"
+        :limit="6"
+        :expr-builder="exprBuilder"
+        :filter="filter"
+        :offset="50"
+        auto-load
+        :columns="columns"
+        :right-search="false"
+        default-mode="table"
+        :disable-option="{ card: true }"
+        dense
+        style="max-height: 380px; overflow-y: scroll"
+    >
+        <template #top-left>
             <VnRow>
                 <VnInputDate v-model="from" label="From" dense style="flex: 0.25" />
                 <VnInputDate v-model="to" label="To" dense style="flex: 0.25" />
             </VnRow>
-        </QCardSection>
-        <VnTable
-            ref="table"
-            data-key="SalesMonitorClients"
-            url="SalesMonitors/clientsFilter"
-            search-url="SalesMonitorClients"
-            :order="['dated DESC', 'hour DESC']"
-            :limit="6"
-            :expr-builder="exprBuilder"
-            :filter="filter"
-            :offset="50"
-            auto-load
-            :columns="columns"
-            :right-search="false"
-            default-mode="table"
-            dense
-            :without-header="true"
-        >
-            <template #column-salesPersonFk="{ row }">
-                <QTd>
-                    <span class="link">{{ row.salesPerson }}</span>
-                    <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
-                </QTd>
-            </template>
-            <template #column-clientFk="{ row }">
-                <QTd>
-                    <span class="link">{{ row.clientName }}</span>
-                    <CustomerDescriptorProxy :id="row.clientFk" />
-                </QTd>
-            </template>
-        </VnTable>
-    </QCard>
+        </template>
+        <template #column-salesPersonFk="{ row }">
+            <QTd>
+                <span class="link">{{ row.salesPerson }}</span>
+                <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
+            </QTd>
+        </template>
+        <template #column-clientFk="{ row }">
+            <QTd>
+                <span class="link">{{ row.clientName }}</span>
+                <CustomerDescriptorProxy :id="row.clientFk" />
+            </QTd>
+        </template>
+    </VnTable>
 </template>
diff --git a/src/pages/Monitor/SalesOrdersTable.vue b/src/pages/Monitor/SalesOrdersTable.vue
index dc723e541..b86579994 100644
--- a/src/pages/Monitor/SalesOrdersTable.vue
+++ b/src/pages/Monitor/SalesOrdersTable.vue
@@ -5,7 +5,7 @@ import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.v
 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 { toDateFormat } from 'src/filters/date.js';
 import { toCurrency } from 'src/filters';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import axios from 'axios';
@@ -103,100 +103,96 @@ const openTab = (id) =>
     window.open(`#/order/${id}/summary`, '_blank', 'noopener, noreferrer');
 </script>
 <template>
-    <QCard style="max-height: 380px; overflow-y: scroll">
-        <VnTable
-            ref="table"
-            data-key="SalesMonitorOrders"
-            url="SalesMonitors/ordersFilter"
-            search-url="SalesMonitorOrders"
-            order="date_send 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"
-            :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()"
-                />
-                <QBtn
-                    v-if="selectedRows.length"
-                    icon="delete"
-                    size="md"
-                    dense
-                    flat
-                    color="primary"
-                    @click="
-                        openConfirmationModal(
-                            t('salesOrdersTable.deleteConfirmTitle'),
-                            t('salesOrdersTable.deleteConfirmMessage'),
-                            removeOrders
-                        )
-                    "
+    <VnTable
+        ref="table"
+        class="q-px-none"
+        data-key="SalesMonitorOrders"
+        url="SalesMonitors/ordersFilter"
+        search-url="SalesMonitorOrders"
+        order="date_send 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"
+        :row-click="({ id }) => openTab(id)"
+        v-model:selected="selectedRows"
+        :disable-option="{ card: true }"
+        style="max-height: 380px; overflow-y: scroll"
+    >
+        <template #top-left>
+            <QBtn
+                icon="refresh"
+                size="md"
+                color="primary"
+                dense
+                flat
+                @click="$refs.table.reload()"
+            />
+            <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 q-mb-md"
+                    style="font-size: 14px"
                 >
-                    <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 q-mb-md"
-                        style="font-size: 14px"
-                    >
-                        {{ toDateFormat(row.date_send) }}
-                    </QBadge>
-                </QTd>
-            </template>
-            <template #column-dateMake="{ row }">
-                <QTd>
-                    {{ row.date_make }}
-                </QTd>
-            </template>
-            <template #column-clientFk="{ row }">
-                <QTd>
-                    <div class="q-mb-md">
-                        <span class="link">{{ row.clientName }}</span>
-                        <CustomerDescriptorProxy :id="row.clientFk" />
-                    </div>
-                    <span> {{ row.agencyName }}</span>
-                </QTd>
-            </template>
+                    {{ toDateFormat(row.date_send) }}
+                </QBadge>
+            </QTd>
+        </template>
+        <template #column-dateMake="{ row }">
+            <QTd>
+                {{ row.date_make }}
+            </QTd>
+        </template>
+        <template #column-clientFk="{ 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-salesPersonFk="{ 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 #column-salesPersonFk="{ 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>
 </template>
 <style lang="scss" scoped>
 .q-td {
     color: gray;
 }
-
-:deep(.q-table__container > div:first-child) {
-    background-color: var(--vn-section-color);
-}
 </style>
diff --git a/src/pages/Monitor/SalesTicketsTable.vue b/src/pages/Monitor/SalesTicketsTable.vue
deleted file mode 100644
index b617266ef..000000000
--- a/src/pages/Monitor/SalesTicketsTable.vue
+++ /dev/null
@@ -1,588 +0,0 @@
-<script setup>
-import { ref, computed, onMounted, reactive } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-
-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 VnInput from 'src/components/common/VnInput.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
-import VnInputDate from 'src/components/common/VnInputDate.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';
-const DEFAULT_AUTO_REFRESH = 1000;
-const { t } = useI18n();
-const autoRefresh = ref(false);
-const router = useRouter();
-const paginateRef = ref(null);
-const workersActiveOptions = ref([]);
-const provincesOptions = ref([]);
-const statesOptions = ref([]);
-const zonesOptions = ref([]);
-const visibleColumns = ref([]);
-const allColumnNames = ref([]);
-const { viewSummary } = useSummaryDialog();
-
-function exprBuilder(param, value) {
-    switch (param) {
-        case 'stateFk':
-            return { 'ts.stateFk': value };
-        case 'salesPersonFk':
-            return { 'c.salesPersonFk': value };
-        case 'provinceFk':
-            return { 'a.provinceFk': value };
-        case 'theoreticalHour':
-            return { 'z.hour': value };
-        case 'practicalHour':
-            return { 'zed.etc': value };
-        case 'shippedDate':
-            return { 't.shipped': { between: dateRange(value) } };
-        case 'nickname':
-            return { [`t.nickname`]: { like: `%${value}%` } };
-        case 'zoneFk':
-        case 'totalWithVat':
-            return { [`t.${param}`]: value };
-    }
-}
-
-const filter = { order: ['totalProblems DESC'] };
-let params = reactive({});
-
-const applyColumnFilter = async (col) => {
-    try {
-        const paramKey = col.columnFilter?.filterParamKey || col.field;
-        params[paramKey] = col.columnFilter.filterValue;
-        await paginateRef.value.addFilter(null, params);
-    } catch (err) {
-        console.error('Error applying column filter', err);
-    }
-};
-
-const getInputEvents = (col) => {
-    return col.columnFilter.type === 'select' || col.columnFilter.type === 'date'
-        ? { 'update:modelValue': () => applyColumnFilter(col) }
-        : {
-              'keyup.enter': () => applyColumnFilter(col),
-          };
-};
-
-const fetchParams = ($params = {}) => {
-    const excludedParams = ['search', 'clientFk', 'orderFk', 'refFk', 'scopeDays'];
-
-    const hasExcludedParams = excludedParams.some((param) => {
-        return $params && $params[param] != undefined;
-    });
-    const hasParams = Object.entries($params).length;
-    if (!hasParams || !hasExcludedParams) $params.scopeDays = 1;
-
-    if (typeof $params.scopeDays === 'number') {
-        const from = Date.vnNew();
-        from.setHours(0, 0, 0, 0);
-
-        const to = new Date(from.getTime());
-        to.setDate(to.getDate() + $params.scopeDays);
-        to.setHours(23, 59, 59, 999);
-
-        Object.assign($params, { from, to });
-    }
-    return { tableOrder: 'totalProblems DESC', ...$params };
-};
-
-const columns = computed(() => [
-    {
-        label: t('salesTicketsTable.problems'),
-        name: 'problems',
-        align: 'left',
-        sortable: true,
-        columnFilter: false,
-        attrs: {
-            dense: true,
-        },
-    },
-    {
-        label: t('salesTicketsTable.identifier'),
-        name: 'identifier',
-        field: 'id',
-        align: 'left',
-        sortable: true,
-
-        columnFilter: {
-            component: 'input',
-            name: 'id',
-            attrs: {
-                dense: true,
-            },
-        },
-    },
-    {
-        label: t('salesTicketsTable.client'),
-        name: 'client',
-        align: 'left',
-        field: 'nickname',
-        sortable: true,
-        columnFilter: {
-            component: 'input',
-            name: 'nickname',
-            attrs: {
-                dense: true,
-            },
-        },
-    },
-    {
-        label: t('salesTicketsTable.salesPerson'),
-        name: 'salesPerson',
-        field: 'userName',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: 'select',
-            name: 'salesPersonFk',
-            attrs: {
-                options: workersActiveOptions.value,
-                'option-value': 'id',
-                'option-label': 'name',
-                dense: true,
-            },
-        },
-    },
-    {
-        label: t('salesTicketsTable.date'),
-        name: 'date',
-        style: { 'max-width': '100px' },
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: 'date',
-            name: 'shippedDate',
-            attrs: {
-                dense: true,
-            },
-        },
-    },
-    {
-        label: t('salesTicketsTable.theoretical'),
-        name: 'theoretical',
-        field: 'zoneLanding',
-        align: 'left',
-        sortable: true,
-        format: (val) => toTimeFormat(val),
-        columnFilter: {
-            component: 'input',
-            name: 'theoreticalHour',
-            attrs: {
-                dense: true,
-            },
-        },
-    },
-    {
-        label: t('salesTicketsTable.practical'),
-        name: 'practical',
-        field: 'practicalHour',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: 'input',
-            name: 'practicalHour',
-            attrs: {
-                dense: true,
-            },
-        },
-    },
-    {
-        label: t('salesTicketsTable.preparation'),
-        name: 'preparation',
-        field: 'shipped',
-        align: 'left',
-        sortable: true,
-        format: (val) => toTimeFormat(val),
-        columnFilter: {
-            component: 'input',
-            name: 'shippedDate',
-            attrs: {
-                dense: true,
-            },
-        },
-    },
-
-    {
-        label: t('salesTicketsTable.province'),
-        name: 'province',
-        field: 'province',
-        align: 'left',
-        style: { 'max-width': '100px' },
-        sortable: true,
-        columnFilter: {
-            component: 'select',
-            name: 'provinceFk',
-            attrs: {
-                options: provincesOptions.value,
-                'option-value': 'id',
-                'option-label': 'name',
-                dense: true,
-            },
-        },
-    },
-    {
-        label: t('salesTicketsTable.state'),
-        name: 'state',
-        align: 'left',
-        style: { 'max-width': '100px' },
-        sortable: true,
-        columnFilter: {
-            component: 'select',
-            name: 'stateFk',
-            attrs: {
-                options: statesOptions.value,
-                'option-value': 'id',
-                'option-label': 'name',
-                dense: true,
-            },
-        },
-    },
-    {
-        label: t('salesTicketsTable.isFragile'),
-        name: 'isFragile',
-        field: 'isFragile',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            inWhere: true,
-        },
-        attrs: {
-            'checked-icon': 'local_bar',
-            'unchecked-icon': 'local_bar',
-            'false-value': 0,
-            'true-value': 1,
-        },
-    },
-    {
-        label: t('salesTicketsTable.zone'),
-        name: 'zone',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: 'select',
-            name: 'zoneFk',
-            attrs: {
-                options: zonesOptions.value,
-                'option-value': 'id',
-                'option-label': 'name',
-                dense: true,
-            },
-        },
-    },
-    {
-        label: t('salesTicketsTable.total'),
-        name: 'total',
-        field: 'totalWithVat',
-        align: 'left',
-        style: { 'max-width': '75px' },
-        sortable: true,
-        columnFilter: {
-            component: 'input',
-            name: 'totalWithVat',
-            attrs: {
-                dense: true,
-            },
-        },
-    },
-    {
-        align: 'right',
-        name: 'tableActions',
-        label: '',
-        actions: [
-            {
-                title: t('salesTicketsTable.goToLines'),
-                icon: 'vn:lines',
-                color: 'priamry',
-                action: (row) => redirectToSales(row.id),
-                isPrimary: true,
-                attrs: {
-                    flat: true,
-                    dense: true,
-                },
-            },
-            {
-                title: t('salesTicketsTable.preview'),
-                icon: 'preview',
-                color: 'priamry',
-                action: (row) => viewSummary(row.id, TicketSummary),
-                isPrimary: true,
-                attrs: {
-                    flat: true,
-                    dense: true,
-                },
-            },
-        ],
-    },
-]);
-
-const getBadgeAttrs = (date) => {
-    let today = Date.vnNew();
-    today.setHours(0, 0, 0, 0);
-    let timeTicket = new Date(date);
-    timeTicket.setHours(0, 0, 0, 0);
-
-    let comparation = today - timeTicket;
-
-    if (comparation == 0) return { color: 'warning', 'text-color': 'black' };
-    if (comparation < 0) return { color: 'success', 'text-color': 'black' };
-    return { color: 'transparent', 'text-color': 'white' };
-};
-
-let refreshTimer = null;
-
-const autoRefreshHandler = (value) => {
-    if (value)
-        refreshTimer = setInterval(() => paginateRef.value.fetch(), 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',
-    warning: 'warning',
-    alert: 'negative',
-};
-
-const totalPriceColor = (ticket) => {
-    const total = parseInt(ticket.totalWithVat);
-    if (total > 0 && total < 50) return 'warning';
-};
-
-const formatShippedDate = (date) => {
-    if (!date) return '-';
-    const split1 = date.split('T');
-    const [year, month, day] = split1[0].split('-');
-    const _date = new Date(year, month - 1, day);
-    return toDateFormat(_date);
-};
-
-const redirectToSales = (id) => {
-    const url = `#/ticket/${id}/sale`;
-    window.open(url, '_blank');
-};
-
-// onMounted(async () => {
-//     const filteredColumns = columns.value.filter((col) => col.name !== 'rowActions');
-//     allColumnNames.value = filteredColumns.map((col) => col.name);
-//     params = fetchParams();
-//     await paginateRef.value.addFilter(null, params);
-// });
-</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="{
-            fields: ['id', 'name'],
-            order: 'name ASC',
-        }"
-        auto-load
-        @on-fetch="(data) => (provincesOptions = data)"
-    />
-    <FetchData
-        url="States"
-        :filter="{
-            fields: ['id', 'name'],
-            order: 'name ASC',
-        }"
-        auto-load
-        @on-fetch="(data) => (statesOptions = data)"
-    />
-    <FetchData
-        url="Zones"
-        :filter="{
-            fields: ['id', 'name'],
-            order: 'name ASC',
-        }"
-        auto-load
-        @on-fetch="(data) => (zonesOptions = data)"
-    />
-    <VnTable
-        ref="paginateRef"
-        data-key="SalesMonitorTickets"
-        url="SalesMonitors/salesFilter"
-        search-url="SalesMonitorTickets"
-        :filter="filter"
-        :limit="20"
-        :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)"
-    >
-        <template #top-left>
-            <TableVisibleColumns
-                :all-columns="allColumnNames"
-                table-code="ticketsMonitor"
-                labels-traductions-path="salesTicketsTable"
-                @on-config-saved="visibleColumns = [...$event, 'rowActions']"
-            />
-            <QCheckbox
-                v-model="autoRefresh"
-                :label="t('salesTicketsTable.autoRefresh')"
-                @update:model-value="autoRefreshHandler"
-            />
-        </template>
-        <template #column-problems="{ row }">
-            <QTd class="no-padding" style="max-width: 50px">
-                <QIcon
-                    v-if="row.isTaxDataChecked === 0"
-                    name="vn:no036"
-                    color="primary"
-                    size="xs"
-                >
-                    <QTooltip>{{ t('salesTicketsTable.noVerifiedData') }}</QTooltip>
-                </QIcon>
-                <QIcon
-                    v-if="row.hasTicketRequest"
-                    name="vn:buyrequest"
-                    color="primary"
-                    size="xs"
-                >
-                    <QTooltip>{{ t('salesTicketsTable.purchaseRequest') }}</QTooltip>
-                </QIcon>
-                <QIcon
-                    v-if="row.itemShortage"
-                    name="vn:unavailable"
-                    color="primary"
-                    size="xs"
-                >
-                    <QTooltip>{{ t('salesTicketsTable.notVisible') }}</QTooltip>
-                </QIcon>
-                <QIcon v-if="row.isFreezed" name="vn:frozen" color="primary" size="xs">
-                    <QTooltip>{{ t('salesTicketsTable.clientFrozen') }}</QTooltip>
-                </QIcon>
-                <QIcon
-                    v-if="row.risk"
-                    name="vn:risk"
-                    :color="row.hasHighRisk ? 'negative' : 'primary'"
-                    size="xs"
-                >
-                    <QTooltip>{{ t('salesTicketsTable.risk') }}: {{ row.risk }}</QTooltip>
-                </QIcon>
-                <QIcon
-                    v-if="row.hasComponentLack"
-                    name="vn:components"
-                    color="primary"
-                    size="xs"
-                >
-                    <QTooltip>{{ t('salesTicketsTable.componentLack') }}</QTooltip>
-                </QIcon>
-                <QIcon
-                    v-if="row.isTooLittle"
-                    name="vn:isTooLittle"
-                    color="primary"
-                    size="xs"
-                >
-                    <QTooltip>{{ t('salesTicketsTable.tooLittle') }}</QTooltip>
-                </QIcon>
-            </QTd>
-        </template>
-        <template #column-identifier="{ row }">
-            <QTd class="no-padding">
-                <span class="link" @click.stop.prevent>
-                    {{ row.id }}
-                    <TicketDescriptorProxy :id="row.id" />
-                </span>
-            </QTd>
-        </template>
-        <template #column-client="{ row }">
-            <QTd class="no-padding" @click.stop.prevent>
-                <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>
-                <WorkerDescriptorProxy :id="row.salesPersonFk" />
-            </QTd>
-        </template>
-        <template #column-date="{ row }">
-            <QTd class="no-padding">
-                <QBadge
-                    v-bind="getBadgeAttrs(row.shippedDate)"
-                    class="q-pa-sm"
-                    style="font-size: 14px"
-                >
-                    {{ formatShippedDate(row.shippedDate) }}
-                </QBadge>
-            </QTd>
-        </template>
-        <template #column-state="{ row }">
-            <QTd class="no-padding" @click.stop.prevent>
-                <div v-if="row.refFk">
-                    <span class="link">{{ row.refFk }}</span>
-                    <InvoiceOutDescriptorProxy :id="row.invoiceOutId" />
-                </div>
-                <QBadge
-                    v-else
-                    :color="stateColors[row.classColor] || 'transparent'"
-                    :text-color="stateColors[row.classColor] ? 'black' : 'white'"
-                    class="q-pa-sm"
-                    style="font-size: 14px"
-                >
-                    {{ row.state }}
-                </QBadge>
-            </QTd>
-        </template>
-        <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>
-                </QIcon>
-            </QTd>
-        </template>
-        <template #column-zone="{ row }">
-            <QTd class="no-padding" @click.stop.prevent>
-                <span class="link">{{ row.zoneName }}</span>
-                <ZoneDescriptorProxy :id="row.zoneFk" />
-            </QTd>
-        </template>
-        <template #column-total="{ row }">
-            <QTd class="no-padding">
-                <QBadge
-                    :color="totalPriceColor(row) || 'transparent'"
-                    :text-color="totalPriceColor(row) ? 'black' : 'white'"
-                    class="q-pa-sm"
-                    style="font-size: 14px"
-                >
-                    {{ toCurrency(row.totalWithVat) }}
-                </QBadge>
-            </QTd>
-        </template>
-    </VnTable>
-</template>

From 1ec7b7a8c1d6e06931873f5240c6818cc8ec40ba Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 19 Aug 2024 16:02:30 +0200
Subject: [PATCH 08/24] fix: refs #7353 css

---
 src/pages/Monitor/SalesClientsTable.vue | 10 ++++++++--
 src/pages/Monitor/SalesOrdersTable.vue  | 25 +++++++++++++------------
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/pages/Monitor/SalesClientsTable.vue b/src/pages/Monitor/SalesClientsTable.vue
index b481f490a..3ab355872 100644
--- a/src/pages/Monitor/SalesClientsTable.vue
+++ b/src/pages/Monitor/SalesClientsTable.vue
@@ -126,8 +126,8 @@ const columns = computed(() => [
     >
         <template #top-left>
             <VnRow>
-                <VnInputDate v-model="from" label="From" dense style="flex: 0.25" />
-                <VnInputDate v-model="to" label="To" dense style="flex: 0.25" />
+                <VnInputDate v-model="from" label="From" dense style="flex: 0.3" />
+                <VnInputDate v-model="to" label="To" dense style="flex: 0.3" />
             </VnRow>
         </template>
         <template #column-salesPersonFk="{ row }">
@@ -144,3 +144,9 @@ const columns = computed(() => [
         </template>
     </VnTable>
 </template>
+
+<style lang="scss" scoped>
+td {
+    max-width: 120px;
+}
+</style>
diff --git a/src/pages/Monitor/SalesOrdersTable.vue b/src/pages/Monitor/SalesOrdersTable.vue
index b86579994..7479380d0 100644
--- a/src/pages/Monitor/SalesOrdersTable.vue
+++ b/src/pages/Monitor/SalesOrdersTable.vue
@@ -5,7 +5,7 @@ import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.v
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
 
-import { toDateFormat } from 'src/filters/date.js';
+import { toDateFormat, toDateTimeFormat } from 'src/filters/date.js';
 import { toCurrency } from 'src/filters';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import axios from 'axios';
@@ -41,6 +41,7 @@ const columns = computed(() => [
         align: 'left',
         orderBy: 'date_make',
         columnFilter: false,
+        format: (row) => toDateTimeFormat(row.date_make),
     },
     {
         label: t('salesOrdersTable.client'),
@@ -158,35 +159,34 @@ const openTab = (id) =>
                 <QBadge
                     :color="getBadgeColor(row.date_send)"
                     text-color="black"
-                    class="q-pa-sm q-mb-md"
+                    class="q-pa-sm"
                     style="font-size: 14px"
                 >
                     {{ toDateFormat(row.date_send) }}
                 </QBadge>
             </QTd>
         </template>
-        <template #column-dateMake="{ row }">
-            <QTd>
-                {{ row.date_make }}
-            </QTd>
-        </template>
+
         <template #column-clientFk="{ row }">
             <QTd>
-                <div class="q-mb-md">
-                    <span class="link">{{ row.clientName }}</span>
+                <div class="q-mb-sm">
+                    <span class="link" v-text="row.clientName" />
                     <CustomerDescriptorProxy :id="row.clientFk" />
                 </div>
-                <span> {{ row.agencyName }}</span>
+                <span
+                    :title="$q.screen.lt.xl ? row.agencyName : ''"
+                    v-text="row.agencyName"
+                />
             </QTd>
         </template>
 
         <template #column-salesPersonFk="{ row }">
             <QTd>
                 <div class="q-mb-md">
-                    <span class="link">{{ row.salesPerson }}</span>
+                    <span class="link" v-text="row.salesPerson" />
                     <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
                 </div>
-                <span>{{ toCurrency(row.import) }}</span>
+                <span v-text="toCurrency(row.import)" />
             </QTd>
         </template>
     </VnTable>
@@ -194,5 +194,6 @@ const openTab = (id) =>
 <style lang="scss" scoped>
 .q-td {
     color: gray;
+    max-width: 140px;
 }
 </style>

From 03baef82311317e2c692b3a761d507b9c3cf85eb Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 20 Aug 2024 12:14:05 +0200
Subject: [PATCH 09/24] fix: refs #7353 css

---
 src/pages/Monitor/MonitorClientsActions.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Monitor/MonitorClientsActions.vue b/src/pages/Monitor/MonitorClientsActions.vue
index 1173ee119..baa6b450d 100644
--- a/src/pages/Monitor/MonitorClientsActions.vue
+++ b/src/pages/Monitor/MonitorClientsActions.vue
@@ -25,14 +25,14 @@ const stateStore = useStateStore();
         class="q-pa-md"
         :style="{ 'flex-direction': $q.screen.lt.lg ? 'column' : 'row', gap: '0px' }"
     >
-        <div style="flex: 0.4">
+        <div style="flex: 0.25">
             <span
                 class="q-ml-md text-body1"
                 v-text="t('salesMonitor.clientsOnWebsite')"
             />
             <SalesClientTable />
         </div>
-        <div style="flex: 0.6">
+        <div style="flex: 0.75">
             <span
                 class="q-ml-md text-body1"
                 v-text="t('salesMonitor.recentOrderActions')"

From b0c27027c0c80e880c474886c98ba420bc1fc6a9 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 22 Aug 2024 13:41:53 +0200
Subject: [PATCH 10/24] chore: refs #7353 use Vue component nomenclature

---
 src/pages/Monitor/MonitorClientsActions.vue   | 25 ++--------
 ...lientsTable.vue => MonitorSaleClients.vue} |  2 -
 ...sOrdersTable.vue => MonitorSaleOrders.vue} |  2 -
 src/pages/Monitor/MonitorTickets.vue          | 46 +++++++++++++++----
 src/pages/Monitor/locale/en.yml               |  1 +
 src/pages/Monitor/locale/es.yml               |  1 +
 6 files changed, 42 insertions(+), 35 deletions(-)
 rename src/pages/Monitor/{SalesClientsTable.vue => MonitorSaleClients.vue} (98%)
 rename src/pages/Monitor/{SalesOrdersTable.vue => MonitorSaleOrders.vue} (98%)

diff --git a/src/pages/Monitor/MonitorClientsActions.vue b/src/pages/Monitor/MonitorClientsActions.vue
index baa6b450d..87bcfe112 100644
--- a/src/pages/Monitor/MonitorClientsActions.vue
+++ b/src/pages/Monitor/MonitorClientsActions.vue
@@ -1,26 +1,9 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
-import SalesClientTable from './SalesClientsTable.vue';
-import SalesOrdersTable from './SalesOrdersTable.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import SalesClientTable from './MonitorSaleClients.vue';
+import SalesOrdersTable from './MonitorSaleOrders.vue';
 import VnRow from 'src/components/ui/VnRow.vue';
-
-const { t } = useI18n();
-const stateStore = useStateStore();
 </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>
     <VnRow
         class="q-pa-md"
         :style="{ 'flex-direction': $q.screen.lt.lg ? 'column' : 'row', gap: '0px' }"
@@ -28,14 +11,14 @@ const stateStore = useStateStore();
         <div style="flex: 0.25">
             <span
                 class="q-ml-md text-body1"
-                v-text="t('salesMonitor.clientsOnWebsite')"
+                v-text="$t('salesMonitor.clientsOnWebsite')"
             />
             <SalesClientTable />
         </div>
         <div style="flex: 0.75">
             <span
                 class="q-ml-md text-body1"
-                v-text="t('salesMonitor.recentOrderActions')"
+                v-text="$t('salesMonitor.recentOrderActions')"
             />
             <SalesOrdersTable />
         </div>
diff --git a/src/pages/Monitor/SalesClientsTable.vue b/src/pages/Monitor/MonitorSaleClients.vue
similarity index 98%
rename from src/pages/Monitor/SalesClientsTable.vue
rename to src/pages/Monitor/MonitorSaleClients.vue
index 3ab355872..445d9f1e3 100644
--- a/src/pages/Monitor/SalesClientsTable.vue
+++ b/src/pages/Monitor/MonitorSaleClients.vue
@@ -112,7 +112,6 @@ const columns = computed(() => [
         url="SalesMonitors/clientsFilter"
         search-url="SalesMonitorClients"
         :order="['dated DESC', 'hour DESC']"
-        :limit="6"
         :expr-builder="exprBuilder"
         :filter="filter"
         :offset="50"
@@ -122,7 +121,6 @@ const columns = computed(() => [
         default-mode="table"
         :disable-option="{ card: true }"
         dense
-        style="max-height: 380px; overflow-y: scroll"
     >
         <template #top-left>
             <VnRow>
diff --git a/src/pages/Monitor/SalesOrdersTable.vue b/src/pages/Monitor/MonitorSaleOrders.vue
similarity index 98%
rename from src/pages/Monitor/SalesOrdersTable.vue
rename to src/pages/Monitor/MonitorSaleOrders.vue
index 7479380d0..b10e50da6 100644
--- a/src/pages/Monitor/SalesOrdersTable.vue
+++ b/src/pages/Monitor/MonitorSaleOrders.vue
@@ -111,7 +111,6 @@ const openTab = (id) =>
         url="SalesMonitors/ordersFilter"
         search-url="SalesMonitorOrders"
         order="date_send DESC"
-        :limit="6"
         :right-search="false"
         :expr-builder="exprBuilder"
         auto-load
@@ -125,7 +124,6 @@ const openTab = (id) =>
         :row-click="({ id }) => openTab(id)"
         v-model:selected="selectedRows"
         :disable-option="{ card: true }"
-        style="max-height: 380px; overflow-y: scroll"
     >
         <template #top-left>
             <QBtn
diff --git a/src/pages/Monitor/MonitorTickets.vue b/src/pages/Monitor/MonitorTickets.vue
index 764388c56..a2ab65572 100644
--- a/src/pages/Monitor/MonitorTickets.vue
+++ b/src/pages/Monitor/MonitorTickets.vue
@@ -12,9 +12,12 @@ import VnTable from 'components/VnTable/VnTable.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { toDateFormat } from 'src/filters/date.js';
 import { toCurrency, dateRange } from 'src/filters';
+import { useStateStore } from 'stores/useStateStore';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
 
 const DEFAULT_AUTO_REFRESH = 2 * 60 * 1000; // 2min in ms
 const { t } = useI18n();
+const stateStore = useStateStore();
 const autoRefresh = ref(false);
 const tableRef = ref(null);
 const provinceOpts = ref([]);
@@ -322,6 +325,17 @@ const openTab = (id) =>
         auto-load
         @on-fetch="(data) => (zoneOpts = data)"
     />
+    <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>
     <VnTable
         ref="tableRef"
         data-key="SalesMonitorTickets"
@@ -339,11 +353,21 @@ const openTab = (id) =>
         :disable-option="{ card: true }"
     >
         <template #top-left>
+            <QBtn
+                icon="refresh"
+                size="md"
+                color="primary"
+                dense
+                flat
+                @click="$refs.tableRef.reload()"
+            />
             <QCheckbox
                 v-model="autoRefresh"
-                :label="t('salesTicketsTable.autoRefresh')"
+                :label="$t('salesTicketsTable.autoRefresh')"
                 @update:model-value="autoRefreshHandler"
-            />
+            >
+                <QTooltip>{{ $t('refreshInfo') }}</QTooltip>
+            </QCheckbox>
         </template>
         <template #column-totalProblems="{ row }">
             <QTd class="no-padding" style="max-width: 50px">
@@ -353,7 +377,7 @@ const openTab = (id) =>
                     color="primary"
                     size="xs"
                 >
-                    <QTooltip>{{ t('salesTicketsTable.noVerifiedData') }}</QTooltip>
+                    <QTooltip>{{ $t('salesTicketsTable.noVerifiedData') }}</QTooltip>
                 </QIcon>
                 <QIcon
                     v-if="row.hasTicketRequest"
@@ -361,7 +385,7 @@ const openTab = (id) =>
                     color="primary"
                     size="xs"
                 >
-                    <QTooltip>{{ t('salesTicketsTable.purchaseRequest') }}</QTooltip>
+                    <QTooltip>{{ $t('salesTicketsTable.purchaseRequest') }}</QTooltip>
                 </QIcon>
                 <QIcon
                     v-if="row.itemShortage"
@@ -369,10 +393,10 @@ const openTab = (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"
@@ -380,7 +404,9 @@ const openTab = (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"
@@ -388,7 +414,7 @@ const openTab = (id) =>
                     color="primary"
                     size="xs"
                 >
-                    <QTooltip>{{ t('salesTicketsTable.componentLack') }}</QTooltip>
+                    <QTooltip>{{ $t('salesTicketsTable.componentLack') }}</QTooltip>
                 </QIcon>
                 <QIcon
                     v-if="row.isTooLittle"
@@ -396,7 +422,7 @@ const openTab = (id) =>
                     color="primary"
                     size="xs"
                 >
-                    <QTooltip>{{ t('salesTicketsTable.tooLittle') }}</QTooltip>
+                    <QTooltip>{{ $t('salesTicketsTable.tooLittle') }}</QTooltip>
                 </QIcon>
             </QTd>
         </template>
@@ -451,7 +477,7 @@ const openTab = (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>
diff --git a/src/pages/Monitor/locale/en.yml b/src/pages/Monitor/locale/en.yml
index 629005191..1f78395ec 100644
--- a/src/pages/Monitor/locale/en.yml
+++ b/src/pages/Monitor/locale/en.yml
@@ -44,3 +44,4 @@ salesTicketsTable:
 searchBar:
     label: Search tickets
     info: Search tickets by id or alias
+refreshInfo: Toggle auto-refresh every 2 minutes
diff --git a/src/pages/Monitor/locale/es.yml b/src/pages/Monitor/locale/es.yml
index cf73550be..9af27d340 100644
--- a/src/pages/Monitor/locale/es.yml
+++ b/src/pages/Monitor/locale/es.yml
@@ -44,3 +44,4 @@ salesTicketsTable:
 searchBar:
     label: Buscar tickets
     info: Buscar tickets por identificador o alias
+refreshInfo: Conmuta el refresco automático cada 2 minutos

From fdacdf1a120932954f4e5dacf7bd8442ee8e3cca Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 23 Aug 2024 12:43:27 +0200
Subject: [PATCH 11/24] feat: refs #7353 add filter & fix customTags

---
 src/components/common/VnSelect.vue            |   5 +
 src/components/ui/VnFilterPanel.vue           |   4 +-
 src/filters/dateRange.js                      |   2 +-
 ...itorSaleClients.vue => MonitorClients.vue} |   0
 src/pages/Monitor/MonitorClientsActions.vue   |   4 +-
 ...onitorSaleOrders.vue => MonitorOrders.vue} |   1 -
 .../Monitor/Ticket/MonitorTicketFilter.vue    | 261 ++++++++++++++++++
 .../Monitor/Ticket/MonitorTicketSearchbar.vue |  12 +
 .../Monitor/{ => Ticket}/MonitorTickets.vue   |  30 +-
 src/router/modules/monitor.js                 |   3 +-
 10 files changed, 298 insertions(+), 24 deletions(-)
 rename src/pages/Monitor/{MonitorSaleClients.vue => MonitorClients.vue} (100%)
 rename src/pages/Monitor/{MonitorSaleOrders.vue => MonitorOrders.vue} (99%)
 create mode 100644 src/pages/Monitor/Ticket/MonitorTicketFilter.vue
 create mode 100644 src/pages/Monitor/Ticket/MonitorTicketSearchbar.vue
 rename src/pages/Monitor/{ => Ticket}/MonitorTickets.vue (96%)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 63a3f088f..d4bbbc979 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -73,6 +73,10 @@ const $props = defineProps({
         type: Boolean,
         default: true,
     },
+    params: {
+        type: Object,
+        default: null,
+    },
 });
 
 const { t } = useI18n();
@@ -205,6 +209,7 @@ function nullishToTrue(value) {
         :limit="limit"
         :sort-by="sortBy"
         :fields="fields"
+        :params="params"
     />
     <QSelect
         v-model="value"
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 9059605ca..b3e002ebb 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -180,10 +180,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) {
diff --git a/src/filters/dateRange.js b/src/filters/dateRange.js
index 7aa2869e5..4c0cfe654 100644
--- a/src/filters/dateRange.js
+++ b/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];
diff --git a/src/pages/Monitor/MonitorSaleClients.vue b/src/pages/Monitor/MonitorClients.vue
similarity index 100%
rename from src/pages/Monitor/MonitorSaleClients.vue
rename to src/pages/Monitor/MonitorClients.vue
diff --git a/src/pages/Monitor/MonitorClientsActions.vue b/src/pages/Monitor/MonitorClientsActions.vue
index 87bcfe112..d6a72fbd9 100644
--- a/src/pages/Monitor/MonitorClientsActions.vue
+++ b/src/pages/Monitor/MonitorClientsActions.vue
@@ -1,6 +1,6 @@
 <script setup>
-import SalesClientTable from './MonitorSaleClients.vue';
-import SalesOrdersTable from './MonitorSaleOrders.vue';
+import SalesClientTable from './MonitorClients.vue';
+import SalesOrdersTable from './MonitorOrders.vue';
 import VnRow from 'src/components/ui/VnRow.vue';
 </script>
 <template>
diff --git a/src/pages/Monitor/MonitorSaleOrders.vue b/src/pages/Monitor/MonitorOrders.vue
similarity index 99%
rename from src/pages/Monitor/MonitorSaleOrders.vue
rename to src/pages/Monitor/MonitorOrders.vue
index b10e50da6..9e8937c33 100644
--- a/src/pages/Monitor/MonitorSaleOrders.vue
+++ b/src/pages/Monitor/MonitorOrders.vue
@@ -191,7 +191,6 @@ const openTab = (id) =>
 </template>
 <style lang="scss" scoped>
 .q-td {
-    color: gray;
     max-width: 140px;
 }
 </style>
diff --git a/src/pages/Monitor/Ticket/MonitorTicketFilter.vue b/src/pages/Monitor/Ticket/MonitorTicketFilter.vue
new file mode 100644
index 000000000..ff9ea5e63
--- /dev/null
+++ b/src/pages/Monitor/Ticket/MonitorTicketFilter.vue
@@ -0,0 +1,261 @@
+<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';
+
+defineProps({ dataKey: { type: String, required: true } });
+const { t } = useI18n();
+const warehouses = ref();
+const groupedStates = ref();
+
+const handleScopeDays = (params, days, callback) => {
+    if (!days) {
+        Object.assign(params, { from: undefined, to: undefined, scopeDays: undefined });
+    } else {
+        params.from = Date.vnNew();
+        const to = Date.vnNew();
+        to.setDate(to.getDate() + days);
+        to.setHours(23, 59, 59, 999);
+        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)" />
+    <VnFilterPanel
+        :data-key="dataKey"
+        :search-button="true"
+        :hidden-tags="['from', 'to']"
+        :custom-tags="['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>
+                    <!-- Si se borran desde los tags no funciona-->
+                    <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="nickname"
+                    />
+                </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
+    FREE: Free
+    DELIVERED: Delivered
+    ON_PREPARATION: On preparation
+    ON_PREVIOUS: On previous
+    PACKED: Packed
+    
+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
+    FREE: Libre
+    DELIVERED: Servido
+    ON_PREPARATION: En preparación
+    ON_PREVIOUS: En previa
+    PACKED: Encajado
+</i18n>
diff --git a/src/pages/Monitor/Ticket/MonitorTicketSearchbar.vue b/src/pages/Monitor/Ticket/MonitorTicketSearchbar.vue
new file mode 100644
index 000000000..4950ab381
--- /dev/null
+++ b/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>
diff --git a/src/pages/Monitor/MonitorTickets.vue b/src/pages/Monitor/Ticket/MonitorTickets.vue
similarity index 96%
rename from src/pages/Monitor/MonitorTickets.vue
rename to src/pages/Monitor/Ticket/MonitorTickets.vue
index a2ab65572..81e19be1e 100644
--- a/src/pages/Monitor/MonitorTickets.vue
+++ b/src/pages/Monitor/Ticket/MonitorTickets.vue
@@ -12,12 +12,12 @@ import VnTable from 'components/VnTable/VnTable.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { toDateFormat } from 'src/filters/date.js';
 import { toCurrency, dateRange } from 'src/filters';
-import { useStateStore } from 'stores/useStateStore';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import MonitorTicketSearchbar from './MonitorTicketSearchbar.vue';
+import MonitorTicketFilter from './MonitorTicketFilter.vue';
 
 const DEFAULT_AUTO_REFRESH = 2 * 60 * 1000; // 2min in ms
 const { t } = useI18n();
-const stateStore = useStateStore();
 const autoRefresh = ref(false);
 const tableRef = ref(null);
 const provinceOpts = ref([]);
@@ -325,23 +325,17 @@ const openTab = (id) =>
         auto-load
         @on-fetch="(data) => (zoneOpts = data)"
     />
-    <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>
+    <MonitorTicketSearchbar />
+    <RightMenu>
+        <template #right-panel>
+            <MonitorTicketFilter data-key="saleMonitorTickets" />
+        </template>
+    </RightMenu>
     <VnTable
         ref="tableRef"
-        data-key="SalesMonitorTickets"
+        data-key="saleMonitorTickets"
         url="SalesMonitors/salesFilter"
-        search-url="SalesMonitorTickets"
-        :limit="20"
+        search-url="saleMonitorTickets"
         :expr-builder="exprBuilder"
         :offset="50"
         :columns="columns"
@@ -357,6 +351,7 @@ const openTab = (id) =>
                 icon="refresh"
                 size="md"
                 color="primary"
+                class="q-mr-sm"
                 dense
                 flat
                 @click="$refs.tableRef.reload()"
@@ -365,6 +360,7 @@ const openTab = (id) =>
                 v-model="autoRefresh"
                 :label="$t('salesTicketsTable.autoRefresh')"
                 @update:model-value="autoRefreshHandler"
+                dense
             >
                 <QTooltip>{{ $t('refreshInfo') }}</QTooltip>
             </QCheckbox>
diff --git a/src/router/modules/monitor.js b/src/router/modules/monitor.js
index 904f2db74..9dc023c56 100644
--- a/src/router/modules/monitor.js
+++ b/src/router/modules/monitor.js
@@ -28,7 +28,8 @@ export default {
                         title: 'ticketsMonitor',
                         icon: 'grid_view',
                     },
-                    component: () => import('src/pages/Monitor/MonitorTickets.vue'),
+                    component: () =>
+                        import('src/pages/Monitor/Ticket/MonitorTickets.vue'),
                 },
                 {
                     path: 'clients-actions',

From 1bbc6c18405a4310b5b35b6c7b967d9cc8680ffa Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 23 Aug 2024 15:55:56 +0200
Subject: [PATCH 12/24] chore: refs #7353 fix warnings

---
 src/components/VnTable/VnTable.vue          | 528 ++++++++++----------
 src/components/common/VnInputDate.vue       |   2 +-
 src/components/ui/VnPaginate.vue            |   6 +-
 src/pages/Monitor/MonitorClients.vue        |  15 +-
 src/pages/Monitor/MonitorClientsActions.vue |   4 +-
 src/pages/Monitor/MonitorOrders.vue         |  33 +-
 src/pages/Monitor/locale/en.yml             |   1 +
 src/pages/Monitor/locale/es.yml             |   1 +
 8 files changed, 288 insertions(+), 302 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index c6826aa69..d529c37cd 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onBeforeMount, onMounted, computed, watch } from 'vue';
+import { ref, onBeforeMount, onMounted, computed, watch, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
@@ -109,6 +109,7 @@ const showForm = ref(false);
 const splittedColumns = ref({ columns: [] });
 const columnsVisibilitySkiped = ref();
 const createForm = ref();
+const defaultClass = useAttrs().class ?? 'q-px-md';
 
 const tableModes = [
     {
@@ -332,296 +333,277 @@ defineExpose({
         </QScrollArea>
     </QDrawer>
     <!-- class in div to fix warn-->
-    <div class="q-px-md">
-        <CrudModel
-            v-bind="$attrs"
-            :limit="20"
-            ref="CrudModelRef"
-            @on-fetch="(...args) => emit('onFetch', ...args)"
-            :search-url="searchUrl"
-            :disable-infinite-scroll="isTableMode"
-            @save-changes="reload"
-            :has-sub-toolbar="$attrs['hasSubToolbar'] ?? isEditable"
-            :auto-load="hasParams || $attrs['auto-load']"
-        >
-            <template
-                v-for="(_, slotName) in $slots"
-                #[slotName]="slotData"
-                :key="slotName"
+    <CrudModel
+        v-bind="{ ...$attrs, ...{ class: defaultClass } }"
+        :limit="20"
+        ref="CrudModelRef"
+        @on-fetch="(...args) => emit('onFetch', ...args)"
+        :search-url="searchUrl"
+        :disable-infinite-scroll="isTableMode"
+        @save-changes="reload"
+        :has-sub-toolbar="$attrs['hasSubToolbar'] ?? isEditable"
+        :auto-load="hasParams || $attrs['auto-load']"
+    >
+        <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
+            <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
+        </template>
+        <template #body="{ rows }">
+            <QTable
+                v-bind="table"
+                class="vnTable"
+                :columns="splittedColumns.columns"
+                :rows="rows"
+                v-model:selected="selected"
+                :grid="!isTableMode"
+                table-header-class="bg-header"
+                card-container-class="grid-three"
+                flat
+                :style="isTableMode && `max-height: ${tableHeight}`"
+                virtual-scroll
+                @virtual-scroll="
+                    (event) =>
+                        event.index > rows.length - 2 &&
+                        CrudModelRef.vnPaginateRef.paginate()
+                "
+                @row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
+                @update:selected="emit('update:selected', $event)"
             >
-                <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
-            </template>
-            <template #body="{ rows }">
-                <QTable
-                    v-bind="table"
-                    class="vnTable"
-                    :columns="splittedColumns.columns"
-                    :rows="rows"
-                    v-model:selected="selected"
-                    :grid="!isTableMode"
-                    table-header-class="bg-header"
-                    card-container-class="grid-three"
-                    flat
-                    :style="isTableMode && `max-height: ${tableHeight}`"
-                    virtual-scroll
-                    @virtual-scroll="
-                        (event) =>
-                            event.index > rows.length - 2 &&
-                            CrudModelRef.vnPaginateRef.paginate()
-                    "
-                    @row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
-                    @update:selected="emit('update:selected', $event)"
-                >
-                    <template #top-left v-if="!$props.withoutHeader">
-                        <slot name="top-left"></slot>
-                    </template>
-                    <template #top-right v-if="!$props.withoutHeader">
-                        <VnVisibleColumn
-                            v-if="isTableMode"
-                            v-model="splittedColumns.columns"
-                            :table-code="tableCode ?? route.name"
-                            :skip="columnsVisibilitySkiped"
-                        />
-                        <QBtnToggle
-                            v-model="mode"
-                            toggle-color="primary"
-                            class="bg-vn-section-color"
-                            dense
-                            :options="tableModes"
-                        />
-                        <QBtn
-                            v-if="$props.rightSearch"
-                            icon="filter_alt"
-                            class="bg-vn-section-color q-ml-md"
-                            dense
-                            @click="stateStore.toggleRightDrawer()"
-                        />
-                    </template>
-                    <template #header-cell="{ col }">
-                        <QTh v-if="col.visible ?? true">
-                            <div
-                                class="column self-start q-ml-xs ellipsis"
-                                :class="`text-${col?.align ?? 'left'}`"
-                                :style="$props.columnSearch ? 'height: 75px' : ''"
-                            >
-                                <div
-                                    class="row items-center no-wrap"
-                                    style="height: 30px"
-                                >
-                                    <VnTableOrder
-                                        v-model="orders[col.orderBy ?? col.name]"
-                                        :name="col.orderBy ?? col.name"
-                                        :label="col?.label"
-                                        :data-key="$attrs['data-key']"
-                                        :search-url="searchUrl"
-                                    />
-                                </div>
-                                <VnTableFilter
-                                    v-if="$props.columnSearch"
-                                    :column="col"
-                                    :show-title="true"
+                <template #top-left v-if="!$props.withoutHeader">
+                    <slot name="top-left"></slot>
+                </template>
+                <template #top-right v-if="!$props.withoutHeader">
+                    <VnVisibleColumn
+                        v-if="isTableMode"
+                        v-model="splittedColumns.columns"
+                        :table-code="tableCode ?? route.name"
+                        :skip="columnsVisibilitySkiped"
+                    />
+                    <QBtnToggle
+                        v-model="mode"
+                        toggle-color="primary"
+                        class="bg-vn-section-color"
+                        dense
+                        :options="tableModes"
+                    />
+                    <QBtn
+                        v-if="$props.rightSearch"
+                        icon="filter_alt"
+                        class="bg-vn-section-color q-ml-md"
+                        dense
+                        @click="stateStore.toggleRightDrawer()"
+                    />
+                </template>
+                <template #header-cell="{ col }">
+                    <QTh v-if="col.visible ?? true">
+                        <div
+                            class="column self-start q-ml-xs ellipsis"
+                            :class="`text-${col?.align ?? 'left'}`"
+                            :style="$props.columnSearch ? 'height: 75px' : ''"
+                        >
+                            <div class="row items-center no-wrap" style="height: 30px">
+                                <VnTableOrder
+                                    v-model="orders[col.orderBy ?? col.name]"
+                                    :name="col.orderBy ?? col.name"
+                                    :label="col?.label"
                                     :data-key="$attrs['data-key']"
-                                    v-model="params[columnName(col)]"
                                     :search-url="searchUrl"
-                                    class="full-width"
                                 />
                             </div>
-                        </QTh>
-                    </template>
-                    <template #header-cell-tableActions>
-                        <QTh auto-width class="sticky" />
-                    </template>
-                    <template #body-cell-tableStatus="{ col, row }">
-                        <QTd auto-width :class="getColAlign(col)">
-                            <VnTableChip
-                                :columns="splittedColumns.columnChips"
+                            <VnTableFilter
+                                v-if="$props.columnSearch"
+                                :column="col"
+                                :show-title="true"
+                                :data-key="$attrs['data-key']"
+                                v-model="params[columnName(col)]"
+                                :search-url="searchUrl"
+                                class="full-width"
+                            />
+                        </div>
+                    </QTh>
+                </template>
+                <template #header-cell-tableActions>
+                    <QTh auto-width class="sticky" />
+                </template>
+                <template #body-cell-tableStatus="{ col, row }">
+                    <QTd auto-width :class="getColAlign(col)">
+                        <VnTableChip :columns="splittedColumns.columnChips" :row="row">
+                            <template #afterChip>
+                                <slot name="afterChip" :row="row"></slot>
+                            </template>
+                        </VnTableChip>
+                    </QTd>
+                </template>
+                <template #body-cell="{ col, row, rowIndex }">
+                    <!-- Columns -->
+                    <QTd
+                        auto-width
+                        class="no-margin q-px-xs"
+                        :class="[getColAlign(col), col.columnClass]"
+                        v-if="col.visible ?? true"
+                        @click.ctrl="
+                            ($event) =>
+                                rowCtrlClickFunction && rowCtrlClickFunction($event, row)
+                        "
+                    >
+                        <slot
+                            :name="`column-${col.name}`"
+                            :col="col"
+                            :row="row"
+                            :row-index="rowIndex"
+                        >
+                            <VnTableColumn
+                                :column="col"
                                 :row="row"
-                            >
-                                <template #afterChip>
-                                    <slot name="afterChip" :row="row"></slot>
-                                </template>
-                            </VnTableChip>
-                        </QTd>
-                    </template>
-                    <template #body-cell="{ col, row, rowIndex }">
-                        <!-- Columns -->
-                        <QTd
-                            auto-width
-                            class="no-margin q-px-xs"
-                            :class="[getColAlign(col), col.columnClass]"
-                            v-if="col.visible ?? true"
-                            @click.ctrl="
-                                ($event) =>
-                                    rowCtrlClickFunction &&
-                                    rowCtrlClickFunction($event, row)
+                                :is-editable="col.isEditable ?? isEditable"
+                                v-model="row[col.name]"
+                                component-prop="columnField"
+                            />
+                        </slot>
+                    </QTd>
+                </template>
+                <template #body-cell-tableActions="{ col, row }">
+                    <QTd
+                        auto-width
+                        :class="getColAlign(col)"
+                        class="sticky no-padding"
+                        @click="stopEventPropagation($event)"
+                    >
+                        <QBtn
+                            v-for="(btn, index) of col.actions"
+                            :key="index"
+                            :title="btn.title"
+                            :icon="btn.icon"
+                            class="q-px-sm"
+                            flat
+                            :class="
+                                btn.isPrimary ? 'text-primary-light' : 'color-vn-text '
+                            "
+                            :style="`visibility: ${
+                                (btn.show && btn.show(row)) ?? true ? 'visible' : 'hidden'
+                            }`"
+                            @click="btn.action(row)"
+                        />
+                    </QTd>
+                </template>
+                <template #item="{ row, colsMap }">
+                    <component
+                        :is="$props.redirect ? 'router-link' : 'span'"
+                        :to="`/${$props.redirect}/` + row.id"
+                    >
+                        <QCard
+                            bordered
+                            flat
+                            class="row no-wrap justify-between cursor-pointer"
+                            @click="
+                                (_, row) => {
+                                    $props.rowClick && $props.rowClick(row);
+                                }
                             "
                         >
-                            <slot
-                                :name="`column-${col.name}`"
-                                :col="col"
-                                :row="row"
-                                :row-index="rowIndex"
-                            >
-                                <VnTableColumn
-                                    :column="col"
-                                    :row="row"
-                                    :is-editable="col.isEditable ?? isEditable"
-                                    v-model="row[col.name]"
-                                    component-prop="columnField"
-                                />
-                            </slot>
-                        </QTd>
-                    </template>
-                    <template #body-cell-tableActions="{ col, row }">
-                        <QTd
-                            auto-width
-                            :class="getColAlign(col)"
-                            class="sticky no-padding"
-                            @click="stopEventPropagation($event)"
-                        >
-                            <QBtn
-                                v-for="(btn, index) of col.actions"
-                                :key="index"
-                                :title="btn.title"
-                                :icon="btn.icon"
-                                class="q-px-sm"
-                                flat
-                                :class="
-                                    btn.isPrimary
-                                        ? 'text-primary-light'
-                                        : 'color-vn-text '
-                                "
-                                :style="`visibility: ${
-                                    (btn.show && btn.show(row)) ?? true
-                                        ? 'visible'
-                                        : 'hidden'
-                                }`"
-                                @click="btn.action(row)"
-                            />
-                        </QTd>
-                    </template>
-                    <template #item="{ row, colsMap }">
-                        <component
-                            :is="$props.redirect ? 'router-link' : 'span'"
-                            :to="`/${$props.redirect}/` + row.id"
-                        >
-                            <QCard
-                                bordered
-                                flat
-                                class="row no-wrap justify-between cursor-pointer"
-                                @click="
-                                    (_, row) => {
-                                        $props.rowClick && $props.rowClick(row);
-                                    }
-                                "
+                            <QCardSection
+                                vertical
+                                class="no-margin no-padding"
+                                :class="colsMap.tableActions ? 'w-80' : 'fit'"
                             >
+                                <!-- Chips -->
                                 <QCardSection
-                                    vertical
-                                    class="no-margin no-padding"
-                                    :class="colsMap.tableActions ? 'w-80' : 'fit'"
+                                    v-if="splittedColumns.chips.length"
+                                    class="no-margin q-px-xs q-py-none"
                                 >
-                                    <!-- Chips -->
-                                    <QCardSection
-                                        v-if="splittedColumns.chips.length"
-                                        class="no-margin q-px-xs q-py-none"
+                                    <VnTableChip
+                                        :columns="splittedColumns.chips"
+                                        :row="row"
                                     >
-                                        <VnTableChip
-                                            :columns="splittedColumns.chips"
-                                            :row="row"
-                                        >
-                                            <template #afterChip>
-                                                <slot name="afterChip" :row="row"></slot>
-                                            </template>
-                                        </VnTableChip>
-                                    </QCardSection>
-                                    <!-- Title -->
-                                    <QCardSection
-                                        v-if="splittedColumns.title"
-                                        class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis"
+                                        <template #afterChip>
+                                            <slot name="afterChip" :row="row"></slot>
+                                        </template>
+                                    </VnTableChip>
+                                </QCardSection>
+                                <!-- Title -->
+                                <QCardSection
+                                    v-if="splittedColumns.title"
+                                    class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis"
+                                >
+                                    <span
+                                        :title="row[splittedColumns.title.name]"
+                                        @click="stopEventPropagation($event)"
+                                        class="cursor-text"
                                     >
-                                        <span
-                                            :title="row[splittedColumns.title.name]"
-                                            @click="stopEventPropagation($event)"
-                                            class="cursor-text"
-                                        >
-                                            {{ row[splittedColumns.title.name] }}
-                                        </span>
-                                    </QCardSection>
-                                    <!-- Fields -->
-                                    <QCardSection
-                                        class="q-pl-sm q-pr-lg q-py-xs"
-                                        :class="$props.cardClass"
+                                        {{ row[splittedColumns.title.name] }}
+                                    </span>
+                                </QCardSection>
+                                <!-- Fields -->
+                                <QCardSection
+                                    class="q-pl-sm q-pr-lg q-py-xs"
+                                    :class="$props.cardClass"
+                                >
+                                    <div
+                                        v-for="(
+                                            col, index
+                                        ) of splittedColumns.cardVisible"
+                                        :key="col.name"
+                                        class="fields"
                                     >
-                                        <div
-                                            v-for="(
-                                                col, index
-                                            ) of splittedColumns.cardVisible"
-                                            :key="col.name"
-                                            class="fields"
+                                        <VnLv
+                                            :label="
+                                                !col.component && col.label
+                                                    ? `${col.label}:`
+                                                    : ''
+                                            "
                                         >
-                                            <VnLv
-                                                :label="
-                                                    !col.component && col.label
-                                                        ? `${col.label}:`
-                                                        : ''
-                                                "
-                                            >
-                                                <template #value>
-                                                    <span
-                                                        @click="
-                                                            stopEventPropagation($event)
-                                                        "
+                                            <template #value>
+                                                <span
+                                                    @click="stopEventPropagation($event)"
+                                                >
+                                                    <slot
+                                                        :name="`column-${col.name}`"
+                                                        :col="col"
+                                                        :row="row"
+                                                        :row-index="index"
                                                     >
-                                                        <slot
-                                                            :name="`column-${col.name}`"
-                                                            :col="col"
+                                                        <VnTableColumn
+                                                            :column="col"
                                                             :row="row"
-                                                            :row-index="index"
-                                                        >
-                                                            <VnTableColumn
-                                                                :column="col"
-                                                                :row="row"
-                                                                :is-editable="false"
-                                                                v-model="row[col.name]"
-                                                                component-prop="columnField"
-                                                                :show-label="true"
-                                                            />
-                                                        </slot>
-                                                    </span>
-                                                </template>
-                                            </VnLv>
-                                        </div>
-                                    </QCardSection>
+                                                            :is-editable="false"
+                                                            v-model="row[col.name]"
+                                                            component-prop="columnField"
+                                                            :show-label="true"
+                                                        />
+                                                    </slot>
+                                                </span>
+                                            </template>
+                                        </VnLv>
+                                    </div>
                                 </QCardSection>
-                                <!-- Actions -->
-                                <QCardSection
-                                    v-if="colsMap.tableActions"
-                                    class="column flex-center w-10 no-margin q-pa-xs q-gutter-y-xs"
-                                    @click="stopEventPropagation($event)"
-                                >
-                                    <QBtn
-                                        v-for="(btn, index) of splittedColumns.actions
-                                            .actions"
-                                        :key="index"
-                                        :title="btn.title"
-                                        :icon="btn.icon"
-                                        class="q-pa-xs"
-                                        flat
-                                        :class="
-                                            btn.isPrimary
-                                                ? 'text-primary-light'
-                                                : 'color-vn-text '
-                                        "
-                                        @click="btn.action(row)"
-                                    />
-                                </QCardSection>
-                            </QCard>
-                        </component>
-                    </template>
-                </QTable>
-            </template>
-        </CrudModel>
-    </div>
+                            </QCardSection>
+                            <!-- Actions -->
+                            <QCardSection
+                                v-if="colsMap.tableActions"
+                                class="column flex-center w-10 no-margin q-pa-xs q-gutter-y-xs"
+                                @click="stopEventPropagation($event)"
+                            >
+                                <QBtn
+                                    v-for="(btn, index) of splittedColumns.actions
+                                        .actions"
+                                    :key="index"
+                                    :title="btn.title"
+                                    :icon="btn.icon"
+                                    class="q-pa-xs"
+                                    flat
+                                    :class="
+                                        btn.isPrimary
+                                            ? 'text-primary-light'
+                                            : 'color-vn-text '
+                                    "
+                                    @click="btn.action(row)"
+                                />
+                            </QCardSection>
+                        </QCard>
+                    </component>
+                </template>
+            </QTable>
+        </template>
+    </CrudModel>
     <QPageSticky v-if="create" :offset="[20, 20]" style="z-index: 2">
         <QBtn @click="showForm = !showForm" color="primary" fab icon="add" />
         <QTooltip>
diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index 6e57a8a53..f94130da4 100644
--- a/src/components/common/VnInputDate.vue
+++ b/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,
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index 0df719c66..22edfe869 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/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"
     >
diff --git a/src/pages/Monitor/MonitorClients.vue b/src/pages/Monitor/MonitorClients.vue
index 445d9f1e3..c5022d053 100644
--- a/src/pages/Monitor/MonitorClients.vue
+++ b/src/pages/Monitor/MonitorClients.vue
@@ -121,30 +121,25 @@ const columns = computed(() => [
         default-mode="table"
         :disable-option="{ card: true }"
         dense
+        class="q-px-none"
     >
         <template #top-left>
             <VnRow>
-                <VnInputDate v-model="from" label="From" dense style="flex: 0.3" />
-                <VnInputDate v-model="to" label="To" dense style="flex: 0.3" />
+                <VnInputDate v-model="from" label="From" dense style="flex: 0.4" />
+                <VnInputDate v-model="to" label="To" dense style="flex: 0.4" />
             </VnRow>
         </template>
         <template #column-salesPersonFk="{ row }">
             <QTd>
-                <span class="link">{{ row.salesPerson }}</span>
+                <span class="link" :title="row.salesPerson" v-text="row.salesPerson" />
                 <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
             </QTd>
         </template>
         <template #column-clientFk="{ row }">
             <QTd>
-                <span class="link">{{ row.clientName }}</span>
+                <span class="link" :title="row.clientName" v-text="row.clientName" />
                 <CustomerDescriptorProxy :id="row.clientFk" />
             </QTd>
         </template>
     </VnTable>
 </template>
-
-<style lang="scss" scoped>
-td {
-    max-width: 120px;
-}
-</style>
diff --git a/src/pages/Monitor/MonitorClientsActions.vue b/src/pages/Monitor/MonitorClientsActions.vue
index d6a72fbd9..821773bbf 100644
--- a/src/pages/Monitor/MonitorClientsActions.vue
+++ b/src/pages/Monitor/MonitorClientsActions.vue
@@ -8,14 +8,14 @@ import VnRow from 'src/components/ui/VnRow.vue';
         class="q-pa-md"
         :style="{ 'flex-direction': $q.screen.lt.lg ? 'column' : 'row', gap: '0px' }"
     >
-        <div style="flex: 0.25">
+        <div style="flex: 0.3">
             <span
                 class="q-ml-md text-body1"
                 v-text="$t('salesMonitor.clientsOnWebsite')"
             />
             <SalesClientTable />
         </div>
-        <div style="flex: 0.75">
+        <div style="flex: 0.7">
             <span
                 class="q-ml-md text-body1"
                 v-text="$t('salesMonitor.recentOrderActions')"
diff --git a/src/pages/Monitor/MonitorOrders.vue b/src/pages/Monitor/MonitorOrders.vue
index 9e8937c33..99838a1c6 100644
--- a/src/pages/Monitor/MonitorOrders.vue
+++ b/src/pages/Monitor/MonitorOrders.vue
@@ -56,6 +56,12 @@ const columns = computed(() => [
             },
         },
     },
+    {
+        label: t('salesOrdersTable.agency'),
+        name: 'agencyName',
+        align: 'left',
+        columnFilter: false,
+    },
     {
         label: t('salesOrdersTable.salesPerson'),
         name: 'salesPersonFk',
@@ -72,6 +78,14 @@ const columns = computed(() => [
             },
         },
     },
+    {
+        label: t('salesOrdersTable.import'),
+        name: 'import',
+        field: 'import',
+        align: 'left',
+        columnFilter: false,
+        format: (row) => toCurrency(row.import),
+    },
 ]);
 
 const getBadgeColor = (date) => {
@@ -167,25 +181,14 @@ const openTab = (id) =>
 
         <template #column-clientFk="{ row }">
             <QTd>
-                <div class="q-mb-sm">
-                    <span class="link" v-text="row.clientName" />
-                    <CustomerDescriptorProxy :id="row.clientFk" />
-                </div>
-                <span
-                    :title="$q.screen.lt.xl ? row.agencyName : ''"
-                    v-text="row.agencyName"
-                />
+                <span class="link" v-text="row.clientName" :title="row.clientName" />
+                <CustomerDescriptorProxy :id="row.clientFk" />
             </QTd>
         </template>
 
         <template #column-salesPersonFk="{ row }">
-            <QTd>
-                <div class="q-mb-md">
-                    <span class="link" v-text="row.salesPerson" />
-                    <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
-                </div>
-                <span v-text="toCurrency(row.import)" />
-            </QTd>
+            <span class="link" v-text="row.salesPerson" />
+            <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
         </template>
     </VnTable>
 </template>
diff --git a/src/pages/Monitor/locale/en.yml b/src/pages/Monitor/locale/en.yml
index 1f78395ec..7ac53bc80 100644
--- a/src/pages/Monitor/locale/en.yml
+++ b/src/pages/Monitor/locale/en.yml
@@ -17,6 +17,7 @@ salesOrdersTable:
     salesPerson: Salesperson
     deleteConfirmTitle: Delete selected elements
     deleteConfirmMessage: All the selected elements will be deleted. Are you sure you want to continue?
+    agency: Agency
 salesTicketsTable:
     autoRefresh: Auto-refresh
     problems: Problems
diff --git a/src/pages/Monitor/locale/es.yml b/src/pages/Monitor/locale/es.yml
index 9af27d340..925c1d911 100644
--- a/src/pages/Monitor/locale/es.yml
+++ b/src/pages/Monitor/locale/es.yml
@@ -17,6 +17,7 @@ salesOrdersTable:
     salesPerson: Comercial
     deleteConfirmTitle: Eliminar los elementos seleccionados
     deleteConfirmMessage: Todos los elementos seleccionados serán eliminados. ¿Seguro que quieres continuar?
+    agency: Agencia
 salesTicketsTable:
     autoRefresh: Auto-refresco
     problems: Problemas

From 4491d83a7a727f0bb5ecdbbacc8b844f0b2990a1 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 27 Aug 2024 09:59:51 +0200
Subject: [PATCH 13/24] feat: refs #7353 add locale

---
 src/pages/Monitor/locale/en.yml | 1 +
 src/pages/Monitor/locale/es.yml | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/pages/Monitor/locale/en.yml b/src/pages/Monitor/locale/en.yml
index 7ac53bc80..4cdd245aa 100644
--- a/src/pages/Monitor/locale/en.yml
+++ b/src/pages/Monitor/locale/en.yml
@@ -18,6 +18,7 @@ salesOrdersTable:
     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
diff --git a/src/pages/Monitor/locale/es.yml b/src/pages/Monitor/locale/es.yml
index 925c1d911..8087bb444 100644
--- a/src/pages/Monitor/locale/es.yml
+++ b/src/pages/Monitor/locale/es.yml
@@ -18,6 +18,7 @@ salesOrdersTable:
     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

From 1312dbe2af2b3d0c97098c75719b34c98d6a5638 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 28 Aug 2024 12:13:58 +0200
Subject: [PATCH 14/24] fix: refs #7353 iron out filter

---
 src/components/ui/VnFilterPanel.vue           |  6 ++---
 .../Monitor/Ticket/MonitorTicketFilter.vue    | 24 ++++++++++++++-----
 src/pages/Monitor/Ticket/MonitorTickets.vue   | 13 +++++++++-
 3 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index caed3b401..a0dc6cc82 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -24,7 +24,7 @@ const $props = defineProps({
         type: Boolean,
         default: true,
     },
-    unRemovableParams: {
+    unremovableParams: {
         type: Array,
         required: false,
         default: () => [],
@@ -148,7 +148,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
@@ -268,7 +268,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">
diff --git a/src/pages/Monitor/Ticket/MonitorTicketFilter.vue b/src/pages/Monitor/Ticket/MonitorTicketFilter.vue
index ff9ea5e63..f5917356d 100644
--- a/src/pages/Monitor/Ticket/MonitorTicketFilter.vue
+++ b/src/pages/Monitor/Ticket/MonitorTicketFilter.vue
@@ -15,13 +15,16 @@ const warehouses = ref();
 const groupedStates = ref();
 
 const handleScopeDays = (params, days, callback) => {
+    const from = Date.vnNew();
+    from.setHours(0, 0, 0, 0);
+    const to = Date.vnNew();
+    to.setHours(23, 59, 59, 999);
+
     if (!days) {
-        Object.assign(params, { from: undefined, to: undefined, scopeDays: undefined });
+        Object.assign(params, { from, to, scopeDays: 1 });
     } else {
-        params.from = Date.vnNew();
-        const to = Date.vnNew();
+        params.from = from;
         to.setDate(to.getDate() + days);
-        to.setHours(23, 59, 59, 999);
         params.to = to;
     }
     if (callback) callback();
@@ -29,12 +32,20 @@ const handleScopeDays = (params, days, callback) => {
 </script>
 <template>
     <FetchData url="Warehouses" auto-load @on-fetch="(data) => (warehouses = data)" />
-    <FetchData url="AlertLevels" auto-load @on-fetch="(data) => (groupedStates = 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">
@@ -73,7 +84,6 @@ const handleScopeDays = (params, days, callback) => {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <!-- Si se borran desde los tags no funciona-->
                     <VnInputNumber
                         :label="t('params.scopeDays')"
                         v-model="params.scopeDays"
@@ -229,6 +239,7 @@ en:
         pending: Pending
         from: From
         to: To
+        alertLevel: Grouped State
     FREE: Free
     DELIVERED: Delivered
     ON_PREPARATION: On preparation
@@ -253,6 +264,7 @@ es:
         pending: Pendiente
         from: Desde
         To: Hasta
+        alertLevel: Estado agrupado
     FREE: Libre
     DELIVERED: Servido
     ON_PREPARATION: En preparación
diff --git a/src/pages/Monitor/Ticket/MonitorTickets.vue b/src/pages/Monitor/Ticket/MonitorTickets.vue
index 81e19be1e..828527162 100644
--- a/src/pages/Monitor/Ticket/MonitorTickets.vue
+++ b/src/pages/Monitor/Ticket/MonitorTickets.vue
@@ -25,7 +25,17 @@ const stateOpts = ref([]);
 const zoneOpts = ref([]);
 const visibleColumns = ref([]);
 const { viewSummary } = useSummaryDialog();
-
+const from = computed(() => {
+    const date = Date.vnNew();
+    date.setHours(0, 0, 0, 0);
+    return date;
+});
+const to = computed(() => {
+    const date = Date.vnNew();
+    date.setDate(date.getDate() + 1);
+    date.setHours(23, 59, 59, 999);
+    return date;
+});
 function exprBuilder(param, value) {
     switch (param) {
         case 'stateFk':
@@ -345,6 +355,7 @@ const openTab = (id) =>
         auto-load
         :row-click="({ id }) => openTab(id)"
         :disable-option="{ card: true }"
+        :user-params="{ from, to, scopeDays: 1 }"
     >
         <template #top-left>
             <QBtn

From 495cd2cc2fe070232d7a6f652ec333f0cde7fa1b Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 28 Aug 2024 12:46:34 +0200
Subject: [PATCH 15/24] fix: refs #7353 iron out ticket table

---
 src/pages/Monitor/MonitorClients.vue          |  7 ++++---
 .../Monitor/Ticket/MonitorTicketFilter.vue    |  7 ++-----
 src/pages/Monitor/Ticket/MonitorTickets.vue   | 21 ++++++-------------
 3 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/src/pages/Monitor/MonitorClients.vue b/src/pages/Monitor/MonitorClients.vue
index c5022d053..e73f52b24 100644
--- a/src/pages/Monitor/MonitorClients.vue
+++ b/src/pages/Monitor/MonitorClients.vue
@@ -7,11 +7,12 @@ 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 from = ref(Date.vnNew());
-const to = ref(Date.vnNew());
+const dates = dateRange(Date.vnNew());
+const from = ref(dates[0]);
+const to = ref(dates[1]);
 
 const filter = computed(() => {
     const obj = {};
diff --git a/src/pages/Monitor/Ticket/MonitorTicketFilter.vue b/src/pages/Monitor/Ticket/MonitorTicketFilter.vue
index f5917356d..bade21f59 100644
--- a/src/pages/Monitor/Ticket/MonitorTicketFilter.vue
+++ b/src/pages/Monitor/Ticket/MonitorTicketFilter.vue
@@ -8,6 +8,7 @@ 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();
@@ -15,11 +16,7 @@ const warehouses = ref();
 const groupedStates = ref();
 
 const handleScopeDays = (params, days, callback) => {
-    const from = Date.vnNew();
-    from.setHours(0, 0, 0, 0);
-    const to = Date.vnNew();
-    to.setHours(23, 59, 59, 999);
-
+    const [from, to] = dateRange(Date.vnNew());
     if (!days) {
         Object.assign(params, { from, to, scopeDays: 1 });
     } else {
diff --git a/src/pages/Monitor/Ticket/MonitorTickets.vue b/src/pages/Monitor/Ticket/MonitorTickets.vue
index 828527162..82788c997 100644
--- a/src/pages/Monitor/Ticket/MonitorTickets.vue
+++ b/src/pages/Monitor/Ticket/MonitorTickets.vue
@@ -25,17 +25,8 @@ const stateOpts = ref([]);
 const zoneOpts = ref([]);
 const visibleColumns = ref([]);
 const { viewSummary } = useSummaryDialog();
-const from = computed(() => {
-    const date = Date.vnNew();
-    date.setHours(0, 0, 0, 0);
-    return date;
-});
-const to = computed(() => {
-    const date = Date.vnNew();
-    date.setDate(date.getDate() + 1);
-    date.setHours(23, 59, 59, 999);
-    return date;
-});
+const [from, to] = dateRange(Date.vnNew());
+
 function exprBuilder(param, value) {
     switch (param) {
         case 'stateFk':
@@ -377,7 +368,7 @@ const openTab = (id) =>
             </QCheckbox>
         </template>
         <template #column-totalProblems="{ row }">
-            <QTd class="no-padding" style="max-width: 50px">
+            <QTd class="no-padding" style="max-width: 60px">
                 <QIcon
                     v-if="row.isTaxDataChecked === 0"
                     name="vn:no036"
@@ -442,13 +433,13 @@ const openTab = (id) =>
             </QTd>
         </template>
         <template #column-clientFk="{ row }">
-            <QTd class="no-padding" @click.stop.prevent>
+            <QTd class="no-padding" @click.stop.prevent :title="row.nickname">
                 <span class="link">{{ row.nickname }}</span>
                 <CustomerDescriptorProxy :id="row.clientFk" />
             </QTd>
         </template>
         <template #column-salesPersonFk="{ row }">
-            <QTd class="no-padding" @click.stop.prevent>
+            <QTd class="no-padding" @click.stop.prevent :title="row.userName">
                 <span class="link">{{ row.userName }}</span>
                 <WorkerDescriptorProxy :id="row.salesPersonFk" />
             </QTd>
@@ -489,7 +480,7 @@ const openTab = (id) =>
             </QTd>
         </template>
         <template #column-zoneFk="{ row }">
-            <QTd class="no-padding" @click.stop.prevent>
+            <QTd class="no-padding" @click.stop.prevent :title="row.zoneName">
                 <span class="link">{{ row.zoneName }}</span>
                 <ZoneDescriptorProxy :id="row.zoneFk" />
             </QTd>

From 966667bab764e52b9b75b098a0958623ba30926e Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 29 Aug 2024 11:40:42 +0200
Subject: [PATCH 16/24] refactor: refs #7353 tickets correction

---
 src/i18n/locale/en.yml                      |  1 +
 src/i18n/locale/es.yml                      |  1 +
 src/pages/Monitor/Ticket/MonitorTickets.vue | 13 ++++++++++---
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index d0a33aa5b..d4437236e 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -94,6 +94,7 @@ globals:
     from: From
     to: To
     notes: Notes
+    refresh: Refresh
     pageTitles:
         logIn: Login
         summary: Summary
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index e8f85e1c7..0ace95ff1 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -94,6 +94,7 @@ globals:
     from: Desde
     to: Hasta
     notes: Notas
+    refresh: Actualizar
     pageTitles:
         logIn: Inicio de sesión
         summary: Resumen
diff --git a/src/pages/Monitor/Ticket/MonitorTickets.vue b/src/pages/Monitor/Ticket/MonitorTickets.vue
index 82788c997..4b53861c2 100644
--- a/src/pages/Monitor/Ticket/MonitorTickets.vue
+++ b/src/pages/Monitor/Ticket/MonitorTickets.vue
@@ -11,7 +11,7 @@ import TicketSummary from 'src/pages/Ticket/Card/TicketSummary.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { toDateFormat } from 'src/filters/date.js';
-import { toCurrency, dateRange } from 'src/filters';
+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';
@@ -357,7 +357,9 @@ const openTab = (id) =>
                 dense
                 flat
                 @click="$refs.tableRef.reload()"
-            />
+            >
+                <QTooltip>{{ $t('globals.refresh') }}</QTooltip>
+            </QBtn>
             <QCheckbox
                 v-model="autoRefresh"
                 :label="$t('salesTicketsTable.autoRefresh')"
@@ -440,7 +442,7 @@ const openTab = (id) =>
         </template>
         <template #column-salesPersonFk="{ row }">
             <QTd class="no-padding" @click.stop.prevent :title="row.userName">
-                <span class="link">{{ row.userName }}</span>
+                <span class="link" v-text="dashIfEmpty(row.userName)" />
                 <WorkerDescriptorProxy :id="row.salesPersonFk" />
             </QTd>
         </template>
@@ -455,6 +457,11 @@ const openTab = (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">

From ef1ba2ea4f1e9c32ee86eedbb6c8ed84eb68b7c8 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 29 Aug 2024 12:01:23 +0200
Subject: [PATCH 17/24] feat: refs #7353 imporve toDateFormat

---
 src/filters/date.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/filters/date.js b/src/filters/date.js
index f9fd1e0b2..058c90060 100644
--- a/src/filters/date.js
+++ b/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);
 }
 
 /**

From 7a34309ec684c183b75038dbf810398d021e9bcd Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 29 Aug 2024 12:01:41 +0200
Subject: [PATCH 18/24] refactor: refs #7353 clients correction wip

---
 src/pages/Monitor/MonitorClients.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/pages/Monitor/MonitorClients.vue b/src/pages/Monitor/MonitorClients.vue
index e73f52b24..8d71a46b2 100644
--- a/src/pages/Monitor/MonitorClients.vue
+++ b/src/pages/Monitor/MonitorClients.vue
@@ -56,7 +56,7 @@ const columns = computed(() => [
         field: 'dated',
         align: 'left',
         columnFilter: false,
-        format: (row) => toDateFormat(row.dated),
+        format: (row) => toDateFormat(row.dated, 'es-ES', { year: '2-digit' }),
     },
     {
         label: t('salesClientsTable.hour'),
@@ -126,8 +126,8 @@ const columns = computed(() => [
     >
         <template #top-left>
             <VnRow>
-                <VnInputDate v-model="from" label="From" dense style="flex: 0.4" />
-                <VnInputDate v-model="to" label="To" dense style="flex: 0.4" />
+                <VnInputDate v-model="from" :label="$t('globals.from')" dense />
+                <VnInputDate v-model="to" :label="$t('globals.to')" dense />
             </VnRow>
         </template>
         <template #column-salesPersonFk="{ row }">
@@ -144,3 +144,8 @@ const columns = computed(() => [
         </template>
     </VnTable>
 </template>
+<style lang="scss" scoped>
+.full-width .vn-row > * {
+    flex: 0.4;
+}
+</style>

From 76fa89c8bdda26c1050f541b97aba7827d6f1629 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 29 Aug 2024 12:32:00 +0200
Subject: [PATCH 19/24] refactor: refs #7353 clients correction

---
 src/pages/Monitor/MonitorClients.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Monitor/MonitorClients.vue b/src/pages/Monitor/MonitorClients.vue
index 8d71a46b2..4a7e2f4e1 100644
--- a/src/pages/Monitor/MonitorClients.vue
+++ b/src/pages/Monitor/MonitorClients.vue
@@ -131,13 +131,13 @@ const columns = computed(() => [
             </VnRow>
         </template>
         <template #column-salesPersonFk="{ row }">
-            <QTd>
+            <QTd class="no-padding">
                 <span class="link" :title="row.salesPerson" v-text="row.salesPerson" />
                 <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
             </QTd>
         </template>
         <template #column-clientFk="{ row }">
-            <QTd>
+            <QTd class="no-padding">
                 <span class="link" :title="row.clientName" v-text="row.clientName" />
                 <CustomerDescriptorProxy :id="row.clientFk" />
             </QTd>

From 58e47b3f24da9f5d000fa0b6d20285ba0707ae73 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 29 Aug 2024 13:04:54 +0200
Subject: [PATCH 20/24] refactor: refs #7353 order correction

---
 src/pages/Monitor/MonitorOrders.vue         | 16 ++++++++++------
 src/pages/Monitor/Ticket/MonitorTickets.vue |  4 ++--
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/pages/Monitor/MonitorOrders.vue b/src/pages/Monitor/MonitorOrders.vue
index 99838a1c6..eb455a239 100644
--- a/src/pages/Monitor/MonitorOrders.vue
+++ b/src/pages/Monitor/MonitorOrders.vue
@@ -147,7 +147,9 @@ const openTab = (id) =>
                 dense
                 flat
                 @click="$refs.table.reload()"
-            />
+            >
+                <QTooltip>{{ $t('globals.refresh') }}</QTooltip>
+            </QBtn>
             <QBtn
                 v-if="selectedRows.length"
                 icon="delete"
@@ -157,8 +159,8 @@ const openTab = (id) =>
                 color="primary"
                 @click="
                     openConfirmationModal(
-                        t('salesOrdersTable.deleteConfirmTitle'),
-                        t('salesOrdersTable.deleteConfirmMessage'),
+                        $t('salesOrdersTable.deleteConfirmTitle'),
+                        $t('salesOrdersTable.deleteConfirmMessage'),
                         removeOrders
                     )
                 "
@@ -180,15 +182,17 @@ const openTab = (id) =>
         </template>
 
         <template #column-clientFk="{ row }">
-            <QTd>
+            <QTd @click.stop>
                 <span class="link" v-text="row.clientName" :title="row.clientName" />
                 <CustomerDescriptorProxy :id="row.clientFk" />
             </QTd>
         </template>
 
         <template #column-salesPersonFk="{ row }">
-            <span class="link" v-text="row.salesPerson" />
-            <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
+            <QTd @click.stop>
+                <span class="link" v-text="row.salesPerson" />
+                <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
+            </QTd>
         </template>
     </VnTable>
 </template>
diff --git a/src/pages/Monitor/Ticket/MonitorTickets.vue b/src/pages/Monitor/Ticket/MonitorTickets.vue
index 4b53861c2..e3f4b1bbd 100644
--- a/src/pages/Monitor/Ticket/MonitorTickets.vue
+++ b/src/pages/Monitor/Ticket/MonitorTickets.vue
@@ -435,13 +435,13 @@ const openTab = (id) =>
             </QTd>
         </template>
         <template #column-clientFk="{ row }">
-            <QTd class="no-padding" @click.stop.prevent :title="row.nickname">
+            <QTd class="no-padding" @click.stop :title="row.nickname">
                 <span class="link">{{ row.nickname }}</span>
                 <CustomerDescriptorProxy :id="row.clientFk" />
             </QTd>
         </template>
         <template #column-salesPersonFk="{ row }">
-            <QTd class="no-padding" @click.stop.prevent :title="row.userName">
+            <QTd class="no-padding" @click.stop :title="row.userName">
                 <span class="link" v-text="dashIfEmpty(row.userName)" />
                 <WorkerDescriptorProxy :id="row.salesPersonFk" />
             </QTd>

From 6062c2d845acbcfd7a1da106ee7257b7d1eaed50 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 29 Aug 2024 16:51:55 +0200
Subject: [PATCH 21/24] feat: refs #7353 salesPerson nickname & id

---
 src/pages/Monitor/Ticket/MonitorTicketFilter.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/pages/Monitor/Ticket/MonitorTicketFilter.vue b/src/pages/Monitor/Ticket/MonitorTicketFilter.vue
index bade21f59..9aea3d4b3 100644
--- a/src/pages/Monitor/Ticket/MonitorTicketFilter.vue
+++ b/src/pages/Monitor/Ticket/MonitorTicketFilter.vue
@@ -111,8 +111,19 @@ const handleScopeDays = (params, days, callback) => {
                         :params="{ departmentCodes: ['VT'] }"
                         is-outlined
                         option-value="code"
-                        option-label="nickname"
-                    />
+                        option-label="name"
+                    >
+                        <template #option="{ opt, itemProps }">
+                            <QItem v-bind="itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ opt.name }}</QItemLabel>
+                                    <QItemLabel class="text-grey text-caption">
+                                        {{ `${opt.nickname}, ${opt.code}` }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelect>
                 </QItemSection>
             </QItem>
             <QItem>

From 90b2cf09b98695818d23311f76ed4dfe109a99dd Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 29 Aug 2024 16:54:09 +0200
Subject: [PATCH 22/24] feat: refs #7353 add right icons

---
 src/router/modules/monitor.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/router/modules/monitor.js b/src/router/modules/monitor.js
index 9dc023c56..3353da3cf 100644
--- a/src/router/modules/monitor.js
+++ b/src/router/modules/monitor.js
@@ -26,7 +26,7 @@ export default {
                     name: 'MonitorTickets',
                     meta: {
                         title: 'ticketsMonitor',
-                        icon: 'grid_view',
+                        icon: 'vn:ticket',
                     },
                     component: () =>
                         import('src/pages/Monitor/Ticket/MonitorTickets.vue'),
@@ -36,7 +36,7 @@ export default {
                     name: 'MonitorClientsActions',
                     meta: {
                         title: 'clientsActionsMonitor',
-                        icon: 'grid_view',
+                        icon: 'vn:client',
                     },
                     component: () =>
                         import('src/pages/Monitor/MonitorClientsActions.vue'),

From f9a509ac6759079883f9da700a6d2f1cd4651305 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 30 Aug 2024 11:40:55 +0200
Subject: [PATCH 23/24] feat: refs #7353 add no one opt

---
 src/components/common/VnSelect.vue            | 19 +++++++++++++++++--
 src/components/ui/VnFilterPanel.vue           |  2 +-
 src/i18n/locale/en.yml                        |  1 +
 src/i18n/locale/es.yml                        |  1 +
 .../Monitor/Ticket/MonitorTicketFilter.vue    |  7 ++++++-
 src/pages/Monitor/Ticket/MonitorTickets.vue   |  2 +-
 6 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index b6dc226cc..1e3a32f48 100644
--- a/src/components/common/VnSelect.vue
+++ b/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) => {
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index a0dc6cc82..d0a31223d 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -268,7 +268,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">
diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index d4437236e..05e5fbf68 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -272,6 +272,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
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 0ace95ff1..bd36287a9 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -274,6 +274,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
diff --git a/src/pages/Monitor/Ticket/MonitorTicketFilter.vue b/src/pages/Monitor/Ticket/MonitorTicketFilter.vue
index 9aea3d4b3..167a10465 100644
--- a/src/pages/Monitor/Ticket/MonitorTicketFilter.vue
+++ b/src/pages/Monitor/Ticket/MonitorTicketFilter.vue
@@ -112,12 +112,16 @@ const handleScopeDays = (params, days, callback) => {
                         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 class="text-grey text-caption">
+                                    <QItemLabel
+                                        v-if="opt.code"
+                                        class="text-grey text-caption"
+                                    >
                                         {{ `${opt.nickname}, ${opt.code}` }}
                                     </QItemLabel>
                                 </QItemSection>
@@ -253,6 +257,7 @@ en:
     ON_PREPARATION: On preparation
     ON_PREVIOUS: On previous
     PACKED: Packed
+    No one: No one
     
 es:
     params:
diff --git a/src/pages/Monitor/Ticket/MonitorTickets.vue b/src/pages/Monitor/Ticket/MonitorTickets.vue
index e3f4b1bbd..258b5022f 100644
--- a/src/pages/Monitor/Ticket/MonitorTickets.vue
+++ b/src/pages/Monitor/Ticket/MonitorTickets.vue
@@ -32,7 +32,7 @@ function exprBuilder(param, value) {
         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':

From ed2167e199d6ed3bce8403ad29b5c663ea4dde7c Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 2 Sep 2024 09:30:15 +0200
Subject: [PATCH 24/24] refactor: refs #7353 ease logic

---
 src/pages/Monitor/MonitorClients.vue | 28 +++++++++++-----------------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/src/pages/Monitor/MonitorClients.vue b/src/pages/Monitor/MonitorClients.vue
index 4a7e2f4e1..ff51e4464 100644
--- a/src/pages/Monitor/MonitorClients.vue
+++ b/src/pages/Monitor/MonitorClients.vue
@@ -18,17 +18,13 @@ const filter = computed(() => {
     const obj = {};
     const formatFrom = setHours(from.value, 'from');
     const formatTo = setHours(to.value, 'to');
+    let stamp;
 
-    if (!formatFrom && formatTo)
-        Object.assign(obj, { where: { 'v.stamp': { lte: formatTo } } });
-    else if (formatFrom && !formatTo)
-        Object.assign(obj, { where: { 'v.stamp': { gte: formatFrom } } });
-    else if (formatFrom && formatTo)
-        Object.assign(obj, {
-            where: { 'v.stamp': { between: [formatFrom, formatTo] } },
-        });
+    if (!formatFrom && formatTo) stamp = { lte: formatTo };
+    else if (formatFrom && !formatTo) stamp = { gte: formatFrom };
+    else if (formatFrom && formatTo) stamp = { between: [formatFrom, formatTo] };
 
-    return obj;
+    return Object.assign(obj, { where: { 'v.stamp': stamp } });
 });
 
 function exprBuilder(param, value) {
@@ -84,6 +80,7 @@ const columns = computed(() => [
                 useLike: false,
             },
         },
+        columnClass: 'no-padding',
     },
     {
         label: t('salesClientsTable.client'),
@@ -102,6 +99,7 @@ const columns = computed(() => [
                 sortBy: 'name ASC',
             },
         },
+        columnClass: 'no-padding',
     },
 ]);
 </script>
@@ -131,16 +129,12 @@ const columns = computed(() => [
             </VnRow>
         </template>
         <template #column-salesPersonFk="{ row }">
-            <QTd class="no-padding">
-                <span class="link" :title="row.salesPerson" v-text="row.salesPerson" />
-                <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
-            </QTd>
+            <span class="link" :title="row.salesPerson" v-text="row.salesPerson" />
+            <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
         </template>
         <template #column-clientFk="{ row }">
-            <QTd class="no-padding">
-                <span class="link" :title="row.clientName" v-text="row.clientName" />
-                <CustomerDescriptorProxy :id="row.clientFk" />
-            </QTd>
+            <span class="link" :title="row.clientName" v-text="row.clientName" />
+            <CustomerDescriptorProxy :id="row.clientFk" />
         </template>
     </VnTable>
 </template>