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] 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>