travel WIP

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)
+        );
+    });
+}

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: {

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: {

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';
 

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>

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"

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>

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>

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>

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>

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>

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>

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,
+];

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'),
                 },

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'),
+                },
+            ],
+        },
+    ],
+};

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',

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;

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();

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: {},
+});

src/stores/useNavigationStore.js

@@ -15,6 +15,7 @@ export const useNavigationStore = defineStore('navigationStore', () => {
         'wagon',
         'route',
         'supplier',
+        'travel',
     ];
     const pinnedModules = ref([]);
     const role = useRole();