src/components/ui/CardSummary.vue

@@ -54,6 +54,13 @@ async function fetch() {
     emit('onFetch', Array.isArray(data) ? data[0] : data);
     isLoading.value = false;
 }
+
+const showRedirectToSummaryIcon = computed(() => {
+    const routeExists = route.matched.some(
+        (route) => route.name === `${route.meta.moduleName}Summary`
+    );
+    return !isSummary.value && route.meta.moduleName && routeExists;
+});
 </script>
 
 <template>
@@ -64,7 +71,7 @@ async function fetch() {
                 <div class="summaryHeader bg-primary q-pa-sm text-weight-bolder">
                     <slot name="header-left">
                         <router-link
-                            v-if="!isSummary && route.meta.moduleName"
+                            v-if="showRedirectToSummaryIcon"
                             class="header link"
                             :to="{
                                 name: `${route.meta.moduleName}Summary`,

src/components/ui/VnSearchbar.vue

@@ -81,14 +81,14 @@ async function search() {
     const staticParams = Object.entries(store.userParams).filter(
         ([key, value]) => value && (props.staticParams || []).includes(key)
     );
-    // const filter =props?.where? { where: JSON.parse(props.where) }: {}
+    store.skip = 0;
     await arrayData.applyFilter({
         params: {
-            // filter ,
             ...Object.fromEntries(staticParams),
             search: searchText.value,
         },
     });
+
     if (!props.redirect) return;
 
     if (props.customRouteRedirectName)

src/i18n/locale/en.yml

@@ -430,6 +430,7 @@ ticket:
         boxing: Boxing
         sms: Sms
         notes: Notes
+        sale: Sale
     list:
         nickname: Nickname
         state: State
@@ -1235,6 +1236,16 @@ item/itemType:
         itemType: Item type
         basicData: Basic data
         summary: Summary
+zone:
+    pageTitles:
+        zones: Zone
+        zonesList: Zones
+        deliveryList: Delivery days
+        upcomingList: Upcoming deliveries
+monitor:
+    pageTitles:
+        monitors: Monitores
+        list: Listado
 components:
     topbar: {}
     itemsFilterPanel:

src/i18n/locale/es.yml

@@ -428,6 +428,7 @@ ticket:
         boxing: Encajado
         sms: Sms
         notes: Notas
+        sale: Lineas del pedido
     list:
         nickname: Alias
         state: Estado
@@ -1234,7 +1235,16 @@ item/itemType:
         itemType: Familia
         basicData: Datos básicos
         summary: Resumen
-
+zone:
+    pageTitles:
+        zones: Zona
+        zonesList: Zonas
+        deliveryList: Días de entrega
+        upcomingList: Próximos repartos
+monitor:
+    pageTitles:
+        monitors: Monitores
+        list: Listado
 components:
     topbar: {}
     itemsFilterPanel:

src/pages/Monitor/MonitorList.vue

@@ -0,0 +1,88 @@
+<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.rightDrawer = true;
+});
+
+onUnmounted(() => (stateStore.rightDrawer = false));
+</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 q-mb-lg">
+            <QItem class="justify-between">
+                <QItemLabel class="slider-container">
+                    <span class="text-body1"
+                        >{{ t('salesMonitor.ticketsMonitor') }}
+                    </span>
+                    <QCardSection class="col"><SalesTicketsTable /> </QCardSection>
+                </QItemLabel>
+            </QItem>
+        </QCard>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.expansion-tables-container {
+    display: flex;
+    border-top: 1px solid $color-spacer;
+
+    @media (max-width: $breakpoint-md-max) {
+        flex-direction: column;
+    }
+}
+</style>

src/pages/Monitor/MonitorMain.vue

@@ -0,0 +1,18 @@
+<script setup>
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+
+const stateStore = useStateStore();
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
+            <LeftMenu />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
+</template>

src/pages/Monitor/SalesClientsTable.vue

@@ -0,0 +1,219 @@
+<script setup>
+import { ref, computed, reactive, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+
+import { toDateFormat } from 'src/filters/date.js';
+import { dashIfEmpty } from 'src/filters';
+
+const { t } = useI18n();
+
+const paginateRef = ref(null);
+const workersActiveOptions = ref([]);
+const clientsOptions = ref([]);
+
+const from = ref(Date.vnNew());
+const to = ref(Date.vnNew());
+
+const dateRange = computed(() => {
+    const minHour = new Date(from.value);
+    minHour.setHours(0, 0, 0, 0);
+    const maxHour = new Date(to.value);
+    maxHour.setHours(23, 59, 59, 59);
+    return [minHour, maxHour];
+});
+
+const filter = reactive({
+    where: {
+        'v.stamp': {
+            between: dateRange.value,
+        },
+    },
+});
+
+watch(dateRange, (val) => {
+    filter.where['v.stamp'].between = val;
+    paginateRef.value.fetch();
+});
+
+function exprBuilder(param, value) {
+    switch (param) {
+        case 'clientFk':
+            return { [`c.id`]: value };
+        case 'salesPersonFk':
+            return { [`c.${param}`]: value };
+    }
+}
+
+const 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 columns = computed(() => [
+    {
+        label: t('salesClientsTable.date'),
+        name: 'date',
+        field: 'dated',
+        align: 'left',
+        columnFilter: null,
+        sortable: true,
+        format: (val) => toDateFormat(val),
+    },
+    {
+        label: t('salesClientsTable.hour'),
+        name: 'hour',
+        field: 'hour',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('salesClientsTable.salesPerson'),
+        name: 'salesPerson',
+        field: 'salesPerson',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelect,
+            filterParamKey: 'salesPersonFk',
+            type: 'select',
+            filterValue: null,
+            attrs: {
+                options: workersActiveOptions.value,
+                'option-value': 'id',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('salesClientsTable.client'),
+        field: 'clientName',
+        name: 'client',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelect,
+            filterParamKey: 'clientFk',
+            type: 'select',
+            filterValue: null,
+            attrs: {
+                options: clientsOptions.value,
+                'option-value': 'id',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
+        format: (val) => dashIfEmpty(val),
+    },
+]);
+</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">
+        <VnPaginate
+            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
+        >
+            <template #body="{ rows }">
+                <QTable
+                    :rows="rows"
+                    :columns="columns"
+                    row-key="id"
+                    :pagination="{ rowsPerPage: 0 }"
+                    class="full-width"
+                    :no-data-label="t('globals.noResults')"
+                >
+                    <template #top>
+                        <VnInputDate
+                            :label="t('salesClientsTable.from')"
+                            dense
+                            emit-date-format
+                            v-model="from"
+                            class="q-mr-lg"
+                            style="width: 150px"
+                        />
+                        <VnInputDate
+                            :label="t('salesClientsTable.to')"
+                            dense
+                            emit-date-format
+                            v-model="to"
+                            style="width: 150px"
+                        />
+                    </template>
+                    <template #top-row="{ cols }">
+                        <QTr>
+                            <QTd
+                                v-for="(col, index) in cols"
+                                :key="index"
+                                style="max-width: 100px"
+                            >
+                                <VnSelect
+                                    :is="col.columnFilter.component"
+                                    v-if="col.columnFilter"
+                                    v-model="col.columnFilter.filterValue"
+                                    v-bind="col.columnFilter.attrs"
+                                    @update:model-value="applyColumnFilter(col)"
+                                    dense
+                                />
+                            </QTd>
+                        </QTr>
+                    </template>
+                    <template #body-cell-salesPerson="{ row }">
+                        <QTd>
+                            <span class="link">{{ row.salesPerson }}</span>
+                            <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
+                        </QTd>
+                    </template>
+                    <template #body-cell-client="{ row }">
+                        <QTd>
+                            <span class="link">{{ row.clientName }}</span>
+                            <CustomerDescriptorProxy :id="row.clientFk" />
+                        </QTd>
+                    </template>
+                </QTable>
+            </template>
+        </VnPaginate>
+    </QCard>
+</template>

src/pages/Monitor/SalesOrdersTable.vue

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

src/pages/Monitor/SalesTicketsTable.vue

@@ -0,0 +1,636 @@
+<script setup>
+import { ref, computed, onMounted, reactive, watch } 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 VnPaginate from 'components/ui/VnPaginate.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 { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { toDateFormat, toTimeFormat } from 'src/filters/date.js';
+import { toCurrency } 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();
+
+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 '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: null,
+    },
+    {
+        label: t('salesTicketsTable.identifier'),
+        name: 'identifier',
+        field: 'id',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.client'),
+        name: 'client',
+        align: 'left',
+        field: 'nickname',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.salesPerson'),
+        name: 'salesPerson',
+        field: 'userName',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelect,
+            filterParamKey: 'salesPersonFk',
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: workersActiveOptions.value,
+                'option-value': 'id',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.date'),
+        name: 'date',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInputDate,
+            filterParamKey: 'shippedDate',
+            type: 'date',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.theoretical'),
+        name: 'theoretical',
+        field: 'zoneLanding',
+        align: 'left',
+        sortable: true,
+        format: (val) => toTimeFormat(val),
+    },
+    {
+        label: t('salesTicketsTable.practical'),
+        name: 'practical',
+        field: 'practicalHour',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.preparation'),
+        name: 'preparation',
+        field: 'shipped',
+        align: 'left',
+        sortable: true,
+        format: (val) => toTimeFormat(val),
+    },
+
+    {
+        label: t('salesTicketsTable.province'),
+        name: 'province',
+        field: 'province',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelect,
+            filterParamKey: 'provinceFk',
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: provincesOptions.value,
+                'option-value': 'id',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.state'),
+        name: 'state',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelect,
+            filterParamKey: 'stateFk',
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            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: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.zone'),
+        name: 'zone',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelect,
+            filterParamKey: 'zoneFk',
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: zonesOptions.value,
+                'option-value': 'id',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.total'),
+        name: 'total',
+        field: 'totalWithVat',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        name: 'rowActions',
+        align: 'left',
+        sortable: 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) => {
+    router.push({ name: 'TicketSummary', params: { id } });
+};
+
+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);
+};
+
+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)"
+    />
+    <VnPaginate
+        ref="paginateRef"
+        data-key="SalesMonitorTickets"
+        url="SalesMonitors/salesFilter"
+        :filter="filter"
+        :limit="20"
+        :expr-builder="exprBuilder"
+        :user-params="params"
+        :offset="50"
+    >
+        <template #body="{ rows }">
+            <QTable
+                :rows="rows"
+                :columns="columns"
+                row-key="id"
+                :pagination="{ rowsPerPage: 0 }"
+                :visible-columns="visibleColumns"
+                :no-data-label="t('globals.noResults')"
+                @row-click="(_, row) => redirectToTicketSummary(row.id)"
+            >
+                <template #top>
+                    <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 #top-row="{ cols }">
+                    <QTr>
+                        <QTd
+                            v-for="(col, index) in cols"
+                            :key="index"
+                            style="max-width: 100px"
+                        >
+                            <component
+                                :is="col.columnFilter.component"
+                                v-if="col.columnFilter"
+                                v-model="col.columnFilter.filterValue"
+                                v-bind="col.columnFilter.attrs"
+                                v-on="col.columnFilter.event(col)"
+                                dense
+                                style="padding-bottom: 0"
+                            />
+                        </QTd>
+                    </QTr>
+                </template>
+                <template #body-cell-problems="{ row }">
+                    <QTd class="q-gutter-x-sm">
+                        <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 #body-cell-identifier="{ row }">
+                    <QTd>
+                        <span class="link" @click.stop.prevent>{{ row.id }}</span>
+                        <TicketDescriptorProxy :id="row.id" />
+                    </QTd>
+                </template>
+                <template #body-cell-client="{ row }">
+                    <QTd @click.stop.prevent>
+                        <span class="link">{{ row.nickname }}</span>
+                        <CustomerDescriptorProxy :id="row.clientFk" />
+                    </QTd>
+                </template>
+                <template #body-cell-salesPerson="{ row }">
+                    <QTd @click.stop.prevent>
+                        <span class="link">{{ row.userName }}</span>
+                        <WorkerDescriptorProxy :id="row.salesPersonFk" />
+                    </QTd>
+                </template>
+                <template #body-cell-date="{ row }">
+                    <QTd>
+                        <QBadge
+                            v-bind="getBadgeAttrs(row.shippedDate)"
+                            class="q-ma-none"
+                            dense
+                            style="font-size: 14px"
+                        >
+                            {{ formatShippedDate(row.shippedDate) }}
+                        </QBadge>
+                    </QTd>
+                </template>
+                <template #body-cell-state="{ row }">
+                    <QTd @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'"
+                            dense
+                            style="font-size: 14px"
+                        >
+                            {{ row.state }}
+                        </QBadge>
+                    </QTd>
+                </template>
+                <template #body-cell-isFragile="{ row }">
+                    <QTd>
+                        <QIcon
+                            v-if="row.isFragile"
+                            name="local_bar"
+                            color="primary"
+                            size="sm"
+                        >
+                            <QTooltip>{{ t('salesTicketsTable.isFragile') }}</QTooltip>
+                        </QIcon>
+                    </QTd>
+                </template>
+                <template #body-cell-zone="{ row }">
+                    <QTd @click.stop.prevent>
+                        <span class="link">{{ row.zoneName }}</span>
+                        <ZoneDescriptorProxy :id="row.zoneFk" />
+                    </QTd>
+                </template>
+                <template #body-cell-total="{ row }">
+                    <QTd>
+                        <QBadge
+                            :color="totalPriceColor(row) || 'transparent'"
+                            :text-color="totalPriceColor(row) ? 'black' : 'white'"
+                            dense
+                            style="font-size: 14px"
+                        >
+                            {{ toCurrency(row.totalWithVat) }}
+                        </QBadge>
+                    </QTd>
+                </template>
+                <template #body-cell-rowActions="{ row }">
+                    <QTd @click.stop.prevent>
+                        <QBtn
+                            icon="vn:lines"
+                            color="primary"
+                            size="md"
+                            class="q-mr-sm"
+                            flat
+                            dense
+                            :to="{ name: 'TicketSale', params: { id: row.id } }"
+                        >
+                            <QTooltip>{{ t('salesTicketsTable.goToLines') }}</QTooltip>
+                        </QBtn>
+                        <QBtn
+                            icon="preview"
+                            color="primary"
+                            size="md"
+                            dense
+                            flat
+                            @click="viewSummary(row.id, TicketSummary)"
+                        >
+                            <QTooltip>{{ t('salesTicketsTable.preview') }}</QTooltip>
+                        </QBtn>
+                    </QTd>
+                </template>
+            </QTable>
+        </template>
+    </VnPaginate>
+</template>

src/pages/Monitor/locale/en.yml

@@ -0,0 +1,45 @@
+salesMonitor:
+    clientsOnWebsite: Clients on website
+    recentOrderActions: Recent order actions
+    ticketsMonitor: Tickets monitor
+salesClientsTable:
+    from: From
+    to: To
+    date: Date
+    hour: Hour
+    salesPerson: Salesperson
+    client: Client
+salesOrdersTable:
+    delete: Delete
+    date: Date
+    client: Client
+    salesPerson: Salesperson
+    deleteConfirmTitle: Delete selected elements
+    deleteConfirmMessage: All the selected elements will be deleted. Are you sure you want to continue?
+salesTicketsTable:
+    autoRefresh: Auto-refresh
+    problems: Problems
+    noVerifiedData: No verified data
+    notVisible: Not visible
+    purchaseRequest: Purchase request
+    clientFrozen: Client frozen
+    risk: Risk
+    componentLack: Component lack
+    tooLittle: Ticket too little
+    identifier: Identifier
+    client: Client
+    salesPerson: Salesperson
+    date: Date
+    theoretical: Theoretical
+    practical: Practical
+    province: Province
+    state: State
+    isFragile: Is fragile
+    zone: Zone
+    goToLines: Go to lines
+    preview: Preview
+    total: Total
+    preparation: Preparation
+searchBar:
+    label: Search tickets
+    info: Search tickets by id or alias

src/pages/Monitor/locale/es.yml

@@ -0,0 +1,45 @@
+salesMonitor:
+    clientsOnWebsite: Clientes activos en la web
+    recentOrderActions: Acciones recientes en pedidos
+    ticketsMonitor: Monitor de tickets
+salesClientsTable:
+    from: Desde
+    to: Hasta
+    date: Fecha
+    hour: Hora
+    salesPerson: Comercial
+    client: Cliente
+salesOrdersTable:
+    delete: Eliminar
+    date: Fecha
+    client: Cliente
+    salesPerson: Comercial
+    deleteConfirmTitle: Eliminar los elementos seleccionados
+    deleteConfirmMessage: Todos los elementos seleccionados serán eliminados. ¿Seguro que quieres continuar?
+salesTicketsTable:
+    autoRefresh: Auto-refresco
+    problems: Problemas
+    noVerifiedData: Sin datos comprobados
+    notVisible: No visible
+    purchaseRequest: Petición de compra
+    clientFrozen: Cliente congelado
+    risk: Riesgo
+    componentLack: Faltan componentes
+    tooLittle: Ticket demasiado pequeño
+    identifier: Identificador
+    client: Cliente
+    salesPerson: Comercial
+    date: Fecha
+    theoretical: Teórica
+    practical: Práctica
+    province: Provincia
+    state: Estado
+    isFragile: Es frágil
+    zone: Zona
+    goToLines: Ir a líneas
+    preview: Vista previa
+    total: Total
+    preparation: Preparación
+searchBar:
+    label: Buscar tickets
+    info: Buscar tickets por identificador o alias

src/pages/Ticket/Card/TicketSale.vue

@@ -0,0 +1 @@
+<template>Ticket sale</template>

src/router/modules/index.js

@@ -18,6 +18,7 @@ import Parking from './parking';
 import Agency from './agency';
 import ItemType from './itemType';
 import Zone from './zone';
+import Monitor from './monitor';
 
 export default [
     Item,
@@ -40,4 +41,5 @@ export default [
     Agency,
     ItemType,
     Zone,
+    Monitor,
 ];

src/router/modules/monitor.js

@@ -0,0 +1,36 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/monitor',
+    name: 'Monitor',
+    meta: {
+        title: 'monitors',
+        icon: 'grid_view',
+        moduleName: 'Monitor',
+    },
+    component: RouterView,
+    redirect: { name: 'MonitorMain' },
+    menus: {
+        main: ['MonitorList'],
+        card: [],
+    },
+    children: [
+        {
+            path: '',
+            name: 'MonitorMain',
+            component: () => import('src/pages/Monitor/MonitorMain.vue'),
+            redirect: { name: 'MonitorList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'MonitorList',
+                    meta: {
+                        title: 'list',
+                        icon: 'grid_view',
+                    },
+                    component: () => import('src/pages/Monitor/MonitorList.vue'),
+                },
+            ],
+        },
+    ],
+};

src/router/modules/ticket.js

@@ -12,7 +12,7 @@ export default {
     redirect: { name: 'TicketMain' },
     menus: {
         main: ['TicketList'],
-        card: ['TicketBoxing', 'TicketSms'],
+        card: ['TicketBoxing', 'TicketSms', 'TicketSale'],
     },
     children: [
         {
@@ -66,6 +66,15 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/Card/TicketBasicData.vue'),
                 },
+                {
+                    name: 'TicketSale',
+                    path: 'sale',
+                    meta: {
+                        title: 'sale',
+                        icon: 'vn:lines',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketSale.vue'),
+                },
                 {
                     path: 'boxing',
                     name: 'TicketBoxing',

src/router/routes.js

@@ -18,6 +18,7 @@ import roadmap from 'src/router/modules/roadmap';
 import parking from 'src/router/modules/parking';
 import agency from 'src/router/modules/agency';
 import zone from 'src/router/modules/zone';
+import monitor from 'src/router/modules/monitor';
 
 const routes = [
     {
@@ -65,6 +66,7 @@ const routes = [
             shelving,
             invoiceOut,
             invoiceIn,
+            monitor,
             wagon,
             order,
             route,

src/stores/useNavigationStore.js

@@ -15,6 +15,7 @@ export const useNavigationStore = defineStore('navigationStore', () => {
         'travel',
         'invoiceOut',
         'invoiceIn',
+        'monitor',
         'supplier',
         'claim',
         'route',
@@ -31,7 +32,6 @@ export const useNavigationStore = defineStore('navigationStore', () => {
         for (const module of modules) {
             const moduleDef = routes.find((route) => toLowerCamel(route.name) === module);
             if (!moduleDef) continue;
-
             const item = addMenuItem(module, moduleDef, modulesRoutes.value);
             if (!item) continue;