From e8b1d0fe7e50a3965b1cdc14d44d27e232532eef Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Sat, 25 Nov 2023 19:02:26 -0300
Subject: [PATCH 1/4] travel WIP

---
 src/composables/inputSelectFilterFn.js        |  26 ++
 src/i18n/en/index.js                          |  32 +++
 src/i18n/es/index.js                          |  32 +++
 .../InvoiceOut/InvoiceOutNegativeBases.vue    |   2 +-
 src/pages/Supplier/Card/SupplierSummary.vue   |   4 +-
 src/pages/Supplier/SupplierCreate.vue         |  11 +-
 src/pages/Travel/Card/TravelCard.vue          |  66 +++++
 src/pages/Travel/Card/TravelSummary.vue       | 264 ++++++++++++++++++
 src/pages/Travel/Card/TravelSummaryDialog.vue |  29 ++
 src/pages/Travel/TravelCreate.vue             | 157 +++++++++++
 src/pages/Travel/TravelList.vue               | 132 +++++++++
 src/pages/Travel/TravelMain.vue               |  17 ++
 src/router/modules/index.js                   |  13 +-
 src/router/modules/invoiceOut.js              |   2 +-
 src/router/modules/travel.js                  |  59 ++++
 src/router/routes.js                          |   2 +
 ...ceOut.service.js => invoiceOut.service.js} |   0
 ...pliers.service.js => suppliers.service.js} |   0
 src/services/travel.service.js                |  32 +++
 src/stores/invoiceOutGlobal.js                |   2 +-
 src/stores/travel.js                          |  36 +++
 src/stores/useNavigationStore.js              |   1 +
 22 files changed, 911 insertions(+), 8 deletions(-)
 create mode 100644 src/composables/inputSelectFilterFn.js
 create mode 100644 src/pages/Travel/Card/TravelCard.vue
 create mode 100644 src/pages/Travel/Card/TravelSummary.vue
 create mode 100644 src/pages/Travel/Card/TravelSummaryDialog.vue
 create mode 100644 src/pages/Travel/TravelCreate.vue
 create mode 100644 src/pages/Travel/TravelList.vue
 create mode 100644 src/pages/Travel/TravelMain.vue
 create mode 100644 src/router/modules/travel.js
 rename src/services/{InvoiceOut.service.js => invoiceOut.service.js} (100%)
 rename src/services/{Suppliers.service.js => suppliers.service.js} (100%)
 create mode 100644 src/services/travel.service.js
 create mode 100644 src/stores/travel.js

diff --git a/src/composables/inputSelectFilterFn.js b/src/composables/inputSelectFilterFn.js
new file mode 100644
index 000000000..f038e7a7d
--- /dev/null
+++ b/src/composables/inputSelectFilterFn.js
@@ -0,0 +1,26 @@
+/**
+ * Filtra las opciones basadas en un valor de entrada y actualiza las opciones filtradas.
+ *
+ * @param {string} val - El valor de entrada para filtrar las opciones. (la emite el evento @filter del componente QSelect)
+ * @param {Function} update - Función de actualización que debe ser llamada para actualizar las opciones filtradas.(la provee el evento @filter del componente QSelect)
+ * @param {Function} abort - Función que puede ser llamada para abortar o cancelar el filtrado actual. (la provee el evento @filter del componente QSelect)
+ * @param {Object} optionsToFilter - Objeto que contiene las opciones originales y filtradas.
+ */
+
+export function inputSelectFilter(val, update, abort, optionsToFilter) {
+    if (val === '') {
+        update(() => {
+            optionsToFilter.filtered = JSON.parse(
+                JSON.stringify(optionsToFilter.original)
+            );
+        });
+        return;
+    }
+
+    update(() => {
+        const searchQuery = val.toLowerCase();
+        optionsToFilter.filtered = optionsToFilter.original.filter((option) =>
+            option.label.toLowerCase().includes(searchQuery)
+        );
+    });
+}
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index b4761a77f..632ecd4ec 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -581,6 +581,38 @@ export default {
             supplierName: 'Supplier name',
         },
     },
+    travel: {
+        shared: {
+            reference: 'Reference',
+            agency: 'Agency',
+            wareHouseOut: 'Warehouse Out',
+            wareHouseIn: 'Warehouse In',
+            landed: 'Landed',
+            shipped: 'Shipped',
+            totalEntries: 'Total entries',
+        },
+        pageTitles: {
+            travel: 'Travels',
+            list: 'List',
+            create: 'Create',
+            summary: 'Summary',
+        },
+        list: {
+            clone: 'Clone',
+            addEntry: 'Add entry',
+            preview: 'Preview',
+        },
+        summary: {
+            confirmed: 'Confirmed',
+            entryId: 'Entry Id',
+            supplier: 'Supplier',
+            freight: 'Freight',
+            package: 'Package',
+            delivered: 'Delivered',
+            received: 'Received',
+            entries: 'Entries',
+        },
+    },
     components: {
         topbar: {},
         userPanel: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 85fb6b6e6..da9bbd21b 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -583,6 +583,38 @@ export default {
             supplierName: 'Nombre del proveedor',
         },
     },
+    travel: {
+        shared: {
+            reference: 'Referencia',
+            agency: 'Agencia',
+            wareHouseOut: 'Alm. salida',
+            wareHouseIn: 'Alm. entrada',
+            landed: 'F. entrega',
+            shipped: 'F. envío',
+            totalEntries: 'Ent. totales',
+        },
+        pageTitles: {
+            travel: 'Envíos',
+            list: 'Listado',
+            create: 'Crear',
+            summary: 'Resumen',
+        },
+        list: {
+            clone: 'Clonar',
+            addEntry: 'Añadir entrada',
+            preview: 'Vista previa',
+        },
+        summary: {
+            confirmed: 'Confirmado',
+            entryId: 'Id entrada',
+            supplier: 'Proveedor',
+            freight: 'Porte',
+            package: 'Embalaje',
+            delivered: 'Enviada',
+            received: 'Recibida',
+            entries: 'Entradas',
+        },
+    },
     components: {
         topbar: {},
         userPanel: {
diff --git a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
index e4b8f4f89..b148d98bb 100644
--- a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
+++ b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
@@ -3,7 +3,7 @@ import { onMounted, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 /* import { QBadge, QBtn } from 'quasar';
 import CustomerDescriptor from 'src/pages/Customer/Card/CustomerDescriptor.vue'; */
-import invoiceOutService from 'src/services/InvoiceOut.service';
+import invoiceOutService from 'src/services/invoiceOut.service';
 import { toCurrency } from 'src/filters';
 import { QBadge, QCheckbox, exportFile } from 'quasar';
 
diff --git a/src/pages/Supplier/Card/SupplierSummary.vue b/src/pages/Supplier/Card/SupplierSummary.vue
index 120ae8713..c04c76234 100644
--- a/src/pages/Supplier/Card/SupplierSummary.vue
+++ b/src/pages/Supplier/Card/SupplierSummary.vue
@@ -51,7 +51,9 @@ const isAdministrative = computed(() => {
         @on-fetch="(data) => setData(data)"
     >
         <template #header-left>
-            <QIcon name="open_in_new" color="white" size="25px" />
+            <a v-if="isAdministrative" class="header link" :href="supplierUrl">
+                <QIcon name="open_in_new" color="white" size="25px" />
+            </a>
         </template>
         <template #header>
             <span>{{ supplier.name }} - {{ supplier.id }}</span>
diff --git a/src/pages/Supplier/SupplierCreate.vue b/src/pages/Supplier/SupplierCreate.vue
index a27c6fd37..e68e7ea8a 100644
--- a/src/pages/Supplier/SupplierCreate.vue
+++ b/src/pages/Supplier/SupplierCreate.vue
@@ -1,9 +1,10 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { ref } from 'vue';
-import suppliersService from 'src/services/Suppliers.service';
+import suppliersService from 'src/services/suppliers.service';
 import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
 
 const { t } = useI18n();
 const router = useRouter();
@@ -14,7 +15,7 @@ const newSupplierName = ref();
 const createSupplier = async () => {
     const params = { name: newSupplierName.value };
     const response = await suppliersService.createSupplier(params);
-    router.push({ path: `/supplier/${response.data.id}` });
+    if (response.status === 200) router.push({ path: `/supplier/${response.data.id}` });
 };
 </script>
 
@@ -30,7 +31,11 @@ const createSupplier = async () => {
     </template>
 
     <QPage class="q-pa-md">
-        <QForm @submit="createSupplier()" class="text-white">
+        <QForm
+            @submit="createSupplier()"
+            class="text-white q-mx-auto"
+            style="max-width: 800px"
+        >
             <QCard class="card">
                 <QInput
                     v-model="newSupplierName"
diff --git a/src/pages/Travel/Card/TravelCard.vue b/src/pages/Travel/Card/TravelCard.vue
new file mode 100644
index 000000000..12c6df20c
--- /dev/null
+++ b/src/pages/Travel/Card/TravelCard.vue
@@ -0,0 +1,66 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+
+const stateStore = useStateStore();
+const { t } = useI18n();
+</script>
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="SuppliersList"
+                :limit="20"
+                :label="t('Search suppliers')"
+            />
+        </Teleport>
+    </template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
+            <!-- Aca iría left menu y descriptor -->
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage>
+            <QToolbar class="bg-vn-dark justify-end">
+                <div id="st-data"></div>
+                <QSpace />
+                <div id="st-actions"></div>
+            </QToolbar>
+            <div class="q-pa-md"><RouterView></RouterView></div>
+        </QPage>
+    </QPageContainer>
+</template>
+
+<style lang="scss">
+.q-scrollarea__content {
+    max-width: 100%;
+}
+</style>
+
+<style lang="scss" scoped>
+.descriptor {
+    max-width: 256px;
+
+    h5 {
+        margin: 0 15px;
+    }
+
+    .header {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .q-card__actions {
+        justify-content: center;
+    }
+
+    #descriptor-skeleton .q-card__actions {
+        justify-content: space-between;
+    }
+}
+</style>
+
+<i18n>
+</i18n>
diff --git a/src/pages/Travel/Card/TravelSummary.vue b/src/pages/Travel/Card/TravelSummary.vue
new file mode 100644
index 000000000..c476b6bc0
--- /dev/null
+++ b/src/pages/Travel/Card/TravelSummary.vue
@@ -0,0 +1,264 @@
+<script setup>
+import { onMounted, ref, computed, onUpdated } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import CardSummary from 'components/ui/CardSummary.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import { getUrl } from 'src/composables/getUrl';
+import { toDate } from 'src/filters';
+import travelService from 'src/services/travel.service';
+import { QCheckbox, QIcon } from 'quasar';
+import { toCurrency } from 'filters/index';
+
+onUpdated(() => summaryRef.value.fetch());
+
+const route = useRoute();
+const { t } = useI18n();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const entityId = computed(() => $props.id || route.params.id);
+const entries = ref([]);
+const summaryRef = ref();
+const travel = ref();
+const travelUrl = ref();
+
+onMounted(async () => {
+    travelUrl.value = (await getUrl('travel/')) + entityId.value;
+});
+
+async function setTravelData(data) {
+    if (data) {
+        travel.value = data;
+        const entriesResponse = await travelService.getTravelEntries(travel.value.id);
+        if (entriesResponse.data) entries.value = entriesResponse.data;
+    }
+}
+
+const tableColumnComponents = {
+    isConfirmed: {
+        component: () => QCheckbox,
+        props: (prop) => ({
+            disable: true,
+            'model-value': Boolean(prop.value),
+        }),
+    },
+    id: {
+        component: () => 'span',
+        props: () => {},
+    },
+    supplierName: {
+        component: () => 'span',
+        props: () => {},
+    },
+    reference: {
+        component: () => 'span',
+        props: () => {},
+    },
+    freightValue: {
+        component: () => 'span',
+        props: () => {},
+    },
+    packageValue: {
+        component: () => 'span',
+        props: () => {},
+    },
+    cc: {
+        component: () => 'span',
+        props: () => {},
+    },
+    pallet: {
+        component: () => 'span',
+        props: () => {},
+    },
+    m3: {
+        component: () => 'span',
+        props: () => {},
+    },
+    observation: {
+        component: (props) => (props.value ? QIcon : null),
+        props: () => ({ name: 'insert_drive_file', color: 'orange', size: '25px' }),
+    },
+};
+
+const entriesTableColumns = computed(() => {
+    return [
+        {
+            label: t('travel.summary.confirmed'),
+            field: 'isConfirmed',
+            name: 'isConfirmed',
+            align: 'left',
+        },
+        {
+            label: t('travel.summary.entryId'),
+            field: 'id',
+            name: 'id',
+            align: 'left',
+        },
+        {
+            label: t('travel.summary.supplier'),
+            field: 'supplierName',
+            name: 'supplierName',
+            align: 'left',
+        },
+        {
+            label: t('travel.shared.reference'),
+            field: 'reference',
+            name: 'reference',
+            align: 'left',
+        },
+        {
+            label: t('travel.summary.freight'),
+            field: 'freightValue',
+            name: 'freightValue',
+            align: 'left',
+            format: (val) => {
+                return toCurrency(val);
+            },
+        },
+        {
+            label: t('travel.summary.package'),
+            field: 'packageValue',
+            name: 'packageValue',
+            align: 'left',
+            format: (val) => {
+                return toCurrency(val);
+            },
+        },
+        { label: 'CC', field: 'cc', name: 'cc', align: 'left' },
+        { label: 'Pallet', field: 'pallet', name: 'pallet', align: 'left' },
+        { label: 'm³', field: 'm3', name: 'm3', align: 'left' },
+        {
+            label: '',
+            field: 'observation',
+            name: 'observation',
+            align: 'left',
+            toolTip: 'Observation three',
+        },
+    ];
+});
+
+const entriesTableRows = computed(() => {
+    if (!entries.value && !entries.value.length > 0) return [];
+    return entries.value;
+});
+</script>
+
+<template>
+    <CardSummary
+        ref="summaryRef"
+        :url="`Travels/${entityId}/getTravel`"
+        @on-fetch="(data) => setTravelData(data)"
+    >
+        <template #header-left>
+            <a class="header link" :href="travelUrl">
+                <QIcon name="open_in_new" color="white" size="25px" />
+            </a>
+        </template>
+        <template #header>
+            <span>{{ travel.ref }} - {{ travel.id }}</span>
+        </template>
+
+        <template #body>
+            <QCard class="vn-one">
+                <VnLv
+                    :label="t('travel.shared.shipped')"
+                    :value="toDate(travel.shipped)"
+                />
+                <VnLv :label="t('travel.shared.landed')" :value="toDate(travel.landed)" />
+                <VnLv :label="t('travel.shared.agency')" :value="travel.agency?.name" />
+                <VnLv
+                    :label="t('travel.shared.wareHouseOut')"
+                    :value="travel.warehouseOut?.name"
+                />
+                <VnLv
+                    :label="t('travel.shared.wareHouseIn')"
+                    :value="travel.warehouseIn?.name"
+                />
+                <VnLv :label="t('travel.shared.reference')" :value="travel.ref" />
+
+                <VnLv label="m³" :value="travel.m3" />
+                <VnLv :label="t('travel.shared.totalEntries')" :value="travel.m3" />
+                <QCheckbox
+                    v-model="travel.isDelivered"
+                    :label="t('travel.summary.delivered')"
+                    disable
+                    dense
+                    class="full-width q-my-xs"
+                />
+                <QCheckbox
+                    v-model="travel.isReceived"
+                    :label="t('travel.summary.received')"
+                    disable
+                    dense
+                    class="full-width q-mb-xs"
+                />
+            </QCard>
+            <QCard class="vn-two" v-if="entriesTableRows.length > 0">
+                <a class="header" :href="travelUrl + 'entry'">
+                    {{ t('travel.summary.entries') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <QTable
+                    :rows="entriesTableRows"
+                    :columns="entriesTableColumns"
+                    hide-bottom
+                    row-key="id"
+                    class="full-width q-mt-md"
+                >
+                    <template #body-cell="props">
+                        <QTd :props="props">
+                            <component
+                                :is="
+                                    tableColumnComponents[props.col.name].component(props)
+                                "
+                                v-bind="
+                                    tableColumnComponents[props.col.name].props(props)
+                                "
+                                @click="
+                                    tableColumnComponents[props.col.name].event(props)
+                                "
+                                class="col-content"
+                            >
+                                <template
+                                    v-if="
+                                        props.col.name !== 'observation' &&
+                                        props.col.name !== 'isConfirmed'
+                                    "
+                                    >{{ props.value }}</template
+                                >
+                                <QTooltip v-if="props.col.toolTip">{{
+                                    props.col.toolTip
+                                }}</QTooltip>
+                            </component>
+                        </QTd>
+                    </template>
+                </QTable>
+            </QCard>
+        </template>
+    </CardSummary>
+</template>
+<style lang="scss" scoped>
+.notes {
+    width: max-content;
+}
+.cardSummary .summaryBody > .q-card > .taxes {
+    border: 2px solid gray;
+    padding: 0;
+
+    > .vn-label-value {
+        text-align: right;
+        display: flex;
+        flex-direction: row;
+        margin-top: 5px;
+        justify-content: flex-end;
+        padding-right: 20px;
+    }
+}
+</style>
diff --git a/src/pages/Travel/Card/TravelSummaryDialog.vue b/src/pages/Travel/Card/TravelSummaryDialog.vue
new file mode 100644
index 000000000..8351d6e5b
--- /dev/null
+++ b/src/pages/Travel/Card/TravelSummaryDialog.vue
@@ -0,0 +1,29 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+import TravelSummary from './TravelSummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+
+<template>
+    <QDialog ref="dialogRef" @hide="onDialogHide">
+        <TravelSummary v-if="$props.id" :id="$props.id" />
+    </QDialog>
+</template>
+
+<style lang="scss">
+.q-dialog .summary .header {
+    position: sticky;
+    z-index: $z-max;
+    top: 0;
+}
+</style>
diff --git a/src/pages/Travel/TravelCreate.vue b/src/pages/Travel/TravelCreate.vue
new file mode 100644
index 000000000..fa8520f95
--- /dev/null
+++ b/src/pages/Travel/TravelCreate.vue
@@ -0,0 +1,157 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { reactive, computed } from 'vue';
+import FetchData from 'components/FetchData.vue';
+import { useTravelStore } from 'src/stores/travel';
+import { useRouter } from 'vue-router';
+import { inputSelectFilter } from 'src/composables/inputSelectFilterFn.js';
+
+const { t } = useI18n();
+const router = useRouter();
+const travelStore = useTravelStore();
+
+const newTravelData = reactive({
+    ref: null,
+    agencyModeFk: null,
+    shipped: null,
+    landed: null,
+    warehouseOutFk: null,
+    warehouseInFk: null,
+});
+
+const agenciesOptions = reactive({
+    original: [],
+    filtered: [],
+});
+
+const warehousesOptions = reactive({
+    original: [],
+    filtered: [],
+});
+
+const createTravel = async () => {
+    const response = await travelStore.createTravel(newTravelData);
+    if (response.status === 200) router.push({ path: `/travel/${response.data.id}` });
+};
+
+const onFetchAgencies = (agencies) => {
+    agenciesOptions.original = agencies.map((agency) => {
+        return { value: agency.agencyFk, label: agency.name };
+    });
+};
+
+const onFetchWarehouses = (warehouses) => {
+    warehousesOptions.original = warehouses.map((warehouse) => {
+        return { value: warehouse.id, label: warehouse.name };
+    });
+};
+
+const canSubmit = computed(() => {
+    for (const key in newTravelData) {
+        if (!newTravelData[key]) return false;
+    }
+    return true;
+});
+</script>
+
+<template>
+    <FetchData url="AgencyModes" @on-fetch="(data) => onFetchAgencies(data)" auto-load />
+    <FetchData url="Warehouses" @on-fetch="(data) => onFetchWarehouses(data)" auto-load />
+    <QPage class="q-pa-md">
+        <QForm
+            @submit="createTravel()"
+            class="text-white column q-mx-auto"
+            style="max-width: 800px"
+        >
+            <QCard class="row q-pa-xl full-width card">
+                <QInput
+                    v-model="newTravelData.ref"
+                    :label="t('travel.list.reference')"
+                    filled
+                    style="max-width: 100%"
+                />
+                <QSelect
+                    :options="agenciesOptions.filtered"
+                    v-model="newTravelData.agencyModeFk"
+                    filled
+                    use-input
+                    @filter="
+                        (val, update, abort) =>
+                            inputSelectFilter(val, update, abort, agenciesOptions)
+                    "
+                    :label="t('travel.list.agency')"
+                    transition-show="jump-up"
+                    transition-hide="jump-up"
+                    style="max-width: 100%"
+                />
+                <QInput
+                    v-model="newTravelData.shipped"
+                    type="date"
+                    filled
+                    mask="date"
+                    :label="t('travel.list.shipped')"
+                />
+                <QInput
+                    v-model="newTravelData.landed"
+                    type="date"
+                    filled
+                    mask="date"
+                    :label="t('travel.list.landed')"
+                />
+                <QSelect
+                    :options="warehousesOptions.filtered"
+                    v-model="newTravelData.warehouseOutFk"
+                    filled
+                    use-input
+                    @filter="
+                        (val, update, abort) =>
+                            inputSelectFilter(val, update, abort, warehousesOptions)
+                    "
+                    :label="t('travel.list.wareHouseOut')"
+                    transition-show="jump-up"
+                    transition-hide="jump-up"
+                />
+                <QSelect
+                    :options="warehousesOptions.filtered"
+                    v-model="newTravelData.warehouseInFk"
+                    filled
+                    use-input
+                    @filter="
+                        (val, update, abort) =>
+                            inputSelectFilter(val, update, abort, warehousesOptions)
+                    "
+                    :label="t('travel.list.wareHouseIn')"
+                    transition-show="jump-up"
+                    transition-hide="jump-up"
+                />
+            </QCard>
+            <div class="row">
+                <QBtn
+                    :label="t('globals.create')"
+                    type="submit"
+                    color="primary"
+                    class="q-mt-md"
+                    :disable="!canSubmit"
+                />
+                <QBtn
+                    :label="t('globals.cancel')"
+                    class="q-mt-md"
+                    flat
+                    :disable="!canSubmit"
+                />
+            </div>
+        </QForm>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.card {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-gap: 20px;
+}
+</style>
+
+<i18n>
+
+</i18n>
diff --git a/src/pages/Travel/TravelList.vue b/src/pages/Travel/TravelList.vue
new file mode 100644
index 000000000..716c7632f
--- /dev/null
+++ b/src/pages/Travel/TravelList.vue
@@ -0,0 +1,132 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { onMounted } from 'vue';
+import { toDate } from 'src/filters/index';
+
+import { useRouter } from 'vue-router';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import CardList2 from 'src/components/ui/CardList2.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import TravelSummaryDialog from './Card/TravelSummaryDialog.vue';
+import { useTravelStore } from 'src/stores/travel.js';
+import { useQuasar } from 'quasar';
+
+const router = useRouter();
+const travelStore = useTravelStore();
+const quasar = useQuasar();
+const { t } = useI18n();
+
+function navigate(id) {
+    router.push({ path: `/travel/${id}` });
+}
+
+const redirectToCreateView = () => {
+    router.push({ name: 'TravelCreate' });
+};
+
+const viewSummary = (id) => {
+    quasar.dialog({
+        component: TravelSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
+};
+
+onMounted(async () => {
+    await travelStore.init();
+});
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <div class="card-list">
+            <VnPaginate data-key="SuppliersList" url="Travels/filter" auto-load>
+                <template #body="{ rows }">
+                    <CardList2
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="row.ref"
+                        :id="row.id"
+                        @click="navigate(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv
+                                :label="t('travel.shared.agency')"
+                                :value="row.agencyModeName"
+                            />
+                            <VnLv
+                                :label="t('travel.shared.wareHouseOut')"
+                                :value="row.warehouseOutFk"
+                            />
+                            <VnLv
+                                :label="t('travel.shared.shipped')"
+                                :value="toDate(row.shipped)"
+                            />
+                            <VnLv
+                                :label="t('travel.shared.landed')"
+                                :value="toDate(row.landed)"
+                            />
+                            <VnLv
+                                :label="t('travel.shared.wareHouseIn')"
+                                :value="row.warehouseInFk"
+                            />
+
+                            <VnLv
+                                :label="t('travel.shared.totalEntries')"
+                                :value="row.totalEntries"
+                            />
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('travel.list.clone')"
+                                @click.stop="navigate(row.id)"
+                                color="white"
+                                outline
+                                type="reset"
+                            />
+                            <QBtn
+                                :label="t('travel.list.addEntry')"
+                                @click.stop="viewSummary(row.id)"
+                                color="primary"
+                                style="margin-top: 15px"
+                                type="submit"
+                            />
+                            <QBtn
+                                :label="t('travel.list.preview')"
+                                @click.stop="viewSummary(row.id)"
+                                color="primary"
+                                style="margin-top: 15px"
+                                type="submit"
+                            />
+                        </template>
+                    </CardList2>
+                </template>
+            </VnPaginate>
+        </div>
+        <QPageSticky :offset="[20, 20]">
+            <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
+            <QTooltip>
+                {{ t('supplier.list.newSupplier') }}
+            </QTooltip>
+        </QPageSticky>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+</style>
+
+<i18n>
+    {
+        "en": {
+            Search suppliers: Search suppliers
+        },
+        "es": {
+            Search suppliers: Buscar proveedores
+        }
+    }
+</i18n>
diff --git a/src/pages/Travel/TravelMain.vue b/src/pages/Travel/TravelMain.vue
new file mode 100644
index 000000000..66ce78f23
--- /dev/null
+++ b/src/pages/Travel/TravelMain.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>
diff --git a/src/router/modules/index.js b/src/router/modules/index.js
index 2456e57aa..d6141fb81 100644
--- a/src/router/modules/index.js
+++ b/src/router/modules/index.js
@@ -6,5 +6,16 @@ import Worker from './worker';
 import Wagon from './wagon';
 import Route from './route';
 import Supplier from './Supplier';
+import Travel from './travel';
 
-export default [Customer, Ticket, Claim, InvoiceOut, Worker, Wagon, Route, Supplier];
+export default [
+    Customer,
+    Ticket,
+    Claim,
+    InvoiceOut,
+    Worker,
+    Wagon,
+    Route,
+    Supplier,
+    Travel,
+];
diff --git a/src/router/modules/invoiceOut.js b/src/router/modules/invoiceOut.js
index ec30e4fc0..084cf6ac3 100644
--- a/src/router/modules/invoiceOut.js
+++ b/src/router/modules/invoiceOut.js
@@ -34,7 +34,7 @@ export default {
                     name: 'InvoiceOutGlobal',
                     meta: {
                         title: 'globalInvoicing',
-                        icon: 'view_list',
+                        icon: 'contact_support',
                     },
                     component: () => import('src/pages/InvoiceOut/InvoiceOutGlobal.vue'),
                 },
diff --git a/src/router/modules/travel.js b/src/router/modules/travel.js
new file mode 100644
index 000000000..9ba10380e
--- /dev/null
+++ b/src/router/modules/travel.js
@@ -0,0 +1,59 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/travel',
+    name: 'Travel',
+    meta: {
+        title: 'travel',
+        icon: 'vn:package',
+    },
+    component: RouterView,
+    redirect: { name: 'TravelMain' },
+    menus: {
+        main: ['TravelList'],
+        card: [],
+    },
+    children: [
+        {
+            path: '',
+            name: 'TravelMain',
+            component: () => import('src/pages/Travel/TravelMain.vue'),
+            redirect: { name: 'TravelList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'TravelList',
+                    meta: {
+                        title: 'list',
+                        icon: 'view_list',
+                    },
+                    component: () => import('src/pages/Travel/TravelList.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'TravelCreate',
+                    meta: {
+                        title: 'create',
+                    },
+                    component: () => import('src/pages/Travel/TravelCreate.vue'),
+                },
+            ],
+        },
+        {
+            name: 'TravelCard',
+            path: ':id',
+            component: () => import('src/pages/Travel/Card/TravelCard.vue'),
+            redirect: { name: 'TravelSummary' },
+            children: [
+                {
+                    name: 'TravelSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary',
+                    },
+                    component: () => import('src/pages/Travel/Card/TravelSummary.vue'),
+                },
+            ],
+        },
+    ],
+};
diff --git a/src/router/routes.js b/src/router/routes.js
index faf340e0c..dc4b51ec2 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -6,6 +6,7 @@ import invoiceOut from './modules/invoiceOut';
 import wagon from './modules/wagon';
 import supplier from './modules/Supplier';
 import route from './modules/route';
+import travel from './modules/travel';
 
 const routes = [
     {
@@ -53,6 +54,7 @@ const routes = [
             wagon,
             route,
             supplier,
+            travel,
             {
                 path: '/:catchAll(.*)*',
                 name: 'NotFound',
diff --git a/src/services/InvoiceOut.service.js b/src/services/invoiceOut.service.js
similarity index 100%
rename from src/services/InvoiceOut.service.js
rename to src/services/invoiceOut.service.js
diff --git a/src/services/Suppliers.service.js b/src/services/suppliers.service.js
similarity index 100%
rename from src/services/Suppliers.service.js
rename to src/services/suppliers.service.js
diff --git a/src/services/travel.service.js b/src/services/travel.service.js
new file mode 100644
index 000000000..606e2eb48
--- /dev/null
+++ b/src/services/travel.service.js
@@ -0,0 +1,32 @@
+import axios from 'axios';
+
+const travelService = {
+    getTravels: async (filter = {}) => {
+        try {
+            return await axios.get('Travels/filter', filter);
+        } catch (err) {
+            console.error(`Error fetching travels`, err);
+            return err.response;
+        }
+    },
+
+    createTravel: async (params) => {
+        try {
+            return await axios.patch('Travels', params);
+        } catch (err) {
+            console.error(`Error creating travel`, err);
+            return err.response;
+        }
+    },
+
+    getTravelEntries: async (param) => {
+        try {
+            return await axios.get(`Travels/${param}/getEntries`);
+        } catch (err) {
+            console.error(`Error fetching travel entries`, err);
+            return err.response;
+        }
+    },
+};
+
+export default travelService;
diff --git a/src/stores/invoiceOutGlobal.js b/src/stores/invoiceOutGlobal.js
index 7223f7655..128d5a397 100644
--- a/src/stores/invoiceOutGlobal.js
+++ b/src/stores/invoiceOutGlobal.js
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { useUserConfig } from 'src/composables/useUserConfig';
-import invoiceOutService from 'src/services/InvoiceOut.service.js';
+import invoiceOutService from 'src/services/invoiceOut.service';
 import useNotify from 'src/composables/useNotify.js';
 
 const { notify } = useNotify();
diff --git a/src/stores/travel.js b/src/stores/travel.js
new file mode 100644
index 000000000..799c773e8
--- /dev/null
+++ b/src/stores/travel.js
@@ -0,0 +1,36 @@
+import { defineStore } from 'pinia';
+import travelService from 'src/services/travel.service';
+
+export const useTravelStore = defineStore({
+    id: 'travel',
+
+    state: () => ({
+        initialDataLoading: true,
+        travels: [],
+    }),
+    actions: {
+        async init() {
+            await this.fetchAllData();
+        },
+
+        async fetchAllData() {
+            const { data } = await travelService.getTravels();
+            this.travels = data || [];
+        },
+
+        async createTravel(travelData) {
+            const params = {
+                ref: travelData.ref,
+                agencyModeFk: travelData.agencyModeFk.value,
+                warehouseOutFk: travelData.warehouseOutFk.value,
+                warehouseInFk: travelData.warehouseInFk.value,
+                landed: new Date(travelData.landed),
+                shipped: new Date(travelData.shipped),
+            };
+
+            return await travelService.createTravel(params);
+        },
+    },
+
+    getters: {},
+});
diff --git a/src/stores/useNavigationStore.js b/src/stores/useNavigationStore.js
index ea4e175ab..9933924e0 100644
--- a/src/stores/useNavigationStore.js
+++ b/src/stores/useNavigationStore.js
@@ -15,6 +15,7 @@ export const useNavigationStore = defineStore('navigationStore', () => {
         'wagon',
         'route',
         'supplier',
+        'travel',
     ];
     const pinnedModules = ref([]);
     const role = useRole();

From e291a69846448dc39fa3cfbd70f1bd4fa75529c0 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Sat, 25 Nov 2023 19:42:24 -0300
Subject: [PATCH 2/4] Add travel clone feature

---
 src/pages/Travel/TravelCreate.vue | 30 ++++++++++++++++++++-------
 src/pages/Travel/TravelList.vue   | 34 ++++++++++++++++++-------------
 2 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/src/pages/Travel/TravelCreate.vue b/src/pages/Travel/TravelCreate.vue
index fa8520f95..b0ea45917 100644
--- a/src/pages/Travel/TravelCreate.vue
+++ b/src/pages/Travel/TravelCreate.vue
@@ -3,10 +3,12 @@ import { useI18n } from 'vue-i18n';
 import { reactive, computed } from 'vue';
 import FetchData from 'components/FetchData.vue';
 import { useTravelStore } from 'src/stores/travel';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { inputSelectFilter } from 'src/composables/inputSelectFilterFn.js';
+import { onBeforeMount } from 'vue';
 
 const { t } = useI18n();
+const route = useRoute();
 const router = useRouter();
 const travelStore = useTravelStore();
 
@@ -29,6 +31,15 @@ const warehousesOptions = reactive({
     filtered: [],
 });
 
+onBeforeMount(() => {
+    if (route.query.travelData) {
+        const travelData = JSON.parse(route.query.travelData);
+        for (let key in travelData) {
+            newTravelData[key] = travelData[key];
+        }
+    }
+});
+
 const createTravel = async () => {
     const response = await travelStore.createTravel(newTravelData);
     if (response.status === 200) router.push({ path: `/travel/${response.data.id}` });
@@ -52,6 +63,10 @@ const canSubmit = computed(() => {
     }
     return true;
 });
+
+const redirectToTravelList = () => {
+    router.push({ name: 'TravelList' });
+};
 </script>
 
 <template>
@@ -66,7 +81,7 @@ const canSubmit = computed(() => {
             <QCard class="row q-pa-xl full-width card">
                 <QInput
                     v-model="newTravelData.ref"
-                    :label="t('travel.list.reference')"
+                    :label="t('travel.shared.reference')"
                     filled
                     style="max-width: 100%"
                 />
@@ -79,7 +94,7 @@ const canSubmit = computed(() => {
                         (val, update, abort) =>
                             inputSelectFilter(val, update, abort, agenciesOptions)
                     "
-                    :label="t('travel.list.agency')"
+                    :label="t('travel.shared.agency')"
                     transition-show="jump-up"
                     transition-hide="jump-up"
                     style="max-width: 100%"
@@ -89,14 +104,14 @@ const canSubmit = computed(() => {
                     type="date"
                     filled
                     mask="date"
-                    :label="t('travel.list.shipped')"
+                    :label="t('travel.shared.shipped')"
                 />
                 <QInput
                     v-model="newTravelData.landed"
                     type="date"
                     filled
                     mask="date"
-                    :label="t('travel.list.landed')"
+                    :label="t('travel.shared.landed')"
                 />
                 <QSelect
                     :options="warehousesOptions.filtered"
@@ -107,7 +122,7 @@ const canSubmit = computed(() => {
                         (val, update, abort) =>
                             inputSelectFilter(val, update, abort, warehousesOptions)
                     "
-                    :label="t('travel.list.wareHouseOut')"
+                    :label="t('travel.shared.wareHouseOut')"
                     transition-show="jump-up"
                     transition-hide="jump-up"
                 />
@@ -120,7 +135,7 @@ const canSubmit = computed(() => {
                         (val, update, abort) =>
                             inputSelectFilter(val, update, abort, warehousesOptions)
                     "
-                    :label="t('travel.list.wareHouseIn')"
+                    :label="t('travel.shared.wareHouseIn')"
                     transition-show="jump-up"
                     transition-hide="jump-up"
                 />
@@ -138,6 +153,7 @@ const canSubmit = computed(() => {
                     class="q-mt-md"
                     flat
                     :disable="!canSubmit"
+                    @click="redirectToTravelList()"
                 />
             </div>
         </QForm>
diff --git a/src/pages/Travel/TravelList.vue b/src/pages/Travel/TravelList.vue
index 716c7632f..15d878e52 100644
--- a/src/pages/Travel/TravelList.vue
+++ b/src/pages/Travel/TravelList.vue
@@ -16,12 +16,25 @@ const travelStore = useTravelStore();
 const quasar = useQuasar();
 const { t } = useI18n();
 
-function navigate(id) {
+const navigateToTravelId = (id) => {
     router.push({ path: `/travel/${id}` });
-}
+};
 
-const redirectToCreateView = () => {
-    router.push({ name: 'TravelCreate' });
+const cloneTravel = (travelData) => {
+    const params = JSON.stringify({
+        ref: travelData.ref,
+        agencyModeFk: travelData.agencyModeFk,
+        shipped: travelData.shipped,
+        landed: travelData.landed,
+        warehouseInFk: travelData.warehouseInFk,
+        warehouseOutFk: travelData.warehouseOutFk,
+    });
+
+    redirectToCreateView(params);
+};
+
+const redirectToCreateView = (queryParams) => {
+    router.push({ name: 'TravelCreate', query: { travelData: queryParams } });
 };
 
 const viewSummary = (id) => {
@@ -48,7 +61,7 @@ onMounted(async () => {
                         :key="row.id"
                         :title="row.ref"
                         :id="row.id"
-                        @click="navigate(row.id)"
+                        @click="navigateToTravelId(row.id)"
                     >
                         <template #list-items>
                             <VnLv
@@ -80,7 +93,7 @@ onMounted(async () => {
                         <template #actions>
                             <QBtn
                                 :label="t('travel.list.clone')"
-                                @click.stop="navigate(row.id)"
+                                @click.stop="cloneTravel(row)"
                                 color="white"
                                 outline
                                 type="reset"
@@ -121,12 +134,5 @@ onMounted(async () => {
 </style>
 
 <i18n>
-    {
-        "en": {
-            Search suppliers: Search suppliers
-        },
-        "es": {
-            Search suppliers: Buscar proveedores
-        }
-    }
+
 </i18n>

From df599f1e8de8d1b4d98ebb4755758ef6d9e462db Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Sat, 25 Nov 2023 21:19:22 -0300
Subject: [PATCH 3/4] add header options menu in travel summary

---
 src/i18n/en/index.js                    | 11 +++---
 src/i18n/es/index.js                    | 11 +++---
 src/pages/Travel/Card/TravelSummary.vue | 47 ++++++++++++++++++++-----
 src/pages/Travel/TravelCreate.vue       | 29 ++++++++-------
 src/pages/Travel/TravelList.vue         | 13 ++-----
 5 files changed, 73 insertions(+), 38 deletions(-)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 80bb80745..1314666c8 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -424,7 +424,7 @@ export default {
             comercial: 'Comercial',
         },
     },
-    shelving:{
+    shelving: {
         pageTitles: {
             shelving: 'Shelving',
             shelvingList: 'Shelving List',
@@ -441,14 +441,14 @@ export default {
             parking: 'Parking',
             priority: 'Priority',
             worker: 'Worker',
-            recyclable: 'Recyclable'
+            recyclable: 'Recyclable',
         },
         basicData: {
             code: 'Code',
             parking: 'Parking',
             priority: 'Priority',
-            recyclable: 'Recyclable'
-        }
+            recyclable: 'Recyclable',
+        },
     },
     worker: {
         pageTitles: {
@@ -637,6 +637,9 @@ export default {
             delivered: 'Delivered',
             received: 'Received',
             entries: 'Entries',
+            cloneShipping: 'Clone travel',
+            CloneTravelAndEntries: 'Clone travel and his entries',
+            AddEntry: 'Add entry',
         },
     },
     components: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 6a01cc5a5..edb20feb7 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -426,7 +426,7 @@ export default {
             comercial: 'Comercial',
         },
     },
-    shelving:{
+    shelving: {
         pageTitles: {
             shelving: 'Carros',
             shelvingList: 'Listado de carros',
@@ -443,14 +443,14 @@ export default {
             parking: 'Parking',
             priority: 'Prioridad',
             worker: 'Trabajador',
-            recyclable: 'Reciclable'
+            recyclable: 'Reciclable',
         },
         basicData: {
             code: 'Código',
             parking: 'Parking',
             priority: 'Prioridad',
-            recyclable: 'Reciclable'
-        }
+            recyclable: 'Reciclable',
+        },
     },
     worker: {
         pageTitles: {
@@ -639,6 +639,9 @@ export default {
             delivered: 'Enviada',
             received: 'Recibida',
             entries: 'Entradas',
+            cloneShipping: 'Clonar envío',
+            CloneTravelAndEntries: 'Clonar travel y sus entradas',
+            AddEntry: 'Añadir entrada',
         },
     },
     components: {
diff --git a/src/pages/Travel/Card/TravelSummary.vue b/src/pages/Travel/Card/TravelSummary.vue
index c476b6bc0..172b7a9dc 100644
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { onMounted, ref, computed, onUpdated } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
@@ -23,6 +23,7 @@ const $props = defineProps({
     },
 });
 
+const router = useRouter();
 const entityId = computed(() => $props.id || route.params.id);
 const entries = ref([]);
 const summaryRef = ref();
@@ -33,13 +34,16 @@ onMounted(async () => {
     travelUrl.value = (await getUrl('travel/')) + entityId.value;
 });
 
-async function setTravelData(data) {
-    if (data) {
-        travel.value = data;
-        const entriesResponse = await travelService.getTravelEntries(travel.value.id);
-        if (entriesResponse.data) entries.value = entriesResponse.data;
-    }
-}
+const cloneTravel = () => {
+    const stringifiedTravelData = JSON.stringify(travel.value);
+    redirectToCreateView(stringifiedTravelData);
+};
+
+const headerMenuOptions = [
+    { name: t('travel.summary.cloneShipping'), action: cloneTravel },
+    { name: t('travel.summary.CloneTravelAndEntries'), action: cloneTravel },
+    { name: t('travel.summary.AddEntry'), action: cloneTravel },
+];
 
 const tableColumnComponents = {
     isConfirmed: {
@@ -148,6 +152,18 @@ const entriesTableRows = computed(() => {
     if (!entries.value && !entries.value.length > 0) return [];
     return entries.value;
 });
+
+async function setTravelData(data) {
+    if (data) {
+        travel.value = data;
+        const entriesResponse = await travelService.getTravelEntries(travel.value.id);
+        if (entriesResponse.data) entries.value = entriesResponse.data;
+    }
+}
+
+const redirectToCreateView = (queryParams) => {
+    router.push({ name: 'TravelCreate', query: { travelData: queryParams } });
+};
 </script>
 
 <template>
@@ -165,6 +181,21 @@ const entriesTableRows = computed(() => {
             <span>{{ travel.ref }} - {{ travel.id }}</span>
         </template>
 
+        <template #header-right>
+            <QBtn color="white" dense flat icon="more_vert" round size="md">
+                <QTooltip>
+                    {{ t('components.cardDescriptor.moreOptions') }}
+                </QTooltip>
+                <QMenu>
+                    <QList dense v-for="option in headerMenuOptions" :key="option">
+                        <QItem v-ripple clickable @click="option.action">
+                            {{ option.name }}
+                        </QItem>
+                    </QList>
+                </QMenu>
+            </QBtn>
+        </template>
+
         <template #body>
             <QCard class="vn-one">
                 <VnLv
diff --git a/src/pages/Travel/TravelCreate.vue b/src/pages/Travel/TravelCreate.vue
index b0ea45917..6529e3bb2 100644
--- a/src/pages/Travel/TravelCreate.vue
+++ b/src/pages/Travel/TravelCreate.vue
@@ -5,6 +5,7 @@ import FetchData from 'components/FetchData.vue';
 import { useTravelStore } from 'src/stores/travel';
 import { useRouter, useRoute } from 'vue-router';
 import { inputSelectFilter } from 'src/composables/inputSelectFilterFn.js';
+import { toDate } from 'src/filters';
 import { onBeforeMount } from 'vue';
 
 const { t } = useI18n();
@@ -12,7 +13,7 @@ const route = useRoute();
 const router = useRouter();
 const travelStore = useTravelStore();
 
-const newTravelData = reactive({
+const newTravelDataForm = reactive({
     ref: null,
     agencyModeFk: null,
     shipped: null,
@@ -34,14 +35,18 @@ const warehousesOptions = reactive({
 onBeforeMount(() => {
     if (route.query.travelData) {
         const travelData = JSON.parse(route.query.travelData);
-        for (let key in travelData) {
-            newTravelData[key] = travelData[key];
+        for (let key in newTravelDataForm) {
+            if (key === 'landed' || key === 'shipped') {
+                newTravelDataForm[key] = travelData[key].substring(0, 10);
+            } else {
+                newTravelDataForm[key] = travelData[key];
+            }
         }
     }
 });
 
 const createTravel = async () => {
-    const response = await travelStore.createTravel(newTravelData);
+    const response = await travelStore.createTravel(newTravelDataForm);
     if (response.status === 200) router.push({ path: `/travel/${response.data.id}` });
 };
 
@@ -58,8 +63,8 @@ const onFetchWarehouses = (warehouses) => {
 };
 
 const canSubmit = computed(() => {
-    for (const key in newTravelData) {
-        if (!newTravelData[key]) return false;
+    for (const key in newTravelDataForm) {
+        if (!newTravelDataForm[key]) return false;
     }
     return true;
 });
@@ -80,14 +85,14 @@ const redirectToTravelList = () => {
         >
             <QCard class="row q-pa-xl full-width card">
                 <QInput
-                    v-model="newTravelData.ref"
+                    v-model="newTravelDataForm.ref"
                     :label="t('travel.shared.reference')"
                     filled
                     style="max-width: 100%"
                 />
                 <QSelect
                     :options="agenciesOptions.filtered"
-                    v-model="newTravelData.agencyModeFk"
+                    v-model="newTravelDataForm.agencyModeFk"
                     filled
                     use-input
                     @filter="
@@ -100,14 +105,14 @@ const redirectToTravelList = () => {
                     style="max-width: 100%"
                 />
                 <QInput
-                    v-model="newTravelData.shipped"
+                    v-model="newTravelDataForm.shipped"
                     type="date"
                     filled
                     mask="date"
                     :label="t('travel.shared.shipped')"
                 />
                 <QInput
-                    v-model="newTravelData.landed"
+                    v-model="newTravelDataForm.landed"
                     type="date"
                     filled
                     mask="date"
@@ -115,7 +120,7 @@ const redirectToTravelList = () => {
                 />
                 <QSelect
                     :options="warehousesOptions.filtered"
-                    v-model="newTravelData.warehouseOutFk"
+                    v-model="newTravelDataForm.warehouseOutFk"
                     filled
                     use-input
                     @filter="
@@ -128,7 +133,7 @@ const redirectToTravelList = () => {
                 />
                 <QSelect
                     :options="warehousesOptions.filtered"
-                    v-model="newTravelData.warehouseInFk"
+                    v-model="newTravelDataForm.warehouseInFk"
                     filled
                     use-input
                     @filter="
diff --git a/src/pages/Travel/TravelList.vue b/src/pages/Travel/TravelList.vue
index 15d878e52..8074bfd54 100644
--- a/src/pages/Travel/TravelList.vue
+++ b/src/pages/Travel/TravelList.vue
@@ -21,16 +21,9 @@ const navigateToTravelId = (id) => {
 };
 
 const cloneTravel = (travelData) => {
-    const params = JSON.stringify({
-        ref: travelData.ref,
-        agencyModeFk: travelData.agencyModeFk,
-        shipped: travelData.shipped,
-        landed: travelData.landed,
-        warehouseInFk: travelData.warehouseInFk,
-        warehouseOutFk: travelData.warehouseOutFk,
-    });
-
-    redirectToCreateView(params);
+    const stringifiedTravelData = JSON.stringify(travelData);
+    console.log('clone data:: ', stringifiedTravelData);
+    redirectToCreateView(stringifiedTravelData);
 };
 
 const redirectToCreateView = (queryParams) => {

From 7e22a2924e4024d259f39ccaf735ee15d7e891ce Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 27 Nov 2023 12:49:19 -0300
Subject: [PATCH 4/4] create travel filters and integrate

---
 src/composables/inputSelectFilterFn.js  |   9 +-
 src/pages/Travel/Card/TravelSummary.vue |  14 +-
 src/pages/Travel/TravelFilter.vue       | 380 ++++++++++++++++++++++++
 src/pages/Travel/TravelList.vue         |  17 +-
 4 files changed, 415 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/Travel/TravelFilter.vue

diff --git a/src/composables/inputSelectFilterFn.js b/src/composables/inputSelectFilterFn.js
index f038e7a7d..778d78a2a 100644
--- a/src/composables/inputSelectFilterFn.js
+++ b/src/composables/inputSelectFilterFn.js
@@ -7,6 +7,13 @@
  * @param {Object} optionsToFilter - Objeto que contiene las opciones originales y filtradas.
  */
 
+function normalizeString(text) {
+    return text
+        .toLowerCase()
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '');
+}
+
 export function inputSelectFilter(val, update, abort, optionsToFilter) {
     if (val === '') {
         update(() => {
@@ -20,7 +27,7 @@ export function inputSelectFilter(val, update, abort, optionsToFilter) {
     update(() => {
         const searchQuery = val.toLowerCase();
         optionsToFilter.filtered = optionsToFilter.original.filter((option) =>
-            option.label.toLowerCase().includes(searchQuery)
+            normalizeString(option.label).includes(normalizeString(searchQuery))
         );
     });
 }
diff --git a/src/pages/Travel/Card/TravelSummary.vue b/src/pages/Travel/Card/TravelSummary.vue
index 172b7a9dc..9fe4b8902 100644
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@@ -41,8 +41,8 @@ const cloneTravel = () => {
 
 const headerMenuOptions = [
     { name: t('travel.summary.cloneShipping'), action: cloneTravel },
-    { name: t('travel.summary.CloneTravelAndEntries'), action: cloneTravel },
-    { name: t('travel.summary.AddEntry'), action: cloneTravel },
+    { name: t('travel.summary.CloneTravelAndEntries'), action: null },
+    { name: t('travel.summary.AddEntry'), action: null },
 ];
 
 const tableColumnComponents = {
@@ -56,34 +56,42 @@ const tableColumnComponents = {
     id: {
         component: () => 'span',
         props: () => {},
+        event: () => openEntryDescriptor(),
     },
     supplierName: {
         component: () => 'span',
         props: () => {},
+        event: () => {},
     },
     reference: {
         component: () => 'span',
         props: () => {},
+        event: () => {},
     },
     freightValue: {
         component: () => 'span',
         props: () => {},
+        event: () => {},
     },
     packageValue: {
         component: () => 'span',
         props: () => {},
+        event: () => {},
     },
     cc: {
         component: () => 'span',
         props: () => {},
+        event: () => {},
     },
     pallet: {
         component: () => 'span',
         props: () => {},
+        event: () => {},
     },
     m3: {
         component: () => 'span',
         props: () => {},
+        event: () => {},
     },
     observation: {
         component: (props) => (props.value ? QIcon : null),
@@ -164,6 +172,8 @@ async function setTravelData(data) {
 const redirectToCreateView = (queryParams) => {
     router.push({ name: 'TravelCreate', query: { travelData: queryParams } });
 };
+
+const openEntryDescriptor = () => {};
 </script>
 
 <template>
diff --git a/src/pages/Travel/TravelFilter.vue b/src/pages/Travel/TravelFilter.vue
new file mode 100644
index 000000000..117b770e9
--- /dev/null
+++ b/src/pages/Travel/TravelFilter.vue
@@ -0,0 +1,380 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import { inputSelectFilter } from 'src/composables/inputSelectFilterFn.js';
+import FetchData from 'components/FetchData.vue';
+import { toDate } from 'src/filters';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const warehousesOptions = reactive({
+    original: [],
+    filtered: [],
+});
+
+const continentsOptions = reactive({
+    original: [],
+    filtered: [],
+});
+
+const agenciesOptions = reactive({
+    original: [],
+    filtered: [],
+});
+
+const onFetchWarehouses = (warehouses) => {
+    warehousesOptions.original = warehouses.map((warehouse) => {
+        return { value: warehouse.id, label: warehouse.name };
+    });
+};
+
+const onFetchContinents = (continents) => {
+    continentsOptions.original = continents.map((continent) => {
+        return { value: continent.code, label: continent.name };
+    });
+};
+
+const onFetchAgencies = (agencies) => {
+    agenciesOptions.original = agencies.map((agency) => {
+        return { value: agency.agencyFk, label: agency.name };
+    });
+};
+
+const add = (paramsObj, key) => {
+    if (paramsObj[key] === undefined) {
+        paramsObj[key] = 1;
+    } else {
+        paramsObj[key]++;
+    }
+};
+
+const decrement = (paramsObj, key) => {
+    if (paramsObj[key] === 0) return;
+
+    paramsObj[key]--;
+};
+</script>
+
+<template>
+    <FetchData url="Warehouses" @on-fetch="(data) => onFetchWarehouses(data)" auto-load />
+    <FetchData url="Continents" @on-fetch="(data) => onFetchContinents(data)" auto-load />
+    <FetchData url="AgencyModes" @on-fetch="(data) => onFetchAgencies(data)" auto-load />
+
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <!-- searchFn -->
+        <template #body="{ params }">
+            <QList dense>
+                <QItem class="q-my-sm">
+                    <QItemSection>
+                        <QInput
+                            :label="t('params.search')"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            v-model="params.search"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QSelect
+                            :label="t('params.agencyModeFk')"
+                            :options="agenciesOptions.filtered"
+                            use-input
+                            option-value="value"
+                            option-label="label"
+                            emit-value
+                            map-options
+                            transition-show="jump-up"
+                            transition-hide="jump-up"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            @filter="
+                                (val, update, abort) =>
+                                    inputSelectFilter(val, update, abort, agenciesOptions)
+                            "
+                            v-model="params.agencyModeFk"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QSelect
+                            :label="t('travel.shared.wareHouseOut')"
+                            :options="warehousesOptions.filtered"
+                            use-input
+                            option-value="value"
+                            option-label="label"
+                            emit-value
+                            map-options
+                            transition-show="jump-up"
+                            transition-hide="jump-up"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            @filter="
+                                (val, update, abort) =>
+                                    inputSelectFilter(
+                                        val,
+                                        update,
+                                        abort,
+                                        warehousesOptions
+                                    )
+                            "
+                            v-model="params.warehouseOutFk"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QSelect
+                            :label="t('params.wareHouseIn')"
+                            :options="warehousesOptions.filtered"
+                            use-input
+                            option-value="value"
+                            option-label="label"
+                            emit-value
+                            map-options
+                            transition-show="jump-up"
+                            transition-hide="jump-up"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            @filter="
+                                (val, update, abort) =>
+                                    inputSelectFilter(
+                                        val,
+                                        update,
+                                        abort,
+                                        warehousesOptions
+                                    )
+                            "
+                            v-model="params.warehouseInFk"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QInput
+                            v-model="params.scopeDays"
+                            type="number"
+                            :label="t('params.scopeDays')"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            class="input-number"
+                        >
+                            <template #append>
+                                <QBtn
+                                    icon="add"
+                                    flat
+                                    dense
+                                    size="12px"
+                                    @click="add(params, 'scopeDays')"
+                                />
+                                <QBtn
+                                    icon="remove"
+                                    flat
+                                    dense
+                                    size="12px"
+                                    @click="decrement(params, 'scopeDays')"
+                                />
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QInput
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            placeholder="dd-mm-aaa"
+                            :label="t('params.landedFrom')"
+                            :model-value="toDate(params.landedFrom)"
+                        >
+                            <template #append>
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <QDate v-model="params.landedFrom">
+                                            <div class="row items-center justify-end">
+                                                <QBtn
+                                                    v-close-popup
+                                                    label="Close"
+                                                    color="primary"
+                                                    flat
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QInput
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            placeholder="dd-mm-aaa"
+                            :model-value="toDate(params.landedTo)"
+                            :label="t('params.landedTo')"
+                        >
+                            <template #append>
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <QDate v-model="params.landedTo">
+                                            <div class="row items-center justify-end">
+                                                <QBtn
+                                                    v-close-popup
+                                                    label="Close"
+                                                    color="primary"
+                                                    flat
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QSelect
+                            :label="t('params.continent')"
+                            :options="continentsOptions.filtered"
+                            use-input
+                            option-value="value"
+                            option-label="label"
+                            emit-value
+                            map-options
+                            transition-show="jump-up"
+                            transition-hide="jump-up"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            @filter="
+                                (val, update, abort) =>
+                                    inputSelectFilter(
+                                        val,
+                                        update,
+                                        abort,
+                                        continentsOptions
+                                    )
+                            "
+                            v-model="params.continent"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QInput
+                            v-model="params.totalEntries"
+                            type="number"
+                            :label="t('params.totalEntries')"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            min="0"
+                            class="input-number"
+                        >
+                            <template #append>
+                                <QBtn
+                                    icon="add"
+                                    flat
+                                    dense
+                                    size="12px"
+                                    @click="add(params, 'totalEntries')"
+                                />
+                                <QBtn
+                                    icon="remove"
+                                    flat
+                                    dense
+                                    size="12px"
+                                    @click="decrement(params, 'totalEntries')"
+                                />
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+            </QList>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<style scoped>
+.input-number >>> input[type='number'] {
+    -moz-appearance: textfield;
+}
+.input-number >>> input::-webkit-outer-spin-button,
+.input-number >>> input::-webkit-inner-spin-button {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}
+</style>
+
+<i18n>
+   {
+        "en": {
+            "params": {
+                "search": "Id/Reference",
+                "agencyModeFk": "Agency",
+                "wareHouseIn": "Warehouse In",
+                "wareHouseOut": "Warehouse Out",
+                "scopeDays": "Days onward",
+                "landedFrom": "Landed from",
+                "landedTo": "Landed to",
+                "continent": "Continent out",
+                "totalEntries": "Total entries"
+            },
+        },
+        "es": {
+            "params":{
+                "search": "Id/Referencia",
+                "agencyModeFk": "Agencia",
+                "wareHouseIn": "Alm. entrada",
+                "wareHouseOut": "Alm. salida",
+                "scopeDays": "Días adelante",
+                "landedFrom": "Llegada desde",
+                "landedTo": "Llegada hasta",
+                "continent": "Cont. Salida",
+                "totalEntries": "Ent. totales"
+            },
+        }
+    }
+</i18n>
diff --git a/src/pages/Travel/TravelList.vue b/src/pages/Travel/TravelList.vue
index 8074bfd54..2a4f312a1 100644
--- a/src/pages/Travel/TravelList.vue
+++ b/src/pages/Travel/TravelList.vue
@@ -10,11 +10,14 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import TravelSummaryDialog from './Card/TravelSummaryDialog.vue';
 import { useTravelStore } from 'src/stores/travel.js';
 import { useQuasar } from 'quasar';
+import { useStateStore } from 'stores/useStateStore';
+import TravelFilter from './TravelFilter.vue';
 
 const router = useRouter();
 const travelStore = useTravelStore();
 const quasar = useQuasar();
 const { t } = useI18n();
+const stateStore = useStateStore();
 
 const navigateToTravelId = (id) => {
     router.push({ path: `/travel/${id}` });
@@ -22,7 +25,6 @@ const navigateToTravelId = (id) => {
 
 const cloneTravel = (travelData) => {
     const stringifiedTravelData = JSON.stringify(travelData);
-    console.log('clone data:: ', stringifiedTravelData);
     redirectToCreateView(stringifiedTravelData);
 };
 
@@ -41,13 +43,24 @@ const viewSummary = (id) => {
 
 onMounted(async () => {
     await travelStore.init();
+    stateStore.rightDrawer = true;
 });
 </script>
 
 <template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <TravelFilter data-key="TravelList" />
+        </QScrollArea>
+    </QDrawer>
     <QPage class="column items-center q-pa-md">
         <div class="card-list">
-            <VnPaginate data-key="SuppliersList" url="Travels/filter" auto-load>
+            <VnPaginate
+                data-key="TravelList"
+                url="Travels/filter"
+                auto-load
+                order="shipped DESC, landed DESC"
+            >
                 <template #body="{ rows }">
                     <CardList2
                         v-for="row of rows"