feat: refs #7353 split sections

src/i18n/locale/en.yml

@@ -254,6 +254,8 @@ globals:
         twoFactor: Two factor
         recoverPassword: Recover password
         resetPassword: Reset password
+        ticketsMonitor: Tickets monitor
+        clientsActionsMonitor: Clients and actions
     created: Created
     worker: Worker
     now: Now

src/i18n/locale/es.yml

@@ -256,6 +256,8 @@ globals:
         twoFactor: Doble factor
         recoverPassword: Recuperar contraseña
         resetPassword: Restablecer contraseña
+        ticketsMonitor: Monitor de tickets
+        clientsActionsMonitor: Clientes y acciones
     created: Fecha creación
     worker: Trabajador
     now: Ahora

src/pages/Monitor/MonitorClientsActions.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import SalesClientTable from './SalesClientsTable.vue';
+import SalesOrdersTable from './SalesOrdersTable.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+
+const { t } = useI18n();
+const stateStore = useStateStore();
+
+onMounted(async () => (stateStore.leftDrawer = false));
+onUnmounted(() => (stateStore.leftDrawer = true));
+</script>
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="SalesMonitorTickets"
+                url="SalesMonitors/salesFilter"
+                :redirect="false"
+                :label="t('searchBar.label')"
+                :info="t('searchBar.info')"
+            />
+        </Teleport>
+    </template>
+    <div class="q-pa-md container" style="gap: 10px">
+        <div style="flex: 0.4">
+            <span class="text-body1" v-text="t('salesMonitor.clientsOnWebsite')" />
+            <SalesClientTable />
+        </div>
+        <div style="flex: 0.6">
+            <span class="text-body1" v-text="t('salesMonitor.recentOrderActions')" />
+            <SalesOrdersTable />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.container {
+    display: flex;
+
+    @media (max-width: $breakpoint-md-max) {
+        flex-direction: column;
+    }
+}
+</style>

src/pages/Monitor/MonitorList.vue

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

src/pages/Monitor/MonitorTickets.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import SalesTicketsTable from './SalesTicketsTable.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+
+const { t } = useI18n();
+const stateStore = useStateStore();
+
+onMounted(async () => (stateStore.leftDrawer = false));
+onUnmounted(() => (stateStore.leftDrawer = true));
+</script>
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="SalesMonitorTickets"
+                url="SalesMonitors/salesFilter"
+                :redirect="false"
+                :label="t('searchBar.label')"
+                :info="t('searchBar.info')"
+            />
+        </Teleport>
+    </template>
+    <SalesTicketsTable />
+</template>

src/pages/Monitor/SalesOrdersTable.vue

@@ -27,13 +27,21 @@ function exprBuilder(param, value) {
 
 const columns = computed(() => [
     {
-        label: t('salesOrdersTable.date'),
+        label: t('salesOrdersTable.dateSend'),
-        name: 'date',
+        name: 'dateSend',
-        field: 'dated',
+        field: 'dateSend',
         align: 'left',
         orderBy: 'date_send',
         columnFilter: false,
     },
+    {
+        label: t('salesOrdersTable.dateMake'),
+        name: 'dateMake',
+        field: 'dateMake',
+        align: 'left',
+        orderBy: 'date_make',
+        columnFilter: false,
+    },
     {
         label: t('salesOrdersTable.client'),
         name: 'clientFk',
@@ -144,7 +152,7 @@ const openTab = (id) =>
                     <QTooltip>{{ t('salesOrdersTable.delete') }}</QTooltip>
                 </QBtn>
             </template>
-            <template #column-date="{ row }">
+            <template #column-dateSend="{ row }">
                 <QTd>
                     <QBadge
                         :color="getBadgeColor(row.date_send)"
@@ -154,7 +162,11 @@ const openTab = (id) =>
                     >
                         {{ toDateFormat(row.date_send) }}
                     </QBadge>
-                    <div>{{ toDateTimeFormat(row.date_make) }}</div>
+                </QTd>
+            </template>
+            <template #column-dateMake="{ row }">
+                <QTd>
+                    {{ row.date_make }}
                 </QTd>
             </template>
             <template #column-clientFk="{ row }">

src/pages/Monitor/locale/en.yml

@@ -11,7 +11,8 @@ salesClientsTable:
     client: Client
 salesOrdersTable:
     delete: Delete
-    date: Date
+    dateSend: Send date
+    dateMake: Make date
     client: Client
     salesPerson: Salesperson
     deleteConfirmTitle: Delete selected elements

src/pages/Monitor/locale/es.yml

@@ -11,7 +11,8 @@ salesClientsTable:
     client: Cliente
 salesOrdersTable:
     delete: Eliminar
-    date: Fecha
+    dateSend: Fecha de envío
+    dateMake: Fecha de realización
     client: Cliente
     salesPerson: Comercial
     deleteConfirmTitle: Eliminar los elementos seleccionados

src/router/modules/monitor.js

@@ -11,7 +11,7 @@ export default {
     component: RouterView,
     redirect: { name: 'MonitorMain' },
     menus: {
-        main: ['MonitorList'],
+        main: ['MonitorTickets', 'MonitorClientsActions'],
         card: [],
     },
     children: [
@@ -19,16 +19,26 @@ export default {
             path: '',
             name: 'MonitorMain',
             component: () => import('src/components/common/VnSectionMain.vue'),
-            redirect: { name: 'MonitorList' },
+            redirect: { name: 'MonitorTickets' },
             children: [
                 {
-                    path: 'list',
+                    path: 'tickets',
-                    name: 'MonitorList',
+                    name: 'MonitorTickets',
                     meta: {
-                        title: 'list',
+                        title: 'ticketsMonitor',
                         icon: 'grid_view',
                     },
-                    component: () => import('src/pages/Monitor/MonitorList.vue'),
+                    component: () => import('src/pages/Monitor/MonitorTickets.vue'),
+                },
+                {
+                    path: 'clients-actions',
+                    name: 'MonitorClientsActions',
+                    meta: {
+                        title: 'clientsActionsMonitor',
+                        icon: 'grid_view',
+                    },
+                    component: () =>
+                        import('src/pages/Monitor/MonitorClientsActions.vue'),
                 },
             ],
         },