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/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 ZoneFilterPanel from 'components/InvoiceOutNegativeFilter.vue';
-import VnSubToolbar from 'components/ui/VnSubToolbar.vue';
+import { ref, computed, onMounted } from '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 rows = computed(() => arrayData.value.store.data);
+const weekdayStore = useWeekdayStore();
+
+const details = ref([]);
 
 const columns = computed(() => [
     {
-        label: t('Province'),
-        //field: '',
-        //name: '',
+        label: t('upcomingDeliveries.province'),
+        name: 'province',
+        field: 'name',
         align: 'left',
     },
     {
-        label: t('Closing'),
-        //field: '',
-        //name: '',
+        label: t('upcomingDeliveries.closing'),
+        name: 'closing',
+        field: 'hour',
         align: 'left',
     },
     {
-        label: t('Id'),
-        //field: '',
-        //name: '',
+        label: t('upcomingDeliveries.id'),
+        name: 'id',
+        field: 'zoneFk',
         align: 'left',
     },
 ]);
 
-function getWeekDay(jsonDate) {
-    const weekDay = new Date(jsonDate).getDay();
+const getWeekDayName = (date) => {
+    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>
-        <QScrollArea class="fit text-grey-8">
-            <ZoneFilterPanel data-key="ZoneUpcoming" />
-        </QScrollArea>
-    </QDrawer>
+    <FetchData
+        url="Zones/getUpcomingDeliveries"
+        @on-fetch="(data) => (details = data)"
+        auto-load
+    />
     <VnSubToolbar />
     <QPage class="column items-center q-pa-md">
-        <span>
-            {{ t(`${getWeekDay(/*detail.shipped*/)}`) }} -
-            {{ t /*'detail.shipped'*/() }}
-        </span>
-        <QTable :columns="columns" :rows="rows" class="full-width q-mt-md"> </QTable>
+        <QCard class="full-width q-pa-md">
+            <div
+                v-for="(detail, index) in details"
+                :key="index"
+                class="full-width flex q-mb-lg"
+            >
+                <span class="header">
+                    {{ getHeaderTitle(detail.shipped) }}
+                </span>
+                <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'),
+                },
             ],
         },
         {