Merge branch 'dev' into 6095-add-refFk-null-on-search

src/components/common/VnInputTime.vue

@@ -2,6 +2,7 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import isValidDate from 'filters/isValidDate';
+import VnInput from 'components/common/VnInput.vue';
 
 const props = defineProps({
     modelValue: {
@@ -74,7 +75,7 @@ const styleAttrs = computed(() => {
         @click="isPopupOpen = true"
     >
         <template #append>
-            <QIcon name="schedule" class="cursor-pointer">
+            <QIcon name="Schedule" class="cursor-pointer">
                 <QPopupProxy
                     v-model="isPopupOpen"
                     cover

src/components/ui/FetchedTags.vue

@@ -1,5 +1,7 @@
 <script setup>
-defineProps({
+import { computed } from 'vue';
+
+const $props = defineProps({
     maxLength: {
         type: Number,
         required: true,
@@ -8,53 +10,40 @@ defineProps({
         type: Object,
         required: true,
     },
+    tag: {
+        type: String,
+        required: false,
+        default: 'tag',
+    },
+    value: {
+        type: String,
+        required: false,
+        default: 'value',
+    },
+});
+const tags = computed(() => {
+    return Object.keys($props.item)
+        .filter((i) => i.startsWith(`${$props.tag}`))
+        .reduce((acc, tag) => {
+            const n = tag.split(`${$props.tag}`)[1];
+            const key = `${$props.tag}${n}`;
+            const value = `${$props.value}${n}`;
+            acc[$props.item[key] ?? key] = $props.item[value] ?? '';
+            return acc;
+        }, {});
 });
 </script>
 <template>
     <div class="fetchedTags">
         <div class="wrap">
             <div
+                v-for="(val, key) in tags"
+                :key="key"
                 class="inline-tag"
-                :class="{ empty: !$props.item.value5 }"
+                :title="`${key}: ${val}`"
-                :title="$props.item.tag5 + ': ' + $props.item.value5"
+                :class="{ empty: !val }"
             >
-                {{ $props.item.value5 }}
+                {{ val }}
-            </div>
-            <div
-                class="inline-tag"
-                :class="{ empty: !$props.item.tag6 }"
-                :title="$props.item.tag6 + ': ' + $props.item.value6"
-            >
-                {{ $props.item.value6 }}
-            </div>
-
-            <div
-                class="inline-tag"
-                :class="{ empty: !$props.item.value7 }"
-                :title="$props.item.tag7 + ': ' + $props.item.value7"
-            >
-                {{ $props.item.value7 }}
-            </div>
-            <div
-                class="inline-tag"
-                :class="{ empty: !$props.item.value8 }"
-                :title="$props.item.tag8 + ': ' + $props.item.value8"
-            >
-                {{ $props.item.value8 }}
-            </div>
-            <div
-                class="inline-tag"
-                :class="{ empty: !$props.item.value9 }"
-                :title="$props.item.tag9 + ': ' + $props.item.value9"
-            >
-                {{ $props.item.value9 }}
-            </div>
-            <div
-                class="inline-tag"
-                :class="{ empty: !$props.item.value10 }"
-                :title="$props.item.tag10 + ': ' + $props.item.value10"
-            >
-                {{ $props.item.value10 }}
             </div>
         </div>
     </div>
@@ -83,9 +72,8 @@ defineProps({
         min-width: 4rem;
         max-width: 4rem;
     }
-
     .empty {
-        border: 1px solid $color-spacer-light;
+        border: 1px solid #2b2b2b;
     }
 }
 </style>

src/components/ui/QCalendarMonthWrapper.vue

@@ -59,12 +59,10 @@ const containerClasses = computed(() => {
 // Clases para modificar el color de fecha seleccionada en componente QCalendarMonth
 .q-dark div .q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
     background-color: $primary !important;
-    color: white !important;
 }
 
 .q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
     background-color: $primary !important;
-    color: white !important;
 }
 
 .q-calendar-month__head--weekday {
@@ -112,7 +110,6 @@ const containerClasses = computed(() => {
             cursor: pointer;
         }
     }
-
     .q-calendar-month__week--days > div:nth-child(6),
     .q-calendar-month__week--days > div:nth-child(7) {
         // Cambia el color de los días sábado y domingo

src/css/app.scss

@@ -169,6 +169,13 @@ select:-webkit-autofill {
 
 /* q-notification row items-stretch q-notification--standard bg-negative text-white */
 
+.q-card,
+.q-table,
+.q-table__bottom,
+.q-drawer {
+    background-color: var(--vn-section-color);
+}
+
 input[type='number'] {
     -moz-appearance: textfield;
 }

src/pages/Entry/Card/EntryBuys.vue

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

src/pages/Entry/Card/EntrySummary.vue

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

src/pages/Entry/EntryLatestBuys.vue

@@ -707,7 +707,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             </template>
             <template #body-cell-tags="{ row }">
                 <QTd>
-                    <fetched-tags :item="row" :max-length="6" />
+                    <FetchedTags :item="row" :max-length="6" />
                 </QTd>
             </template>
             <template #body-cell-entryFk="{ row }">

src/pages/Item/ItemFixedPrice.vue

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

src/pages/Item/ItemList.vue

@@ -521,7 +521,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     <template #body-cell-description="{ row }">
                         <QTd class="col">
                             <span>{{ row.name }} {{ row.subName }}</span>
-                            <fetched-tags :item="row" :max-length="6" />
+                            <FetchedTags :item="row" :max-length="6" />
                         </QTd>
                     </template>
                     <template #body-cell-isActive="{ row }">

src/pages/Item/locale/en.yml

@@ -81,3 +81,10 @@ itemTags:
 searchbar:
     label: Search item
     info: Search by item id
+itemType:
+    shared:
+        code: Code
+        name: Name
+        worker: Worker
+        category: Category
+        temperature: Temperature

src/pages/Item/locale/es.yml

@@ -81,3 +81,10 @@ itemTags:
 searchbar:
     label: Buscar artículo
     info: Buscar por id de artículo
+itemType:
+    shared:
+        code: Código
+        name: Nombre
+        worker: Trabajador
+        category: Reino
+        temperature: Temperatura

src/pages/Order/Card/OrderSummary.vue

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

src/pages/Order/OrderLines.vue

@@ -160,7 +160,7 @@ async function confirmOrder() {
                                     <span class="text-uppercase subname">
                                         {{ row.item.subName }}
                                     </span>
-                                    <fetched-tags :item="row.item" :max-length="5" />
+                                    <FetchedTags :item="row.item" :max-length="5" />
                                 </div>
                                 <VnLv :label="t('item')" :value="String(row.item.id)" />
                                 <VnLv

src/pages/Order/OrderVolume.vue

@@ -77,7 +77,7 @@ const loadVolumes = async (rows) => {
                         >
                             <template #list-items>
                                 <div class="q-mb-sm">
-                                    <fetched-tags :item="row.item" :max-length="5" />
+                                    <FetchedTags :item="row.item" :max-length="5" />
                                 </div>
                                 <VnLv :label="t('item')" :value="row.item.id" />
                                 <VnLv :label="t('subName')">

src/pages/Route/RouteList.vue

@@ -12,6 +12,7 @@ import VnInput from 'components/common/VnInput.vue';
 import VnInputTime from 'components/common/VnInputTime.vue';
 import axios from 'axios';
 import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
+import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
 import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
 import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
@@ -19,6 +20,7 @@ import { useSession } from 'composables/useSession';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import RouteListTicketsDialog from 'pages/Route/Card/RouteListTicketsDialog.vue';
 import { useQuasar } from 'quasar';
+import { useArrayData } from 'composables/useArrayData';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -26,10 +28,7 @@ const { validate } = useValidator();
 const quasar = useQuasar();
 const session = useSession();
 const { viewSummary } = useSummaryDialog();
-
+const visibleColumns = ref([]);
-onMounted(() => (stateStore.rightDrawer = true));
-onUnmounted(() => (stateStore.rightDrawer = false));
-
 const selectedRows = ref([]);
 const columns = computed(() => [
     {
@@ -83,14 +82,14 @@ const columns = computed(() => [
     },
     {
         name: 'started',
-        label: t('Hour started'),
+        label: t('hourStarted'),
         field: (row) => toHour(row.started),
         sortable: true,
         align: 'left',
     },
     {
         name: 'finished',
-        label: t('Hour finished'),
+        label: t('hourFinished'),
         field: (row) => toHour(row.finished),
         sortable: true,
         align: 'left',
@@ -109,7 +108,10 @@ const columns = computed(() => [
         align: 'right',
     },
 ]);
-
+const arrayData = useArrayData('EntryLatestBuys', {
+    url: 'Buys/latestBuysFilter',
+    order: ['itemFk DESC'],
+});
 const refreshKey = ref(0);
 const workers = ref([]);
 const agencyList = ref([]);
@@ -121,7 +123,7 @@ const updateRoute = async (route) => {
         return err;
     }
 };
-
+const allColumnNames = ref([]);
 const confirmationDialog = ref(false);
 const startingDate = ref(null);
 
@@ -174,6 +176,13 @@ const openTicketsDialog = (id) => {
         })
         .onOk(() => refreshKey.value++);
 };
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+    allColumnNames.value = columns.value.map((col) => col.name);
+    await arrayData.fetch({ append: false });
+});
+onUnmounted(() => (stateStore.rightDrawer = false));
 </script>
 
 <template>
@@ -231,7 +240,16 @@ const openTicketsDialog = (id) => {
     <FetchData url="AgencyModes" @on-fetch="(data) => (agencyList = data)" auto-load />
     <FetchData url="Vehicles" @on-fetch="(data) => (vehicleList = data)" auto-load />
     <QPage class="column items-center">
-        <VnSubToolbar class="justify-end">
+        <VnSubToolbar>
+            <template #st-data>
+                <TableVisibleColumns
+                    class="LeftIcon"
+                    :all-columns="allColumnNames"
+                    table-code="routesList"
+                    labels-traductions-path="globals"
+                    @on-config-saved="visibleColumns = [...$event]"
+                />
+            </template>
             <template #st-actions>
                 <QBtn
                     icon="vn:clone"
@@ -267,7 +285,7 @@ const openTicketsDialog = (id) => {
                 :key="refreshKey"
                 data-key="RouteList"
                 url="Routes/filter"
-                :order="['created DESC', 'id DESC']"
+                :order="['created ASC', 'started ASC', 'id ASC']"
                 :limit="20"
                 auto-load
             >
@@ -281,9 +299,10 @@ const openTicketsDialog = (id) => {
                             row-key="id"
                             selection="multiple"
                             :rows-per-page-options="[0]"
+                            :visible-columns="visibleColumns"
                             hide-pagination
-                            :pagination="{ sortBy: 'ID', descending: true }"
                             :no-data-label="t('globals.noResults')"
+                            style="max-height: 82vh"
                         >
                             <template #body-cell-worker="{ row }">
                                 <QTd class="table-input-cell">
@@ -336,7 +355,7 @@ const openTicketsDialog = (id) => {
                                 </QTd>
                             </template>
                             <template #body-cell-vehicle="{ row }">
-                                <QTd class="table-input-cell">
+                                <QTd class="table-input-cell small-column">
                                     <VnSelect
                                         :label="t('Vehicle')"
                                         v-model="row.vehicleFk"
@@ -353,7 +372,7 @@ const openTicketsDialog = (id) => {
                                 </QTd>
                             </template>
                             <template #body-cell-date="{ row }">
-                                <QTd class="table-input-cell">
+                                <QTd class="table-input-cell small-column">
                                     <VnInputDate
                                         v-model="row.created"
                                         hide-bottom-space
@@ -378,10 +397,10 @@ const openTicketsDialog = (id) => {
                                 </QTd>
                             </template>
                             <template #body-cell-started="{ row }">
-                                <QTd class="table-input-cell">
+                                <QTd class="table-input-cell small-column">
                                     <VnInputTime
                                         v-model="row.started"
-                                        :label="t('Hour started')"
+                                        :label="t('hourStarted')"
                                         :rules="validate('route.started')"
                                         :is-clearable="false"
                                         hide-bottom-space
@@ -391,11 +410,11 @@ const openTicketsDialog = (id) => {
                                 </QTd>
                             </template>
                             <template #body-cell-finished="{ row }">
-                                <QTd class="table-input-cell">
+                                <QTd class="table-input-cell small-column">
                                     <VnInputTime
                                         v-model="row.finished"
                                         autofocus
-                                        :label="t('Hour finished')"
+                                        :label="t('hourFinished')"
                                         :rules="validate('route.finished')"
                                         :is-clearable="false"
                                         hide-bottom-space
@@ -405,7 +424,7 @@ const openTicketsDialog = (id) => {
                                 </QTd>
                             </template>
                             <template #body-cell-isServed="props">
-                                <QTd>
+                                <QTd class="table-input-cell small-column">
                                     <QCheckbox v-model="props.value" disable>
                                         <QTooltip>
                                             {{
@@ -486,15 +505,18 @@ const openTicketsDialog = (id) => {
 .table-actions {
     gap: 12px;
 }
-
+th:last-child,
-.lock-icon-cell {
+td:last-child {
-    text-align: center;
+    background-color: var(--vn-section-color);
-    margin-left: -20%;
+    position: sticky;
+    right: 0;
 }
 </style>
 <i18n>
 en:
     newRoute: New Route
+    hourStarted: Started hour
+    hourFinished: Finished hour
 es:
     ID: ID
     Worker: Trabajador

src/pages/Route/RouteMain.vue

@@ -1,8 +1,10 @@
 <script setup>
 import { useStateStore } from 'stores/useStateStore';
 import LeftMenu from 'src/components/LeftMenu.vue';
+import { onMounted } from 'vue';
 
 const stateStore = useStateStore();
+onMounted(() => (stateStore.leftDrawer = false));
 </script>
 
 <template>

src/pages/Supplier/Card/SupplierConsumption.vue

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

src/pages/Worker/Card/WorkerCalendar.vue

@@ -82,6 +82,7 @@ const onFetchAbsences = (data) => {
                 type: type.code,
                 absenceId: absence.id,
                 isFestive: false,
+                isHoliday: false,
             });
         });
     }

src/pages/Worker/Card/WorkerCalendarItem.vue

@@ -126,7 +126,7 @@ const handleEventSelected = (event, { year, month, day }) => {
     }
 
     const date = new Date(year, month - 1, day);
-    if (!event.absenceId) createEvent(date);
+    if (!event?.absenceId) createEvent(date);
     else if (event.type == props.absenceType.code) deleteEvent(event, date);
     else editEvent(event);
 };
@@ -136,24 +136,31 @@ const getEventByTimestamp = ({ year, month, day }) => {
     return props.events[stamp] || null;
 };
 
+const isFestive = (timestamp) => {
+    const event = getEventByTimestamp(timestamp);
+    if (!event) return false;
+
+    const { isFestive } = event;
+    return isFestive;
+};
 const getEventAttrs = (timestamp) => {
     const event = getEventByTimestamp(timestamp);
     if (!event) return {};
 
-    const { name, color, isFestive } = event;
+    const { name, color, isFestive, type } = event;
 
     // Atributos a asignar a cada slot que representa un evento en el calendario
 
     const attrs = {
         title: name,
-        style: color ? `background-color: ${color};` : '',
+        style: color ? `background-color: ${color};` : ``,
         label: timestamp.day,
     };
 
     if (isFestive) {
         attrs.class = '--festive';
-        attrs.label = event.absenceId ? timestamp.day : '';
+        attrs.label = event.absenceId ?? timestamp.day;
-    }
+    } else attrs.class = `--${type}`;
 
     return attrs;
 };
@@ -162,7 +169,6 @@ const isToday = (timestamp) => {
     const { year, month, day } = timestamp;
     return todayTimestamp.value === new Date(year, month - 1, day).getTime();
 };
-
 onBeforeMount(() => {
     updateSelectedDate(_year.value);
 });
@@ -203,7 +209,6 @@ watch(_year, (newValue) => {
                 <template #day="{ scope: { timestamp } }">
                     <!-- Este slot representa cada día del calendario y muestra un botón representando el correspondiente evento -->
                     <QBtn
-                        v-if="getEventByTimestamp(timestamp)"
                         v-bind="{ ...getEventAttrs(timestamp) }"
                         @click="
                             handleEventSelected(getEventByTimestamp(timestamp), timestamp)
@@ -223,6 +228,11 @@ watch(_year, (newValue) => {
 </template>
 
 <style lang="scss">
+.q-calendar-month__day:has(.q-calendar-month__day--content):has(.q-btn.--festive)
+    .q-calendar-month__day--label__wrapper
+    button {
+    color: transparent;
+}
 .calendar-event {
     display: flex;
     justify-content: center;
@@ -231,14 +241,19 @@ watch(_year, (newValue) => {
     font-size: 13px;
     line-height: 1.715em;
     cursor: pointer;
-    color: white;
 
     &.--today {
         border: 2px solid $info;
     }
 
     &.--festive {
-        border: 2px solid $negative;
+        color: $negative;
+    }
+
+    &.--holiday {
+        & > span:nth-child(2) .block {
+            color: white;
+        }
     }
 
     &:hover {

src/pages/Zone/Card/ZoneCard.vue

@@ -35,7 +35,7 @@ const searchBarDataKeys = {
         base-url="Zones"
         :descriptor="ZoneDescriptor"
         searchbar-data-key="ZoneList"
-        searchbar-url="Zones/filter"
+        searchbar-url="Zones"
         searchbar-label="Search zones"
         searchbar-info="You can search by zone reference"
     />

src/pages/Zone/ZoneList.vue

@@ -6,8 +6,6 @@ import { toCurrency } from 'src/filters';
 
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import ZoneSummary from 'src/pages/Zone/Card/ZoneSummary.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import ZoneFilterPanel from './ZoneFilterPanel.vue';
 
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { toTimeFormat } from 'src/filters/date';
@@ -71,35 +69,6 @@ const columns = computed(() => [
     },
 ]);
 
-const exprBuilder = (param, value) => {
-    switch (param) {
-        case 'name':
-            return {
-                name: { like: `%${value}%` },
-            };
-        case 'code':
-            return {
-                code: { like: `%${value}%` },
-            };
-        case 'agencyModeFk':
-            return {
-                agencyModeFk: value,
-            };
-        case 'search':
-            if (value) {
-                if (!isNaN(value)) {
-                    return { id: value };
-                } else {
-                    return {
-                        name: {
-                            like: `%${value}%`,
-                        },
-                    };
-                }
-            }
-    }
-};
-
 async function clone(id) {
     const { data } = await axios.post(`Zones/${id}/clone`);
     notify(t('globals.dataSaved'), 'positive');
@@ -116,25 +85,6 @@ onMounted(() => (stateStore.rightDrawer = true));
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="ZoneList"
-                url="Zones"
-                :filter="{
-                    include: { relation: 'agencyMode', scope: { fields: ['name'] } },
-                }"
-                :expr-builder="exprBuilder"
-                :label="t('list.searchZone')"
-                :info="t('list.searchInfo')"
-            />
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
-            <ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" />
-        </QScrollArea>
-    </QDrawer>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate

src/pages/Zone/ZoneMain.vue

@@ -1,11 +1,72 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import LeftMenu from 'src/components/LeftMenu.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import ZoneFilterPanel from './ZoneFilterPanel.vue';
 
+const { t } = useI18n();
 const stateStore = useStateStore();
+const route = useRoute();
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'name':
+            return {
+                name: { like: `%${value}%` },
+            };
+        case 'code':
+            return {
+                code: { like: `%${value}%` },
+            };
+        case 'agencyModeFk':
+            return {
+                agencyModeFk: value,
+            };
+        case 'search':
+            if (value) {
+                if (!isNaN(value)) {
+                    return { id: value };
+                } else {
+                    return {
+                        name: {
+                            like: `%${value}%`,
+                        },
+                    };
+                }
+            }
+    }
+};
 </script>
 
 <template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="ZoneList"
+                url="Zones"
+                :filter="{
+                    include: { relation: 'agencyMode', scope: { fields: ['name'] } },
+                }"
+                :expr-builder="exprBuilder"
+                :label="t('list.searchZone')"
+                :info="t('list.searchInfo')"
+                custom-route-redirect-name="ZoneSummary"
+            />
+        </Teleport>
+    </template>
+    <QDrawer
+        v-if="route.name === 'ZoneList'"
+        v-model="stateStore.rightDrawer"
+        side="right"
+        :width="256"
+        show-if-above
+    >
+        <QScrollArea class="fit text-grey-8">
+            <ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" />
+        </QScrollArea>
+    </QDrawer>
     <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <QScrollArea class="fit text-grey-8">
             <LeftMenu />

src/pages/Zone/ZoneUpcoming.vue

@@ -1,53 +1,85 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
-import ZoneFilterPanel from 'components/InvoiceOutNegativeFilter.vue';
-import VnSubToolbar from 'components/ui/VnSubToolbar.vue';
 import { useI18n } from 'vue-i18n';
 
+import VnSubToolbar from 'components/ui/VnSubToolbar.vue';
+import FetchData from 'components/FetchData.vue';
+
+import { toDateFormat } from 'src/filters/date.js';
+import { useWeekdayStore } from 'src/stores/useWeekdayStore';
+
 const { t } = useI18n();
-const arrayData = ref(null);
+const weekdayStore = useWeekdayStore();
-const rows = computed(() => arrayData.value.store.data);
+
+const details = ref([]);
 
 const columns = computed(() => [
     {
-        label: t('Province'),
+        label: t('upcomingDeliveries.province'),
-        //field: '',
+        name: 'province',
-        //name: '',
+        field: 'name',
         align: 'left',
     },
     {
-        label: t('Closing'),
+        label: t('upcomingDeliveries.closing'),
-        //field: '',
+        name: 'closing',
-        //name: '',
+        field: 'hour',
         align: 'left',
     },
     {
-        label: t('Id'),
+        label: t('upcomingDeliveries.id'),
-        //field: '',
+        name: 'id',
-        //name: '',
+        field: 'zoneFk',
         align: 'left',
     },
 ]);
 
-function getWeekDay(jsonDate) {
+const getWeekDayName = (date) => {
-    const weekDay = new Date(jsonDate).getDay();
+    const weekDay = new Date(date).getDay();
+    return t(`weekdays.${weekdayStore.weekdays[weekDay].code}`);
+};
 
-    return this.days[weekDay].locale;
+const getHeaderTitle = (date) => {
-}
+    return `${getWeekDayName(date)} - ${toDateFormat(date)}`;
+};
+
+onMounted(() => weekdayStore.initStore());
 </script>
 
 <template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    <FetchData
-        <QScrollArea class="fit text-grey-8">
+        url="Zones/getUpcomingDeliveries"
-            <ZoneFilterPanel data-key="ZoneUpcoming" />
+        @on-fetch="(data) => (details = data)"
-        </QScrollArea>
+        auto-load
-    </QDrawer>
+    />
     <VnSubToolbar />
     <QPage class="column items-center q-pa-md">
-        <span>
+        <QCard class="full-width q-pa-md">
-            {{ t(`${getWeekDay(/*detail.shipped*/)}`) }} -
+            <div
-            {{ t /*'detail.shipped'*/() }}
+                v-for="(detail, index) in details"
+                :key="index"
+                class="full-width flex q-mb-lg"
+            >
+                <span class="header">
+                    {{ getHeaderTitle(detail.shipped) }}
                 </span>
-        <QTable :columns="columns" :rows="rows" class="full-width q-mt-md"> </QTable>
+                <QTable flat :columns="columns" :rows="detail.lines" class="full-width" />
+            </div>
+        </QCard>
     </QPage>
 </template>
+
+<style scoped lang="scss">
+.header {
+    min-width: 100% !important;
+    display: flex;
+    align-items: center;
+    padding-left: 8px;
+    height: 35px;
+    border-bottom: 1px solid $primary;
+    background-color: var(--vn-page-color);
+    font-size: 19px;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+</style>

src/pages/Zone/locale/en.yml

@@ -5,7 +5,7 @@ zone:
         zoneCreate: Create zone
         locations: Locations
         deliveryDays: Delivery days
-        upcomingList: Upcoming deliveries
+        upcomingDeliveries: Upcoming deliveries
         warehouses: Warehouses
 list:
     clone: Clone
@@ -64,3 +64,7 @@ warehouses:
     deleteSubtitle: Are you sure you want to continue?
     warehouse: Warehouse
     add: Add
+upcomingDeliveries:
+    province: Province
+    closing: Closing
+    id: Id

src/pages/Zone/locale/es.yml

@@ -5,7 +5,7 @@ zone:
         zoneCreate: Nueva zona
         locations: Localizaciones
         deliveryDays: Días de entrega
-        upcomingList: Próximos repartos
+        upcomingDeliveries: Próximos repartos
         warehouses: Almacenes
 list:
     clone: Clonar
@@ -66,3 +66,7 @@ warehouses:
     deleteSubtitle: ¿Seguro que quieres continuar?
     warehouse: Almacén
     add: Añadir
+upcomingDeliveries:
+    province: Provincia
+    closing: Cierre
+    id: Id

src/router/modules/zone.js

@@ -11,7 +11,7 @@ export default {
     component: RouterView,
     redirect: { name: 'ZoneMain' },
     menus: {
-        main: ['ZoneList', 'ZoneDeliveryDays', 'ZoneUpcomingList'],
+        main: ['ZoneList', 'ZoneDeliveryDays', 'ZoneUpcomingDeliveries'],
         card: ['ZoneBasicData', 'ZoneWarehouses', 'ZoneHistory', 'ZoneLocations'],
     },
     children: [
@@ -57,6 +57,24 @@ export default {
                     },
                     component: () => import('src/pages/Zone/ZoneCreate.vue'),
                 },
+                // {
+                //     path: 'counter',
+                //     name: 'ZoneCounter',
+                //     meta: {
+                //         title: 'zoneCounter',
+                //         icon: 'add_circle',
+                //     },
+                //     component: () => import('src/pages/Zone/ZoneCounter.vue'),
+                // },
+                {
+                    name: 'ZoneUpcomingDeliveries',
+                    path: 'upcoming-deliveries',
+                    meta: {
+                        title: 'upcomingDeliveries',
+                        icon: 'vn:calendar',
+                    },
+                    component: () => import('src/pages/Zone/ZoneUpcoming.vue'),
+                },
             ],
         },
         {