From 42591d078119e6a1051669a104c977f7c6b4abc2 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 25 Apr 2024 14:27:56 +0200
Subject: [PATCH 1/8] feat #7271 router

---
 src/router/modules/index.js      |   2 +
 src/router/modules/zone.js       | 139 +++++++++++++++++++++++++++++++
 src/router/routes.js             |   2 +
 src/stores/useNavigationStore.js |   1 +
 4 files changed, 144 insertions(+)
 create mode 100644 src/router/modules/zone.js

diff --git a/src/router/modules/index.js b/src/router/modules/index.js
index 302ba7fe0..2fe40038f 100644
--- a/src/router/modules/index.js
+++ b/src/router/modules/index.js
@@ -15,6 +15,7 @@ import Department from './department';
 import Entry from './entry';
 import roadmap from './roadmap';
 import Parking from './parking';
+import Zone from './zone';
 
 export default [
     Item,
@@ -34,4 +35,5 @@ export default [
     Entry,
     roadmap,
     Parking,
+    Zone,
 ];
diff --git a/src/router/modules/zone.js b/src/router/modules/zone.js
new file mode 100644
index 000000000..be11ced11
--- /dev/null
+++ b/src/router/modules/zone.js
@@ -0,0 +1,139 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/zone',
+    name: 'Zone',
+    meta: {
+        title: 'zones',
+        icon: 'vn:zone',
+        moduleName: 'Zone',
+    },
+    component: RouterView,
+    redirect: { name: 'ZoneMain' },
+    menus: {
+        main: ['ZoneList', 'ZoneDeliveryList', 'ZoneUpcomingList'],
+        card: [],
+    },
+    children: [
+        {
+            path: '/zone',
+            name: 'ZoneMain',
+            component: () => import('src/pages/Zone/ZoneMain.vue'),
+            redirect: { name: 'ZoneList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'ZoneList',
+                    meta: {
+                        title: 'zonesList',
+                        icon: 'vn:zone',
+                    },
+                    component: () => import('src/pages/Zone/ZoneList.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'ZoneCreate',
+                    meta: {
+                        title: 'zoneCreate',
+                        icon: 'create',
+                    },
+                    component: () => import('src/pages/Zone/ZoneCreate.vue'),
+                },
+                {
+                    path: ':id/edit',
+                    name: 'ZoneEdit',
+                    meta: {
+                        title: 'zoneEdit',
+                        icon: 'edit',
+                    },
+                    component: () => import('src/pages/Zone/ZoneCreate.vue'),
+                },
+                {
+                    path: 'counter',
+                    name: 'ZoneCounter',
+                    meta: {
+                        title: 'zoneCounter',
+                        icon: 'add_circle',
+                    },
+                    component: () => import('src/pages/Zone/ZoneCounter.vue'),
+                },
+            ],
+        },
+        {
+            path: '/zone/delivery',
+            name: 'ZoneDeliveryMain',
+            component: () => import('src/pages/Zone/ZoneMain.vue'),
+            redirect: { name: 'ZoneDeliveryList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'ZoneDeliveryList',
+                    meta: {
+                        title: 'deliveryList',
+                        icon: 'today',
+                    },
+                    component: () =>
+                        import('src/pages/Zone/Delivery/ZoneDeliveryList.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'ZoneDeliveryCreate',
+                    meta: {
+                        title: 'deliveryCreate',
+                        icon: 'create',
+                    },
+                    component: () =>
+                        import('src/pages/Zone/Delivery/ZoneDeliveryCreate.vue'),
+                },
+                {
+                    path: ':id/edit',
+                    name: 'ZoneDeliveryEdit',
+                    meta: {
+                        title: 'deliveryEdit',
+                        icon: 'edit',
+                    },
+                    component: () =>
+                        import('src/pages/Zone/Delivery/ZoneDeliveryCreate.vue'),
+                },
+            ],
+        },
+        {
+            path: '/zone/upcoming',
+            name: 'ZoneUpcomingMain',
+            component: () => import('src/pages/Zone/ZoneMain.vue'),
+            redirect: { name: 'ZoneUpcomingList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'ZoneUpcomingList',
+                    meta: {
+                        title: 'upcomingList',
+                        icon: 'today',
+                    },
+                    component: () =>
+                        import('src/pages/Zone/Upcoming/ZoneUpcomingList.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'ZoneUpcomingCreate',
+                    meta: {
+                        title: 'upcomingCreate',
+                        icon: 'create',
+                    },
+                    component: () =>
+                        import('src/pages/Zone/Upcoming/ZoneUpcomingCreate.vue'),
+                },
+                {
+                    path: ':id/edit',
+                    name: 'ZoneUpcomingEdit',
+                    meta: {
+                        title: 'upcomingEdit',
+                        icon: 'edit',
+                    },
+                    component: () =>
+                        import('src/pages/Zone/Upcoming/ZoneUpcomingCreate.vue'),
+                },
+            ],
+        },
+    ],
+};
diff --git a/src/router/routes.js b/src/router/routes.js
index 51e726a62..14bf6665f 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -15,6 +15,7 @@ import order from 'src/router/modules/order';
 import entry from 'src/router/modules/entry';
 import roadmap from 'src/router/modules/roadmap';
 import parking from 'src/router/modules/parking';
+import zone from 'src/router/modules/zone';
 
 const routes = [
     {
@@ -71,6 +72,7 @@ const routes = [
             roadmap,
             entry,
             parking,
+            zone,
             {
                 path: '/:catchAll(.*)*',
                 name: 'NotFound',
diff --git a/src/stores/useNavigationStore.js b/src/stores/useNavigationStore.js
index f075301f6..ee1e04e9b 100644
--- a/src/stores/useNavigationStore.js
+++ b/src/stores/useNavigationStore.js
@@ -21,6 +21,7 @@ export const useNavigationStore = defineStore('navigationStore', () => {
         'ticket',
         'worker',
         'wagon',
+        'zone',
     ];
     const pinnedModules = ref([]);
     const role = useRole();

From b4e3157887e6ace9072ba5f686b9d26046bf2360 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 25 Apr 2024 14:28:06 +0200
Subject: [PATCH 2/8] feat #7271 i18n

---
 src/i18n/locale/en.yml | 6 ++++++
 src/i18n/locale/es.yml | 8 +++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index ff57bf968..aa65ce08c 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -1165,6 +1165,12 @@ item:
         type: Type
         intrastat: Intrastat
         origin: Origin
+zone:
+    pageTitles:
+        zones: Zone
+        zonesList: Zones
+        deliveryList: Delivery days
+        upcomingList: Upcoming deliveries
 components:
     topbar: {}
     itemsFilterPanel:
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index f9278a9b0..da421432d 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -287,7 +287,7 @@ customer:
             hasSepaVnl: Recibido B2B VNL
 entry:
     pageTitles:
-        entries: Entradas
+        entries: Entrasdadas
         list: Listado
         summary: Resumen
         basicData: Datos básicos
@@ -1164,6 +1164,12 @@ item:
         type: Tipo
         intrastat: Intrastat
         origin: Origen
+zone:
+    pageTitles:
+        zones: Zona
+        zonesList: Zonas
+        deliveryList: Días de entrega
+        upcomingList: Próximos repartos
 components:
     topbar: {}
     itemsFilterPanel:

From b1871c33fd0ad1eb86f7ca6985af6ec41a770709 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 25 Apr 2024 14:30:16 +0200
Subject: [PATCH 3/8] feat #7271 Zone Components boilerplate

---
 src/pages/Zone/Card/ZoneCard.vue              |   6 +
 .../Zone/Delivery/ZoneDeliveryCreate.vue      | 432 ++++++++++++++++++
 src/pages/Zone/Delivery/ZoneDeliveryList.vue  |  81 ++++
 .../Zone/Upcoming/ZoneUpcomingCreate.vue      | 432 ++++++++++++++++++
 src/pages/Zone/Upcoming/ZoneUpcomingList.vue  |  81 ++++
 src/pages/Zone/ZoneCreate.vue                 | 184 ++++++++
 src/pages/Zone/ZoneList.vue                   |  97 ++++
 src/pages/Zone/ZoneMain.vue                   |  17 +
 8 files changed, 1330 insertions(+)
 create mode 100644 src/pages/Zone/Card/ZoneCard.vue
 create mode 100644 src/pages/Zone/Delivery/ZoneDeliveryCreate.vue
 create mode 100644 src/pages/Zone/Delivery/ZoneDeliveryList.vue
 create mode 100644 src/pages/Zone/Upcoming/ZoneUpcomingCreate.vue
 create mode 100644 src/pages/Zone/Upcoming/ZoneUpcomingList.vue
 create mode 100644 src/pages/Zone/ZoneCreate.vue
 create mode 100644 src/pages/Zone/ZoneList.vue
 create mode 100644 src/pages/Zone/ZoneMain.vue

diff --git a/src/pages/Zone/Card/ZoneCard.vue b/src/pages/Zone/Card/ZoneCard.vue
new file mode 100644
index 000000000..948636c55
--- /dev/null
+++ b/src/pages/Zone/Card/ZoneCard.vue
@@ -0,0 +1,6 @@
+<script setup>
+import VnCard from 'components/common/VnCard.vue';
+</script>
+<template>
+    <VnCard data-key="Zone" base-url="Zones" />
+</template>
diff --git a/src/pages/Zone/Delivery/ZoneDeliveryCreate.vue b/src/pages/Zone/Delivery/ZoneDeliveryCreate.vue
new file mode 100644
index 000000000..a48eaf278
--- /dev/null
+++ b/src/pages/Zone/Delivery/ZoneDeliveryCreate.vue
@@ -0,0 +1,432 @@
+<script setup>
+import { computed, ref, onMounted, onUpdated } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+
+onMounted(() => fetch());
+onUpdated(() => fetch());
+
+const { t } = useI18n();
+const route = useRoute();
+const quasar = useQuasar();
+const router = useRouter();
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+const entityId = computed(() => $props.id || route.params.id);
+
+const zone = ref([]);
+const divisible = ref(false);
+const name = ref('');
+const colorPickerActive = ref(false);
+let originalData = { trays: [] };
+let zoneConfig;
+let zoneDeliveryColors;
+let currentTrayColorPicked;
+
+async function fetch() {
+    try {
+        await axios.get('ZoneConfigs').then(async (res) => {
+            if (res.data) {
+                zoneConfig = res.data[0];
+            }
+        });
+
+        await axios.get(`ZoneDeliveryColors`).then(async (res) => {
+            if (res.data) {
+                zoneDeliveryColors = res.data;
+                if (!entityId.value)
+                    zone.value.push({
+                        id: 0,
+                        position: 0,
+                        color: { ...zoneDeliveryColors[0] },
+                        action: 'add',
+                    });
+                else {
+                    await axios
+                        .get(`ZoneDeliveryTrays`, {
+                            params: { filter: { where: { typeFk: entityId.value } } },
+                        })
+                        .then(async (res) => {
+                            if (res.data) {
+                                for (let i = 0; i < res.data.length; i++) {
+                                    const tray = res.data[i];
+                                    zone.value.push({
+                                        id: res.data.length - i - 1,
+                                        position: tray.height,
+                                        color: {
+                                            ...zoneDeliveryColors.find((color) => {
+                                                return color.id === tray.colorFk;
+                                            }),
+                                        },
+                                        action: tray.height == 0 ? 'add' : 'delete',
+                                    });
+                                }
+                                zone.value.forEach((value) => {
+                                    originalData.trays.push({ ...value });
+                                });
+                            }
+                        });
+                }
+            }
+        });
+
+        if (entityId.value) {
+            await axios.get(`ZoneDeliverys/${entityId.value}`).then((res) => {
+                if (res.data) {
+                    originalData.name = name.value = res.data.name;
+                    originalData.divisible = divisible.value = res.data.divisible;
+                }
+            });
+        }
+    } catch (e) {
+        //
+    }
+}
+
+function addTray() {
+    if (
+        zone.value.find((tray) => {
+            return tray.position == null;
+        })
+    ) {
+        quasar.notify({
+            message: t('zone.warnings.uncompleteTrays'),
+            type: 'warning',
+        });
+        return;
+    }
+
+    if (zone.value.length < zoneConfig.maxTrays) {
+        zone.value.unshift({
+            id: zone.value.length,
+            position: null,
+            color: { ...zoneDeliveryColors[0] },
+            action: 'delete',
+        });
+    } else {
+        quasar.notify({
+            message: t('zone.warnings.maxTrays'),
+            type: 'warning',
+        });
+    }
+}
+
+function deleteTray(trayToDelete) {
+    zone.value = zone.value.filter((tray) => tray.id !== trayToDelete.id);
+    reorderIds();
+}
+
+function reorderIds() {
+    for (let index = zone.value.length - 1; index >= 0; index--) {
+        zone.value[index].id = index;
+    }
+}
+
+async function onSubmit() {
+    try {
+        const path = entityId.value
+            ? 'ZoneDeliverys/editZoneDelivery'
+            : 'ZoneDeliverys/createZoneDelivery';
+
+        const params = {
+            id: entityId.value,
+            name: name.value,
+            divisible: divisible.value,
+            trays: zone.value,
+        };
+
+        await axios.patch(path, params).then((res) => {
+            if (res.status == 204) router.push({ path: `/zone/type/list` });
+        });
+    } catch (error) {
+        //
+    }
+}
+
+function onReset() {
+    name.value = entityId.value ? originalData.name : null;
+    divisible.value = entityId.value ? originalData.divisible : false;
+    zone.value = entityId.value
+        ? [...originalData.trays]
+        : [
+              {
+                  id: 0,
+                  position: 0,
+                  color: { ...zoneDeliveryColors[0] },
+                  action: 'add',
+              },
+          ];
+}
+
+function doAction(tray) {
+    if (tray.action == 'add') {
+        addTray();
+    } else {
+        deleteTray(tray);
+    }
+}
+
+function showColorPicker(tray) {
+    colorPickerActive.value = true;
+    currentTrayColorPicked = zone.value.findIndex((val) => {
+        return val.id === tray.id;
+    });
+}
+
+function updateColor(newColor) {
+    zone.value[currentTrayColorPicked].color = {
+        ...zoneDeliveryColors.find((color) => {
+            return color.rgb === newColor;
+        }),
+    };
+}
+
+function onPositionBlur(tray) {
+    if (tray.position) {
+        if (tray.position == '' || tray.position < 0) {
+            tray.position = null;
+            return;
+        }
+        tray.position = parseInt(tray.position);
+        zone.value.sort((a, b) => b.position - a.position);
+        reorderIds();
+        for (let index = zone.value.length - 1; index > 0; index--) {
+            if (exceedMaxHeight(index - 1)) continue;
+            if (
+                zone.value[index - 1].position - zone.value[index].position >=
+                zoneConfig.minHeightBetweenTrays
+            ) {
+                continue;
+            } else {
+                zone.value[index - 1].position +=
+                    zoneConfig.minHeightBetweenTrays -
+                    (zone.value[index - 1].position - zone.value[index].position);
+
+                quasar.notify({
+                    message:
+                        t('zone.warnings.minHeightBetweenTrays') +
+                        zoneConfig.minHeightBetweenTrays +
+                        ' cm',
+                    type: 'warning',
+                });
+
+                exceedMaxHeight(index - 1);
+            }
+        }
+    }
+}
+
+function exceedMaxHeight(pos) {
+    if (zone.value[pos].position > zoneConfig.maxZoneHeight) {
+        zone.value.splice(pos, 1);
+        quasar.notify({
+            message: t('zone.warnings.maxZoneHeight') + zoneConfig.maxZoneHeight + ' cm',
+            type: 'warning',
+        });
+        return true;
+    }
+    return false;
+}
+</script>
+
+<template>
+    <QPage class="q-pa-sm q-mx-xl">
+        <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
+            <QCard class="q-pa-md">
+                <VnInput
+                    filled
+                    v-model="name"
+                    :label="t('zone.delivery.name')"
+                    :rules="[(val) => !!val || t('zone.warnings.nameNotEmpty')]"
+                />
+                <QCheckbox class="q-mb-sm" v-model="divisible" label="Divisible" />
+                <div class="zone-tray q-mx-lg" v-for="tray in zone" :key="tray.id">
+                    <div class="position">
+                        <QInput
+                            autofocus
+                            filled
+                            type="number"
+                            :class="{ isVisible: tray.action == 'add' }"
+                            v-model="tray.position"
+                            @blur="onPositionBlur(tray)"
+                        >
+                            <QTooltip :delay="2000">
+                                {{
+                                    t('zone.warnings.minHeightBetweenTrays') +
+                                    zoneConfig.minHeightBetweenTrays +
+                                    ' cm'
+                                }}
+                                <QSpace />
+                                {{
+                                    t('zone.warnings.maxZoneHeight') +
+                                    zoneConfig.maxZoneHeight +
+                                    ' cm'
+                                }}
+                            </QTooltip>
+                        </QInput>
+                    </div>
+                    <div class="shelving">
+                        <div class="shelving-half">
+                            <div class="shelving-up"></div>
+                            <div
+                                class="shelving-down"
+                                :style="{ backgroundColor: tray.color.rgb }"
+                                @click="showColorPicker(tray)"
+                            ></div>
+                        </div>
+                        <div
+                            class="shelving-divisible"
+                            :class="{ isVisible: !divisible }"
+                        ></div>
+                        <div class="shelving-half">
+                            <div class="shelving-up"></div>
+                            <div
+                                class="shelving-down"
+                                :style="{ backgroundColor: tray.color.rgb }"
+                                @click="showColorPicker(tray)"
+                            ></div>
+                        </div>
+                    </div>
+                    <div class="action-button">
+                        <QBtn
+                            flat
+                            round
+                            color="primary"
+                            :icon="tray.action"
+                            @click="doAction(tray)"
+                        />
+                    </div>
+                </div>
+                <div class="q-mb-sm wheels">
+                    <QIcon color="grey-6" name="trip_origin" size="xl" />
+                    <QIcon color="grey-6" name="trip_origin" size="xl" />
+                </div>
+                <QDialog
+                    v-model="colorPickerActive"
+                    position="right"
+                    :no-backdrop-dismiss="false"
+                >
+                    <QCard>
+                        <QCardSection>
+                            <div class="text-h6">{{ t('zone.delivery.trayColor') }}</div>
+                        </QCardSection>
+                        <QCardSection class="row items-center no-wrap">
+                            <QColor
+                                flat
+                                v-model="zone[currentTrayColorPicked].color.rgb"
+                                no-header
+                                no-footer
+                                default-view="palette"
+                                :palette="
+                                    zoneDeliveryColors.map((color) => {
+                                        return color.rgb;
+                                    })
+                                "
+                                @change="updateColor($event)"
+                            />
+                            <QBtn flat round icon="close" v-close-popup />
+                        </QCardSection>
+                    </QCard>
+                </QDialog>
+            </QCard>
+            <div class="q-mt-md">
+                <QBtn :label="t('zone.delivery.submit')" type="submit" color="primary" />
+                <QBtn
+                    :label="t('zone.delivery.reset')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                />
+            </div>
+        </QForm>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.q-page {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.q-form {
+    width: 70%;
+}
+
+.q-dialog {
+    .q-card {
+        width: 100%;
+    }
+}
+
+.wheels {
+    margin-left: 5%;
+    display: flex;
+    justify-content: space-around;
+}
+
+.zone-tray {
+    display: flex;
+    height: 6rem;
+
+    .position {
+        width: 20%;
+        border-right: 1rem solid gray;
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-end;
+        padding-right: 1rem;
+    }
+
+    .shelving {
+        display: flex;
+        width: 75%;
+
+        .shelving-half {
+            width: 50%;
+            height: 100%;
+
+            .shelving-up {
+                height: 80%;
+                width: 100%;
+            }
+
+            .shelving-down {
+                height: 20%;
+                width: 100%;
+            }
+        }
+
+        .shelving-divisible {
+            width: 1%;
+            height: 100%;
+            border-left: 0.5rem dashed grey;
+            border-right: 0.5rem dashed grey;
+        }
+    }
+
+    .action-button {
+        width: 10%;
+        border-left: 1rem solid gray;
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-start;
+        padding-left: 1rem;
+    }
+
+    .isVisible {
+        display: none;
+    }
+}
+</style>
diff --git a/src/pages/Zone/Delivery/ZoneDeliveryList.vue b/src/pages/Zone/Delivery/ZoneDeliveryList.vue
new file mode 100644
index 000000000..c7a3cbcdb
--- /dev/null
+++ b/src/pages/Zone/Delivery/ZoneDeliveryList.vue
@@ -0,0 +1,81 @@
+<script setup>
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import { useArrayData } from 'src/composables/useArrayData';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import CardList from 'components/ui/CardList.vue';
+import VnLv from 'components/ui/VnLv.vue';
+
+const quasar = useQuasar();
+const arrayData = useArrayData('ZoneDeliveryList');
+const store = arrayData.store;
+const router = useRouter();
+const { t } = useI18n();
+
+function navigate(id) {
+    router.push({ path: `/zone/type/${id}/edit` });
+}
+
+function create() {
+    router.push({ path: `/zone/type/create` });
+}
+
+async function remove(row) {
+    try {
+        const id = row.id;
+        await axios
+            .delete(`ZoneDeliverys/deleteZoneDelivery`, { params: { id } })
+            .then(async () => {
+                quasar.notify({
+                    message: t('zone.delivery.removeItem'),
+                    type: 'positive',
+                });
+                store.data.splice(store.data.indexOf(row), 1);
+            });
+    } catch (error) {
+        //
+    }
+}
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="ZoneDeliveryList"
+                url="/ZoneDeliverys"
+                order="id DESC"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="(row.name || '').toString()"
+                        :id="row.id"
+                        @click="navigate(row.id)"
+                    >
+                        <template #actions>
+                            <QBtn
+                                :label="t('components.smartCard.openCard')"
+                                @click.stop="navigate(row.id)"
+                                outline
+                            />
+                            <QBtn
+                                :label="t('zone.list.remove')"
+                                @click.stop="remove(row)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+        <QPageSticky position="bottom-right" :offset="[18, 18]">
+            <QBtn @click="create" fab icon="add" color="primary" />
+        </QPageSticky>
+    </QPage>
+</template>
diff --git a/src/pages/Zone/Upcoming/ZoneUpcomingCreate.vue b/src/pages/Zone/Upcoming/ZoneUpcomingCreate.vue
new file mode 100644
index 000000000..6bc04c428
--- /dev/null
+++ b/src/pages/Zone/Upcoming/ZoneUpcomingCreate.vue
@@ -0,0 +1,432 @@
+<script setup>
+import { computed, ref, onMounted, onUpdated } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+
+onMounted(() => fetch());
+onUpdated(() => fetch());
+
+const { t } = useI18n();
+const route = useRoute();
+const quasar = useQuasar();
+const router = useRouter();
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+const entityId = computed(() => $props.id || route.params.id);
+
+const zone = ref([]);
+const divisible = ref(false);
+const name = ref('');
+const colorPickerActive = ref(false);
+let originalData = { trays: [] };
+let zoneConfig;
+let zoneUpcomingColors;
+let currentTrayColorPicked;
+
+async function fetch() {
+    try {
+        await axios.get('ZoneConfigs').then(async (res) => {
+            if (res.data) {
+                zoneConfig = res.data[0];
+            }
+        });
+
+        await axios.get(`ZoneUpcomingColors`).then(async (res) => {
+            if (res.data) {
+                zoneUpcomingColors = res.data;
+                if (!entityId.value)
+                    zone.value.push({
+                        id: 0,
+                        position: 0,
+                        color: { ...zoneUpcomingColors[0] },
+                        action: 'add',
+                    });
+                else {
+                    await axios
+                        .get(`ZoneUpcomingTrays`, {
+                            params: { filter: { where: { typeFk: entityId.value } } },
+                        })
+                        .then(async (res) => {
+                            if (res.data) {
+                                for (let i = 0; i < res.data.length; i++) {
+                                    const tray = res.data[i];
+                                    zone.value.push({
+                                        id: res.data.length - i - 1,
+                                        position: tray.height,
+                                        color: {
+                                            ...zoneUpcomingColors.find((color) => {
+                                                return color.id === tray.colorFk;
+                                            }),
+                                        },
+                                        action: tray.height == 0 ? 'add' : 'delete',
+                                    });
+                                }
+                                zone.value.forEach((value) => {
+                                    originalData.trays.push({ ...value });
+                                });
+                            }
+                        });
+                }
+            }
+        });
+
+        if (entityId.value) {
+            await axios.get(`ZoneUpcomings/${entityId.value}`).then((res) => {
+                if (res.data) {
+                    originalData.name = name.value = res.data.name;
+                    originalData.divisible = divisible.value = res.data.divisible;
+                }
+            });
+        }
+    } catch (e) {
+        //
+    }
+}
+
+function addTray() {
+    if (
+        zone.value.find((tray) => {
+            return tray.position == null;
+        })
+    ) {
+        quasar.notify({
+            message: t('zone.warnings.uncompleteTrays'),
+            type: 'warning',
+        });
+        return;
+    }
+
+    if (zone.value.length < zoneConfig.maxTrays) {
+        zone.value.unshift({
+            id: zone.value.length,
+            position: null,
+            color: { ...zoneUpcomingColors[0] },
+            action: 'delete',
+        });
+    } else {
+        quasar.notify({
+            message: t('zone.warnings.maxTrays'),
+            type: 'warning',
+        });
+    }
+}
+
+function deleteTray(trayToDelete) {
+    zone.value = zone.value.filter((tray) => tray.id !== trayToDelete.id);
+    reorderIds();
+}
+
+function reorderIds() {
+    for (let index = zone.value.length - 1; index >= 0; index--) {
+        zone.value[index].id = index;
+    }
+}
+
+async function onSubmit() {
+    try {
+        const path = entityId.value
+            ? 'ZoneUpcomings/editZoneUpcoming'
+            : 'ZoneUpcomings/createZoneUpcoming';
+
+        const params = {
+            id: entityId.value,
+            name: name.value,
+            divisible: divisible.value,
+            trays: zone.value,
+        };
+
+        await axios.patch(path, params).then((res) => {
+            if (res.status == 204) router.push({ path: `/zone/type/list` });
+        });
+    } catch (error) {
+        //
+    }
+}
+
+function onReset() {
+    name.value = entityId.value ? originalData.name : null;
+    divisible.value = entityId.value ? originalData.divisible : false;
+    zone.value = entityId.value
+        ? [...originalData.trays]
+        : [
+              {
+                  id: 0,
+                  position: 0,
+                  color: { ...zoneUpcomingColors[0] },
+                  action: 'add',
+              },
+          ];
+}
+
+function doAction(tray) {
+    if (tray.action == 'add') {
+        addTray();
+    } else {
+        deleteTray(tray);
+    }
+}
+
+function showColorPicker(tray) {
+    colorPickerActive.value = true;
+    currentTrayColorPicked = zone.value.findIndex((val) => {
+        return val.id === tray.id;
+    });
+}
+
+function updateColor(newColor) {
+    zone.value[currentTrayColorPicked].color = {
+        ...zoneUpcomingColors.find((color) => {
+            return color.rgb === newColor;
+        }),
+    };
+}
+
+function onPositionBlur(tray) {
+    if (tray.position) {
+        if (tray.position == '' || tray.position < 0) {
+            tray.position = null;
+            return;
+        }
+        tray.position = parseInt(tray.position);
+        zone.value.sort((a, b) => b.position - a.position);
+        reorderIds();
+        for (let index = zone.value.length - 1; index > 0; index--) {
+            if (exceedMaxHeight(index - 1)) continue;
+            if (
+                zone.value[index - 1].position - zone.value[index].position >=
+                zoneConfig.minHeightBetweenTrays
+            ) {
+                continue;
+            } else {
+                zone.value[index - 1].position +=
+                    zoneConfig.minHeightBetweenTrays -
+                    (zone.value[index - 1].position - zone.value[index].position);
+
+                quasar.notify({
+                    message:
+                        t('zone.warnings.minHeightBetweenTrays') +
+                        zoneConfig.minHeightBetweenTrays +
+                        ' cm',
+                    type: 'warning',
+                });
+
+                exceedMaxHeight(index - 1);
+            }
+        }
+    }
+}
+
+function exceedMaxHeight(pos) {
+    if (zone.value[pos].position > zoneConfig.maxZoneHeight) {
+        zone.value.splice(pos, 1);
+        quasar.notify({
+            message: t('zone.warnings.maxZoneHeight') + zoneConfig.maxZoneHeight + ' cm',
+            type: 'warning',
+        });
+        return true;
+    }
+    return false;
+}
+</script>
+
+<template>
+    <QPage class="q-pa-sm q-mx-xl">
+        <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
+            <QCard class="q-pa-md">
+                <VnInput
+                    filled
+                    v-model="name"
+                    :label="t('zone.upcoming.name')"
+                    :rules="[(val) => !!val || t('zone.warnings.nameNotEmpty')]"
+                />
+                <QCheckbox class="q-mb-sm" v-model="divisible" label="Divisible" />
+                <div class="zone-tray q-mx-lg" v-for="tray in zone" :key="tray.id">
+                    <div class="position">
+                        <QInput
+                            autofocus
+                            filled
+                            type="number"
+                            :class="{ isVisible: tray.action == 'add' }"
+                            v-model="tray.position"
+                            @blur="onPositionBlur(tray)"
+                        >
+                            <QTooltip :delay="2000">
+                                {{
+                                    t('zone.warnings.minHeightBetweenTrays') +
+                                    zoneConfig.minHeightBetweenTrays +
+                                    ' cm'
+                                }}
+                                <QSpace />
+                                {{
+                                    t('zone.warnings.maxZoneHeight') +
+                                    zoneConfig.maxZoneHeight +
+                                    ' cm'
+                                }}
+                            </QTooltip>
+                        </QInput>
+                    </div>
+                    <div class="shelving">
+                        <div class="shelving-half">
+                            <div class="shelving-up"></div>
+                            <div
+                                class="shelving-down"
+                                :style="{ backgroundColor: tray.color.rgb }"
+                                @click="showColorPicker(tray)"
+                            ></div>
+                        </div>
+                        <div
+                            class="shelving-divisible"
+                            :class="{ isVisible: !divisible }"
+                        ></div>
+                        <div class="shelving-half">
+                            <div class="shelving-up"></div>
+                            <div
+                                class="shelving-down"
+                                :style="{ backgroundColor: tray.color.rgb }"
+                                @click="showColorPicker(tray)"
+                            ></div>
+                        </div>
+                    </div>
+                    <div class="action-button">
+                        <QBtn
+                            flat
+                            round
+                            color="primary"
+                            :icon="tray.action"
+                            @click="doAction(tray)"
+                        />
+                    </div>
+                </div>
+                <div class="q-mb-sm wheels">
+                    <QIcon color="grey-6" name="trip_origin" size="xl" />
+                    <QIcon color="grey-6" name="trip_origin" size="xl" />
+                </div>
+                <QDialog
+                    v-model="colorPickerActive"
+                    position="right"
+                    :no-backdrop-dismiss="false"
+                >
+                    <QCard>
+                        <QCardSection>
+                            <div class="text-h6">{{ t('zone.upcoming.trayColor') }}</div>
+                        </QCardSection>
+                        <QCardSection class="row items-center no-wrap">
+                            <QColor
+                                flat
+                                v-model="zone[currentTrayColorPicked].color.rgb"
+                                no-header
+                                no-footer
+                                default-view="palette"
+                                :palette="
+                                    zoneUpcomingColors.map((color) => {
+                                        return color.rgb;
+                                    })
+                                "
+                                @change="updateColor($event)"
+                            />
+                            <QBtn flat round icon="close" v-close-popup />
+                        </QCardSection>
+                    </QCard>
+                </QDialog>
+            </QCard>
+            <div class="q-mt-md">
+                <QBtn :label="t('zone.upcoming.submit')" type="submit" color="primary" />
+                <QBtn
+                    :label="t('zone.upcoming.reset')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                />
+            </div>
+        </QForm>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.q-page {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.q-form {
+    width: 70%;
+}
+
+.q-dialog {
+    .q-card {
+        width: 100%;
+    }
+}
+
+.wheels {
+    margin-left: 5%;
+    display: flex;
+    justify-content: space-around;
+}
+
+.zone-tray {
+    display: flex;
+    height: 6rem;
+
+    .position {
+        width: 20%;
+        border-right: 1rem solid gray;
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-end;
+        padding-right: 1rem;
+    }
+
+    .shelving {
+        display: flex;
+        width: 75%;
+
+        .shelving-half {
+            width: 50%;
+            height: 100%;
+
+            .shelving-up {
+                height: 80%;
+                width: 100%;
+            }
+
+            .shelving-down {
+                height: 20%;
+                width: 100%;
+            }
+        }
+
+        .shelving-divisible {
+            width: 1%;
+            height: 100%;
+            border-left: 0.5rem dashed grey;
+            border-right: 0.5rem dashed grey;
+        }
+    }
+
+    .action-button {
+        width: 10%;
+        border-left: 1rem solid gray;
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-start;
+        padding-left: 1rem;
+    }
+
+    .isVisible {
+        display: none;
+    }
+}
+</style>
diff --git a/src/pages/Zone/Upcoming/ZoneUpcomingList.vue b/src/pages/Zone/Upcoming/ZoneUpcomingList.vue
new file mode 100644
index 000000000..5c417df8f
--- /dev/null
+++ b/src/pages/Zone/Upcoming/ZoneUpcomingList.vue
@@ -0,0 +1,81 @@
+<script setup>
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import { useArrayData } from 'src/composables/useArrayData';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import CardList from 'components/ui/CardList.vue';
+import VnLv from 'components/ui/VnLv.vue';
+
+const quasar = useQuasar();
+const arrayData = useArrayData('ZoneUpcomingList');
+const store = arrayData.store;
+const router = useRouter();
+const { t } = useI18n();
+
+function navigate(id) {
+    router.push({ path: `/zone/type/${id}/edit` });
+}
+
+function create() {
+    router.push({ path: `/zone/type/create` });
+}
+
+async function remove(row) {
+    try {
+        const id = row.id;
+        await axios
+            .delete(`ZoneUpcomings/deleteZoneUpcoming`, { params: { id } })
+            .then(async () => {
+                quasar.notify({
+                    message: t('zone.upcoming.removeItem'),
+                    type: 'positive',
+                });
+                store.data.splice(store.data.indexOf(row), 1);
+            });
+    } catch (error) {
+        //
+    }
+}
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="ZoneUpcomingList"
+                url="/ZoneUpcomings"
+                order="id DESC"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="(row.name || '').toString()"
+                        :id="row.id"
+                        @click="navigate(row.id)"
+                    >
+                        <template #actions>
+                            <QBtn
+                                :label="t('components.smartCard.openCard')"
+                                @click.stop="navigate(row.id)"
+                                outline
+                            />
+                            <QBtn
+                                :label="t('zone.list.remove')"
+                                @click.stop="remove(row)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+        <QPageSticky position="bottom-right" :offset="[18, 18]">
+            <QBtn @click="create" fab icon="add" color="primary" />
+        </QPageSticky>
+    </QPage>
+</template>
diff --git a/src/pages/Zone/ZoneCreate.vue b/src/pages/Zone/ZoneCreate.vue
new file mode 100644
index 000000000..8c0ba8c17
--- /dev/null
+++ b/src/pages/Zone/ZoneCreate.vue
@@ -0,0 +1,184 @@
+<script setup>
+import { computed, onMounted, onUpdated, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { QIcon, QInput, QItem, QItemSection, QSelect } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useRoute, useRouter } from 'vue-router';
+import axios from 'axios';
+
+onMounted(() => fetch());
+onUpdated(() => fetch());
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+const entityId = computed(() => $props.id || route.params.id);
+
+let zoneTypes = [];
+let originalData = {};
+const zone = ref({});
+const filteredZoneTypes = ref(zoneTypes);
+
+async function onSubmit() {
+    try {
+        const params = {
+            id: entityId.value,
+            label: zone.value.label,
+            plate: zone.value.plate,
+            volume: zone.value.volume,
+            typeFk: zone.value.typeFk,
+        };
+        await axios.patch('Zones', params).then((res) => {
+            if (res.status == 200) router.push({ path: `/zone/list` });
+        });
+    } catch (error) {
+        //
+    }
+}
+
+async function onReset() {
+    if (entityId.value) {
+        zone.value = { ...originalData };
+    } else {
+        zone.value = {};
+    }
+}
+
+async function fetch() {
+    try {
+        await axios.get('ZoneTypes').then(async (res) => {
+            if (res.data) {
+                filteredZoneTypes.value = zoneTypes = res.data;
+            }
+        });
+        if (entityId.value) {
+            await axios.get(`Zones/${entityId.value}`).then(async (res) => {
+                const data = res.data;
+                if (data) {
+                    zone.value.label = data.label;
+                    zone.value.plate = data.plate;
+                    zone.value.volume = data.volume;
+                    zone.value.typeFk = data.typeFk;
+                    originalData = { ...zone.value };
+                }
+            });
+        }
+    } catch (e) {
+        //
+    }
+}
+
+function filterType(val, update) {
+    update(() => {
+        const needle = val.toLowerCase();
+        filteredZoneTypes.value = zoneTypes.filter(
+            (v) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    });
+}
+</script>
+
+<template>
+    <QPage class="q-pa-sm q-mx-xl">
+        <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
+            <QCard class="q-pa-md">
+                <div class="row q-col-gutter-md">
+                    <div class="col">
+                        <QInput
+                            filled
+                            v-model="zone.label"
+                            :label="t('zone.create.label')"
+                            type="number"
+                            min="0"
+                            :rules="[(val) => !!val || t('zone.warnings.labelNotEmpty')]"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnInput
+                            filled
+                            v-model="zone.plate"
+                            :label="t('zone.create.plate')"
+                            :rules="[(val) => !!val || t('zone.warnings.plateNotEmpty')]"
+                        />
+                    </div>
+                </div>
+                <div class="row q-col-gutter-md">
+                    <div class="col">
+                        <QInput
+                            filled
+                            v-model="zone.volume"
+                            :label="t('zone.create.volume')"
+                            type="number"
+                            min="0"
+                            :rules="[(val) => !!val || t('zone.warnings.volumeNotEmpty')]"
+                        />
+                    </div>
+                    <div class="col">
+                        <QSelect
+                            filled
+                            v-model="zone.typeFk"
+                            use-input
+                            fill-input
+                            hide-selected
+                            input-debounce="0"
+                            option-label="name"
+                            option-value="id"
+                            emit-value
+                            map-options
+                            :label="t('zone.create.type')"
+                            :options="filteredZoneTypes"
+                            :rules="[(val) => !!val || t('zone.warnings.typeNotEmpty')]"
+                            @filter="filterType"
+                        >
+                            <template v-if="zone.typeFk" #append>
+                                <QIcon
+                                    name="cancel"
+                                    @click.stop.prevent="zone.typeFk = null"
+                                    class="cursor-pointer"
+                                />
+                            </template>
+                            <template #no-option>
+                                <QItem>
+                                    <QItemSection class="text-grey">
+                                        {{ t('zone.warnings.noData') }}
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </QSelect>
+                    </div>
+                </div>
+            </QCard>
+            <div class="q-mt-md">
+                <QBtn :label="t('zone.type.submit')" type="submit" color="primary" />
+                <QBtn
+                    :label="t('zone.type.reset')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                />
+            </div>
+        </QForm>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.q-page {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.q-form {
+    width: 70%;
+}
+</style>
diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
new file mode 100644
index 000000000..00502e1f7
--- /dev/null
+++ b/src/pages/Zone/ZoneList.vue
@@ -0,0 +1,97 @@
+<script setup>
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import { useArrayData } from 'src/composables/useArrayData';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import CardList from 'components/ui/CardList.vue';
+import VnLv from 'components/ui/VnLv.vue';
+
+const quasar = useQuasar();
+const arrayData = useArrayData('ZoneList');
+const store = arrayData.store;
+const router = useRouter();
+const { t } = useI18n();
+
+const filter = {
+    include: {
+        relation: 'type',
+        scope: {
+            fields: 'name',
+        },
+    },
+};
+
+function navigate(id) {
+    router.push({ path: `/zone/${id}/edit` });
+}
+
+function create() {
+    router.push({ path: `/zone/create` });
+}
+
+async function remove(row) {
+    try {
+        await axios.delete(`Zones/${row.id}`).then(async () => {
+            quasar.notify({
+                message: t('zone.list.removeItem'),
+                type: 'positive',
+            });
+            store.data.splice(store.data.indexOf(row), 1);
+        });
+    } catch (error) {
+        //
+    }
+}
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="ZoneList"
+                url="/Zones"
+                order="id DESC"
+                :filter="filter"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="(row.label || '').toString()"
+                        :id="row.id"
+                        @click="navigate(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv
+                                :label="t('zone.list.plate')"
+                                :title-label="t('zone.list.plate')"
+                                :value="row.plate"
+                            />
+                            <VnLv :label="t('zone.list.volume')" :value="row?.volume" />
+                            <VnLv :label="t('zone.list.type')" :value="row?.type?.name" />
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('components.smartCard.openCard')"
+                                @click.stop="navigate(row.id)"
+                                outline
+                            />
+                            <QBtn
+                                :label="t('zone.list.remove')"
+                                @click.stop="remove(row)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+        <QPageSticky position="bottom-right" :offset="[18, 18]">
+            <QBtn @click="create" fab icon="add" color="primary" />
+        </QPageSticky>
+    </QPage>
+</template>
diff --git a/src/pages/Zone/ZoneMain.vue b/src/pages/Zone/ZoneMain.vue
new file mode 100644
index 000000000..66ce78f23
--- /dev/null
+++ b/src/pages/Zone/ZoneMain.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+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>

From f14d6310514c949c81de6ac07083dd686e37e87b Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 25 Apr 2024 14:32:42 +0200
Subject: [PATCH 4/8] feat #7271 ZoneDescriptor

---
 src/pages/Zone/Card/ZoneDescriptor.vue        | 127 ++++++++++++++++++
 .../Zone/Card/ZoneDescriptorMenuItems.vue     | 108 +++++++++++++++
 src/pages/Zone/Card/ZoneDescriptorProxy.vue   |  16 +++
 3 files changed, 251 insertions(+)
 create mode 100644 src/pages/Zone/Card/ZoneDescriptor.vue
 create mode 100644 src/pages/Zone/Card/ZoneDescriptorMenuItems.vue
 create mode 100644 src/pages/Zone/Card/ZoneDescriptorProxy.vue

diff --git a/src/pages/Zone/Card/ZoneDescriptor.vue b/src/pages/Zone/Card/ZoneDescriptor.vue
new file mode 100644
index 000000000..665cb6f0e
--- /dev/null
+++ b/src/pages/Zone/Card/ZoneDescriptor.vue
@@ -0,0 +1,127 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import ZoneDescriptorMenuItems from './ZoneDescriptorMenuItems.vue';
+
+import useCardDescription from 'src/composables/useCardDescription';
+import { toDate } from 'src/filters';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const { t } = useI18n();
+
+const filter = {
+    fields: [
+        'id',
+        'ref',
+        'shipped',
+        'landed',
+        'totalEntries',
+        'warehouseInFk',
+        'warehouseOutFk',
+        'cargoSupplierFk',
+        'agencyModeFk',
+    ],
+    include: [
+        {
+            relation: 'warehouseIn',
+            scope: {
+                fields: ['name'],
+            },
+        },
+        {
+            relation: 'warehouseOut',
+            scope: {
+                fields: ['name'],
+            },
+        },
+    ],
+};
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const data = ref(useCardDescription());
+
+const setData = (entity) => {
+    data.value = useCardDescription(entity.ref, entity.id);
+};
+</script>
+
+<template>
+    <CardDescriptor
+        module="Zone"
+        :url="`Zones/${entityId}`"
+        :title="data.title"
+        :subtitle="data.subtitle"
+        :filter="filter"
+        @on-fetch="setData"
+        data-key="travelData"
+    >
+        <template #header-extra-action>
+            <QBtn
+                round
+                flat
+                dense
+                size="md"
+                icon="local_airport"
+                color="white"
+                class="link"
+                :to="{ name: 'ZoneList' }"
+            >
+                <QTooltip>
+                    {{ t('Go to module index') }}
+                </QTooltip>
+            </QBtn>
+        </template>
+        <template #menu="{ entity }">
+            <ZoneDescriptorMenuItems :travel="entity" />
+        </template>
+        <template #body="{ entity }">
+            <VnLv :label="t('globals.wareHouseIn')" :value="entity.warehouseIn.name" />
+            <VnLv :label="t('globals.wareHouseOut')" :value="entity.warehouseOut.name" />
+            <VnLv :label="t('globals.shipped')" :value="toDate(entity.shipped)" />
+            <VnLv :label="t('globals.landed')" :value="toDate(entity.landed)" />
+            <VnLv :label="t('globals.totalEntries')" :value="entity.totalEntries" />
+        </template>
+        <template #actions="{ entity }">
+            <QCardActions>
+                <QBtn
+                    :to="{
+                        name: 'ZoneList',
+                        query: {
+                            params: JSON.stringify({
+                                agencyModeFk: entity.agencyModeFk,
+                            }),
+                        },
+                    }"
+                    size="md"
+                    icon="local_airport"
+                    color="primary"
+                >
+                    <QTooltip>{{ t('All travels with current agency') }}</QTooltip>
+                </QBtn>
+            </QCardActions>
+        </template>
+    </CardDescriptor>
+</template>
+
+<i18n>
+es:
+    Go to module index: Ir al índice del módulo
+    The travel will be deleted: El envío será eliminado
+    Do you want to delete this travel?: ¿Quieres eliminar este envío?
+    All travels with current agency: Todos los envíos con la agencia actual
+</i18n>
diff --git a/src/pages/Zone/Card/ZoneDescriptorMenuItems.vue b/src/pages/Zone/Card/ZoneDescriptorMenuItems.vue
new file mode 100644
index 000000000..920d83dfe
--- /dev/null
+++ b/src/pages/Zone/Card/ZoneDescriptorMenuItems.vue
@@ -0,0 +1,108 @@
+<script setup>
+import { computed } from 'vue';
+import { useQuasar } from 'quasar';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import VnConfirm from 'components/ui/VnConfirm.vue';
+
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+import { useRole } from 'src/composables/useRole';
+
+const $props = defineProps({
+    travel: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const { t } = useI18n();
+const router = useRouter();
+const quasar = useQuasar();
+const { notify } = useNotify();
+const role = useRole();
+
+const redirectToCreateView = (queryParams) => {
+    router.push({ name: 'ZoneCreate', query: { travelData: queryParams } });
+};
+
+const cloneZone = () => {
+    const stringifiedZoneData = JSON.stringify($props.travel);
+    redirectToCreateView(stringifiedZoneData);
+};
+
+const cloneZoneWithEntries = () => {
+    try {
+        axios.post(`Zones/${$props.travel.id}/cloneWithEntries`);
+        notify('globals.dataSaved', 'positive');
+    } catch (err) {
+        console.err('Error cloning travel with entries');
+    }
+};
+
+const isBuyer = computed(() => {
+    return role.hasAny(['buyer']);
+});
+
+const openDeleteEntryDialog = (id) => {
+    quasar
+        .dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('The travel will be deleted'),
+                message: t('Do you want to delete this travel?'),
+            },
+        })
+        .onOk(async () => {
+            await deleteZone(id);
+        });
+};
+
+const deleteZone = async (id) => {
+    try {
+        await axios.delete(`Zones/${id}`);
+        router.push({ name: 'ZoneList' });
+        notify('globals.dataDeleted', 'positive');
+    } catch (err) {
+        console.error('Error deleting travel');
+    }
+};
+</script>
+
+<template>
+    <QItem v-ripple clickable @click="cloneZone(travel)">
+        <QItemSection>{{ t('travel.summary.cloneShipping') }}</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable @click="cloneZoneWithEntries()">
+        <QItemSection>
+            {{ t('travel.summary.CloneZoneAndEntries') }}
+        </QItemSection>
+    </QItem>
+    <QItem
+        v-if="isBuyer && travel.totalEntries === 0"
+        v-ripple
+        clickable
+        @click="openDeleteEntryDialog(travel.id)"
+    >
+        <QItemSection>
+            {{ t('travel.summary.deleteZone') }}
+        </QItemSection>
+    </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection>
+            <RouterLink
+                :to="{ name: 'EntryCreate', query: { travelFk: travel.id } }"
+                class="color-vn-text"
+            >
+                {{ t('travel.summary.AddEntry') }}
+            </RouterLink>
+        </QItemSection>
+    </QItem>
+</template>
+
+<i18n>
+es:
+    The travel will be deleted: El envío será eliminado
+    Do you want to delete this travel?: ¿Quieres eliminar este envío?
+</i18n>
diff --git a/src/pages/Zone/Card/ZoneDescriptorProxy.vue b/src/pages/Zone/Card/ZoneDescriptorProxy.vue
new file mode 100644
index 000000000..15c5fb0e5
--- /dev/null
+++ b/src/pages/Zone/Card/ZoneDescriptorProxy.vue
@@ -0,0 +1,16 @@
+<script setup>
+import ZoneDescriptor from './ZoneDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <QPopupProxy>
+        <ZoneDescriptor v-if="$props.id" :id="$props.id" />
+    </QPopupProxy>
+</template>

From cb0d7214650b02e1ab5a7af4e348e037a03b8e84 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 2 May 2024 14:40:56 +0200
Subject: [PATCH 5/8] feat: zoneSummary

---
 src/pages/Zone/Card/ZoneSummary.vue | 94 +++++++++++++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 src/pages/Zone/Card/ZoneSummary.vue

diff --git a/src/pages/Zone/Card/ZoneSummary.vue b/src/pages/Zone/Card/ZoneSummary.vue
new file mode 100644
index 000000000..00df03cb0
--- /dev/null
+++ b/src/pages/Zone/Card/ZoneSummary.vue
@@ -0,0 +1,94 @@
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { dashIfEmpty } from 'src/filters';
+import { getUrl } from 'src/composables/getUrl';
+import VnLv from 'src/components/ui/VnLv.vue';
+import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
+import CardSummary from 'components/ui/CardSummary.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const entityId = computed(() => $props.id || route.params.id);
+const zoneUrl = ref();
+
+onMounted(async () => {
+    zoneUrl.value = (await getUrl('')) + `zone/${entityId.value}/`;
+});
+
+const filter = computed(() => {
+    return { where: { id: entityId.value } };
+});
+</script>
+
+<template>
+    <CardSummary
+        data-key="zoneData"
+        ref="summary"
+        :url="`Zones/summary`"
+        :filter="filter"
+    >
+        <template #header="{ entity }">
+            <div>{{ entity.id }} - {{ entity.firstName }} {{ entity.lastName }}</div>
+        </template>
+        <template #body="{ entity: zone }">
+            <QCard class="vn-one">
+                <VnTitle
+                    :url="zoneUrl + `basic-data`"
+                    :text="t('zone.summary.basicData')"
+                />
+                <VnLv :label="t('zone.card.name')" :value="zone.user?.nickname" />
+                <VnLv
+                    :label="t('zone.list.department')"
+                    :value="zone.department?.department?.name"
+                />
+                <VnLv :label="t('zone.list.email')" :value="zone.user.email" copy />
+                <VnLv :label="t('zone.summary.boss')" link>
+                    <template #value>
+                        <VnUserLink
+                            v-if="zone.boss"
+                            :name="dashIfEmpty(zone.boss?.name)"
+                            :zone-id="zone.bossFk"
+                        />
+                    </template>
+                </VnLv>
+                <VnLv :value="zone.mobileExtension">
+                    <template #label>
+                        {{ t('zone.summary.phoneExtension') }}
+                        <VnLinkPhone :phone-number="zone.mobileExtension" />
+                    </template>
+                </VnLv>
+                <VnLv :value="zone.phone">
+                    <template #label>
+                        {{ t('zone.summary.entPhone') }}
+                        <VnLinkPhone :phone-number="zone.phone" />
+                    </template>
+                </VnLv>
+                <VnLv :label="t('zone.summary.locker')" :value="zone.locker" />
+            </QCard>
+            <QCard class="vn-one">
+                <VnTitle :text="t('zone.summary.userData')" />
+                <VnLv :label="t('zone.summary.userId')" :value="zone.user.id" />
+                <VnLv :label="t('zone.card.name')" :value="zone.user.nickname" />
+                <VnLv :label="t('zone.summary.role')" :value="zone.user.role.name" />
+                <VnLv :value="zone?.sip?.extension">
+                    <template #label>
+                        {{ t('zone.summary.sipExtension') }}
+                        <VnLinkPhone :phone-number="zone?.sip?.extension" />
+                    </template>
+                </VnLv>
+            </QCard>
+        </template>
+    </CardSummary>
+</template>

From 1a5f2fbea2a7c821ca7d9e70fa5224f6a82dc22f Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 3 May 2024 12:30:53 +0200
Subject: [PATCH 6/8] feat: refs #7271 advanced structure

---
 src/i18n/locale/en.yml                       |   4 +
 src/i18n/locale/es.yml                       |   6 +-
 src/pages/Zone/Card/ZoneBasicData.vue        | 103 +++++++++++++++++++
 src/pages/Zone/Card/ZoneCalendar.vue         |   0
 src/pages/Zone/Card/ZoneLocations.vue        |   0
 src/pages/Zone/Card/ZoneLog.vue              |   6 ++
 src/pages/Zone/Card/ZoneSummary.vue          |   3 +
 src/pages/Zone/Card/ZoneWarehouses.vue       |  59 +++++++++++
 src/pages/Zone/Delivery/ZoneDeliveryList.vue |   3 +-
 src/pages/Zone/Upcoming/ZoneUpcomingList.vue |   3 +-
 src/pages/Zone/ZoneCreate.vue                |   8 +-
 src/pages/Zone/ZoneDeliveryDays.vue          |   0
 src/pages/Zone/ZoneFilterPanel.vue           |  55 ++++++++++
 src/pages/Zone/ZoneList.vue                  |  67 +++++++-----
 src/pages/Zone/ZoneUpcoming.vue              |  53 ++++++++++
 src/pages/Zone/locale/en.yml                 |  19 ++++
 src/pages/Zone/locale/es.yml                 |  19 ++++
 17 files changed, 376 insertions(+), 32 deletions(-)
 create mode 100644 src/pages/Zone/Card/ZoneBasicData.vue
 create mode 100644 src/pages/Zone/Card/ZoneCalendar.vue
 create mode 100644 src/pages/Zone/Card/ZoneLocations.vue
 create mode 100644 src/pages/Zone/Card/ZoneLog.vue
 create mode 100644 src/pages/Zone/Card/ZoneSummary.vue
 create mode 100644 src/pages/Zone/Card/ZoneWarehouses.vue
 create mode 100644 src/pages/Zone/ZoneDeliveryDays.vue
 create mode 100644 src/pages/Zone/ZoneFilterPanel.vue
 create mode 100644 src/pages/Zone/ZoneUpcoming.vue
 create mode 100644 src/pages/Zone/locale/en.yml
 create mode 100644 src/pages/Zone/locale/es.yml

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index aa65ce08c..a580f2553 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -90,6 +90,10 @@ globals:
         basicData: Basic data
         log: Logs
         parkingList: Parkings list
+        zones: Zones
+        zonesList: Zones
+        deliveryList: Delivery days
+        upcomingList: Upcoming deliveries
     created: Created
     worker: Worker
     now: Now
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index da421432d..ef7ebf22b 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -90,6 +90,10 @@ globals:
         basicData: Datos básicos
         log: Historial
         parkingList: Listado de parkings
+        zones: Zonas
+        zonesList: Zonas
+        deliveryList: Días de entrega
+        upcomingList: Próximos repartos
     created: Fecha creación
     worker: Trabajador
     now: Ahora
@@ -287,7 +291,7 @@ customer:
             hasSepaVnl: Recibido B2B VNL
 entry:
     pageTitles:
-        entries: Entrasdadas
+        entries: Entradas
         list: Listado
         summary: Resumen
         basicData: Datos básicos
diff --git a/src/pages/Zone/Card/ZoneBasicData.vue b/src/pages/Zone/Card/ZoneBasicData.vue
new file mode 100644
index 000000000..5d57b920e
--- /dev/null
+++ b/src/pages/Zone/Card/ZoneBasicData.vue
@@ -0,0 +1,103 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'src/components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import { QCheckbox } from 'quasar';
+
+const route = useRoute();
+const { t } = useI18n();
+const zoneFilter = {
+    include: [
+        {
+            relation: 'agency',
+            scope: {
+                fields: ['name'],
+                include: { relation: 'agencyModeFk', scope: { fields: ['id'] } },
+            },
+        },
+        { relation: 'sip', scope: { fields: ['extension', 'secret'] } },
+        { relation: 'department', scope: { include: { relation: 'department' } } },
+        { relation: 'client', scope: { fields: ['phone'] } },
+    ],
+};
+const agencyFilter = {
+    fields: ['id', 'name'],
+    order: 'name ASC',
+    limit: 30,
+};
+</script>
+
+<template>
+    <FetchData
+        :filter="agencyFilter"
+        @on-fetch="(data) => (agencyOptions = data)"
+        auto-load
+        url="agencies"
+    />
+    <FetchData
+        :filter="zoneFilter"
+        @on-fetch="(data) => (zoneOptions = data)"
+        auto-load
+        url="zones"
+    />
+
+    <FormModel
+        :filter="zoneFilter"
+        :url="`zone/${route.params.id}/basic-data`"
+        auto-load
+        model="Zone"
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput :label="t('Name')" clearable v-model="data.zone.name" />
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput v-model="data.agency.name" :label="t('Agency')" clearable />
+                <VnInput v-model="data.zone.itemMaxSize" :label="t('Max m³')" clearable />
+                <VnInput v-model="data.zone.m3Max" :label="t('Maximum m³')" clearable />
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    v-model="data.zone.travelingDays"
+                    :label="t('Traveling days')"
+                    clearable
+                />
+                <VnInput v-model="data.zone.hour" :label="t('Closing')" clearable />
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput v-model="data.zone.price" :label="t('Price')" clearable />
+                <VnInput v-model="data.zone.bonus" :label="t('Bonus')" clearable />
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    v-model="data.zone.inflation"
+                    :label="t('Inflation')"
+                    clearable
+                />
+                <QCheckbox v-model="data.zone.isVolumetric" :label="t('Volumetric')" />
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
+
+<i18n>
+es:
+    Name: Nombre
+    Agency: Agencia
+    Max m³: Medida máxima
+    Maximum m³: M³ maximo
+    Traveling days: Dias de viaje
+    Closing: Cierre
+    Price: Precio
+    Bonus: Bonificación
+    Inflation: Inflación
+    Volumetric: Volumétrico
+</i18n>
diff --git a/src/pages/Zone/Card/ZoneCalendar.vue b/src/pages/Zone/Card/ZoneCalendar.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pages/Zone/Card/ZoneLocations.vue b/src/pages/Zone/Card/ZoneLocations.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pages/Zone/Card/ZoneLog.vue b/src/pages/Zone/Card/ZoneLog.vue
new file mode 100644
index 000000000..373d210b5
--- /dev/null
+++ b/src/pages/Zone/Card/ZoneLog.vue
@@ -0,0 +1,6 @@
+<script setup>
+import VnLog from 'src/components/common/VnLog.vue';
+</script>
+<template>
+    <VnLog model="Zone" url="/ZoneLogs"></VnLog>
+</template>
diff --git a/src/pages/Zone/Card/ZoneSummary.vue b/src/pages/Zone/Card/ZoneSummary.vue
new file mode 100644
index 000000000..63090b5d4
--- /dev/null
+++ b/src/pages/Zone/Card/ZoneSummary.vue
@@ -0,0 +1,3 @@
+<template>
+    <div>Si</div>
+</template>
diff --git a/src/pages/Zone/Card/ZoneWarehouses.vue b/src/pages/Zone/Card/ZoneWarehouses.vue
new file mode 100644
index 000000000..67a81ba4d
--- /dev/null
+++ b/src/pages/Zone/Card/ZoneWarehouses.vue
@@ -0,0 +1,59 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import CardList from 'components/CardList.vue';
+import VnLv from 'components/ui/VnLv.vue';
+
+const route = useRoute();
+
+function deleteWarehouse() {
+    let row = this.deleteRow;
+    if (!row) return;
+    return this.$http.delete(`${this.path}/${row.id}`).then(() => {
+        let index = this.$.data.indexOf(row);
+        if (index !== -1) this.$.data.splice(index, 1);
+        this.deleteRow = null;
+    });
+}
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="ZoneWarehouses"
+                :url="`Zones/${route.params.id}/warehouses`"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="row.name"
+                        :id="row.id"
+                    >
+                        <template #list-items>
+                            <VnLv :value="row.name" />
+                            <QIcon
+                                name="delete"
+                                size="sm"
+                                class="cursor-pointer"
+                                color="primary"
+                                @click="deleteWarehouse()"
+                            >
+                                <QTooltip>
+                                    {{ t('Remove row') }}
+                                </QTooltip>
+                            </QIcon>
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
+
+<i18n>
+    es:
+        Remove row: Eliminar fila
+</i18n>
diff --git a/src/pages/Zone/Delivery/ZoneDeliveryList.vue b/src/pages/Zone/Delivery/ZoneDeliveryList.vue
index c7a3cbcdb..695388a9b 100644
--- a/src/pages/Zone/Delivery/ZoneDeliveryList.vue
+++ b/src/pages/Zone/Delivery/ZoneDeliveryList.vue
@@ -6,7 +6,6 @@ import { useArrayData } from 'src/composables/useArrayData';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import CardList from 'components/ui/CardList.vue';
-import VnLv from 'components/ui/VnLv.vue';
 
 const quasar = useQuasar();
 const arrayData = useArrayData('ZoneDeliveryList');
@@ -45,7 +44,7 @@ async function remove(row) {
         <div class="vn-card-list">
             <VnPaginate
                 data-key="ZoneDeliveryList"
-                url="/ZoneDeliverys"
+                url="/Zones/getEvents"
                 order="id DESC"
                 auto-load
             >
diff --git a/src/pages/Zone/Upcoming/ZoneUpcomingList.vue b/src/pages/Zone/Upcoming/ZoneUpcomingList.vue
index 5c417df8f..2d3016f25 100644
--- a/src/pages/Zone/Upcoming/ZoneUpcomingList.vue
+++ b/src/pages/Zone/Upcoming/ZoneUpcomingList.vue
@@ -6,7 +6,6 @@ import { useArrayData } from 'src/composables/useArrayData';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import CardList from 'components/ui/CardList.vue';
-import VnLv from 'components/ui/VnLv.vue';
 
 const quasar = useQuasar();
 const arrayData = useArrayData('ZoneUpcomingList');
@@ -45,7 +44,7 @@ async function remove(row) {
         <div class="vn-card-list">
             <VnPaginate
                 data-key="ZoneUpcomingList"
-                url="/ZoneUpcomings"
+                url="/Zones/getUpcomingDeliveries"
                 order="id DESC"
                 auto-load
             >
diff --git a/src/pages/Zone/ZoneCreate.vue b/src/pages/Zone/ZoneCreate.vue
index 8c0ba8c17..93ea9589b 100644
--- a/src/pages/Zone/ZoneCreate.vue
+++ b/src/pages/Zone/ZoneCreate.vue
@@ -96,7 +96,7 @@ function filterType(val, update) {
                         <QInput
                             filled
                             v-model="zone.label"
-                            :label="t('zone.create.label')"
+                            :label="t('zone.create.name')"
                             type="number"
                             min="0"
                             :rules="[(val) => !!val || t('zone.warnings.labelNotEmpty')]"
@@ -106,7 +106,7 @@ function filterType(val, update) {
                         <VnInput
                             filled
                             v-model="zone.plate"
-                            :label="t('zone.create.plate')"
+                            :label="t('zone.create.agency')"
                             :rules="[(val) => !!val || t('zone.warnings.plateNotEmpty')]"
                         />
                     </div>
@@ -116,7 +116,7 @@ function filterType(val, update) {
                         <QInput
                             filled
                             v-model="zone.volume"
-                            :label="t('zone.create.volume')"
+                            :label="t('zone.create.close')"
                             type="number"
                             min="0"
                             :rules="[(val) => !!val || t('zone.warnings.volumeNotEmpty')]"
@@ -134,7 +134,7 @@ function filterType(val, update) {
                             option-value="id"
                             emit-value
                             map-options
-                            :label="t('zone.create.type')"
+                            :label="t('zone.create.price')"
                             :options="filteredZoneTypes"
                             :rules="[(val) => !!val || t('zone.warnings.typeNotEmpty')]"
                             @filter="filterType"
diff --git a/src/pages/Zone/ZoneDeliveryDays.vue b/src/pages/Zone/ZoneDeliveryDays.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pages/Zone/ZoneFilterPanel.vue b/src/pages/Zone/ZoneFilterPanel.vue
new file mode 100644
index 000000000..94765919d
--- /dev/null
+++ b/src/pages/Zone/ZoneFilterPanel.vue
@@ -0,0 +1,55 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnInput from 'components/common/VnInput.vue';
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+    exprBuilder: {
+        type: Function,
+        default: null,
+    },
+});
+const agencies = ref([]);
+</script>
+
+<template>
+    <FetchData
+        url="agencies"
+        limit="30"
+        @on-fetch="(data) => (agencies = data)"
+        auto-load
+    />
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #body="{ params }">
+            <QItem>
+                <QItemSection>
+                    <VnInput :label="t('Name')" v-model="params.name" is-outlined />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('Agency')"
+                        v-model="params.agencyModefK"
+                        :options="agencies"
+                        option-value="id"
+                        option-label="name"
+                        @input-value="agencies.fetch()"
+                        dense
+                        outlined
+                        rounded
+                    >
+                    </VnSelectFilter>
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnFilterPanel>
+</template>
diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index 00502e1f7..2140c5e14 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/src/pages/Zone/ZoneList.vue
@@ -7,21 +7,15 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import CardList from 'components/ui/CardList.vue';
 import VnLv from 'components/ui/VnLv.vue';
+import FetchData from 'src/components/FetchData.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const quasar = useQuasar();
 const arrayData = useArrayData('ZoneList');
 const store = arrayData.store;
 const router = useRouter();
 const { t } = useI18n();
-
-const filter = {
-    include: {
-        relation: 'type',
-        scope: {
-            fields: 'name',
-        },
-    },
-};
+const { viewSummary } = useSummaryDialog();
 
 function navigate(id) {
     router.push({ path: `/zone/${id}/edit` });
@@ -44,18 +38,25 @@ async function remove(row) {
         //
     }
 }
+
+function extractHour(dateTime) {
+    const date = new Date(dateTime);
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    return `${hours}:${minutes}`;
+}
 </script>
 
 <template>
+    <FetchData
+        url="/Agencies"
+        @on-fetch="(data) => (agencyOptions = data)"
+        :filter="{ fields: ['id', 'name'] }"
+        auto-load
+    />
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
-            <VnPaginate
-                data-key="ZoneList"
-                url="/Zones"
-                order="id DESC"
-                :filter="filter"
-                auto-load
-            >
+            <VnPaginate data-key="ZoneList" url="/Zones" order="id DESC" auto-load>
                 <template #body="{ rows }">
                     <CardList
                         v-for="row of rows"
@@ -66,12 +67,23 @@ async function remove(row) {
                     >
                         <template #list-items>
                             <VnLv
-                                :label="t('zone.list.plate')"
-                                :title-label="t('zone.list.plate')"
-                                :value="row.plate"
+                                :label="t('zone.list.id')"
+                                :title-label="t('zone.list.id')"
+                                :value="row.id"
                             />
-                            <VnLv :label="t('zone.list.volume')" :value="row?.volume" />
-                            <VnLv :label="t('zone.list.type')" :value="row?.type?.name" />
+                            <VnLv :label="t('zone.list.name')" :value="row?.name" />
+                            <VnLv
+                                :label="t('zone.list.agency')"
+                                :options="agencyOptions"
+                                option-value="id"
+                                option-label="name"
+                                :value="row?.agencyFk"
+                            />
+                            <VnLv
+                                :label="t('zone.list.close')"
+                                :value="extractHour(row?.hour)"
+                            />
+                            <VnLv :label="t('zone.list.price')" :value="row?.price" />
                         </template>
                         <template #actions>
                             <QBtn
@@ -80,7 +92,14 @@ async function remove(row) {
                                 outline
                             />
                             <QBtn
-                                :label="t('zone.list.remove')"
+                                :label="t('zone.list.openSummary')"
+                                @click.stop="viewSummary(row.id, ZoneSummary)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                            <!--AQUI PONER BOTÓN CLONAR-->
+                            <QBtn
+                                :label="t('zone.list.clone')"
                                 @click.stop="remove(row)"
                                 color="primary"
                                 style="margin-top: 15px"
@@ -91,7 +110,9 @@ async function remove(row) {
             </VnPaginate>
         </div>
         <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn @click="create" fab icon="add" color="primary" />
+            <QBtn @click="create" fab icon="add" color="primary">
+                <QTooltip>{{ t('zone.list.create') }}</QTooltip>
+            </QBtn>
         </QPageSticky>
     </QPage>
 </template>
diff --git a/src/pages/Zone/ZoneUpcoming.vue b/src/pages/Zone/ZoneUpcoming.vue
new file mode 100644
index 000000000..d405c95f6
--- /dev/null
+++ b/src/pages/Zone/ZoneUpcoming.vue
@@ -0,0 +1,53 @@
+<script setup>
+import { ref, computed } from 'vue';
+import ZoneFilterPanel from 'components/InvoiceOutNegativeFilter.vue';
+import VnSubToolbar from 'components/ui/VnSubToolbar.vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const arrayData = ref(null);
+const rows = computed(() => arrayData.value.store.data);
+
+const columns = computed(() => [
+    {
+        label: t('Province'),
+        //field: '',
+        //name: '',
+        align: 'left',
+    },
+    {
+        label: t('Closing'),
+        //field: '',
+        //name: '',
+        align: 'left',
+    },
+    {
+        label: t('Id'),
+        //field: '',
+        //name: '',
+        align: 'left',
+    },
+]);
+
+function getWeekDay(jsonDate) {
+    const weekDay = new Date(jsonDate).getDay();
+
+    return this.days[weekDay].locale;
+}
+</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>
+    <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>
+    </QPage>
+</template>
diff --git a/src/pages/Zone/locale/en.yml b/src/pages/Zone/locale/en.yml
new file mode 100644
index 000000000..e62111d57
--- /dev/null
+++ b/src/pages/Zone/locale/en.yml
@@ -0,0 +1,19 @@
+zone:
+    list:
+        volume: Volume
+        clone: Clone
+        id: Id
+        name: Name
+        agency: Agency
+        close: Close
+        price: Price
+        create: Create zone
+        openSummary: Details
+    create:
+        name: Name
+        agency: Agency
+        close: Close
+        price: Price
+    type:
+        submit: Save
+        reset: Reset
diff --git a/src/pages/Zone/locale/es.yml b/src/pages/Zone/locale/es.yml
new file mode 100644
index 000000000..5d7a265bf
--- /dev/null
+++ b/src/pages/Zone/locale/es.yml
@@ -0,0 +1,19 @@
+zone:
+    list:
+        volume: Volumen
+        clone: Clonar
+        id: Id
+        name: Nombre
+        agency: Agencia
+        close: Cierre
+        price: Precio
+        create: Crear zona
+        openSummary: Detalles
+    create:
+        name: Nombre
+        agency: Agencia
+        close: Cierre
+        price: Precio
+    type:
+        submit: Guardar
+        reset: Reiniciar

From 4d490652ea4c009e3ddf9b80bc1aea26f8767a0d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 6 May 2024 10:11:07 +0200
Subject: [PATCH 7/8] feat #7271: add template

---
 src/pages/Zone/Card/ZoneLocations.vue  |  1 +
 src/pages/Zone/Card/ZoneWarehouses.vue | 12 +++---------
 src/pages/Zone/ZoneDeliveryDays.vue    |  1 +
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/pages/Zone/Card/ZoneLocations.vue b/src/pages/Zone/Card/ZoneLocations.vue
index e69de29bb..e4305c898 100644
--- a/src/pages/Zone/Card/ZoneLocations.vue
+++ b/src/pages/Zone/Card/ZoneLocations.vue
@@ -0,0 +1 @@
+<template>Zone Locations</template>
diff --git a/src/pages/Zone/Card/ZoneWarehouses.vue b/src/pages/Zone/Card/ZoneWarehouses.vue
index 67a81ba4d..7ff73a5e9 100644
--- a/src/pages/Zone/Card/ZoneWarehouses.vue
+++ b/src/pages/Zone/Card/ZoneWarehouses.vue
@@ -6,15 +6,9 @@ import VnLv from 'components/ui/VnLv.vue';
 
 const route = useRoute();
 
-function deleteWarehouse() {
-    let row = this.deleteRow;
-    if (!row) return;
-    return this.$http.delete(`${this.path}/${row.id}`).then(() => {
-        let index = this.$.data.indexOf(row);
-        if (index !== -1) this.$.data.splice(index, 1);
-        this.deleteRow = null;
-    });
-}
+const deleteWarehouse = () => {
+    return true;
+};
 </script>
 
 <template>
diff --git a/src/pages/Zone/ZoneDeliveryDays.vue b/src/pages/Zone/ZoneDeliveryDays.vue
index e69de29bb..485500dba 100644
--- a/src/pages/Zone/ZoneDeliveryDays.vue
+++ b/src/pages/Zone/ZoneDeliveryDays.vue
@@ -0,0 +1 @@
+<template>Zone Delivery days</template>

From 9a6dd6577460fb2fca8c486f62339670e4b900f8 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 8 May 2024 07:52:18 +0200
Subject: [PATCH 8/8] feat: remove deprecatedHour fn

---
 src/pages/Zone/Card/ZoneDescriptor.vue | 11 ++---------
 src/pages/Zone/ZoneList.vue            | 10 ++--------
 2 files changed, 4 insertions(+), 17 deletions(-)

diff --git a/src/pages/Zone/Card/ZoneDescriptor.vue b/src/pages/Zone/Card/ZoneDescriptor.vue
index 486e4f063..93e951801 100644
--- a/src/pages/Zone/Card/ZoneDescriptor.vue
+++ b/src/pages/Zone/Card/ZoneDescriptor.vue
@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
 
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-import ZoneDescriptorMenuItems from './ZoneDescriptorMenuItems.vue';
+import { toTimeFormat } from 'src/filters/date';
 
 import useCardDescription from 'src/composables/useCardDescription';
 
@@ -40,13 +40,6 @@ const data = ref(useCardDescription());
 const setData = (entity) => {
     data.value = useCardDescription(entity.ref, entity.id);
 };
-
-function extractHour(dateTime) {
-    const date = new Date(dateTime);
-    const hours = date.getHours().toString().padStart(2, '0');
-    const minutes = date.getMinutes().toString().padStart(2, '0');
-    return `${hours}:${minutes}`;
-}
 </script>
 
 <template>
@@ -81,7 +74,7 @@ function extractHour(dateTime) {
         <template #body="{ entity }">
             {{ console.log('entity', entity) }}
             <VnLv :label="t('Agency')" :value="entity.agencyMode.name" />
-            <VnLv :label="t('Closing hour')" :value="extractHour(entity.hour)" />
+            <VnLv :label="t('Closing hour')" :value="toTimeFormat(entity.hour)" />
             <VnLv :label="t('zoneing days')" :value="entity.zoneingDays" />
             <VnLv :label="t('Price')" :value="entity.price" />
             <VnLv :label="t('Bonus')" :value="entity.bonus" />
diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index 2140c5e14..f260eb134 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/src/pages/Zone/ZoneList.vue
@@ -9,6 +9,7 @@ import CardList from 'components/ui/CardList.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import FetchData from 'src/components/FetchData.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { toTimeFormat } from 'src/filters/date';
 
 const quasar = useQuasar();
 const arrayData = useArrayData('ZoneList');
@@ -38,13 +39,6 @@ async function remove(row) {
         //
     }
 }
-
-function extractHour(dateTime) {
-    const date = new Date(dateTime);
-    const hours = date.getHours().toString().padStart(2, '0');
-    const minutes = date.getMinutes().toString().padStart(2, '0');
-    return `${hours}:${minutes}`;
-}
 </script>
 
 <template>
@@ -81,7 +75,7 @@ function extractHour(dateTime) {
                             />
                             <VnLv
                                 :label="t('zone.list.close')"
-                                :value="extractHour(row?.hour)"
+                                :value="toTimeFormat(row?.hour)"
                             />
                             <VnLv :label="t('zone.list.price')" :value="row?.price" />
                         </template>