refs #6062 fix: migration errors

package-lock.json

@@ -1,14 +1,14 @@
 {
     "name": "salix-front",
-    "version": "23.36.01",
+    "version": "23.52.01",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "salix-front",
-            "version": "0.0.1",
+            "version": "23.52.01",
             "dependencies": {
-                "@quasar/cli": "^2.2.1",
+                "@quasar/cli": "^2.3.0",
                 "@quasar/extras": "^1.16.4",
                 "axios": "^1.4.0",
                 "chromium": "^3.0.3",
@@ -946,9 +946,9 @@
             }
         },
         "node_modules/@quasar/cli": {
-            "version": "2.2.1",
-            "resolved": "https://registry.npmjs.org/@quasar/cli/-/cli-2.2.1.tgz",
-            "integrity": "sha512-PMwJ76IeeNRRBw+08hUMjhqGC6JKJ/t1zIb+IOiyR5D4rkBR26Ha/Z46OD3KfwUprq4Q8s4ieB1+d3VY8FhPKg==",
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@quasar/cli/-/cli-2.3.0.tgz",
+            "integrity": "sha512-DNFDemicj3jXe5+Ib+5w9Bwj1U3yoHQkqn0bU/qysIl/p0MmGA1yqOfUF0V4fw/5or1dfCvStIA/oZxUcC+2pQ==",
             "dependencies": {
                 "@quasar/ssl-certificate": "^1.0.0",
                 "ci-info": "^3.8.0",

src/boot/vnDate.js

@@ -15,4 +15,14 @@ export default boot(() => {
     Date.vnNow = () => {
         return new Date(Date.vnUTC()).getTime();
     };
+
+    Date.vnFirstDayOfMonth = () => {
+        const date = new Date(Date.vnUTC());
+        return new Date(date.getFullYear(), date.getMonth(), 1);
+    };
+
+    Date.vnLastDayOfMonth = () => {
+        const date = new Date(Date.vnUTC());
+        return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+    };
 });

src/components/FormModel.vue

@@ -6,6 +6,7 @@ import { useQuasar } from 'quasar';
 import { useState } from 'src/composables/useState';
 import { useStateStore } from 'stores/useStateStore';
 import { useValidator } from 'src/composables/useValidator';
+import useNotify from 'src/composables/useNotify.js';
 import SkeletonForm from 'components/ui/SkeletonForm.vue';
 
 const quasar = useQuasar();
@@ -13,6 +14,7 @@ const state = useState();
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { validate } = useValidator();
+const { notify } = useNotify();
 
 const $props = defineProps({
     url: {
@@ -31,10 +33,28 @@ const $props = defineProps({
         type: String,
         default: null,
     },
+    urlCreate: {
+        type: String,
+        default: null,
+    },
     defaultActions: {
         type: Boolean,
         default: true,
     },
+    autoLoad: {
+        type: Boolean,
+        default: false,
+    },
+    formInitialData: {
+        type: Object,
+        default: () => {},
+    },
+    observeFormChanges: {
+        type: Boolean,
+        default: true,
+        description:
+            'Esto se usa principalmente para permitir guardar sin hacer cambios (Útil para la feature de clonar ya que en este caso queremos poder guardar de primeras)',
+    },
 });
 
 const emit = defineEmits(['onFetch']);
@@ -43,44 +63,73 @@ defineExpose({
     save,
 });
 
-onMounted(async () => await fetch());
+onMounted(async () => {
+    // Podemos enviarle al form la estructura de data inicial sin necesidad de fetchearla
+    if ($props.formInitialData && !$props.autoLoad) {
+        state.set($props.model, $props.formInitialData);
+    } else {
+        await fetch();
+    }
+
+    // Disparamos el watcher del form después de que se haya cargado la data inicial, si así se desea
+    if ($props.observeFormChanges) {
+        startFormWatcher();
+    }
+});
 
 onUnmounted(() => {
     state.unset($props.model);
 });
 
 const isLoading = ref(false);
-const hasChanges = ref(false);
-const originalData = ref();
+// Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas
+const hasChanges = ref(!$props.observeFormChanges);
+const originalData = ref({...$props.formInitialData});
 const formData = computed(() => state.get($props.model));
 const formUrl = computed(() => $props.url);
 
+const startFormWatcher = () => {
+    watch(
+        () => formData.value,
+        (val) => {
+            if (val) hasChanges.value = true;
+        },
+        { deep: true }
+    );
+};
+
 function tMobile(...args) {
     if (!quasar.platform.is.mobile) return t(...args);
 }
 
 async function fetch() {
     const { data } = await axios.get($props.url, {
-        params: { filter: $props.filter },
+        params: { filter: JSON.stringify($props.filter) },
     });
 
     state.set($props.model, data);
     originalData.value = data && JSON.parse(JSON.stringify(data));
 
-    watch(formData.value, () => (hasChanges.value = true));
-
     emit('onFetch', state.get($props.model));
 }
 
 async function save() {
     if (!hasChanges.value) {
-        return quasar.notify({
-            type: 'negative',
-            message: t('globals.noChanges'),
-        });
+        notify('globals.noChanges', 'negative');
+        return;
     }
     isLoading.value = true;
-    await axios.patch($props.urlUpdate || $props.url, formData.value);
+
+    try {
+        if ($props.urlCreate) {
+            await axios.post($props.urlCreate, formData.value);
+            notify('globals.dataCreated', 'positive');
+        } else {
+            await axios.patch($props.urlUpdate || $props.url, formData.value);
+        }
+    } catch (err) {
+        notify('errors.create', 'negative');
+    }
 
     originalData.value = JSON.parse(JSON.stringify(formData.value));
     hasChanges.value = false;
@@ -91,11 +140,12 @@ function reset() {
     state.set($props.model, originalData.value);
     originalData.value = JSON.parse(JSON.stringify(originalData.value));
 
-    watch(formData.value, () => (hasChanges.value = true));
-
     emit('onFetch', state.get($props.model));
-    hasChanges.value = false;
+    if ($props.observeFormChanges) {
+        hasChanges.value = false;
+    }
 }
+
 // eslint-disable-next-line vue/no-dupe-keys
 function filter(value, update, filterOptions) {
     update(
@@ -118,7 +168,7 @@ watch(formUrl, async () => {
 });
 </script>
 <template>
-    <QBanner v-if="hasChanges" class="text-white bg-warning">
+    <QBanner v-if="$props.observeFormChanges && hasChanges" class="text-white bg-warning">
         <QIcon name="warning" size="md" class="q-mr-md" />
         <span>{{ t('globals.changesToSave') }}</span>
     </QBanner>
@@ -176,6 +226,7 @@ watch(formUrl, async () => {
     max-width: 800px;
     width: 100%;
 }
+
 .q-card {
     padding: 32px;
 }

src/components/common/VnInputDate.vue

@@ -0,0 +1,76 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { toDate } from 'src/filters';
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: null,
+    },
+    readonly: {
+        type: Boolean,
+        default: false,
+    }
+});
+const emit = defineEmits(['update:modelValue']);
+const value = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value ? new Date(value).toISOString() : null);
+    },
+});
+
+const isPopupOpen = ref(false);
+
+const onDateUpdate = (date) => {
+    value.value = date;
+    isPopupOpen.value = false;
+};
+
+const padDate = (value) => value.toString().padStart(2, '0');
+const formatDate = (dateString) => {
+    const date = new Date(dateString || '');
+    return `${date.getFullYear()}/${padDate(date.getMonth() + 1)}/${padDate(
+        date.getDate()
+    )}`;
+};
+</script>
+
+<template>
+    <QInput
+        class="vn-input-date"
+        rounded
+        readonly
+        :model-value="toDate(value)"
+        v-bind="$attrs"
+    >
+        <template #append>
+            <QIcon name="event" class="cursor-pointer">
+                <QPopupProxy
+                    v-model="isPopupOpen"
+                    cover
+                    transition-show="scale"
+                    transition-hide="scale"
+                    :no-parent-event="props.readonly"
+                >
+                    <QDate
+                        :model-value="formatDate(value)"
+                        @update:model-value="onDateUpdate"
+                    />
+                </QPopupProxy>
+            </QIcon>
+        </template>
+    </QInput>
+</template>
+
+<style lang="scss">
+.vn-input-date.q-field--standard.q-field--readonly .q-field__control:before {
+    border-bottom-style: solid;
+}
+
+.vn-input-date.q-field--outlined.q-field--readonly .q-field__control:before {
+    border-style: solid;
+}
+</style>

src/components/common/VnLog.vue

@@ -25,6 +25,14 @@ const props = defineProps({
         type: String,
         default: null,
     },
+    url: {
+        type: String,
+        default: null,
+    },
+    mapper: {
+        type: Function,
+        default: null,
+    },
 });
 
 const filter = {
@@ -155,7 +163,7 @@ function parseProps(propNames, locale, vals, olds) {
     return props;
 }
 
-function getLogs(data) {
+function getLogTree(data) {
     const logs = [];
     let originLog = null;
     let userLog = null;
@@ -226,10 +234,8 @@ async function openPointRecord(id, modelLog) {
 }
 async function setLogTree() {
     filter.where = { and: [{ originFk: route.params.id }] };
-    const { data } = await axios.get(`${props.model}Logs`, {
-        params: { filter: JSON.stringify(filter) },
-    });
-    logTree.value = getLogs(data);
+    const { data } = await getLogs(filter);
+    logTree.value = getLogTree(data);
 }
 
 function filterByRecord(modelLog) {
@@ -257,11 +263,15 @@ async function applyFilter() {
         filter.where.and.push(selectedFilters.value);
     }
 
-    const { data } = await axios.get(`${props.model}Logs`, {
+    const { data } = await getLogs(filter);
+
+    logTree.value = getLogTree(data);
+}
+
+async function getLogs(filter) {
+    return axios.get(props.url ?? `${props.model}Logs`, {
         params: { filter: JSON.stringify(filter) },
     });
-
-    logTree.value = getLogs(data);
 }
 
 function setDate(type) {
@@ -467,7 +477,7 @@ setLogTree();
                     </QItemSection>
                     <QItemSection>
                         <QCard
-                            class="changes-log q-py-none"
+                            class="changes-log q-py-none q-mb-xs"
                             v-for="(log, logIndex) in modelLog.logs"
                             :key="logIndex"
                         >

src/components/common/VnSelectFilter.vue

@@ -98,7 +98,12 @@ const value = computed({
         ref="vnSelectRef"
     >
         <template v-if="isClearable" #append>
-            <QIcon name="close" @click.stop="value = null" class="cursor-pointer" />
+            <QIcon
+                name="close"
+                @click.stop="value = null"
+                class="cursor-pointer"
+                size="18px"
+            />
         </template>
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData">
             <slot :name="slotName" v-bind="slotData ?? {}" />

src/components/ui/CardDescriptor.vue

@@ -63,6 +63,7 @@ async function getData() {
         skip: 0,
     });
     const { data } = await arrayData.fetch({ append: false });
+    entity.value = data;
     emit('onFetch', data);
 }
 const emit = defineEmits(['onFetch']);
@@ -98,13 +99,13 @@ function viewSummary(id) {
                 </QBtn>
                 <RouterLink :to="{ name: `${module}Summary`, params: { id: entity.id } }">
                     <QBtn
-                        round
-                        flat
-                        dense
-                        size="md"
-                        icon="launch"
-                        color="white"
                         class="link"
+                        color="white"
+                        dense
+                        flat
+                        icon="launch"
+                        round
+                        size="md"
                     >
                         <QTooltip>
                             {{ t('components.cardDescriptor.summary') }}
@@ -112,13 +113,13 @@ function viewSummary(id) {
                     </QBtn>
                 </RouterLink>
                 <QBtn
-                    v-if="slots.menu"
-                    size="md"
-                    icon="more_vert"
                     color="white"
-                    round
-                    flat
                     dense
+                    flat
+                    icon="more_vert"
+                    round
+                    size="md"
+                    v-if="slots.menu"
                 >
                     <QTooltip>
                         {{ t('components.cardDescriptor.moreOptions') }}

src/components/ui/CardList.vue

@@ -1,31 +1,69 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
 const $props = defineProps({
+    element: { type: Object, default: null },
     id: { type: Number, default: null },
+    isSelected: { type: Boolean, default: false },
     title: { type: String, default: null },
+    showCheckbox: { type: Boolean, default: false },
 });
+
+const emit = defineEmits(['toggleCardCheck']);
+
+const toggleCardCheck = (item) => {
+    emit('toggleCardCheck', item);
+};
 </script>
+
 <template>
     <QCard class="card q-mb-md cursor-pointer q-hoverable bg-white-7 q-pa-lg">
         <div>
             <slot name="title">
-                <div class="title text-primary text-weight-bold text-h5">
-                    {{ $props.title ?? `#${$props.id}` }}
+                <div class="flex justify-between">
+                    <div class="flex items-center">
+                        <div class="title text-primary text-weight-bold text-h5">
+                            {{ $props.title }}
+                        </div>
+                        <QChip class="q-chip-color" outline size="sm">
+                            {{ t('ID') }}: {{ $props.id }}
+                        </QChip>
+                    </div>
+                    <QCheckbox
+                        v-if="showCheckbox"
+                        :model-value="isSelected"
+                        @click="toggleCardCheck($props.element)"
+                    />
                 </div>
             </slot>
-            <div class="card-list-body row">
-                <div class="list-items row flex-wrap-wrap q-mt-md">
+            <div class="card-list-body">
+                <div class="list-items row flex-wrap-wrap">
                     <slot name="list-items" />
                 </div>
 
-                <div class="actions column justify-center">
+                <div class="actions">
                     <slot name="actions" />
                 </div>
             </div>
         </div>
     </QCard>
 </template>
+
 <style lang="scss">
+.title {
+    margin-right: 25px;
+}
+
+.q-chip-color {
+    color: var(--vn-label);
+}
+
 .card-list-body {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
     .vn-label-value {
         display: flex;
         justify-content: flex-start;
@@ -39,28 +77,33 @@ const $props = defineProps({
             white-space: nowrap;
         }
         .value {
-            width: 60%;
+            width: 65%;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
         }
     }
     .actions {
-        .q-btn {
-            width: 30px;
-        }
-        .q-icon {
-            color: $primary;
-            font-size: 25px;
-        }
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        width: 25%;
     }
 }
 
 @media (max-width: $breakpoint-xs) {
     .card-list-body {
+        flex-wrap: wrap;
+        justify-content: center;
         .vn-label-value {
             width: 100%;
         }
+        .actions {
+            width: 100%;
+            margin-top: 15px;
+            padding: 0 15%;
+            justify-content: center;
+        }
     }
 }
 </style>
@@ -73,11 +116,11 @@ const $props = defineProps({
     background-color: var(--vn-gray);
 }
 .list-items {
-    width: 90%;
-}
-@media (max-width: $breakpoint-xs) {
-    .list-items {
-        width: 85%;
-    }
+    width: 75%;
 }
 </style>
+
+<i18n>
+    es:
+        ID: ID
+</i18n>

src/components/ui/CardSummary.vue

@@ -27,7 +27,7 @@ defineExpose({
 async function fetch() {
     const params = {};
 
-    if (props.filter) params.filter = props.filter;
+    if (props.filter) params.filter = JSON.stringify(props.filter);
 
     const { data } = await axios.get(props.url, { params });
     entity.value = data;
@@ -73,6 +73,7 @@ watch(props, async () => {
 
 .cardSummary {
     width: 100%;
+
     .summaryHeader {
         text-align: center;
         font-size: 20px;
@@ -86,6 +87,7 @@ watch(props, async () => {
         justify-content: space-evenly;
         gap: 15px;
         padding: 15px;
+        background-color: var(--vn-gray);
 
         > .q-card.vn-one {
             width: 350px;

src/components/ui/VnFilterPanel.vue

@@ -26,7 +26,7 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(['refresh', 'clear']);
+const emit = defineEmits(['refresh', 'clear', 'search']);
 
 const arrayData = useArrayData(props.dataKey);
 const store = arrayData.store;
@@ -49,6 +49,7 @@ async function search() {
     if (!props.showAll && !Object.values(params).length) store.data = [];
 
     isLoading.value = false;
+    emit('search');
 }
 
 async function reload() {
@@ -102,6 +103,7 @@ function formatValue(value) {
     return `"${value}"`;
 }
 </script>
+
 <template>
     <QForm @submit="search">
         <QList dense>
@@ -115,32 +117,32 @@ function formatValue(value) {
                     <div class="q-gutter-xs">
                         <QBtn
                             @click="clearFilters"
-                            icon="filter_list_off"
                             color="primary"
-                            size="sm"
+                            dense
+                            flat
+                            icon="filter_list_off"
                             padding="none"
                             round
-                            flat
-                            dense
+                            size="sm"
                         >
                             <QTooltip>{{ t('Remove filters') }}</QTooltip>
                         </QBtn>
                         <QBtn
                             @click="reload"
-                            icon="refresh"
                             color="primary"
-                            size="sm"
+                            dense
+                            flat
+                            icon="refresh"
                             padding="none"
                             round
-                            flat
-                            dense
+                            size="sm"
                         >
                             <QTooltip>{{ t('Refresh') }}</QTooltip>
                         </QBtn>
                     </div>
                 </QItemSection>
             </QItem>
-            <QItem>
+            <QItem class="q-mb-sm">
                 <div
                     v-if="tags.length === 0"
                     class="text-grey font-xs text-center full-width"
@@ -149,14 +151,14 @@ function formatValue(value) {
                 </div>
                 <div>
                     <QChip
-                        v-for="chip of tags"
                         :key="chip.label"
                         @remove="remove(chip.label)"
-                        icon="label"
-                        color="primary"
                         class="text-dark"
-                        size="sm"
+                        color="primary"
+                        icon="label"
                         removable
+                        size="sm"
+                        v-for="chip of tags"
                     >
                         <slot name="tags" :tag="chip" :format-fn="formatValue">
                             <div class="q-gutter-x-xs">
@@ -168,29 +170,29 @@ function formatValue(value) {
                 </div>
             </QItem>
             <QSeparator />
-            <template v-if="props.searchButton">
-                <QItem>
-                    <QItemSection class="q-py-sm">
-                        <QBtn
-                            :label="t('Search')"
-                            type="submit"
-                            color="primary"
-                            class="full-width"
-                            icon="search"
-                            unelevated
-                            rounded
-                            dense
-                        />
-                    </QItemSection>
-                </QItem>
-                <QSeparator />
-            </template>
         </QList>
         <slot name="body" :params="userParams" :search-fn="search"></slot>
+        <template v-if="props.searchButton">
+            <QItem>
+                <QItemSection class="q-py-sm">
+                    <QBtn
+                        :label="t('Search')"
+                        class="full-width"
+                        color="primary"
+                        dense
+                        icon="search"
+                        rounded
+                        type="submit"
+                        unelevated
+                    />
+                </QItemSection>
+            </QItem>
+            <QSeparator />
+        </template>
     </QForm>
     <QInnerLoading
-        :showing="isLoading"
         :label="t('globals.pleaseWait')"
+        :showing="isLoading"
         color="primary"
     />
 </template>

src/composables/useArrayData.js

@@ -149,13 +149,13 @@ export function useArrayData(key, userOptions) {
         return { filter, params };
     }
 
-    function sanitizerParams(params) {
+    function sanitizerParams(params, exprBuilder) {
         for (const param in params) {
             if (params[param] === '' || params[param] === null) {
                 delete store.userParams[param];
                 delete params[param];
                 if (store.filter?.where) {
-                    delete store.filter.where[Object.keys(store?.exprBuilder(param))[0]];
+                    delete store.filter.where[Object.keys(exprBuilder ? exprBuilder(param) : param)[0]];
                     if (Object.keys(store.filter.where).length === 0) {
                         delete store.filter.where;
                     }

src/composables/useNotify.js

@@ -0,0 +1,22 @@
+import { Notify } from 'quasar';
+import { i18n } from 'src/boot/i18n';
+
+export default function useNotify() {
+    const notify = (message, type, icon) => {
+        const defaultIcons = {
+            warning: 'warning',
+            negative: 'error',
+            positive: 'check',
+        };
+
+        Notify.create({
+            message: i18n.global.t(message),
+            type: type,
+            icon: icon ? icon : defaultIcons[type],
+        });
+    };
+
+    return {
+        notify,
+    };
+}

src/composables/useState.js

@@ -8,6 +8,7 @@ const user = ref({
     nickname: '',
     lang: '',
     darkMode: null,
+    companyFk: null,
 });
 
 const roles = ref([]);
@@ -23,6 +24,7 @@ export function useState() {
                 nickname: user.value.nickname,
                 lang: user.value.lang,
                 darkMode: user.value.darkMode,
+                companyFk: user.value.companyFk,
             };
         });
     }
@@ -34,6 +36,7 @@ export function useState() {
             nickname: data.nickname,
             lang: data.lang,
             darkMode: data.darkMode,
+            companyFk: data.companyFk,
         };
     }
 
@@ -59,7 +62,6 @@ export function useState() {
         delete state.value[name];
     }
 
-
     return {
         getUser,
         setUser,
@@ -69,6 +71,6 @@ export function useState() {
         get,
         unset,
         drawer,
-        headerMounted
+        headerMounted,
     };
 }

src/composables/useUserConfig.js

@@ -1,14 +1,24 @@
 import axios from 'axios';
 import { useState } from './useState';
+import useNotify from './useNotify';
 
 export function useUserConfig() {
     const state = useState();
+    const { notify } = useNotify();
 
     async function fetch() {
-        const { data } = await axios.get('UserConfigs/getUserConfig');
-        const user = state.getUser().value;
-        user.darkMode = data.darkMode;
-        state.setUser(user);
+        try {
+            const { data } = await axios.get('UserConfigs/getUserConfig');
+            const user = state.getUser().value;
+            user.darkMode = data.darkMode;
+            user.companyFk = data.companyFk;
+            state.setUser(user);
+
+            return data;
+        } catch (error) {
+            notify('globals.errors.userConfig', 'negative');
+            console.error('Error fetching user config:', error);
+        }
     }
 
     return {

src/i18n/en/index.js

@@ -21,6 +21,7 @@ export default {
         dataDeleted: 'Data deleted',
         search: 'Search',
         changes: 'Changes',
+        dataCreated: 'Data created',
         add: 'Add',
         create: 'Create',
         save: 'Save',
@@ -47,12 +48,29 @@ export default {
         dateFormat: 'en-GB',
         microsip: 'Open in MicroSIP',
         noSelectedRows: `You don't have any line selected`,
+        downloadCSVSuccess: 'CSV downloaded successfully',
+        // labels compartidos entre vistas
+        reference: 'Reference',
+        agency: 'Agency',
+        wareHouseOut: 'Warehouse Out',
+        wareHouseIn: 'Warehouse In',
+        landed: 'Landed',
+        shipped: 'Shipped',
+        totalEntries: 'Total entries',
+        amount: 'Amount',
+        packages: 'Packages',
+        download: 'Download',
+        selectRows: 'Select all { numberRows } row(s)',
+        allRows: 'All { numberRows } row(s)',
+        markAll: 'Mark all',
     },
     errors: {
         statusUnauthorized: 'Access denied',
         statusInternalServerError: 'An internal server error has ocurred',
         statusBadGateway: 'It seems that the server has fall down',
         statusGatewayTimeout: 'Could not contact the server',
+        userConfig: 'Error fetching user config',
+        create: 'Error during creation',
     },
     login: {
         title: 'Login',
@@ -235,7 +253,6 @@ export default {
             invoice: 'Invoice',
             shipped: 'Shipped',
             landed: 'Landed',
-            packages: 'Packages',
             consigneePhone: 'Consignee phone',
             consigneeMobile: 'Consignee mobile',
             clientPhone: 'Client phone',
@@ -252,7 +269,6 @@ export default {
             description: 'Description',
             price: 'Price',
             discount: 'Discount',
-            amount: 'Amount',
             packing: 'Packing',
             hasComponentLack: 'Component lack',
             itemShortage: 'Not visible',
@@ -345,7 +361,6 @@ export default {
             assignedTo: 'Assigned',
             created: 'Created',
             state: 'State',
-            packages: 'Packages',
             picked: 'Picked',
             returnOfMaterial: 'Return of material authorization (RMA)',
         },
@@ -359,6 +374,8 @@ export default {
         pageTitles: {
             invoiceOuts: 'Create invoice',
             list: 'List',
+            negativeBases: 'Negative Bases',
+            globalInvoicing: 'Global invoicing',
             createInvoiceOut: 'Create invoice out',
             summary: 'Summary',
             basicData: 'Basic Data',
@@ -367,7 +384,6 @@ export default {
             ref: 'Reference',
             issued: 'Issued',
             shortIssued: 'Issued',
-            amount: 'Amount',
             client: 'Client',
             created: 'Created',
             shortCreated: 'Created',
@@ -377,7 +393,6 @@ export default {
         },
         card: {
             issued: 'Issued',
-            amount: 'Amount',
             client: 'Client',
             company: 'Company',
             customerCard: 'Customer card',
@@ -400,6 +415,73 @@ export default {
             shipped: 'Shipped',
             totalWithVat: 'Amount',
         },
+        globalInvoices: {
+            errors: {
+                chooseValidClient: 'Choose a valid client',
+                chooseValidCompany: 'Choose a valid company',
+                chooseValidPrinter: 'Choose a valid printer',
+                fillDates: 'Invoice date and the max date should be filled',
+                invoiceDateLessThanMaxDate: 'Invoice date can not be less than max date',
+                invoiceWithFutureDate: 'Exists an invoice with a future date',
+                noTicketsToInvoice: 'There are not clients to invoice',
+                criticalInvoiceError: 'Critical invoicing error, process stopped',
+            },
+            table: {
+                client: 'Client',
+                addressId: 'Address id',
+                streetAddress: 'Street',
+            },
+            statusCard: {
+                percentageText: '{getPercentage}% {getAddressNumber} of {getNAddresses}',
+                pdfsNumberText: '{nPdfs} of {totalPdfs} PDFs',
+            },
+        },
+        negativeBases: {
+            from: 'From',
+            to: 'To',
+            company: 'Company',
+            country: 'Country',
+            clientId: 'Client Id',
+            client: 'Client',
+            amount: 'Amount',
+            base: 'Base',
+            ticketId: 'Ticket Id',
+            active: 'Active',
+            hasToInvoice: 'Has to Invoice',
+            verifiedData: 'Verified Data',
+            comercial: 'Comercial',
+            errors: {
+                downloadCsvFailed: 'CSV download failed',
+            },
+        },
+    },
+    shelving: {
+        pageTitles: {
+            shelving: 'Shelving',
+            shelvingList: 'Shelving List',
+            create: 'Create',
+            summary: 'Summary',
+            basicData: 'Basic Data',
+            log: 'Logs',
+        },
+        list: {
+            parking: 'Parking',
+            priority: 'Priority',
+            newShelving: 'New Shelving',
+        },
+        summary: {
+            code: 'Code',
+            parking: 'Parking',
+            priority: 'Priority',
+            worker: 'Worker',
+            recyclable: 'Recyclable',
+        },
+        basicData: {
+            code: 'Code',
+            parking: 'Parking',
+            priority: 'Priority',
+            recyclable: 'Recyclable',
+        },
     },
     invoiceIn: {
         pageTitles: {
@@ -581,6 +663,81 @@ export default {
             },
         },
     },
+    supplier: {
+        pageTitles: {
+            suppliers: 'Suppliers',
+            supplier: 'Supplier',
+            list: 'List',
+            create: 'Create',
+            summary: 'Summary',
+        },
+        list: {
+            payMethod: 'Pay method',
+            payDeadline: 'Pay deadline',
+            payDay: 'Pay day',
+            account: 'Account',
+            newSupplier: 'New supplier',
+        },
+        summary: {
+            responsible: 'Responsible',
+            notes: 'Notes',
+            verified: 'Verified',
+            isActive: 'Is active',
+            billingData: 'Billing data',
+            payMethod: 'Pay method',
+            payDeadline: 'Pay deadline',
+            payDay: 'Día de pago',
+            account: 'Account',
+            fiscalData: 'Fiscal data',
+            sageTaxType: 'Sage tax type',
+            sageTransactionType: 'Sage transaction type',
+            sageWithholding: 'Sage withholding',
+            supplierActivity: 'Supplier activity',
+            healthRegister: 'Healt register',
+            fiscalAddress: 'Fiscal address',
+            socialName: 'Social name',
+            taxNumber: 'Tax number',
+            street: 'Street',
+            city: 'City',
+            postCode: 'Postcode',
+            province: 'Province',
+            country: 'Country',
+        },
+        create: {
+            supplierName: 'Supplier name',
+        },
+    },
+    travel: {
+        pageTitles: {
+            travel: 'Travels',
+            list: 'List',
+            create: 'Create',
+            summary: 'Summary',
+            extraCommunity: 'Extra community',
+        },
+        summary: {
+            confirmed: 'Confirmed',
+            entryId: 'Entry Id',
+            freight: 'Freight',
+            package: 'Package',
+            delivered: 'Delivered',
+            received: 'Received',
+            entries: 'Entries',
+            cloneShipping: 'Clone travel',
+            CloneTravelAndEntries: 'Clone travel and his entries',
+            AddEntry: 'Add entry',
+        },
+        variables: {
+            search: 'Id/Reference',
+            agencyModeFk: 'Agency',
+            warehouseInFk: ' Warehouse In',
+            warehouseOutFk: 'Warehouse Out',
+            landedFrom: 'Landed from',
+            landedTo: 'Landed to',
+            continent: 'Continent out',
+            totalEntries: 'Total entries',
+        },
+    },
     components: {
         topbar: {},
         userPanel: {
@@ -588,10 +745,11 @@ export default {
             logOut: 'Log Out',
         },
         smartCard: {
-            openCard: 'View card',
-            openSummary: 'Open summary',
-            viewDescription: 'View description',
             downloadFile: 'Download file',
+            clone: 'Clone',
+            openCard: 'View',
+            openSummary: 'Summary',
+            viewDescription: 'Description',
         },
         cardDescriptor: {
             mainList: 'Main list',

src/i18n/es/index.js

@@ -21,6 +21,7 @@ export default {
         dataDeleted: 'Datos eliminados',
         search: 'Buscar',
         changes: 'Cambios',
+        dataCreated: 'Datos creados',
         add: 'Añadir',
         create: 'Crear',
         save: 'Guardar',
@@ -47,12 +48,28 @@ export default {
         dateFormat: 'es-ES',
         noSelectedRows: `No tienes ninguna línea seleccionada`,
         microsip: 'Abrir en MicroSIP',
+        downloadCSVSuccess: 'Descarga de CSV exitosa',
+        reference: 'Referencia',
+        agency: 'Agencia',
+        wareHouseOut: 'Alm. salida',
+        wareHouseIn: 'Alm. entrada',
+        landed: 'F. entrega',
+        shipped: 'F. envío',
+        totalEntries: 'Ent. totales',
+        amount: 'Importe',
+        packages: 'Bultos',
+        download: 'Descargar',
+        selectRows: 'Seleccionar las { numberRows } filas(s)',
+        allRows: 'Todo { numberRows } filas(s)',
+        markAll: 'Marcar todo',
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',
         statusInternalServerError: 'Ha ocurrido un error interno del servidor',
         statusBadGateway: 'Parece ser que el servidor ha caído',
         statusGatewayTimeout: 'No se ha podido contactar con el servidor',
+        userConfig: 'Error al obtener configuración de usuario',
+        create: 'Error al crear',
     },
     login: {
         title: 'Inicio de sesión',
@@ -234,7 +251,6 @@ export default {
             invoice: 'Factura',
             shipped: 'Enviado',
             landed: 'Entregado',
-            packages: 'Bultos',
             consigneePhone: 'Tel. consignatario',
             consigneeMobile: 'Móv. consignatario',
             clientPhone: 'Tel. cliente',
@@ -251,7 +267,6 @@ export default {
             description: 'Descripción',
             price: 'Precio',
             discount: 'Descuento',
-            amount: 'Importe',
             packing: 'Encajado',
             hasComponentLack: 'Faltan componentes',
             itemShortage: 'No visible',
@@ -344,7 +359,6 @@ export default {
             assignedTo: 'Asignada a',
             created: 'Creada',
             state: 'Estado',
-            packages: 'Bultos',
             picked: 'Recogida',
             returnOfMaterial: 'Autorización de retorno de materiales (RMA)',
         },
@@ -359,6 +373,8 @@ export default {
         pageTitles: {
             invoiceOuts: 'Crear factura',
             list: 'Listado',
+            negativeBases: 'Bases Negativas',
+            globalInvoicing: 'Facturación global',
             createInvoiceOut: 'Crear fact. emitida',
             summary: 'Resumen',
             basicData: 'Datos básicos',
@@ -367,7 +383,6 @@ export default {
             ref: 'Referencia',
             issued: 'Fecha emisión',
             shortIssued: 'F. emisión',
-            amount: 'Importe',
             client: 'Cliente',
             created: 'Fecha creación',
             shortCreated: 'F. creación',
@@ -377,7 +392,6 @@ export default {
         },
         card: {
             issued: 'Fecha emisión',
-            amount: 'Importe',
             client: 'Cliente',
             company: 'Empresa',
             customerCard: 'Ficha del cliente',
@@ -400,6 +414,75 @@ export default {
             shipped: 'F. envío',
             totalWithVat: 'Importe',
         },
+        globalInvoices: {
+            errors: {
+                chooseValidClient: 'Selecciona un cliente válido',
+                chooseValidCompany: 'Selecciona una empresa válida',
+                chooseValidPrinter: 'Selecciona una impresora válida',
+                fillDates:
+                    'La fecha de la factura y la fecha máxima deben estar completas',
+                invoiceDateLessThanMaxDate:
+                    'La fecha de la factura no puede ser menor que la fecha máxima',
+                invoiceWithFutureDate: 'Existe una factura con una fecha futura',
+                noTicketsToInvoice: 'No hay clientes para facturar',
+                criticalInvoiceError: 'Error crítico en la facturación, proceso detenido',
+            },
+            table: {
+                client: 'Cliente',
+                addressId: 'Id dirección',
+                streetAddress: 'Dirección fiscal',
+            },
+            statusCard: {
+                percentageText: '{getPercentage}% {getAddressNumber} de {getNAddresses}',
+                pdfsNumberText: '{nPdfs} de {totalPdfs} PDFs',
+            },
+        },
+        negativeBases: {
+            from: 'Desde',
+            to: 'Hasta',
+            company: 'Empresa',
+            country: 'País',
+            clientId: 'Id cliente',
+            client: 'Cliente',
+            amount: 'Importe',
+            base: 'Base',
+            ticketId: 'Id ticket',
+            active: 'Activo',
+            hasToInvoice: 'Facturar',
+            verifiedData: 'Datos comprobados',
+            comercial: 'Comercial',
+            errors: {
+                downloadCsvFailed: 'Error al descargar CSV',
+            },
+        },
+    },
+    shelving: {
+        pageTitles: {
+            shelving: 'Carros',
+            shelvingList: 'Listado de carros',
+            create: 'Crear',
+            summary: 'Resumen',
+            basicData: 'Datos básicos',
+            log: 'Registros de auditoría',
+        },
+        list: {
+            parking: 'Parking',
+            priority: 'Prioridad',
+            newShelving: 'Nuevo Carro',
+        },
+        summary: {
+            code: 'Código',
+            parking: 'Parking',
+            priority: 'Prioridad',
+            worker: 'Trabajador',
+            recyclable: 'Reciclable',
+        },
+        basicData: {
+            code: 'Código',
+            parking: 'Parking',
+            priority: 'Prioridad',
+            recyclable: 'Reciclable',
+        },
     },
     invoiceIn: {
         pageTitles: {
@@ -579,6 +662,81 @@ export default {
             },
         },
     },
+    supplier: {
+        pageTitles: {
+            suppliers: 'Proveedores',
+            supplier: 'Proveedor',
+            list: 'Listado',
+            create: 'Crear',
+            summary: 'Resumen',
+        },
+        list: {
+            payMethod: 'Método de pago',
+            payDeadline: 'Plazo de pago',
+            payDay: 'Día de pago',
+            account: 'Cuenta',
+            newSupplier: 'Nuevo proveedor',
+        },
+        summary: {
+            responsible: 'Responsable',
+            notes: 'Notas',
+            verified: 'Verificado',
+            isActive: 'Está activo',
+            billingData: 'Forma de pago',
+            payMethod: 'Método de pago',
+            payDeadline: 'Plazo de pago',
+            payDay: 'Día de pago',
+            account: 'Cuenta',
+            fiscalData: 'Data fiscal',
+            sageTaxType: 'Tipo de impuesto Sage',
+            sageTransactionType: 'Tipo de transacción Sage',
+            sageWithholding: 'Retención sage',
+            supplierActivity: 'Actividad proveedor',
+            healthRegister: 'Pasaporte sanitario',
+            fiscalAddress: 'Dirección fiscal',
+            socialName: 'Razón social',
+            taxNumber: 'NIF/CIF',
+            street: 'Dirección',
+            city: 'Población',
+            postCode: 'Código postal',
+            province: 'Provincia',
+            country: 'País',
+        },
+        create: {
+            supplierName: 'Nombre del proveedor',
+        },
+    },
+    travel: {
+        pageTitles: {
+            travel: 'Envíos',
+            list: 'Listado',
+            create: 'Crear',
+            summary: 'Resumen',
+            extraCommunity: 'Extra comunitarios',
+        },
+        summary: {
+            confirmed: 'Confirmado',
+            entryId: 'Id entrada',
+            freight: 'Porte',
+            package: 'Embalaje',
+            delivered: 'Enviada',
+            received: 'Recibida',
+            entries: 'Entradas',
+            cloneShipping: 'Clonar envío',
+            CloneTravelAndEntries: 'Clonar travel y sus entradas',
+            AddEntry: 'Añadir entrada',
+        },
+        variables: {
+            search: 'Id/Referencia',
+            agencyModeFk: 'Agencia',
+            warehouseInFk: 'Alm. entrada',
+            warehouseOutFk: ' Alm. salida',
+            landedFrom: 'Llegada desde',
+            landedTo: 'Llegada hasta',
+            continent: 'Cont. Salida',
+            totalEntries: 'Ent. totales',
+        },
+    },
     components: {
         topbar: {},
         userPanel: {
@@ -586,10 +744,11 @@ export default {
             logOut: 'Cerrar sesión',
         },
         smartCard: {
-            openCard: 'Ver ficha',
-            openSummary: 'Abrir detalles',
-            viewDescription: 'Ver descripción',
             downloadFile: 'Descargar archivo',
+            clone: 'Clonar',
+            openCard: 'Ficha',
+            openSummary: 'Detalles',
+            viewDescription: 'Descripción',
         },
         cardDescriptor: {
             mainList: 'Listado principal',

src/pages/Claim/Card/ClaimBasicData.vue

@@ -7,6 +7,7 @@ import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
+import VnInputDate from "components/common/VnInputDate.vue";
 
 const route = useRoute();
 const { t } = useI18n();
@@ -96,6 +97,7 @@ const statesFilter = {
         :url-update="`Claims/updateClaim/${route.params.id}`"
         :filter="claimFilter"
         model="claim"
+        auto-load
     >
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
@@ -107,33 +109,7 @@ const statesFilter = {
                     />
                 </div>
                 <div class="col">
-                    <QInput
-                        v-model="data.created"
-                        mask="####-##-##"
-                        fill-mask="_"
-                        autofocus
-                    >
-                        <template #append>
-                            <QIcon name="event" class="cursor-pointer">
-                                <QPopupProxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <QDate v-model="data.created" mask="YYYY-MM-DD">
-                                        <div class="row items-center justify-end">
-                                            <QBtn
-                                                v-close-popup
-                                                label="Close"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </QDate>
-                                </QPopupProxy>
-                            </QIcon>
-                        </template>
-                    </QInput>
+                    <VnInputDate v-model="data.created" :label="t('claim.basicData.created')" />
                 </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
@@ -183,7 +159,7 @@ const statesFilter = {
                 <div class="col">
                     <QInput
                         v-model.number="data.packages"
-                        :label="t('claim.basicData.packages')"
+                        :label="t('globals.packages')"
                         :rules="validate('claim.packages')"
                         type="number"
                     />

src/pages/Claim/ClaimFilter.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -150,33 +151,7 @@ const states = ref();
                     </QItem> -->
                     <QItem>
                         <QItemSection>
-                            <QInput
-                                v-model="params.created"
-                                :label="t('Created')"
-                                autofocus
-                                readonly
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate v-model="params.created">
-                                                <div class="row items-center justify-end">
-                                                    <QBtn
-                                                        v-close-popup
-                                                        label="Close"
-                                                        color="primary"
-                                                        flat
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                            <VnInputDate v-model="params.created" :label="t('Created')" />
                         </QItemSection>
                     </QItem>
                 </QExpansionItem>

src/pages/Claim/ClaimList.vue

@@ -89,10 +89,11 @@ function viewDescriptor(id) {
             >
                 <template #body="{ rows }">
                     <CardList
-                        v-for="row of rows"
+                        :id="row.id"
                         :key="row.id"
                         :title="row.clientName"
                         @click="navigate(row.id)"
+                        v-for="row of rows"
                     >
                         <template #list-items>
                             <VnLv label="ID" :value="row.id" />
@@ -118,11 +119,7 @@ function viewDescriptor(id) {
                             />
                             <VnLv :label="t('claim.list.state')">
                                 <template #value>
-                                    <QBadge
-                                        :color="stateColor(row.stateCode)"
-                                        class="q-ma-none"
-                                        dense
-                                    >
+                                    <QBadge :color="stateColor(row.stateCode)" dense>
                                         {{ row.stateDescription }}
                                     </QBadge>
                                 </template>
@@ -130,19 +127,26 @@ function viewDescriptor(id) {
                         </template>
                         <template #actions>
                             <QBtn
-                                flat
-                                icon="arrow_circle_right"
+                                :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
+                                class="bg-vn-dark"
+                                outline
+                            />
+                            <QBtn
+                                :label="t('components.smartCard.viewDescription')"
+                                @click.stop
+                                class="bg-vn-dark"
+                                outline
+                                style="margin-top: 15px"
                             >
-                                <QTooltip>
-                                    {{ t('components.smartCard.openCard') }}
-                                </QTooltip>
-                            </QBtn>
-                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
-                                <QTooltip>
-                                    {{ t('components.smartCard.openSummary') }}
-                                </QTooltip>
+                                <CustomerDescriptorProxy :id="row.clientFk" />
                             </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
                         </template>
                     </CardList>
                 </template>

src/pages/Customer/Card/CustomerBasicData.vue

@@ -60,7 +60,7 @@ const filterOptions = {
         auto-load
     />
 
-    <FormModel :url="`Clients/${route.params.id}`" model="customer">
+    <FormModel :url="`Clients/${route.params.id}`" model="customer" auto-load>
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">

src/pages/Customer/CustomerList.vue

@@ -73,10 +73,10 @@ function viewSummary(id) {
                         v-for="row of rows"
                         :key="row.id"
                         :title="row.name"
+                        :id="row.id"
                         @click="navigate(row.id)"
                     >
                         <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
                             <VnLv :label="t('customer.list.email')" :value="row.email" />
                             <VnLv :value="row.phone">
                                 <template #label>
@@ -87,25 +87,17 @@ function viewSummary(id) {
                         </template>
                         <template #actions>
                             <QBtn
-                                flat
-                                color="primary"
-                                icon="arrow_circle_right"
+                                :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                            >
-                                <QTooltip>
-                                    {{ t('components.smartCard.openCard') }}
-                                </QTooltip>
-                            </QBtn>
+                                class="bg-vn-dark"
+                                outline
+                            />
                             <QBtn
-                                flat
-                                color="grey-7"
-                                icon="preview"
+                                :label="t('components.smartCard.openSummary')"
                                 @click.stop="viewSummary(row.id)"
-                            >
-                                <QTooltip>
-                                    {{ t('components.smartCard.openSummary') }}
-                                </QTooltip>
-                            </QBtn>
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
                         </template>
                     </CardList>
                 </template>

src/pages/Customer/CustomerPaymentsFilter.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -76,78 +77,16 @@ function isValidNumber(value) {
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInputDate
                             v-model="params.from"
                             :label="t('From')"
-                            mask="date"
-                            placeholder="yyyy/mm/dd"
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.from" landscape>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.cancel')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                                <QBtn
-                                                    :label="t('globals.confirm')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        />
                     </QItemSection>
                     <QItemSection>
-                        <QInput
+                        <VnInputDate
                             v-model="params.to"
                             :label="t('To')"
-                            mask="date"
-                            placeholder="yyyy/mm/dd"
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.to" landscape>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.cancel')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                                <QBtn
-                                                    :label="t('globals.confirm')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        />
                     </QItemSection>
                 </QItem>
             </QList>

src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue

@@ -7,6 +7,7 @@ import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
+import InvoiceOutDescriptorMenu from './InvoiceOutDescriptorMenu.vue';
 
 const $props = defineProps({
     id: {
@@ -59,12 +60,12 @@ const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.
         @on-fetch="setData"
         data-key="invoiceOutData"
     >
+        <template #menu="{ entity }">
+            <InvoiceOutDescriptorMenu :invoice-out="entity" />
+        </template>
         <template #body="{ entity }">
             <VnLv :label="t('invoiceOut.card.issued')" :value="toDate(entity.issued)" />
-            <VnLv
-                :label="t('invoiceOut.card.amount')"
-                :value="toCurrency(entity.amount)"
-            />
+            <VnLv :label="t('globals.amount')" :value="toCurrency(entity.amount)" />
             <VnLv v-if="entity.client" :label="t('invoiceOut.card.client')">
                 <template #value>
                     <span class="link">

src/pages/InvoiceOut/Card/InvoiceOutDescriptorMenu.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+</script>
+
+<template>
+    <QItem v-ripple clickable>
+        <QItemSection>{{ t('Transfer invoice to') }}</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection>{{ t('See invoice') }}</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection>{{ t('Send invoice') }}</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection>{{ t('Delete invoice') }}</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection>{{ t('Post invoice') }}</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection>{{ t('Regenerate invoice PDF') }}</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection>{{ t('Pass') }}</QItemSection>
+    </QItem>
+</template>
+
+<i18n>
+es:
+    Transfer invoice to: Transferir factura a
+    See invoice: Ver factura
+    Send invoice: Enviar factura
+    Delete invoice: Eliminar factura
+    Post invoice: Asentar factura
+    Regenerate invoice PDF: Regenerar PDF factura
+    Pass: Abono
+</i18n>

src/pages/InvoiceOut/InvoiceOutFilter.vue

@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -43,66 +44,72 @@ function setWorkers(data) {
                     <QItemSection>
                         <QInput
                             :label="t('Customer ID')"
-                            v-model="params.clientFk"
+                            class="q-mt-sm"
+                            dense
                             lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="vn:client" size="sm"></QIcon>
-                            </template>
-                        </QInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <QInput :label="t('FI')" v-model="params.fi" lazy-rules>
-                            <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </QInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <QInput :label="t('Amount')" v-model="params.amount" lazy-rules>
-                            <template #prepend>
-                                <QIcon name="euro" size="sm"></QIcon>
-                            </template>
-                        </QInput>
+                            outlined
+                            rounded
+                            v-model="params.clientFk"
+                        />
                     </QItemSection>
                 </QItem>
                 <QItem>
+                    <QItemSection>
+                        <QInput
+                            :label="t('FI')"
+                            class="q-mt-sm"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            v-model="params.fi"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput
+                            :label="t('Amount')"
+                            class="q-mt-sm"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            v-model="params.amount"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mt-sm">
                     <QItemSection>
                         <QInput
                             :label="t('Min')"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
                             type="number"
                             v-model.number="params.min"
-                            lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="euro" size="sm"></QIcon>
-                            </template>
-                        </QInput>
+                        />
                     </QItemSection>
                     <QItemSection>
                         <QInput
                             :label="t('Max')"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
                             type="number"
                             v-model.number="params.max"
-                            lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="euro" size="sm"></QIcon>
-                            </template>
-                        </QInput>
+                        />
                     </QItemSection>
                 </QItem>
                 <QItem class="q-mb-md">
                     <QItemSection>
                         <QCheckbox
-                            v-model="params.hasPdf"
-                            @update:model-value="searchFn()"
                             :label="t('Has PDF')"
+                            @update:model-value="searchFn()"
                             toggle-indeterminate
+                            v-model="params.hasPdf"
                         />
                     </QItemSection>
                 </QItem>
@@ -110,115 +117,35 @@ function setWorkers(data) {
                 <QExpansionItem :label="t('More options')" expand-separator>
                     <QItem>
                         <QItemSection>
-                            <QInput
-                                :label="t('Issued')"
+                            <VnInputDate
                                 v-model="params.issued"
-                                mask="date"
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate v-model="params.issued" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        color="primary"
-                                                        flat
-                                                        @click="save"
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                                :label="t('Issued')"
+                                dense
+                                outlined
+                                rounded
+                            />
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput
-                                :label="t('Created')"
+                            <VnInputDate
                                 v-model="params.created"
-                                mask="date"
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate v-model="params.created" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        color="primary"
-                                                        flat
-                                                        @click="save"
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                                :label="t('Created')"
+                                dense
+                                outlined
+                                rounded
+                            />
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput :label="t('Dued')" v-model="params.dued" mask="date">
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate v-model="params.dued" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        color="primary"
-                                                        flat
-                                                        @click="save"
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                            <VnInputDate
+                                v-model="params.dued"
+                                :label="t('Dued')"
+                                dense
+                                outlined
+                                rounded
+                            />
                         </QItemSection>
                     </QItem>
                 </QExpansionItem>

src/pages/InvoiceOut/InvoiceOutGlobal.vue

@@ -0,0 +1,198 @@
+<script setup>
+import { onMounted, onUnmounted, computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import InvoiceOutGlobalForm from './InvoiceOutGlobalForm.vue';
+import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
+import { storeToRefs } from 'pinia';
+import { QBadge, QBtn } from 'quasar';
+import CustomerDescriptor from 'src/pages/Customer/Card/CustomerDescriptor.vue';
+
+const stateStore = useStateStore();
+const { t } = useI18n();
+const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
+
+// invoiceOutGlobalStore state and getters
+const {
+    status,
+    getPercentage,
+    getAddressNumber,
+    getNAddresses,
+    nPdfs,
+    totalPdfs,
+    errors,
+} = storeToRefs(invoiceOutGlobalStore);
+
+const selectedCustomerId = ref(null);
+
+const tableColumnComponents = {
+    clientId: {
+        component: QBtn,
+        props: { flat: true, color: 'blue' },
+        event: (prop) => selectCustomerId(prop.value),
+    },
+    clientName: {
+        component: 'span',
+        props: {},
+    },
+    id: {
+        component: 'span',
+        props: {},
+    },
+    nickname: {
+        component: 'span',
+        props: {},
+    },
+    message: {
+        component: QBadge,
+        props: { color: 'red' },
+    },
+};
+
+const columns = computed(() => {
+    return [
+        { label: 'Id', field: 'clientId', name: 'clientId', align: 'left' },
+        {
+            label: t('invoiceOut.globalInvoices.table.client'),
+            field: 'clientName',
+            name: 'clientName',
+            align: 'left',
+        },
+        {
+            label: t('invoiceOut.globalInvoices.table.addressId'),
+            field: 'id',
+            name: 'id',
+            align: 'left',
+        },
+        {
+            label: t('invoiceOut.globalInvoices.table.streetAddress'),
+            field: 'nickname',
+            name: 'nickname',
+            align: 'left',
+        },
+        { label: 'Error', field: 'message', name: 'message', align: 'left' },
+    ];
+});
+
+const rows = computed(() => {
+    if (!errors && !errors.length > 0) return [];
+    return errors.value.map((row) => {
+        return {
+            ...row.client,
+            message: row.message,
+        };
+    });
+});
+
+const selectCustomerId = (id) => {
+    selectedCustomerId.value = id;
+};
+
+onMounted(() => (stateStore.rightDrawer = true));
+onUnmounted(() => {
+    stateStore.rightDrawer = false;
+    invoiceOutGlobalStore.$reset();
+});
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" :width="256" side="right" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <InvoiceOutGlobalForm />
+        </QScrollArea>
+    </QDrawer>
+
+    <QPage class="column items-center q-pa-md">
+        <QCard v-if="status" class="card">
+            <QCardSection class="card-section">
+                <span class="text">{{ t(`status.${status}`) }}</span>
+                <span class="text">{{
+                    t('invoiceOut.globalInvoices.statusCard.percentageText', {
+                        getPercentage: getPercentage,
+                        getAddressNumber: getAddressNumber,
+                        getNAddresses: getNAddresses,
+                    })
+                }}</span>
+                <span class="text">{{
+                    t('invoiceOut.globalInvoices.statusCard.pdfsNumberText', {
+                        nPdfs: nPdfs,
+                        totalPdfs: totalPdfs,
+                    })
+                }}</span>
+            </QCardSection>
+        </QCard>
+
+        <QTable
+            v-if="rows.length > 0"
+            :rows="rows"
+            :columns="columns"
+            hide-bottom
+            row-key="id"
+            :pagination="{ rowsPerPage: 0 }"
+            class="full-width q-mt-md"
+        >
+            <template #body-cell="props">
+                <QTd :props="props">
+                    <component
+                        :is="tableColumnComponents[props.col.name].component"
+                        v-bind="tableColumnComponents[props.col.name].props"
+                        @click="tableColumnComponents[props.col.name].event(props)"
+                        class="col-content"
+                    >
+                        {{ props.value }}
+                        <QPopupProxy>
+                            <CustomerDescriptor
+                                v-if="selectedCustomerId === props.value"
+                                :id="selectedCustomerId"
+                            />
+                        </QPopupProxy>
+                    </component>
+                </QTd>
+            </template>
+        </QTable>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.card {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    background-color: var(--vn-dark);
+    padding: 16px;
+
+    .card-section {
+        display: flex;
+        flex-direction: column;
+        padding: 0px;
+    }
+
+    .text {
+        font-size: 14px;
+        color: var(--vn-text);
+    }
+}
+
+.col-content {
+    border-radius: 4px;
+    padding: 6px 6px 6px 6px;
+}
+</style>
+
+<i18n>
+en:
+    status:
+        packageInvoicing: Build packaging tickets
+        invoicing: Invoicing client
+        stopping: Stopping process
+        done: Ended process
+    of: of
+
+es:
+    status:
+        packageInvoicing: Generación de tickets de empaque
+        invoicing: Facturando a cliente
+        stopping: Deteniendo proceso
+        done: Proceso detenido
+    of: de
+</i18n>

src/pages/InvoiceOut/InvoiceOutGlobalForm.vue

@@ -0,0 +1,201 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
+import { storeToRefs } from 'pinia';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import FetchData from 'components/FetchData.vue';
+import VnInputDate from "components/common/VnInputDate.vue";
+
+const { t } = useI18n();
+const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
+
+// invoiceOutGlobalStore state and getters
+const {
+    initialDataLoading,
+    formInitialData,
+
+    invoicing,
+    status,
+} = storeToRefs(invoiceOutGlobalStore);
+
+// invoiceOutGlobalStore actions
+const { makeInvoice, setStatusValue } = invoiceOutGlobalStore;
+
+const clientsToInvoice = ref('all');
+
+const companiesOptions = ref([]);
+
+const printersOptions = ref([]);
+
+const clientsOptions = ref([]);
+
+const formData = ref({
+    companyFk: null,
+    invoiceDate: null,
+    maxShipped: null,
+    clientId: null,
+    printer: null,
+});
+
+const optionsInitialData = computed(() => {
+    return (
+        companiesOptions.value.length > 0 &&
+        printersOptions.value.length > 0 &&
+        clientsOptions.value.length > 0
+    );
+});
+
+const getStatus = computed({
+    get() {
+        return status.value;
+    },
+    set(value) {
+        setStatusValue(value.value);
+    },
+});
+
+const onFetchCompanies = (companies) => {
+    companiesOptions.value = [...companies];
+};
+
+const onFetchPrinters = (printers) => {
+    printersOptions.value = [...printers];
+};
+
+const onFetchClients = (clients) => {
+    clientsOptions.value = [...clients];
+};
+
+onMounted(async () => {
+    await invoiceOutGlobalStore.init();
+    formData.value = { ...formInitialData.value };
+});
+</script>
+
+<template>
+    <FetchData url="Companies" @on-fetch="(data) => onFetchCompanies(data)" auto-load />
+    <FetchData url="Printers" @on-fetch="(data) => onFetchPrinters(data)" auto-load />
+    <FetchData url="Clients" @on-fetch="(data) => onFetchClients(data)" auto-load />
+
+    <QForm
+        v-if="!initialDataLoading && optionsInitialData"
+        @submit="makeInvoice(formData, clientsToInvoice)"
+        class="form-container q-pa-md"
+        style="max-width: 256px"
+    >
+        <div class="column q-gutter-y-md">
+            <QRadio
+                v-model="clientsToInvoice"
+                dense
+                val="all"
+                :label="t('allClients')"
+                :dark="true"
+            />
+            <QRadio
+                v-model="clientsToInvoice"
+                dense
+                val="one"
+                :label="t('oneClient')"
+                :dark="true"
+            />
+            <VnSelectFilter
+                v-if="clientsToInvoice === 'one'"
+                :label="t('client')"
+                v-model="formData.clientId"
+                :options="clientsOptions"
+                option-value="id"
+                option-label="name"
+                hide-selected
+                dense
+                outlined
+                rounded
+            />
+            <VnInputDate
+                v-model="formData.invoiceDate"
+                :label="t('invoiceDate')"
+                dense
+                outlined
+                rounded />
+            <VnInputDate
+                v-model="formData.maxShipped"
+                :label="t('maxShipped')"
+                dense
+                outlined
+                rounded />
+            <VnSelectFilter
+                :label="t('company')"
+                v-model="formData.companyFk"
+                :options="companiesOptions"
+                option-value="id"
+                option-label="code"
+                hide-selected
+                dense
+                outlined
+                rounded
+            />
+            <VnSelectFilter
+                :label="t('printer')"
+                v-model="formData.printer"
+                :options="printersOptions"
+                option-value="id"
+                option-label="name"
+                hide-selected
+                dense
+                outlined
+                rounded
+            />
+        </div>
+
+        <QBtn
+            v-if="!invoicing"
+            :label="t('invoiceOut')"
+            type="submit"
+            color="primary"
+            class="q-mt-md full-width"
+            unelevated
+            rounded
+            dense
+        />
+        <QBtn
+            v-if="invoicing"
+            :label="t('stop')"
+            color="primary"
+            class="q-mt-md full-width"
+            unelevated
+            rounded
+            dense
+            @click="getStatus = 'stopping'"
+        />
+    </QForm>
+</template>
+
+<style scoped>
+.form-container * {
+    max-width: 100%;
+}
+</style>
+
+<i18n>
+en:
+    invoiceDate: Invoice date
+    maxShipped: Max date
+    allClients: All clients
+    oneClient: One client
+    company: Company
+    printer: Printer
+    invoiceOut: Invoice out
+    client: Client
+    stop: Stop
+
+es:
+    invoiceDate: Fecha de factura
+    maxShipped: Fecha límite
+    allClients: Todos los clientes
+    oneClient: Un solo cliente
+    company: Empresa
+    printer: Impresora
+    invoiceOut: Facturar
+    client: Cliente
+    stop: Parar
+</i18n>

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -1,8 +1,8 @@
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
+import { exportFile, useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import InvoiceOutSummaryDialog from './Card/InvoiceOutSummaryDialog.vue';
@@ -12,10 +12,11 @@ import InvoiceOutFilter from './InvoiceOutFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 
-const stateStore = useStateStore();
-const router = useRouter();
-const quasar = useQuasar();
 const { t } = useI18n();
+const selectedCards = ref(new Map());
+const quasar = useQuasar();
+const router = useRouter();
+const stateStore = useStateStore();
 
 onMounted(() => (stateStore.rightDrawer = true));
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -32,25 +33,81 @@ function viewSummary(id) {
         },
     });
 }
+
+const toggleIndividualCard = (cardData) => {
+    if (selectedCards.value.has(cardData.id)) {
+        selectedCards.value.delete(cardData.id);
+        return;
+    }
+    selectedCards.value.set(cardData.id, cardData);
+};
+
+const toggleAllCards = (cardsData) => {
+    const allSelected = selectedCards.value.size === cardsData.length;
+
+    if (!allSelected) {
+        // Si no todas las tarjetas están seleccionadas, selecciónalas todas
+        cardsData.forEach((data) => {
+            if (!selectedCards.value.has(data.id)) {
+                selectedCards.value.set(data.id, data);
+            }
+        });
+    } else {
+        // Si todas las tarjetas están seleccionadas, deselecciónalas todas
+        selectedCards.value.clear();
+    }
+};
+
+const downloadCsv = () => {
+    if (selectedCards.value.size === 0) return;
+    const selectedCardsArray = Array.from(selectedCards.value.values());
+    let file;
+    for (var i = 0; i < selectedCardsArray.length; i++) {
+        if (i == 0) file += Object.keys(selectedCardsArray[i]).join(';') + '\n';
+        file +=
+            Object.keys(selectedCardsArray[i])
+                .map(function (key) {
+                    return selectedCardsArray[i][key];
+                })
+                .join(';') + '\n';
+    }
+    const status = exportFile('file.csv', file, {
+        encoding: 'windows-1252',
+        mimeType: 'text/csv;charset=windows-1252;',
+    });
+    if (status === true) {
+        quasar.notify({
+            message: t('fileAllowed'),
+            color: 'positive',
+            icon: 'check',
+        });
+    } else {
+        quasar.notify({
+            message: t('fileDenied'),
+            color: 'negative',
+            icon: 'warning',
+        });
+    }
+};
 </script>
 
 <template>
     <template v-if="stateStore.isHeaderMounted()">
         <Teleport to="#searchbar">
             <VnSearchbar
+                :info="t('youCanSearchByInvoiceReference')"
+                :label="t('searchInvoice')"
                 data-key="InvoiceOutList"
-                :label="t('Search invoice')"
-                :info="t('You can search by invoice reference')"
             />
         </Teleport>
         <Teleport to="#actions-append">
             <div class="row q-gutter-x-sm">
                 <QBtn
-                    flat
                     @click="stateStore.toggleRightDrawer()"
-                    round
                     dense
+                    flat
                     icon="menu"
+                    round
                 >
                     <QTooltip bottom anchor="bottom right">
                         {{ t('globals.collapseMenu') }}
@@ -64,71 +121,128 @@ function viewSummary(id) {
             <InvoiceOutFilter data-key="InvoiceOutList" />
         </QScrollArea>
     </QDrawer>
-    <QPage class="column items-center q-pa-md">
-        <div class="card-list">
-            <VnPaginate
-                data-key="InvoiceOutList"
-                url="InvoiceOuts/filter"
-                order="issued DESC, id DESC"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <CardList
-                        v-for="row of rows"
-                        :key="row.id"
-                        :title="row.ref"
-                        @click="navigate(row.id)"
-                    >
-                        <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
-                            <VnLv
-                                :label="t('invoiceOut.list.shortIssued')"
-                                :title-label="t('invoiceOut.list.issued')"
-                                :value="toDate(row.issued)"
-                            />
-                            <VnLv
-                                :label="t('invoiceOut.list.amount')"
-                                :value="toCurrency(row.amount)"
-                            />
-                            <VnLv
-                                :label="t('invoiceOut.list.client')"
-                                :value="row.clientSocialName"
-                            />
-                            <VnLv
-                                :label="t('invoiceOut.list.shortCreated')"
-                                :title-label="t('invoiceOut.list.created')"
-                                :value="toDate(row.created)"
-                            />
-                            <VnLv
-                                :label="t('invoiceOut.list.company')"
-                                :value="row.companyCode"
-                            />
-                            <VnLv
-                                :label="t('invoiceOut.list.shortDued')"
-                                :title-label="t('invoiceOut.list.dued')"
-                                :value="toDate(row.dued)"
-                            />
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                flat
-                                icon="arrow_circle_right"
-                                @click.stop="navigate(row.id)"
-                            >
-                                <QTooltip>
-                                    {{ t('components.smartCard.openCard') }}
-                                </QTooltip>
-                            </QBtn>
-                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
-                                <QTooltip>
-                                    {{ t('components.smartCard.openSummary') }}
-                                </QTooltip>
-                            </QBtn>
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
+    <QPage>
+        <VnPaginate
+            auto-load
+            data-key="InvoiceOutList"
+            order="issued DESC, id DESC"
+            url="InvoiceOuts/filter"
+        >
+            <template #body="{ rows }">
+                <QToolbar class="bg-vn-dark justify-end">
+                    <div id="st-actions">
+                        <QBtn
+                            @click="downloadCsv()"
+                            class="q-mr-xl"
+                            color="primary"
+                            :disable="selectedCards.size === 0"
+                            :label="t('globals.download')"
+                        />
+                        <!-- <QBtnDropdown
+                            class="q-mr-xl"
+                            color="primary"
+                            :disable="!manageCheckboxes && arrayElements.length < 1"
+                            :label="t('globals.download')"
+                            v-else
+                        >
+                            <QList>
+                                <QItem clickable v-close-popup @click="downloadCsv(rows)">
+                                    <QItemSection>
+                                        <QItemLabel>
+                                            {{
+                                                t('globals.allRows', {
+                                                    numberRows: rows.length,
+                                                })
+                                            }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+
+                                <QItem clickable v-close-popup @click="downloadCsv(rows)">
+                                    <QItemSection>
+                                        <QItemLabel>
+                                            {{
+                                                t('globals.selectRows', {
+                                                    numberRows: rows.length,
+                                                })
+                                            }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </QList>
+                        </QBtnDropdown> -->
+                        <QCheckbox
+                            left-label
+                            :label="t('globals.markAll')"
+                            @click="toggleAllCards(rows)"
+                            :model-value="selectedCards.size === rows.length"
+                            class="q-mr-md"
+                        />
+                    </div>
+                </QToolbar>
+                <div class="flex flex-center q-pa-md">
+                    <div class="card-list">
+                        <CardList
+                            :element="row"
+                            :id="row.id"
+                            :show-checkbox="true"
+                            :is-selected="selectedCards.has(row.id)"
+                            :key="row.id"
+                            :title="row.ref"
+                            @click="navigate(row.id)"
+                            @toggle-card-check="toggleIndividualCard(row)"
+                            v-for="row of rows"
+                        >
+                            <template #list-items>
+                                <VnLv
+                                    :label="t('invoiceOut.list.shortIssued')"
+                                    :title-label="t('invoiceOut.list.issued')"
+                                    :value="toDate(row.issued)"
+                                />
+                                <VnLv
+                                    :label="t('invoiceOut.list.amount')"
+                                    :value="toCurrency(row.amount)"
+                                />
+                                <VnLv
+                                    :label="t('invoiceOut.list.client')"
+                                    :value="row.clientSocialName"
+                                />
+                                <VnLv
+                                    :label="t('invoiceOut.list.shortCreated')"
+                                    :title-label="t('invoiceOut.list.created')"
+                                    :value="toDate(row.created)"
+                                />
+                                <VnLv
+                                    :label="t('invoiceOut.list.company')"
+                                    :value="row.companyCode"
+                                />
+                                <VnLv
+                                    :label="t('invoiceOut.list.shortDued')"
+                                    :title-label="t('invoiceOut.list.dued')"
+                                    :value="toDate(row.dued)"
+                                />
+                            </template>
+                            <template #actions>
+                                <QBtn
+                                    :label="t('components.smartCard.openCard')"
+                                    @click.stop="navigate(row.id)"
+                                    class="bg-vn-dark"
+                                    outline
+                                    type="reset"
+                                />
+                                <QBtn
+                                    :label="t('components.smartCard.openSummary')"
+                                    @click.stop="viewSummary(row.id)"
+                                    color="primary"
+                                    style="margin-top: 15px"
+                                    type="submit"
+                                />
+                            </template>
+                        </CardList>
+                    </div>
+                </div>
+            </template>
+        </VnPaginate>
     </QPage>
 </template>
 
@@ -140,7 +254,14 @@ function viewSummary(id) {
 </style>
 
 <i18n>
+en:
+    searchInvoice: Search issued invoice
+    fileDenied: Browser denied file download...
+    fileAllowed: Successful download of CSV file
+    youCanSearchByInvoiceReference: You can search by invoice reference
 es:
-    Search invoice: Buscar factura emitida
-    You can search by invoice reference: Puedes buscar por referencia de la factura
+    searchInvoice: Buscar factura emitida
+    fileDenied: El navegador denegó la descarga de archivos...
+    fileAllowed: Descarga exitosa de archivo CSV
+    youCanSearchByInvoiceReference: Puedes buscar por referencia de la factura
 </i18n>

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -0,0 +1,356 @@
+<script setup>
+import { onMounted, ref, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import invoiceOutService from 'src/services/invoiceOut.service';
+import { toCurrency } from 'src/filters';
+import { QCheckbox, QBtn } from 'quasar';
+import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
+import VnInputDate from 'components/common/VnInputDate.vue';
+
+const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
+
+const rows = ref([]);
+const { t } = useI18n();
+
+const dateRange = reactive({
+    from: Date.vnFirstDayOfMonth().toISOString(),
+    to: Date.vnLastDayOfMonth().toISOString(),
+});
+
+const selectedCustomerId = ref(0);
+const selectedWorkerId = ref(0);
+
+const filter = ref({
+    company: null,
+    country: null,
+    clientId: null,
+    client: null,
+    amount: null,
+    base: null,
+    ticketId: null,
+    active: null,
+    hasToInvoice: null,
+    verifiedData: null,
+    comercial: null,
+});
+
+const tableColumnComponents = {
+    company: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    country: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    clientId: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: (prop) => selectCustomerId(prop.value),
+    },
+    client: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    amount: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    base: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    ticketId: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    active: {
+        component: QCheckbox,
+        props: (prop) => ({
+            disable: true,
+            'model-value': Boolean(prop.value),
+        }),
+        event: () => {},
+    },
+    hasToInvoice: {
+        component: QCheckbox,
+        props: (prop) => ({
+            disable: true,
+            'model-value': Boolean(prop.value),
+        }),
+        event: () => {},
+    },
+    verifiedData: {
+        component: QCheckbox,
+        props: (prop) => ({
+            disable: true,
+            'model-value': Boolean(prop.value),
+        }),
+        event: () => {},
+    },
+    comercial: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: (prop) => selectWorkerId(prop.row.comercialId),
+    },
+};
+
+const columns = ref([
+    {
+        label: 'company',
+        field: 'company',
+        name: 'company',
+        align: 'left',
+    },
+    {
+        label: 'country',
+        field: 'country',
+        name: 'country',
+        align: 'left',
+    },
+    {
+        label: 'clientId',
+        field: 'clientId',
+        name: 'clientId',
+        align: 'left',
+    },
+    {
+        label: 'client',
+        field: 'clientSocialName',
+        name: 'client',
+        align: 'left',
+    },
+    {
+        label: 'amount',
+        field: 'amount',
+        name: 'amount',
+        align: 'left',
+        format: (value) => toCurrency(value),
+    },
+    {
+        label: 'base',
+        field: 'taxableBase',
+        name: 'base',
+        align: 'left',
+    },
+    {
+        label: 'ticketId',
+        field: 'ticketFk',
+        name: 'ticketId',
+        align: 'left',
+    },
+    {
+        label: 'active',
+        field: 'isActive',
+        name: 'active',
+        align: 'left',
+    },
+    {
+        label: 'hasToInvoice',
+        field: 'hasToInvoice',
+        name: 'hasToInvoice',
+        align: 'left',
+    },
+    {
+        label: 'verifiedData',
+        field: 'isTaxDataChecked',
+        name: 'verifiedData',
+        align: 'left',
+    },
+    {
+        label: 'comercial',
+        field: 'comercialName',
+        name: 'comercial',
+        align: 'left',
+    },
+]);
+
+const downloadCSV = async () => {
+    await invoiceOutGlobalStore.getNegativeBasesCsv(dateRange.from, dateRange.to);
+};
+
+const search = async () => {
+    const and = [];
+    Object.keys(filter.value).forEach((key) => {
+        if (filter.value[key]) {
+            and.push({
+                [key]: filter.value[key],
+            });
+        }
+    });
+    const searchFilter = {
+        limit: 20
+    }
+
+    if (and.length) {
+        searchFilter.where = {
+            and
+        }
+    }
+
+    const params = {
+        ...dateRange,
+        filter: JSON.stringify(searchFilter),
+    };
+    rows.value = await invoiceOutService.getNegativeBases(params);
+};
+
+const refresh = () => {
+    dateRange.from = Date.vnFirstDayOfMonth().toISOString();
+    dateRange.to = Date.vnLastDayOfMonth().toISOString();
+    filter.value = {
+        company: null,
+        country: null,
+        clientId: null,
+        client: null,
+        amount: null,
+        base: null,
+        ticketId: null,
+        active: null,
+        hasToInvoice: null,
+        verifiedData: null,
+        comercial: null,
+    };
+    search();
+};
+
+const selectCustomerId = (id) => {
+    selectedCustomerId.value = id;
+};
+
+const selectWorkerId = (id) => {
+    selectedWorkerId.value = id;
+};
+
+onMounted(async () => {
+    refresh();
+});
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :rows="rows"
+            :columns="columns"
+            hide-bottom
+            row-key="clientId"
+            :pagination="{ rowsPerPage: 0 }"
+            class="full-width q-mt-md"
+        >
+            <template #top-left>
+                <div class="row justify-start items-end">
+                    <VnInputDate
+                        v-model="dateRange.from"
+                        :label="t('invoiceOut.negativeBases.from')"
+                        class="q-mr-md"
+                        dense
+                        lazy-rules
+                        outlined
+                        rounded
+                    />
+                    <VnInputDate
+                        v-model="dateRange.to"
+                        :label="t('invoiceOut.negativeBases.to')"
+                        class="q-mr-md"
+                        dense
+                        lazy-rules
+                        outlined
+                        rounded
+                    />
+                    <QBtn
+                        color="primary"
+                        icon-right="archive"
+                        no-caps
+                        @click="downloadCSV()"
+                    />
+                </div>
+            </template>
+            <template #top-right>
+                <div class="row justify-start items-center">
+                    <span class="q-mr-md text-results">
+                        {{ rows.length }} {{ t('results') }}
+                    </span>
+                    <QBtn
+                        color="primary"
+                        icon-right="search"
+                        no-caps
+                        class="q-mr-sm"
+                        @click="search()"
+                    />
+                    <QBtn color="primary" icon-right="refresh" no-caps @click="refresh" />
+                </div>
+            </template>
+            <template #header="props">
+                <QTr :props="props" class="full-height">
+                    <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                        <div class="column justify-start items-start full-height">
+                            {{ t(`invoiceOut.negativeBases.${col.label}`) }}
+                            <QInput
+                                :class="{
+                                    invisible:
+                                        col.field === 'isActive' ||
+                                        col.field === 'hasToInvoice' ||
+                                        col.field === 'isTaxDataChecked',
+                                }"
+                                dense
+                                outlined
+                                rounded
+                                v-model="filter[col.field]"
+                                type="text"
+                                @keyup.enter="search()"
+                            />
+                        </div>
+                    </QTh>
+                </QTr>
+            </template>
+            <template #body-cell="props">
+                <QTd :props="props">
+                    <component
+                        :is="tableColumnComponents[props.col.name].component"
+                        class="col-content"
+                        v-bind="tableColumnComponents[props.col.name].props(props)"
+                        @click="tableColumnComponents[props.col.name].event(props)"
+                    >
+                        <template
+                            v-if="
+                                props.col.name !== 'active' &&
+                                props.col.name !== 'hasToInvoice' &&
+                                props.col.name !== 'verifiedData'
+                            "
+                            >{{ props.value }}
+                        </template>
+                        <CustomerDescriptorProxy
+                            v-if="props.col.name === 'clientId'"
+                            :id="selectedCustomerId"
+                        />
+                        <WorkerDescriptorProxy
+                            v-if="props.col.name === 'comercial'"
+                            :id="selectedWorkerId"
+                        />
+                    </component>
+                </QTd>
+            </template>
+        </QTable>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.col-content {
+    border-radius: 4px;
+    padding: 6px 6px 6px 6px;
+}
+
+.text-results {
+    color: var(--vn-label);
+}
+</style>
+
+<i18n></i18n>

src/pages/Route/Cmr/CmrFilter.vue

@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInputDate from "components/common/VnInputDate.vue";
 
 const { t } = useI18n();
 const props = defineProps({
@@ -111,35 +112,7 @@ const countries = ref();
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
-                            :label="t('route.cmr.list.shipped')"
-                            v-model="params.shipped"
-                            mask="date"
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="rotate"
-                                        transition-hide="rotate"
-                                    >
-                                        <QDate v-model="params.shipped" minimal>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.close')"
-                                                    color="primary"
-                                                    flat
-                                                    @click="save"
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        <VnInputDate v-model="params.shipped" :label="t('route.cmr.list.shipped')" />
                     </QItemSection>
                 </QItem>
             </QList>
@@ -156,7 +129,7 @@ const countries = ref();
             country: Country
             clientFk: Client id
             shipped: Preparation date
-    
+
     es:
         params:
             cmrFk: Id cmr

src/pages/Shelving/Card/ShelvingCard.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+import LeftMenu from 'components/LeftMenu.vue';
+import ShelvingDescriptor from 'pages/Shelving/Card/ShelvingDescriptor.vue';
+
+const stateStore = useStateStore();
+</script>
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
+            <ShelvingDescriptor />
+            <QSeparator />
+            <LeftMenu source="card" />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage>
+            <RouterView></RouterView>
+        </QPage>
+    </QPageContainer>
+</template>

src/pages/Shelving/Card/ShelvingDescriptor.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import VnLv from 'components/ui/VnLv.vue';
+import useCardDescription from 'composables/useCardDescription';
+import WorkerDescriptorProxy from "pages/Worker/Card/WorkerDescriptorProxy.vue";
+import ShelvingDescriptorMenu from "pages/Shelving/Card/ShelvingDescriptorMenu.vue";
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const { t } = useI18n();
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const filter = {
+    include: [
+        {
+            relation: 'worker',
+            scope: {
+                fields: ['id'],
+                include: {
+                    relation: 'user',
+                    scope: { fields: ['nickname'] },
+                },
+            },
+        },
+        { relation: 'parking' },
+    ],
+};
+const data = ref(useCardDescription());
+const setData = (entity) => (data.value = useCardDescription(entity.code, entity.id));
+</script>
+
+<template>
+    <CardDescriptor
+        module="Shelving"
+        :url="`Shelvings/${entityId}`"
+        :filter="filter"
+        :title="data.title"
+        :subtitle="data.subtitle"
+        data-key="Shelvings"
+        @on-fetch="setData"
+    >
+        <template #body="{ entity }">
+            <VnLv :label="t('shelving.summary.code')" :value="entity.code" />
+            <VnLv :label="t('shelving.summary.parking')" :value="entity.parking?.code" />
+            <VnLv v-if="entity.worker" :label="t('shelving.summary.worker')">
+                <template #value>
+                    <span class="link">
+                        {{ entity.worker?.user?.nickname }}
+                        <WorkerDescriptorProxy :id="entity.worker?.id" />
+                    </span>
+                </template>
+            </VnLv>
+        </template>
+        <template #menu="{entity}">
+            <ShelvingDescriptorMenu :shelving="entity" />
+        </template>
+    </CardDescriptor>
+</template>

src/pages/Shelving/Card/ShelvingDescriptorMenu.vue

@@ -0,0 +1,61 @@
+<script setup>
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import VnConfirm from 'components/ui/VnConfirm.vue';
+
+const $props = defineProps({
+    shelving: {
+        type: Object,
+        required: true,
+    },
+});
+
+const router = useRouter();
+const quasar = useQuasar();
+const { t } = useI18n();
+
+function confirmRemove() {
+    quasar
+        .dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('confirmDeletion'),
+                message: t('confirmDeletionMessage'),
+                promise: remove,
+            },
+        })
+        .onOk(async () => await router.push({ name: 'ShelvingList' }));
+}
+
+async function remove() {
+    if (!$props.shelving.value.id) {
+        return;
+    }
+    await axios.delete(`Shelvings/${$props.shelving.value.id}`);
+    quasar.notify({
+        message: t('globals.dataDeleted'),
+        type: 'positive',
+    });
+}
+</script>
+<template>
+    <QItem @click="confirmRemove()" v-ripple clickable>
+        <QItemSection avatar>
+            <QIcon name="delete" />
+        </QItemSection>
+        <QItemSection>{{ t('deleteShelving') }}</QItemSection>
+    </QItem>
+</template>
+
+<i18n>
+{
+    "en": {
+        "deleteShelving": "Delete Shelving"
+    },
+    "es": {
+        "deleteShelving": "Eliminar carro"
+    }
+}
+</i18n>

src/pages/Shelving/Card/ShelvingDescriptorProxy.vue

@@ -0,0 +1,15 @@
+<script setup>
+import ShelvingDescriptor from "pages/Shelving/Card/ShelvingDescriptor.vue";
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+<template>
+    <QPopupProxy>
+        <ShelvingDescriptor v-if="$props.id" :id="$props.id" />
+    </QPopupProxy>
+</template>

src/pages/Shelving/Card/ShelvingFilter.vue

@@ -0,0 +1,120 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const emit = defineEmits(['search']);
+
+const workers = ref();
+const parkings = ref();
+
+function setWorkers(data) {
+    workers.value = data;
+}
+
+function setParkings(data) {
+    parkings.value = data;
+}
+</script>
+
+<template>
+    <FetchData
+        url="Parkings"
+        :filter="{ fields: ['id', 'code'] }"
+        sort-by="code ASC"
+        @on-fetch="setParkings"
+        auto-load
+    />
+    <FetchData
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        sort-by="firstName ASC"
+        @on-fetch="setWorkers"
+        auto-load
+    />
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true" @search="emit('search')">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params }">
+            <QList dense>
+                <QItem class="q-my-sm">
+                    <QItemSection v-if="!parkings">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="parkings">
+                        <QSelect
+                            dense
+                            outlined
+                            rounded
+                            :label="t('params.parkingFk')"
+                            v-model="params.parkingFk"
+                            :options="parkings"
+                            option-value="id"
+                            option-label="code"
+                            emit-value
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection v-if="!workers">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="workers">
+                        <QSelect
+                            dense
+                            outlined
+                            rounded
+                            :label="t('params.userFk')"
+                            v-model="params.userFk"
+                            :options="workers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-md">
+                    <QItemSection>
+                        <QCheckbox
+                            v-model="params.isRecyclable"
+                            :label="t('params.isRecyclable')"
+                            toggle-indeterminate
+                        />
+                    </QItemSection>
+                </QItem>
+            </QList>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        parkingFk: Parking
+        userFk: Worker
+        isRecyclable: Recyclable
+es:
+    params:
+        parkingFk: Parking
+        userFk: Trabajador
+        isRecyclable: Reciclable
+</i18n>

src/pages/Shelving/Card/ShelvingForm.vue

@@ -0,0 +1,126 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const shelvingId = route.params?.id || null;
+const isNew = Boolean(!shelvingId);
+const defaultInitialData = {
+    parkingFk: null,
+    priority: 0,
+    code: null,
+    isRecyclable: false,
+}
+
+const parkingFilter = { fields: ['id', 'code'] };
+const parkingList = ref([]);
+const parkingListCopy = ref([]);
+
+const setParkingList = (data) => {
+    parkingList.value = data;
+    parkingListCopy.value = data;
+};
+
+const parkingSelectFilter = {
+    options: parkingList,
+    filterFn: (options, value) => {
+        const search = value.trim().toLowerCase();
+
+        if (!search || search === '') {
+            return parkingListCopy.value;
+        }
+
+        return options.value.filter((option) =>
+            option.code.toLowerCase().startsWith(search)
+        );
+    },
+};
+
+const shelvingFilter = {
+    include: [
+        {
+            relation: 'worker',
+            scope: {
+                fields: ['id'],
+                include: {
+                    relation: 'user',
+                    scope: { fields: ['nickname'] },
+                },
+            },
+        },
+        { relation: 'parking' },
+    ],
+};
+</script>
+<template>
+    <QToolbar class="bg-vn-dark justify-end">
+        <div id="st-data"></div>
+        <QSpace />
+        <div id="st-actions"></div>
+    </QToolbar>
+    <FetchData
+        url="Parkings"
+        :filter="parkingFilter"
+        @on-fetch="setParkingList"
+        auto-load
+    />
+    <FormModel
+        :url="isNew ? null : `Shelvings/${shelvingId}`"
+        :url-create="isNew ? 'Shelvings' : null"
+        :observe-form-changes="!isNew"
+        :filter="shelvingFilter"
+        model="shelving"
+        :auto-load="!isNew"
+        :form-initial-data="defaultInitialData"
+    >
+        <template #form="{ data, validate, filter }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        v-model="data.code"
+                        :label="t('shelving.basicData.code')"
+                        :rules="validate('Shelving.code')"
+                    />
+                </div>
+                <div class="col">
+                    <QSelect
+                        v-model="data.parkingFk"
+                        :options="parkingList"
+                        option-value="id"
+                        option-label="code"
+                        emit-value
+                        :label="t('shelving.basicData.parking')"
+                        map-options
+                        use-input
+                        @filter="
+                            (value, update) => filter(value, update, parkingSelectFilter)
+                        "
+                        :rules="validate('Shelving.parkingFk')"
+                        :input-debounce="0"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        v-model="data.priority"
+                        :label="t('shelving.basicData.priority')"
+                        :rules="validate('Shelving.priority')"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        v-model="data.isRecyclable"
+                        :label="t('shelving.basicData.recyclable')"
+                        :rules="validate('Shelving.isRecyclable')"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>

src/pages/Shelving/Card/ShelvingLog.vue

@@ -0,0 +1,6 @@
+<script setup>
+import VnLog from 'src/components/common/VnLog.vue';
+</script>
+<template>
+    <VnLog model="Shelving" url="/ShelvingLogs"></VnLog>
+</template>

src/pages/Shelving/Card/ShelvingSearchbar.vue

@@ -0,0 +1,20 @@
+<script setup>
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import {useI18n} from "vue-i18n";
+const { t } = useI18n();
+</script>
+
+<template>
+    <VnSearchbar
+        data-key="ShelvingList"
+        :label="t('Search shelving')"
+        :info="t('You can search by search reference')"
+    />
+</template>
+
+<style scoped lang="scss"></style>
+<i18n>
+es:
+    Search shelving: Buscar carros
+    You can search by shelving reference: Puedes buscar por referencia del carro
+</i18n>

src/pages/Shelving/Card/ShelvingSummary.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { computed, onMounted, onUnmounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import CardSummary from 'components/ui/CardSummary.vue';
+import VnLv from 'components/ui/VnLv.vue';
+import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+const route = useRoute();
+const stateStore = useStateStore();
+const router = useRouter();
+const { t } = useI18n();
+
+const entityId = computed(() => $props.id || route.params.id);
+const isDialog = Boolean($props.id);
+const hideRightDrawer = () => {
+    if (!isDialog) {
+        stateStore.rightDrawer = false;
+    }
+}
+onMounted(hideRightDrawer);
+onUnmounted(hideRightDrawer);
+const filter = {
+    include: [
+        {
+            relation: 'worker',
+            scope: {
+                fields: ['id'],
+                include: {
+                    relation: 'user',
+                    scope: { fields: ['nickname'] },
+                },
+            },
+        },
+        { relation: 'parking' },
+    ],
+};
+</script>
+
+<template>
+    <template v-if="!isDialog && stateStore.isHeaderMounted()">
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
+    <div class="q-pa-md">
+        <CardSummary ref="summary" :url="`Shelvings/${entityId}`" :filter="filter">
+            <template #header="{ entity }">
+                <div>{{ entity.code }}</div>
+            </template>
+            <template #body="{ entity }">
+                <QCard class="vn-one">
+                    <div class="header">
+                        {{ t('shelving.pageTitles.basicData') }}
+                    </div>
+                    <VnLv :label="t('shelving.summary.code')" :value="entity.code" />
+                    <VnLv
+                        :label="t('shelving.summary.parking')"
+                        :value="entity.parking?.code"
+                    />
+                    <VnLv
+                        :label="t('shelving.summary.priority')"
+                        :value="entity.priority"
+                    />
+                    <VnLv
+                        :label="t('shelving.summary.worker')"
+                        :value="entity.worker?.user?.nickname"
+                    />
+                    <VnLv
+                        :label="t('shelving.summary.recyclable')"
+                        :value="entity.isRecyclable"
+                    />
+                </QCard>
+            </template>
+        </CardSummary>
+    </div>
+    <QDrawer
+        v-if="!isDialog"
+        v-model="stateStore.rightDrawer"
+        side="right"
+        :width="256"
+        show-if-above
+    >
+        <QScrollArea class="fit text-grey-8">
+            <ShelvingFilter
+                data-key="ShelvingList"
+                @search="router.push({ name: 'ShelvingList' })"
+            />
+        </QScrollArea>
+    </QDrawer>
+</template>

src/pages/Shelving/Card/ShelvingSummaryDialog.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+import ShelvingSummary from "pages/Shelving/Card/ShelvingSummary.vue";
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+
+<template>
+    <QDialog ref="dialogRef" @hide="onDialogHide">
+        <ShelvingSummary 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/Shelving/ShelvingList.vue

@@ -0,0 +1,138 @@
+<script setup>
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import { useStateStore } from 'stores/useStateStore';
+import { useI18n } from 'vue-i18n';
+import { onMounted, onUnmounted } from 'vue';
+import CardList from 'components/ui/CardList.vue';
+import VnLv from 'components/ui/VnLv.vue';
+import { useQuasar } from 'quasar';
+import { useRouter } from 'vue-router';
+import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
+import ShelvingSummaryDialog from 'pages/Shelving/Card/ShelvingSummaryDialog.vue';
+import ShelvingSearchbar from 'pages/Shelving/Card/ShelvingSearchbar.vue';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const quasar = useQuasar();
+const { t } = useI18n();
+const filter = {
+    include: [{ relation: 'parking' }],
+};
+
+onMounted(() => (stateStore.rightDrawer = true));
+onUnmounted(() => (stateStore.rightDrawer = false));
+
+function navigate(id) {
+    router.push({ path: `/shelving/${id}` });
+}
+
+function viewSummary(id) {
+    quasar.dialog({
+        component: ShelvingSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
+}
+
+function exprBuilder(param, value) {
+    switch (param) {
+        case 'search':
+            return { code: { like: `%${value}%` } };
+        case 'parkingFk':
+        case 'userFk':
+        case 'isRecyclable':
+            return { [param]: value };
+    }
+}
+</script>
+
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <ShelvingSearchbar />
+        </Teleport>
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <ShelvingFilter data-key="ShelvingList" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <div class="card-list">
+            <VnPaginate
+                data-key="ShelvingList"
+                url="Shelvings"
+                :filter="filter"
+                :expr-builder="exprBuilder"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :id="row.id"
+                        :title="row.code"
+                        @click="navigate(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv
+                                :label="t('shelving.list.parking')"
+                                :title-label="t('shelving.list.parking')"
+                                :value="row.parking?.code"
+                            />
+                            <VnLv
+                                :label="t('shelving.list.priority')"
+                                :value="row?.priority"
+                            />
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('components.smartCard.openCard')"
+                                @click.stop="navigate(row.id)"
+                                class="bg-vn-dark"
+                                outline
+                            />
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+        <QPageSticky :offset="[20, 20]">
+            <RouterLink :to="{ name: 'ShelvingCreate' }">
+                <QBtn fab icon="add" color="primary" />
+                <QTooltip>
+                    {{ t('shelving.list.newShelving') }}
+                </QTooltip>
+            </RouterLink>
+        </QPageSticky>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+</style>

src/pages/Shelving/ShelvingMain.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/pages/Supplier/Card/SupplierCard.vue

@@ -0,0 +1,63 @@
+<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>

src/pages/Supplier/Card/SupplierDescriptor.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import useCardDescription from 'src/composables/useCardDescription';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const { t } = useI18n();
+
+const filter = {
+    fields: [
+        'id',
+        'name',
+        'nickname',
+        'nif',
+        'payMethodFk',
+        'payDemFk',
+        'payDay',
+        'isActive',
+        'isSerious',
+        'isTrucker',
+        'account',
+    ],
+    include: [
+        {
+            relation: 'payMethod',
+            scope: {
+                fields: ['id', 'name'],
+            },
+        },
+        {
+            relation: 'payDem',
+            scope: {
+                fields: ['id', 'payDem'],
+            },
+        },
+        {
+            relation: 'client',
+            scope: {
+                fields: ['id', 'fi'],
+            },
+        },
+    ],
+};
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const data = ref(useCardDescription());
+const setData = (entity) => {
+    data.value = useCardDescription(entity.ref, entity.id);
+};
+</script>
+
+<template>
+    <CardDescriptor
+        module="Supplier"
+        :url="`Suppliers/${entityId}`"
+        :title="data.title"
+        :subtitle="data.subtitle"
+        :filter="filter"
+        @on-fetch="setData"
+        data-key="Supplier"
+    >
+        <template #body="{ entity }">
+            <VnLv :label="t('supplier.summary.taxNumber')" :value="entity.nif" />
+            <VnLv label="Alias" :value="entity.nickname" />
+            <VnLv
+                :label="t('supplier.summary.payMethod')"
+                :value="entity.payMethod.name"
+            />
+            <VnLv
+                :label="t('supplier.summary.payDeadline')"
+                :value="entity.payDem.payDem"
+            />
+            <VnLv :label="t('supplier.summary.payDay')" :value="entity.payDay" />
+            <VnLv :label="t('supplier.summary.account')" :value="entity.account" />
+        </template>
+    </CardDescriptor>
+</template>
+<i18n>
+
+</i18n>

src/pages/Supplier/Card/SupplierDescriptorProxy.vue

@@ -0,0 +1,16 @@
+<script setup>
+import SupplierDescriptor from './SupplierDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <QPopupProxy>
+        <SupplierDescriptor v-if="$props.id" :id="$props.id" />
+    </QPopupProxy>
+</template>

src/pages/Supplier/Card/SupplierSummary.vue

@@ -0,0 +1,188 @@
+<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 WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import { getUrl } from 'src/composables/getUrl';
+import { useRole } from 'src/composables/useRole';
+import { dashIfEmpty } from 'src/filters';
+
+onUpdated(() => summaryRef.value.fetch());
+
+const route = useRoute();
+const roleState = useRole();
+const { t } = useI18n();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const entityId = computed(() => $props.id || route.params.id);
+
+const summaryRef = ref();
+const supplier = ref();
+const supplierUrl = ref();
+
+onMounted(async () => {
+    await roleState.fetch();
+    supplierUrl.value = (await getUrl('supplier/')) + entityId.value;
+});
+
+async function setData(data) {
+    if (data) {
+        supplier.value = data;
+    }
+}
+
+const isAdministrative = computed(() => {
+    return roleState.hasAny(['administrative']);
+});
+</script>
+
+<template>
+    <CardSummary
+        ref="summaryRef"
+        :url="`Suppliers/${entityId}/getSummary`"
+        @on-fetch="(data) => setData(data)"
+    >
+        <template #header-left>
+            <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>
+        </template>
+
+        <template #body>
+            <QCard class="vn-one">
+                <a v-if="isAdministrative" class="header link" :href="supplierUrl">
+                    {{ t('globals.summary.basicData') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <span v-else> {{ t('globals.summary.basicData') }}</span>
+                <VnLv label="Id" :value="supplier.id" />
+                <VnLv label="Alias" :value="supplier.nickname" />
+                <VnLv :label="t('supplier.summary.responsible')">
+                    <template #value>
+                        <span class="link">
+                            {{ dashIfEmpty(supplier.worker?.user?.nickname) }}
+                            <WorkerDescriptorProxy
+                                v-if="supplier.worker?.user?.id"
+                                :id="supplier.worker?.user?.id"
+                            />
+                        </span>
+                    </template>
+                </VnLv>
+                <VnLv :label="t('supplier.summary.notes')" class="q-mb-xs">
+                    <template #value>
+                        <span> {{ dashIfEmpty(supplier.note) }} </span>
+                    </template>
+                </VnLv>
+
+                <VnLv :label="t('supplier.summary.verified')" class="q-mb-xs">
+                    <template #value>
+                        <QCheckbox
+                            v-model="supplier.isSerious"
+                            dense
+                            disable
+                            class="full-width q-mb-xs"
+                        />
+                    </template>
+                </VnLv>
+                <VnLv :label="t('supplier.summary.isActive')" class="q-mb-xs">
+                    <template #value>
+                        <QCheckbox
+                            v-model="supplier.isActive"
+                            dense
+                            disable
+                            class="full-width q-mb-xs"
+                        />
+                    </template>
+                </VnLv>
+            </QCard>
+            <QCard class="vn-one">
+                <a v-if="isAdministrative" class="header link" :href="supplierUrl">
+                    {{ t('supplier.summary.billingData') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <span v-else> {{ t('supplier.summary.billingData') }}</span>
+                <VnLv
+                    :label="t('supplier.summary.payMethod')"
+                    :value="supplier.payMethod?.name"
+                    dash
+                />
+                <VnLv
+                    :label="t('supplier.summary.payDeadline')"
+                    :value="supplier.payDem?.payDem"
+                    dash
+                />
+                <VnLv :label="t('supplier.summary.payDay')" :value="supplier.payDay" />
+                <VnLv :label="t('supplier.summary.account')" :value="supplier.account" />
+            </QCard>
+            <QCard class="vn-one">
+                <a v-if="isAdministrative" class="header link" :href="supplierUrl">
+                    {{ t('supplier.summary.fiscalData') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <span v-else> {{ t('supplier.summary.fiscalData') }}</span>
+                <VnLv
+                    :label="t('supplier.summary.sageTaxType')"
+                    :value="supplier.sageTaxType?.vat"
+                    dash
+                />
+                <VnLv
+                    :label="t('supplier.summary.sageTransactionType')"
+                    :value="supplier.sageTransactionType?.transaction"
+                    dash
+                />
+                <VnLv
+                    :label="t('supplier.summary.sageWithholding')"
+                    :value="supplier.sageWithholding?.withholding"
+                    dash
+                />
+                <VnLv
+                    :label="t('supplier.summary.supplierActivity')"
+                    :value="supplier.supplierActivity?.name"
+                    dash
+                />
+                <VnLv
+                    :label="t('supplier.summary.healthRegister')"
+                    :value="supplier.healthRegister"
+                />
+            </QCard>
+            <QCard class="vn-one">
+                <a v-if="isAdministrative" class="header link" :href="supplierUrl">
+                    {{ t('supplier.summary.fiscalAddress') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <span v-else> {{ t('supplier.summary.fiscalAddress') }}</span>
+                <VnLv :label="t('supplier.summary.socialName')" :value="supplier.name" />
+                <VnLv :label="t('supplier.summary.taxNumber')" :value="supplier.nif" />
+                <VnLv :label="t('supplier.summary.street')" :value="supplier.street" />
+                <VnLv :label="t('supplier.summary.city')" :value="supplier.city" />
+                <VnLv
+                    :label="t('supplier.summary.postCode')"
+                    :value="supplier.postCode"
+                />
+                <VnLv
+                    :label="t('supplier.summary.province')"
+                    :value="supplier.province?.name"
+                    dash
+                />
+                <VnLv
+                    :label="t('supplier.summary.country')"
+                    :value="supplier.country?.country"
+                    dash
+                />
+            </QCard>
+        </template>
+    </CardSummary>
+</template>
+<style lang="scss" scoped></style>

src/pages/Supplier/Card/SupplierSummaryDialog.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+import SupplierSummary from './SupplierSummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+
+<template>
+    <QDialog ref="dialogRef" @hide="onDialogHide">
+        <SupplierSummary 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/Supplier/SupplierCreate.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { reactive } from 'vue';
+import { useStateStore } from 'stores/useStateStore';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+
+const { t } = useI18n();
+const stateStore = useStateStore();
+
+const newSupplierForm = reactive({
+    name: null,
+});
+</script>
+
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="SuppliersList"
+                :limit="20"
+                :label="t('Search suppliers')"
+            />
+        </Teleport>
+    </template>
+
+    <QPage>
+        <QToolbar class="bg-vn-dark justify-end">
+            <div id="st-data"></div>
+            <QSpace />
+            <div id="st-actions"></div>
+        </QToolbar>
+        <FormModel
+            url-create="Suppliers/newSupplier"
+            model="supplier"
+            :form-initial-data="newSupplierForm"
+        >
+            <template #form="{ data }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput
+                            v-model="data.name"
+                            :label="t('supplier.create.supplierName')"
+                        />
+                    </div>
+                </VnRow>
+            </template>
+        </FormModel>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.card {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    background-color: var(--vn-dark);
+    padding: 40px;
+}
+</style>

src/pages/Supplier/SupplierList.vue

@@ -0,0 +1,111 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import { useRouter } from 'vue-router';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import { useQuasar } from 'quasar';
+import SupplierSummaryDialog from './Card/SupplierSummaryDialog.vue';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const quasar = useQuasar();
+const { t } = useI18n();
+
+function navigate(id) {
+    router.push({ path: `/supplier/${id}` });
+}
+
+const redirectToCreateView = () => {
+    router.push({ name: 'SupplierCreate' });
+};
+
+const viewSummary = (id) => {
+    quasar.dialog({
+        component: SupplierSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
+};
+</script>
+
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="SuppliersList"
+                :limit="20"
+                :label="t('Search suppliers')"
+            />
+        </Teleport>
+    </template>
+
+    <QPage class="column items-center q-pa-md">
+        <div class="card-list">
+            <VnPaginate data-key="SuppliersList" url="Suppliers/filter" auto-load>
+                <template #body="{ rows }">
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="row.socialName"
+                        :id="row.id"
+                        @click="navigate(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv label="NIF/CIF" :value="row.nif" />
+                            <VnLv label="Alias" :value="row.nickname" />
+                            <VnLv
+                                :label="t('supplier.list.payMethod')"
+                                :value="row.payMethod"
+                            />
+                            <VnLv
+                                :label="t('supplier.list.payDeadline')"
+                                :title-label="t('invoiceOut.list.created')"
+                                :value="row.payDem"
+                            />
+                            <VnLv
+                                :label="t('supplier.list.payDay')"
+                                :value="row.payDay"
+                            />
+                            <VnLv
+                                :label="t('supplier.list.account')"
+                                :value="row.account"
+                            />
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id)"
+                                color="primary"
+                            />
+                        </template>
+                    </CardList>
+                </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/Supplier/SupplierMain.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/pages/Ticket/Card/TicketSummary.vue

@@ -208,7 +208,7 @@ async function changeState(value) {
                     :label="t('ticket.summary.landed')"
                     :value="toDate(ticket.landed)"
                 />
-                <VnLv :label="t('ticket.summary.packages')" :value="ticket.packages" />
+                <VnLv :label="t('global.packages')" :value="ticket.packages" />
                 <VnLv :value="ticket.address.phone">
                     <template #label>
                         {{ t('ticket.summary.consigneePhone') }}
@@ -276,7 +276,7 @@ async function changeState(value) {
                             <QTh auto-width>{{ t('ticket.summary.description') }}</QTh>
                             <QTh auto-width>{{ t('ticket.summary.price') }}</QTh>
                             <QTh auto-width>{{ t('ticket.summary.discount') }}</QTh>
-                            <QTh auto-width>{{ t('ticket.summary.amount') }}</QTh>
+                            <QTh auto-width>{{ t('globals.amount') }}</QTh>
                             <QTh auto-width>{{ t('ticket.summary.packing') }}</QTh>
                         </QTr>
                     </template>
@@ -400,7 +400,7 @@ async function changeState(value) {
                 v-if="ticket.packagings.length > 0 || ticket.services.length > 0"
             >
                 <a class="header link" :href="ticketUrl + 'package'">
-                    {{ t('ticket.summary.packages') }}
+                    {{ t('globals.packages') }}
                     <QIcon name="open_in_new" color="primary" />
                 </a>
                 <QTable :rows="ticket.packagings" flat>
@@ -431,7 +431,7 @@ async function changeState(value) {
                             <QTh auto-width>{{ t('ticket.summary.description') }}</QTh>
                             <QTh auto-width>{{ t('ticket.summary.price') }}</QTh>
                             <QTh auto-width>{{ t('ticket.summary.taxClass') }}</QTh>
-                            <QTh auto-width>{{ t('ticket.summary.amount') }}</QTh>
+                            <QTh auto-width>{{ t('globals.amount') }}</QTh>
                         </QTr>
                     </template>
                     <template #body="props">

src/pages/Ticket/TicketFilter.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import toDateString from 'filters/toDateString';
+import VnInputDate from "components/common/VnInputDate.vue";
 
 const { t } = useI18n();
 const props = defineProps({
@@ -71,69 +72,10 @@ const warehouses = ref();
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput v-model="params.from" :label="t('From')" mask="date">
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.from" landscape>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.cancel')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                                <QBtn
-                                                    :label="t('globals.confirm')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        <VnInputDate v-model="params.from" :label="t('From')" />
                     </QItemSection>
                     <QItemSection>
-                        <QInput v-model="params.to" :label="t('To')" mask="date">
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.to" landscape>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.cancel')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                                <QBtn
-                                                    :label="t('globals.confirm')"
-                                                    color="primary"
-                                                    flat
-                                                    @click="save"
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        <VnInputDate v-model="params.to" :label="t('To')" />
                     </QItemSection>
                 </QItem>
                 <QItem>

src/pages/Ticket/TicketList.vue

@@ -87,6 +87,7 @@ function viewSummary(id) {
                         v-for="row of rows"
                         :key="row.id"
                         :id="row.id"
+                        :title="`${row.nickname} (${row.id})`"
                         @click="navigate(row.id)"
                     >
                         <template #list-items>
@@ -120,11 +121,11 @@ function viewSummary(id) {
                             />
                         </template>
                         <template #actions>
-                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
-                                <QTooltip>
-                                    {{ t('components.smartCard.openSummary') }}
-                                </QTooltip>
-                            </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id)"
+                                color="primary"
+                            />
                         </template>
                     </CardList>
                 </template>

src/pages/Travel/Card/TravelCard.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+
+const stateStore = useStateStore();
+</script>
+<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>

src/pages/Travel/Card/TravelDescriptor.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { toDate } from 'src/filters';
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import useCardDescription from 'src/composables/useCardDescription';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const { t } = useI18n();
+
+const filter = {
+    fields: [
+        'id',
+        'ref',
+        'shipped',
+        'landed',
+        'totalEntries',
+        'warehouseInFk',
+        'warehouseOutFk',
+        'cargoSupplierFk',
+    ],
+    include: [
+        {
+            relation: 'warehouseIn',
+            scope: {
+                fields: ['name'],
+            },
+        },
+        {
+            relation: 'warehouseOut',
+            scope: {
+                fields: ['name'],
+            },
+        },
+    ],
+};
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const data = ref(useCardDescription());
+
+const setData = (entity) => {
+    data.value = useCardDescription(entity.ref, entity.id);
+};
+</script>
+
+<template>
+    <CardDescriptor
+        module="Travel"
+        :url="`Travels/${entityId}`"
+        :title="data.title"
+        :subtitle="data.subtitle"
+        :filter="filter"
+        @on-fetch="setData"
+        data-key="travelData"
+    >
+        <template #body="{ entity }">
+            <VnLv :label="t('globals.wareHouseIn')" :value="entity.warehouseIn.name" />
+            <VnLv :label="t('globals.wareHouseOut')" :value="entity.warehouseOut.name" />
+            <VnLv :label="t('globals.shipped')" :value="toDate(entity.shipped)" />
+            <VnLv :label="t('globals.landed')" :value="toDate(entity.landed)" />
+            <VnLv :label="t('globals.totalEntries')" :value="entity.totalEntries" />
+        </template>
+    </CardDescriptor>
+</template>
+<i18n>
+
+</i18n>

src/pages/Travel/Card/TravelDescriptorProxy.vue

@@ -0,0 +1,16 @@
+<script setup>
+import TravelDescriptor from './TravelDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <QPopupProxy>
+        <TravelDescriptor v-if="$props.id" :id="$props.id" />
+    </QPopupProxy>
+</template>

src/pages/Travel/Card/TravelSummary.vue

@@ -0,0 +1,323 @@
+<script setup>
+import { onMounted, ref, computed, onUpdated } from 'vue';
+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';
+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';
+import VnRow from 'components/ui/VnRow.vue';
+
+onUpdated(() => summaryRef.value.fetch());
+
+const route = useRoute();
+const { t } = useI18n();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const router = useRouter();
+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;
+});
+
+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: null },
+    { name: t('travel.summary.AddEntry'), action: null },
+];
+
+const tableColumnComponents = {
+    isConfirmed: {
+        component: () => QCheckbox,
+        props: (prop) => ({
+            disable: true,
+            'model-value': Boolean(prop.value),
+        }),
+    },
+    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),
+        props: () => ({ name: 'insert_drive_file', color: 'primary', 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('supplier.pageTitles.supplier'),
+            field: 'supplierName',
+            name: 'supplierName',
+            align: 'left',
+        },
+        {
+            label: t('globals.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;
+});
+
+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 } });
+};
+
+const openEntryDescriptor = () => {};
+</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 #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 row justify-around" style="min-width: 100%">
+                <VnRow>
+                    <div class="col">
+                        <VnLv
+                            :label="t('globals.shipped')"
+                            :value="toDate(travel.shipped)"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('globals.wareHouseOut')"
+                            :value="travel.warehouseOut?.name"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv :label="t('travel.summary.delivered')" class="q-mb-xs">
+                            <template #value>
+                                <QCheckbox
+                                    v-model="travel.isDelivered"
+                                    disable
+                                    dense
+                                    class="full-width q-my-xs"
+                                />
+                            </template>
+                        </VnLv>
+                    </div>
+                </VnRow>
+                <VnRow>
+                    <div class="col">
+                        <VnLv
+                            :label="t('globals.landed')"
+                            :value="toDate(travel.landed)"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('globals.wareHouseIn')"
+                            :value="travel.warehouseIn?.name"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv :label="t('travel.summary.received')" class="q-mb-xs">
+                            <template #value>
+                                <QCheckbox
+                                    v-model="travel.isReceived"
+                                    disable
+                                    dense
+                                    class="full-width q-mb-xs"
+                                />
+                            </template>
+                        </VnLv>
+                    </div>
+                </VnRow>
+                <VnRow>
+                    <div class="col">
+                        <VnLv :label="t('globals.agency')" :value="travel.agency?.name" />
+                    </div>
+                    <div class="col">
+                        <VnLv :label="t('globals.reference')" :value="travel.ref" />
+                    </div>
+                    <div class="col">
+                        <VnLv label="m³" :value="travel.m3" />
+                    </div>
+                    <div class="col">
+                        <VnLv :label="t('globals.totalEntries')" :value="travel.m3" />
+                    </div>
+                </VnRow>
+            </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></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/ExtraCommunity.vue

@@ -0,0 +1,419 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import { QBtn, QField, QPopupEdit } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
+import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import ExtraCommunityFilter from './ExtraCommunityFilter.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { toCurrency } from 'src/filters';
+import { useArrayData } from 'composables/useArrayData';
+import { toDate } from 'src/filters';
+import { usePrintService } from 'composables/usePrintService';
+import travelService from 'src/services/travel.service';
+
+const router = useRouter();
+const stateStore = useStateStore();
+const { t } = useI18n();
+const { openReport } = usePrintService();
+
+const shippedFrom = ref(Date.vnNew());
+const landedTo = ref(Date.vnNew());
+
+const arrayData = useArrayData('ExtraCommunity', {
+    url: 'Travels/extraCommunityFilter',
+    limit: 0,
+    order: [
+        'landed ASC',
+        'shipped ASC',
+        'travelFk',
+        'loadPriority',
+        'agencyModeFk',
+        'supplierName',
+        'evaNotes',
+    ],
+    userParams: {
+        continent: 'AM',
+        shippedFrom: shippedFrom.value,
+        landedTo: landedTo.value,
+    },
+});
+
+const rows = computed(() => arrayData.store.data || []);
+
+const tableColumnComponents = {
+    id: {
+        component: QBtn,
+        attrs: () => ({ flat: true, color: 'blue', class: 'col-content' }),
+    },
+    cargoSupplierNickname: {
+        component: QBtn,
+        attrs: () => ({ flat: true, color: 'blue', class: 'col-content' }),
+    },
+    agencyModeName: {
+        component: 'span',
+        attrs: () => ({ class: 'col-content' }),
+    },
+    invoiceAmount: {
+        component: 'span',
+        attrs: () => ({
+            class: 'col-content',
+        }),
+    },
+    ref: {
+        component: QField,
+        attrs: () => ({ readonly: true, dense: true }),
+    },
+    stickers: {
+        component: 'span',
+        attrs: () => ({ class: 'col-content' }),
+    },
+    kg: {
+        component: 'span',
+        attrs: () => ({ class: 'col-content' }),
+    },
+    loadedKg: {
+        component: 'span',
+        attrs: () => ({ class: 'col-content' }),
+    },
+    volumeKg: {
+        component: 'span',
+        attrs: () => ({ class: 'col-content' }),
+    },
+    warehouseOutName: {
+        component: 'span',
+        attrs: () => ({ class: 'col-content' }),
+    },
+    shipped: {
+        component: 'span',
+        attrs: () => ({ class: 'col-content' }),
+    },
+    warehouseInName: {
+        component: 'span',
+        attrs: () => ({ class: 'col-content' }),
+    },
+    landed: {
+        component: 'span',
+        attrs: () => ({ class: 'col-content' }),
+    },
+};
+
+const columns = computed(() => {
+    return [
+        {
+            label: 'id',
+            field: 'id',
+            name: 'id',
+            align: 'left',
+            showValue: true,
+        },
+        {
+            label: t('supplier.pageTitles.supplier'),
+            field: 'cargoSupplierNickname',
+            name: 'cargoSupplierNickname',
+            align: 'left',
+            showValue: true,
+        },
+        {
+            label: t('globals.agency'),
+            field: 'agencyModeName',
+            name: 'agencyModeName',
+            align: 'left',
+            showValue: true,
+        },
+        {
+            label: t('globals.amount'),
+            name: 'invoiceAmount',
+            field: 'entries',
+            align: 'left',
+            showValue: true,
+            format: (value) =>
+                toCurrency(
+                    value
+                        ? value.reduce((sum, entry) => {
+                              return sum + (entry.invoiceAmount || 0);
+                          }, 0)
+                        : 0
+                ),
+        },
+        {
+            label: t('globals.reference'),
+            field: 'ref',
+            name: 'ref',
+            align: 'left',
+            showValue: false,
+        },
+        {
+            label: t('globals.packages'),
+            field: 'stickers',
+            name: 'stickers',
+            align: 'left',
+            showValue: true,
+        },
+        {
+            label: t('kg'),
+            field: 'kg',
+            name: 'kg',
+            align: 'left',
+            showValue: true,
+        },
+        {
+            label: t('physicKg'),
+            field: 'loadedKg',
+            name: 'loadedKg',
+            align: 'left',
+            showValue: true,
+        },
+        {
+            label: 'KG Vol.',
+            field: 'volumeKg',
+            name: 'volumeKg',
+            align: 'left',
+            showValue: true,
+        },
+        {
+            label: t('globals.wareHouseOut'),
+            field: 'warehouseOutName',
+            name: 'warehouseOutName',
+            align: 'left',
+            showValue: true,
+        },
+        {
+            label: t('shipped'),
+            field: 'shipped',
+            name: 'shipped',
+            align: 'left',
+            format: (value) => toDate(value.substring(0, 10)),
+            showValue: true,
+        },
+        {
+            label: t('globals.wareHouseIn'),
+            field: 'warehouseInName',
+            name: 'warehouseInName',
+            align: 'left',
+            showValue: true,
+        },
+        {
+            label: t('landed'),
+            field: 'landed',
+            name: 'landed',
+            align: 'left',
+            format: (value) => toDate(value.substring(0, 10)),
+            showValue: true,
+        },
+    ];
+});
+
+async function getData() {
+    await arrayData.fetch({ append: false });
+}
+
+const openReportPdf = () => {
+    const params = {
+        ...arrayData.store.userParams,
+        limit: arrayData.store.limit,
+    };
+
+    openReport('Travels/extra-community-pdf', params);
+};
+
+const saveFieldValue = async (val, field, index) => {
+    const id = rows.value[index].id;
+    const params = { [field]: val };
+    await travelService.updateTravel(id, params);
+};
+
+const navigateToTravelId = (id) => {
+    router.push({ path: `/travel/${id}` });
+};
+
+const stopEventPropagation = (event, col) => {
+    if (!['ref', 'id', 'supplier'].includes(col.name)) return;
+    event.preventDefault();
+    event.stopPropagation();
+};
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+
+    shippedFrom.value.setDate(shippedFrom.value.getDate() - 2);
+    shippedFrom.value.setHours(0, 0, 0, 0);
+
+    landedTo.value.setDate(landedTo.value.getDate() + 7);
+    landedTo.value.setHours(23, 59, 59, 59);
+    await getData();
+});
+</script>
+
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="ExtraCommunity"
+                :limit="20"
+                :label="t('searchExtraCommunity')"
+            />
+        </Teleport>
+    </template>
+    <QToolbar class="bg-vn-dark justify-end">
+        <div id="st-data"></div>
+        <QSpace />
+        <div id="st-actions">
+            <QBtn color="primary" icon-right="archive" no-caps @click="openReportPdf()" />
+        </div>
+    </QToolbar>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <ExtraCommunityFilter data-key="ExtraCommunity" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :rows="rows"
+            :columns="columns"
+            hide-bottom
+            row-key="clientId"
+            :pagination="{ rowsPerPage: 0 }"
+            class="full-width q-mt-md"
+        >
+            <template #body="props">
+                <QTr
+                    :props="props"
+                    @click="navigateToTravelId(props.row.id)"
+                    class="cursor-pointer"
+                >
+                    <QTd
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                        @click="stopEventPropagation($event, col)"
+                    >
+                        <component
+                            :is="tableColumnComponents[col.name].component"
+                            class="col-content"
+                            v-bind="tableColumnComponents[col.name].attrs(props)"
+                        >
+                            <!-- Editable 'ref' and 'kg' QField slot -->
+                            <template
+                                v-if="col.name === 'ref' || col.name === 'kg'"
+                                #control
+                            >
+                                <div
+                                    class="self-center full-width no-outline"
+                                    tabindex="0"
+                                >
+                                    {{ col.value }}
+                                </div>
+                                <QPopupEdit
+                                    :key="col.name"
+                                    v-model="col.value"
+                                    label-set="Save"
+                                    label-cancel="Close"
+                                >
+                                    <QInput
+                                        v-model="rows[props.pageIndex][col.field]"
+                                        dense
+                                        autofocus
+                                        @keyup.enter="
+                                            saveFieldValue(
+                                                rows[props.pageIndex][col.field],
+                                                col.field,
+                                                props.rowIndex
+                                            )
+                                        "
+                                    />
+                                </QPopupEdit>
+                            </template>
+
+                            <template v-if="col.showValue">
+                                {{ col.value }}
+                            </template>
+
+                            <!-- Main Row Descriptors -->
+                            <TravelDescriptorProxy
+                                v-if="col.name === 'id'"
+                                :id="props.row.id"
+                            />
+                            <SupplierDescriptorProxy
+                                v-if="col.name === 'cargoSupplierNickname'"
+                                :id="props.row.cargoSupplierFk"
+                            />
+                        </component>
+                    </QTd>
+                </QTr>
+                <QTr
+                    v-for="entry in props.row.entries"
+                    :key="entry.id"
+                    :props="props"
+                    class="secondary-row"
+                >
+                    <QTd
+                        ><QBtn flat color="blue" class="col-content">{{ entry.id }}</QBtn>
+                        <!-- Cuando se cree el modulo relacionado a entries, crear su descriptor y colocarlo acá -->
+                        <!-- <EntryDescriptorProxy :id="entry.id"/> -->
+                    </QTd>
+                    <QTd
+                        ><QBtn flat color="blue" class="col-content">{{
+                            entry.supplierName
+                        }}</QBtn>
+                        <SupplierDescriptorProxy :id="entry.supplierFk" />
+                    </QTd>
+                    <QTd></QTd>
+                    <QTd
+                        ><span class="col-content">{{
+                            toCurrency(entry.invoiceAmount)
+                        }}</span></QTd
+                    >
+                    <QTd
+                        ><span class="col-content">{{ entry.reference }}</span></QTd
+                    >
+                    <QTd
+                        ><span class="col-content">{{ entry.stickers }}</span></QTd
+                    >
+                    <QTd></QTd>
+                    <QTd
+                        ><span class="col-content">{{ entry.loadedkg }}</span></QTd
+                    >
+                    <QTd
+                        ><span class="col-content">{{ entry.volumeKg }}</span></QTd
+                    >
+                    <QTd></QTd>
+                    <QTd></QTd>
+                    <QTd></QTd>
+                    <QTd></QTd>
+                </QTr>
+            </template>
+        </QTable>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.col-content {
+    border-radius: 4px;
+    padding: 6px 6px 6px 6px;
+}
+
+.secondary-row {
+    background-color: var(--vn-gray);
+}
+</style>
+
+<i18n>
+en:
+    searchExtraCommunity: Search for extra community shipping
+    kg: BI. KG
+    physicKg: Phy. KG
+    shipped: W. shipped
+    landed: W. landed
+
+es:
+    searchExtraCommunity: Buscar por envío extra comunitario
+    kg: KG Bloq.
+    physicKg: KG físico
+    shipped: F. envío
+    landed: F. llegada
+</i18n>

src/pages/Travel/ExtraCommunityFilter.vue

@@ -0,0 +1,263 @@
+<script setup>
+import { reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import FetchData from 'components/FetchData.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const filtersOptions = reactive({
+    warehouses: [],
+    continents: [],
+    agencies: [],
+    suppliers: [],
+});
+
+const updateFilterOptions = (data, optionKey) => {
+    filtersOptions[optionKey] = [...data];
+};
+
+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) => updateFilterOptions(data, 'warehouses')"
+        auto-load
+    />
+    <FetchData
+        url="Continents"
+        @on-fetch="(data) => updateFilterOptions(data, 'continents')"
+        auto-load
+    />
+    <FetchData
+        url="AgencyModes"
+        @on-fetch="(data) => updateFilterOptions(data, 'agencies')"
+        auto-load
+    />
+    <FetchData
+        url="Suppliers"
+        @on-fetch="(data) => updateFilterOptions(data, 'suppliers')"
+        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>
+        <template #body="{ params }">
+            <QList dense style="max-width: 256px" class="list">
+                <QItem class="q-my-sm">
+                    <QItemSection>
+                        <QInput label="id" dense outlined rounded v-model="params.id" />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-my-sm">
+                    <QItemSection>
+                        <QInput
+                            :label="t('params.ref')"
+                            dense
+                            outlined
+                            rounded
+                            v-model="params.reference"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QInput
+                            v-model="params.totalEntries"
+                            type="number"
+                            :label="t('params.totalEntries')"
+                            dense
+                            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>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.agencyModeFk')"
+                            v-model="params.agencyModeFk"
+                            :options="filtersOptions.agencies"
+                            option-value="agencyFk"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnInputDate
+                            v-model="params.shippedFrom"
+                            :label="t('params.shippedFrom')"
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnInputDate
+                            v-model="params.landedTo"
+                            :label="t('params.landedTo')"
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.warehouseOutFk')"
+                            v-model="params.warehouseOutFk"
+                            :options="filtersOptions.warehouses"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.warehouseInFk')"
+                            v-model="params.warehouseInFk"
+                            :options="filtersOptions.warehouses"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('supplier.pageTitles.supplier')"
+                            v-model="params.cargoSupplierFk"
+                            :options="filtersOptions.suppliers"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.continent')"
+                            v-model="params.continent"
+                            :options="filtersOptions.continents"
+                            option-value="code"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+            </QList>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<style scoped>
+.list * {
+    max-width: 100%;
+}
+
+.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:
+        ref: Reference
+        totalEntries: Total entries
+        agencyModeFk: Agency
+        warehouseInFk: Warehouse In
+        warehouseOutFk: Warehouse Out
+        shippedFrom: Shipped from
+        landedTo: Landed to
+        cargoSupplierFk: Supplier
+        continent: Continent out
+es:
+    params:
+        ref: Referencia
+        totalEntries: Ent. totales
+        agencyModeFk: Agencia
+        warehouseInFk: Alm. entrada
+        warehouseOutFk: Alm. salida
+        shippedFrom: Llegada desde
+        landedTo: Llegada hasta
+        cargoSupplierFk: Proveedor
+        continent: Cont. Salida
+</i18n>

src/pages/Travel/TravelCreate.vue

@@ -0,0 +1,179 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { reactive, ref } from 'vue';
+import FetchData from 'components/FetchData.vue';
+import { useRoute } from 'vue-router';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import { toDate } from 'src/filters';
+
+import { onBeforeMount } from 'vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const newTravelForm = reactive({
+    ref: null,
+    agencyModeFk: null,
+    shipped: null,
+    landed: null,
+    warehouseOutFk: null,
+    warehouseInFk: null,
+});
+
+const agenciesOptions = ref([]);
+const viewAction = ref();
+const warehousesOptions = ref([]);
+
+onBeforeMount(() => {
+    // Esto nos permite decirle a FormModel si queremos observar los cambios o no
+    // Ya que si queremos clonar queremos que nos permita guardar inmediatamente sin realizar cambios en el form
+    viewAction.value = route.query.travelData ? 'clone' : 'create';
+
+    if (route.query.travelData) {
+        const travelData = JSON.parse(route.query.travelData);
+        for (let key in newTravelForm) {
+            if (key === 'landed' || key === 'shipped') {
+                newTravelForm[key] = travelData[key].substring(0, 10);
+            } else {
+                newTravelForm[key] = travelData[key];
+            }
+        }
+    }
+});
+
+const onFetchAgencies = (agencies) => {
+    agenciesOptions.value = [...agencies];
+};
+
+const onFetchWarehouses = (warehouses) => {
+    warehousesOptions.value = [...warehouses];
+};
+</script>
+
+<template>
+    <FetchData url="AgencyModes" @on-fetch="(data) => onFetchAgencies(data)" auto-load />
+    <FetchData url="Warehouses" @on-fetch="(data) => onFetchWarehouses(data)" auto-load />
+    <QPage>
+        <QToolbar class="bg-vn-dark">
+            <div id="st-data"></div>
+            <QSpace />
+            <div id="st-actions"></div>
+        </QToolbar>
+        <FormModel
+            url-update="Travels"
+            model="travel"
+            :form-initial-data="newTravelForm"
+            :observe-form-changes="viewAction === 'create'"
+        >
+            <template #form="{ data }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput v-model="data.ref" :label="t('globals.reference')" />
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('globals.agency')"
+                            v-model="data.agencyModeFk"
+                            :options="agenciesOptions"
+                            option-value="agencyFk"
+                            option-label="name"
+                            hide-selected
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput
+                            rounded
+                            placeholder="dd-mm-aaa"
+                            :label="t('globals.shipped')"
+                            :model-value="toDate(data.shipped)"
+                        >
+                            <template #append>
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <QDate v-model="data.shipped">
+                                            <div class="row items-center justify-end">
+                                                <QBtn
+                                                    v-close-popup
+                                                    :label="t('globals.close')"
+                                                    color="primary"
+                                                    flat
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
+                            </template>
+                        </QInput>
+                    </div>
+                    <div class="col">
+                        <QInput
+                            rounded
+                            placeholder="dd-mm-aaa"
+                            :label="t('globals.landed')"
+                            :model-value="toDate(data.landed)"
+                        >
+                            <template #append>
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <QDate v-model="data.landed">
+                                            <div class="row items-center justify-end">
+                                                <QBtn
+                                                    v-close-popup
+                                                    :label="t('globals.close')"
+                                                    color="primary"
+                                                    flat
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
+                            </template>
+                        </QInput>
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('globals.wareHouseOut')"
+                            v-model="data.warehouseOutFk"
+                            :options="warehousesOptions"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                        />
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('globals.wareHouseIn')"
+                            v-model="data.warehouseInFk"
+                            :options="warehousesOptions"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                        />
+                    </div>
+                </VnRow>
+            </template>
+        </FormModel>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.card {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-gap: 20px;
+}
+</style>

src/pages/Travel/TravelFilter.vue

@@ -0,0 +1,311 @@
+<script setup>
+import { reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import FetchData from 'components/FetchData.vue';
+import { toDate } from 'src/filters';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const filtersOptions = reactive({
+    warehouses: [],
+    continents: [],
+    agencies: [],
+});
+
+const updateFilterOptions = (data, optionKey) => {
+    filtersOptions[optionKey] = [...data];
+};
+
+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) => updateFilterOptions(data, 'warehouses')"
+        auto-load
+    />
+    <FetchData
+        url="Continents"
+        @on-fetch="(data) => updateFilterOptions(data, 'continents')"
+        auto-load
+    />
+    <FetchData
+        url="AgencyModes"
+        @on-fetch="(data) => updateFilterOptions(data, 'agencies')"
+        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>
+        <template #body="{ params }">
+            <QList dense style="max-width: 256px" class="list">
+                <QItem class="q-my-sm">
+                    <QItemSection>
+                        <QInput
+                            :label="t('params.search')"
+                            dense
+                            outlined
+                            rounded
+                            v-model="params.search"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.agencyModeFk')"
+                            v-model="params.agencyModeFk"
+                            :options="filtersOptions.agencies"
+                            option-value="agencyFk"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.warehouseOutFk')"
+                            v-model="params.warehouseOutFk"
+                            :options="filtersOptions.warehouses"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.warehouseInFk')"
+                            v-model="params.warehouseInFk"
+                            :options="filtersOptions.warehouses"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QInput
+                            v-model="params.scopeDays"
+                            type="number"
+                            :label="t('params.scopeDays')"
+                            dense
+                            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
+                            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="t('globals.close')"
+                                                    color="primary"
+                                                    flat
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QInput
+                            dense
+                            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="t('globals.close')"
+                                                    color="primary"
+                                                    flat
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.continent')"
+                            v-model="params.continent"
+                            :options="filtersOptions.continents"
+                            option-value="code"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QInput
+                            v-model="params.totalEntries"
+                            type="number"
+                            :label="t('params.totalEntries')"
+                            dense
+                            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>
+.list * {
+    max-width: 100%;
+}
+
+.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
+        warehouseInFk: Warehouse In
+        warehouseOutFk: Warehouse Out
+        scopeDays: Days onward
+        landedFrom: Landed from
+        landedTo: Landed to
+        continent: Continent out
+        totalEntries: Total entries
+es:
+    params:
+        search: Id/Referencia
+        agencyModeFk: Agencia
+        warehouseInFk: Alm. entrada
+        warehouseOutFk: Alm. salida
+        scopeDays: Días adelante
+        landedFrom: Llegada desde
+        landedTo: Llegada hasta
+        continent: Cont. Salida
+        totalEntries: Ent. totales
+
+</i18n>

src/pages/Travel/TravelList.vue

@@ -0,0 +1,147 @@
+<script setup>
+import { onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import TravelSummaryDialog from './Card/TravelSummaryDialog.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import TravelFilter from './TravelFilter.vue';
+import { toDate } from 'src/filters/index';
+
+const router = useRouter();
+const quasar = useQuasar();
+const { t } = useI18n();
+const stateStore = useStateStore();
+
+const navigateToTravelId = (id) => {
+    router.push({ path: `/travel/${id}` });
+};
+
+const cloneTravel = (travelData) => {
+    const stringifiedTravelData = JSON.stringify(travelData);
+    redirectToCreateView(stringifiedTravelData);
+};
+
+const redirectToCreateView = (queryParams) => {
+    router.push({ name: 'TravelCreate', query: { travelData: queryParams } });
+};
+
+const viewSummary = (id) => {
+    quasar.dialog({
+        component: TravelSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
+};
+
+onMounted(async () => {
+    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="TravelList"
+                url="Travels/filter"
+                auto-load
+                order="shipped DESC, landed DESC"
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="row.ref"
+                        :id="row.id"
+                        @click="navigateToTravelId(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv
+                                :label="t('globals.agency')"
+                                :value="row.agencyModeName"
+                            />
+                            <VnLv
+                                :label="t('globals.wareHouseOut')"
+                                :value="row.warehouseOutFk"
+                            />
+                            <VnLv
+                                :label="t('globals.shipped')"
+                                :value="toDate(row.shipped)"
+                            />
+                            <VnLv
+                                :label="t('globals.landed')"
+                                :value="toDate(row.landed)"
+                            />
+                            <VnLv
+                                :label="t('globals.wareHouseIn')"
+                                :value="row.warehouseInFk"
+                            />
+
+                            <VnLv
+                                :label="t('globals.totalEntries')"
+                                :value="row.totalEntries"
+                            />
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('components.smartCard.clone')"
+                                @click.stop="cloneTravel(row)"
+                                class="bg-vn-dark"
+                                outline
+                            />
+                            <QBtn
+                                :label="t('addEntry')"
+                                @click.stop="viewSummary(row.id)"
+                                class="bg-vn-dark"
+                                outline
+                                style="margin-top: 15px"
+                            />
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </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:
+    addEntry: Add entry
+
+
+es:
+    addEntry: Añadir entrada
+
+
+</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/pages/Wagon/Type/WagonTypeCreate.vue

@@ -239,8 +239,8 @@ function exceedMaxHeight(pos) {
 
 <template>
     <QPage class="q-pa-sm q-mx-xl">
-        <QCard class="q-pa-sm">
-            <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-md">
+        <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
+            <QCard class="q-pa-md">
                 <QInput
                     filled
                     v-model="name"
@@ -248,7 +248,7 @@ function exceedMaxHeight(pos) {
                     :rules="[(val) => !!val || t('wagon.warnings.nameNotEmpty')]"
                 />
                 <QCheckbox class="q-mb-sm" v-model="divisible" label="Divisible" />
-                <div class="wagon-tray q-mx-xl" v-for="tray in wagon" :key="tray.id">
+                <div class="wagon-tray q-mx-lg" v-for="tray in wagon" :key="tray.id">
                     <div class="position">
                         <QInput
                             autofocus
@@ -309,16 +309,6 @@ function exceedMaxHeight(pos) {
                     <QIcon color="grey-6" name="trip_origin" size="3rem" />
                     <QIcon color="grey-6" name="trip_origin" size="3rem" />
                 </div>
-                <div>
-                    <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
-                    <QBtn
-                        :label="t('wagon.type.reset')"
-                        type="reset"
-                        color="primary"
-                        flat
-                        class="q-ml-sm"
-                    />
-                </div>
                 <QDialog
                     v-model="colorPickerActive"
                     position="right"
@@ -346,8 +336,18 @@ function exceedMaxHeight(pos) {
                         </QCardSection>
                     </QCard>
                 </QDialog>
-            </QForm>
-        </QCard>
+            </QCard>
+            <div class="q-mt-md">
+                <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
+                <QBtn
+                    :label="t('wagon.type.reset')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                />
+            </div>
+        </QForm>
     </QPage>
 </template>
 
@@ -357,45 +357,55 @@ function exceedMaxHeight(pos) {
     justify-content: center;
     align-items: flex-start;
 }
-.q-card {
+
+.q-form {
     width: 70%;
 }
+
 .q-dialog {
     .q-card {
         width: 100%;
     }
 }
+
 .wheels {
     margin-left: 5%;
     display: flex;
     justify-content: space-around;
 }
+
 .wagon-tray {
     display: flex;
     height: 6rem;
+
     .position {
-        width: 15%;
+        width: 20%;
         border-right: 1rem solid gray;
         display: flex;
         align-items: flex-end;
         justify-content: flex-end;
         padding-right: 1rem;
     }
+
     .shelving {
         display: flex;
         width: 75%;
+
         .shelving-half {
             width: 50%;
             height: 100%;
+
             .shelving-up {
                 height: 80%;
                 width: 100%;
             }
+
             .shelving-down {
                 height: 20%;
                 width: 100%;
             }
         }
+
         .shelving-divisible {
             width: 1%;
             height: 100%;
@@ -403,6 +413,7 @@ function exceedMaxHeight(pos) {
             border-right: 0.5rem dashed grey;
         }
     }
+
     .action-button {
         width: 10%;
         border-left: 1rem solid gray;

src/pages/Wagon/Type/WagonTypeList.vue

@@ -5,6 +5,8 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import CardList from 'components/ui/CardList.vue';
+import VnLv from 'components/ui/VnLv.vue';
 
 const quasar = useQuasar();
 const arrayData = useArrayData('WagonTypeList');
@@ -48,43 +50,28 @@ async function remove(row) {
                 auto-load
             >
                 <template #body="{ rows }">
-                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
-                        <QItem
-                            class="q-pa-none items-start cursor-pointer q-hoverable"
-                            v-ripple
-                            clickable
-                        >
-                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
-                                <div class="text-h6">{{ row.name }}</div>
-                                <QItem-label caption>#{{ row.id }}</QItem-label>
-                            </QItemSection>
-                            <QSeparator vertical />
-                            <QCardActions vertical class="justify-between">
-                                <QBtn
-                                    flat
-                                    round
-                                    color="primary"
-                                    icon="arrow_circle_right"
-                                    @click="navigate(row.id)"
-                                >
-                                    <QTooltip>
-                                        {{ t('components.smartCard.openCard') }}
-                                    </QTooltip>
-                                </QBtn>
-                                <QBtn
-                                    flat
-                                    round
-                                    color="primary"
-                                    icon="delete"
-                                    @click="remove(row)"
-                                >
-                                    <QTooltip>
-                                        {{ t('wagon.list.remove') }}
-                                    </QTooltip>
-                                </QBtn>
-                            </QCardActions>
-                        </QItem>
-                    </QCard>
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="(row.name || '').toString()"
+                        :id="row.id"
+                        @click="navigate(row.id)"
+                    >
+                        <template #actions>
+                            <QBtn
+                                :label="t('components.smartCard.openCard')"
+                                @click.stop="navigate(row.id)"
+                                class="bg-vn-dark"
+                                outline
+                            />
+                            <QBtn
+                                :label="t('wagon.list.remove')"
+                                @click.stop="remove(row)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
                 </template>
             </VnPaginate>
         </div>

src/pages/Wagon/WagonCreate.vue

@@ -86,9 +86,9 @@ function filterType(val, update) {
 
 <template>
     <QPage class="q-pa-sm q-mx-xl">
-        <QCard class="q-pa-sm">
-            <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-md">
-                <div class="row q-col-gutter-md q-mb-md">
+        <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
+            <QCard class="q-pa-md">
+                <div class="row q-col-gutter-md">
                     <div class="col">
                         <QInput
                             filled
@@ -108,7 +108,7 @@ function filterType(val, update) {
                         />
                     </div>
                 </div>
-                <div class="row q-col-gutter-md q-mb-md">
+                <div class="row q-col-gutter-md">
                     <div class="col">
                         <QInput
                             filled
@@ -155,18 +155,18 @@ function filterType(val, update) {
                         </QSelect>
                     </div>
                 </div>
-                <div>
-                    <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
-                    <QBtn
-                        :label="t('wagon.type.reset')"
-                        type="reset"
-                        color="primary"
-                        flat
-                        class="q-ml-sm"
-                    />
-                </div>
-            </QForm>
-        </QCard>
+            </QCard>
+            <div class="q-mt-md">
+                <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
+                <QBtn
+                    :label="t('wagon.type.reset')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                />
+            </div>
+        </QForm>
     </QPage>
 </template>
 
@@ -176,7 +176,8 @@ function filterType(val, update) {
     justify-content: center;
     align-items: flex-start;
 }
-.q-card {
+
+.q-form {
     width: 70%;
 }
 </style>

src/pages/Wagon/WagonList.vue

@@ -5,6 +5,8 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import CardList from 'components/ui/CardList.vue';
+import VnLv from 'components/ui/VnLv.vue';
 
 const quasar = useQuasar();
 const arrayData = useArrayData('WagonList');
@@ -55,69 +57,40 @@ async function remove(row) {
                 auto-load
             >
                 <template #body="{ rows }">
-                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
-                        <QItem
-                            class="q-pa-none items-start cursor-pointer q-hoverable"
-                            v-ripple
-                            clickable
-                        >
-                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
-                                <div class="text-h6">{{ row.label }}</div>
-                                <QItemLabel caption>#{{ row.id }}</QItemLabel>
-                                <QList>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('wagon.list.plate') }}
-                                            </QItemLabel>
-                                            <QItemLabel>{{ row.plate }}</QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('wagon.list.volume') }}
-                                            </QItemLabel>
-                                            <QItemLabel>{{ row.volume }}</QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('wagon.list.type') }}
-                                            </QItemLabel>
-                                            <QItemLabel>{{ row.type.name }}</QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                </QList>
-                            </QItemSection>
-                            <QSeparator vertical />
-                            <QCardActions vertical class="justify-between">
-                                <QBtn
-                                    flat
-                                    round
-                                    color="primary"
-                                    icon="arrow_circle_right"
-                                    @click="navigate(row.id)"
-                                >
-                                    <QTooltip>
-                                        {{ t('components.smartCard.openCard') }}
-                                    </QTooltip>
-                                </QBtn>
-                                <QBtn
-                                    flat
-                                    round
-                                    color="primary"
-                                    icon="delete"
-                                    @click="remove(row)"
-                                >
-                                    <QTooltip>
-                                        {{ t('wagon.list.remove') }}
-                                    </QTooltip>
-                                </QBtn>
-                            </QCardActions>
-                        </QItem>
-                    </QCard>
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="(row.label || '').toString()"
+                        :id="row.id"
+                        @click="navigate(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv
+                                :label="t('wagon.list.plate')"
+                                :title-label="t('wagon.list.plate')"
+                                :value="row.plate"
+                            />
+                            <VnLv :label="t('wagon.list.volume')" :value="row?.volume" />
+                            <VnLv
+                                :label="t('wagon.list.type')"
+                                :value="row?.type?.name"
+                            />
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('components.smartCard.openCard')"
+                                @click.stop="navigate(row.id)"
+                                class="bg-vn-dark"
+                                outline
+                            />
+                            <QBtn
+                                :label="t('wagon.list.remove')"
+                                @click.stop="remove(row)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
                 </template>
             </VnPaginate>
         </div>

src/pages/Worker/WorkerList.vue

@@ -71,11 +71,11 @@ function viewSummary(id) {
                     <CardList
                         v-for="row of rows"
                         :key="row.id"
-                        @click="navigate(row.id)"
+                        :id="row.id"
                         :title="row.nickname"
+                        @click="navigate(row.id)"
                     >
                         <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
                             <VnLv :label="t('worker.list.name')" :value="row.userName" />
                             <VnLv :label="t('worker.list.email')" :value="row.email" />
                             <VnLv
@@ -85,19 +85,17 @@ function viewSummary(id) {
                         </template>
                         <template #actions>
                             <QBtn
-                                flat
-                                icon="arrow_circle_right"
+                                :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                            >
-                                <QTooltip>
-                                    {{ t('components.smartCard.openCard') }}
-                                </QTooltip>
-                            </QBtn>
-                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
-                                <QTooltip>
-                                    {{ t('components.smartCard.openSummary') }}
-                                </QTooltip>
-                            </QBtn>
+                                class="bg-vn-dark"
+                                outline
+                            />
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
                         </template>
                     </CardList>
                 </template>

src/router/modules/Supplier.js

@@ -0,0 +1,61 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/supplier',
+    name: 'Supplier',
+    meta: {
+        title: 'suppliers',
+        icon: 'vn:supplier',
+    },
+    component: RouterView,
+    redirect: { name: 'SupplierMain' },
+    menus: {
+        main: ['SupplierList'],
+        card: [],
+    },
+    children: [
+        {
+            path: '',
+            name: 'SupplierMain',
+            component: () => import('src/pages/Supplier/SupplierMain.vue'),
+            redirect: { name: 'SupplierList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'SupplierList',
+                    meta: {
+                        title: 'list',
+                        icon: 'view_list',
+                    },
+                    component: () => import('src/pages/Supplier/SupplierList.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'SupplierCreate',
+                    meta: {
+                        title: 'create',
+                    },
+                    component: () => import('src/pages/Supplier/SupplierCreate.vue'),
+                },
+            ],
+        },
+        {
+            name: 'SupplierCard',
+            path: ':id',
+            component: () => import('src/pages/Supplier/Card/SupplierCard.vue'),
+            redirect: { name: 'SupplierSummary' },
+            children: [
+                {
+                    name: 'SupplierSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary',
+                        icon: 'launch',
+                    },
+                    component: () =>
+                        import('src/pages/Supplier/Card/SupplierSummary.vue'),
+                },
+            ],
+        },
+    ],
+};

src/router/modules/index.js

@@ -4,7 +4,22 @@ import Claim from './claim';
 import InvoiceOut from './invoiceOut';
 import invoiceIn from './invoiceIn';
 import Worker from './worker';
+import Shelving from './shelving';
 import Wagon from './wagon';
 import Route from './route';
+import Supplier from './Supplier';
+import Travel from './travel';
 
-export default [Customer, Ticket, Claim, InvoiceOut, invoiceIn, Worker, Wagon, Route];
+export default [
+    Customer,
+    Ticket,
+    Claim,
+    InvoiceOut,
+    Worker,
+    Shelving,
+    Wagon,
+    Route,
+    Supplier,
+    Travel,
+    invoiceIn,
+];

src/router/modules/invoiceOut.js

@@ -5,12 +5,12 @@ export default {
     name: 'InvoiceOut',
     meta: {
         title: 'invoiceOuts',
-        icon: 'vn:invoice-out'
+        icon: 'vn:invoice-out',
     },
     component: RouterView,
     redirect: { name: 'InvoiceOutMain' },
     menus: {
-        main: ['InvoiceOutList'],
+        main: ['InvoiceOutList', 'InvoiceOutGlobal', 'InvoiceOutNegativeBases'],
         card: [],
     },
     children: [
@@ -28,8 +28,27 @@ export default {
                         icon: 'view_list',
                     },
                     component: () => import('src/pages/InvoiceOut/InvoiceOutList.vue'),
-                }
-            ]
+                },
+                {
+                    path: 'global-invoicing',
+                    name: 'InvoiceOutGlobal',
+                    meta: {
+                        title: 'globalInvoicing',
+                        icon: 'contact_support',
+                    },
+                    component: () => import('src/pages/InvoiceOut/InvoiceOutGlobal.vue'),
+                },
+                {
+                    path: 'negative-bases',
+                    name: 'InvoiceOutNegativeBases',
+                    meta: {
+                        title: 'negativeBases',
+                        icon: 'view_list',
+                    },
+                    component: () =>
+                        import('src/pages/InvoiceOut/InvoiceOutNegativeBases.vue'),
+                },
+            ],
         },
         {
             name: 'InvoiceOutCard',
@@ -41,11 +60,12 @@ export default {
                     name: 'InvoiceOutSummary',
                     path: 'summary',
                     meta: {
-                        title: 'summary'
+                        title: 'summary',
                     },
-                    component: () => import('src/pages/InvoiceOut/Card/InvoiceOutSummary.vue'),
-                }
-            ]
+                    component: () =>
+                        import('src/pages/InvoiceOut/Card/InvoiceOutSummary.vue'),
+                },
+            ],
         },
-    ]
+    ],
 };

src/router/modules/shelving.js

@@ -0,0 +1,80 @@
+import {RouterView} from "vue-router";
+
+export default {
+    path: '/shelving',
+    name: 'Shelving',
+    meta: {
+        title: 'shelving',
+        icon: 'vn:inventory'
+    },
+    component: RouterView,
+    redirect: { name: 'ShelvingMain' },
+    menus: {
+        main: ['ShelvingList'],
+        card: ['ShelvingBasicData', 'ShelvingLog']
+    },
+    children: [
+        {
+            path: '',
+            name: 'ShelvingMain',
+            component: () => import('src/pages/Shelving/ShelvingMain.vue'),
+            redirect: { name: 'ShelvingList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'ShelvingList',
+                    meta: {
+                        title: 'shelvingList',
+                        icon: 'view_list',
+                    },
+                    component: () => import('src/pages/Shelving/ShelvingList.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'ShelvingCreate',
+                    meta: {
+                        title: 'create',
+                    },
+                    component: () => import('src/pages/Shelving/Card/ShelvingForm.vue'),
+                },
+            ],
+        },
+        {
+            name: 'ShelvingLayout',
+            path: ':id',
+            component: () => import('pages/Shelving/Card/ShelvingCard.vue'),
+            redirect: { name: 'ShelvingSummary' },
+            children: [
+                {
+                    name: 'ShelvingSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary',
+                    },
+                    component: () =>
+                        import('pages/Shelving/Card/ShelvingSummary.vue'),
+                },
+                {
+                    name: 'ShelvingBasicData',
+                    path: 'basic-data',
+                    meta: {
+                        title: 'basicData',
+                        icon: 'vn:settings',
+                        roles: ['salesPerson'],
+                    },
+                    component: () => import('pages/Shelving/Card/ShelvingForm.vue'),
+                },
+                {
+                    name: 'ShelvingLog',
+                    path: 'log',
+                    meta: {
+                        title: 'log',
+                        icon: 'history',
+                    },
+                    component: () => import('src/pages/Shelving/Card/ShelvingLog.vue'),
+                },
+            ],
+        },
+    ]
+};
+

src/router/modules/travel.js

@@ -0,0 +1,69 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/travel',
+    name: 'Travel',
+    meta: {
+        title: 'travel',
+        icon: 'local_airport',
+    },
+    component: RouterView,
+    redirect: { name: 'TravelMain' },
+    menus: {
+        main: ['TravelList', 'ExtraCommunity'],
+        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: 'extra-community',
+                    name: 'ExtraCommunity',
+                    meta: {
+                        title: 'extraCommunity',
+                        icon: 'vn:shipment-01',
+                    },
+                    component: () => import('src/pages/Travel/ExtraCommunity.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'TravelCreate',
+                    meta: {
+                        title: 'extraCommunity',
+                        icon: '',
+                    },
+                    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

@@ -5,7 +5,10 @@ import worker from './modules/worker';
 import invoiceOut from './modules/invoiceOut';
 import invoiceIn from './modules/invoiceIn';
 import wagon from './modules/wagon';
+import supplier from './modules/Supplier';
 import route from './modules/route';
+import travel from './modules/travel';
+import shelving from 'src/router/modules/shelving';
 
 const routes = [
     {
@@ -49,15 +52,18 @@ const routes = [
             ticket,
             claim,
             worker,
+            shelving,
             invoiceOut,
             invoiceIn,
+            wagon,
+            route,
+            supplier,
+            travel,
             {
                 path: '/:catchAll(.*)*',
                 name: 'NotFound',
                 component: () => import('../pages/NotFound.vue'),
             },
-            wagon,
-            route,
         ],
     },
 ];

src/services/invoiceOut.service.js

@@ -0,0 +1,49 @@
+import axios from 'axios';
+
+const request = async (method, url, params = {}) => {
+    try {
+        let response;
+
+        if (method === 'GET') {
+            response = await axios.get(url, { params });
+        } else if (method === 'POST') {
+            response = await axios.post(url, params);
+        }
+        return response.data;
+    } catch (err) {
+        console.error(`Error with ${method} request to ${url}`, err);
+        return err.response;
+    }
+};
+
+const invoiceOutService = {
+    getNegativeBases: async (params) => {
+        return await request('GET', 'InvoiceOuts/negativeBases', params);
+    },
+
+    getNegativeBasesCsv: async (params) => {
+        return await request('GET', 'InvoiceOuts/negativeBasesCsv', params);
+    },
+
+    getInvoiceDate: async (params) => {
+        return await request('GET', 'InvoiceOuts/getInvoiceDate', params);
+    },
+
+    getFindOne: async (params) => {
+        return await request('GET', 'InvoiceOutConfigs/findOne', params);
+    },
+
+    getClientsToInvoice: async (params) => {
+        return await request('POST', 'InvoiceOuts/clientsToInvoice', params);
+    },
+
+    invoiceClient: async (params) => {
+        return await request('POST', 'InvoiceOuts/invoiceClient', params);
+    },
+
+    makePdfAndNotify: async (invoiceId, params) => {
+        return await request('POST', `InvoiceOuts/${invoiceId}/makePdfAndNotify`, params);
+    },
+};
+
+export default invoiceOutService;

src/services/travel.service.js

@@ -0,0 +1,23 @@
+import axios from 'axios';
+
+const travelService = {
+    getTravelEntries: async (param) => {
+        try {
+            return await axios.get(`Travels/${param}/getEntries`);
+        } catch (err) {
+            console.error(`Error fetching travel entries`, err);
+            return err.response;
+        }
+    },
+
+    updateTravel: async (id, params) => {
+        try {
+            return await axios.patch(`Travels/${id}`, params);
+        } catch (err) {
+            console.error(`Error updating travel`, err);
+            return err.response;
+        }
+    },
+};
+
+export default travelService;

src/stores/invoiceOutGlobal.js

@@ -0,0 +1,264 @@
+import { defineStore } from 'pinia';
+import { useUserConfig } from 'src/composables/useUserConfig';
+import invoiceOutService from 'src/services/invoiceOut.service';
+import useNotify from 'src/composables/useNotify.js';
+import { exportFile } from 'quasar';
+
+const { notify } = useNotify();
+
+export const useInvoiceOutGlobalStore = defineStore({
+    id: 'invoiceOutGlobal',
+
+    state: () => ({
+        initialDataLoading: true,
+        formInitialData: {
+            companyFk: null,
+            invoiceDate: null,
+            maxShipped: null,
+            clientId: null,
+            printer: null,
+        },
+        addresses: [],
+        minInvoicingDate: null,
+        parallelism: null,
+        invoicing: false,
+        isInvoicing: false,
+        status: null,
+        addressIndex: 0,
+        errors: [],
+        printer: null,
+        nRequests: 0,
+        nPdfs: 0,
+        totalPdfs: 0,
+    }),
+    actions: {
+        async init() {
+            await this.fetchAllData();
+        },
+
+        async fetchAllData() {
+            try {
+                const userInfo = await useUserConfig().fetch();
+                const date = Date.vnNew();
+                this.formInitialData.maxShipped = new Date(
+                    date.getFullYear(),
+                    date.getMonth(),
+                    0
+                )
+                    .toISOString()
+                    .substring(0, 10);
+
+                await Promise.all([
+                    this.fetchParallelism(),
+                    this.fetchInvoiceOutConfig(userInfo.companyFk),
+                ]);
+
+                this.initialDataLoading = false;
+            } catch (err) {
+                console.error('Error fetching invoice out global initial data');
+            }
+        },
+
+        async fetchInvoiceOutConfig(companyFk) {
+            this.formInitialData.companyFk = companyFk;
+            const params = { companyFk: companyFk };
+            const { issued } = await invoiceOutService.getInvoiceDate(params);
+            const stringDate = issued.substring(0, 10);
+            this.minInvoicingDate = stringDate;
+            this.formInitialData.invoiceDate = stringDate;
+        },
+
+        async fetchParallelism() {
+            const filter = { fields: ['parallelism'] };
+            const { parallelism } = await invoiceOutService.getFindOne(filter);
+            this.parallelism = parallelism;
+        },
+
+        async makeInvoice(formData, clientsToInvoice) {
+            this.invoicing = true;
+            this.status = 'packageInvoicing';
+            try {
+                this.printer = formData.printer;
+                const params = {
+                    invoiceDate: new Date(formData.invoiceDate),
+                    maxShipped: new Date(formData.maxShipped),
+                    clientId: formData.clientId ? formData.clientId : null,
+                    companyFk: formData.companyFk,
+                };
+
+                this.validateMakeInvoceParams(params, clientsToInvoice);
+
+                if (clientsToInvoice == 'all') params.clientId = undefined;
+
+                const addressesResponse = await invoiceOutService.getClientsToInvoice(
+                    params
+                );
+
+                this.addresses = addressesResponse;
+
+                if (!this.addresses || !this.addresses.length > 0) {
+                    notify(
+                        'invoiceOut.globalInvoices.errors.noTicketsToInvoice',
+                        'negative'
+                    );
+                    throw new Error("There aren't addresses to invoice");
+                }
+
+                this.addresses.forEach(async (address) => {
+                    await this.invoiceClient(address, formData);
+                });
+            } catch (err) {
+                this.handleError(err);
+            }
+        },
+
+        validateMakeInvoceParams(params, clientsToInvoice) {
+            if (clientsToInvoice === 'one' && !params.clientId) {
+                notify('invoiceOut.globalInvoices.errors.chooseValidClient', 'negative');
+                throw new Error('Invalid client');
+            }
+            if (!params.invoiceDate || !params.maxShipped) {
+                notify('invoiceOut.globalInvoices.errors.fillDates', 'negative');
+                throw new Error('Missing dates');
+            }
+            if (params.invoiceDate < params.maxShipped) {
+                notify(
+                    'invoiceOut.globalInvoices.errors.invoiceDateLessThanMaxDate',
+                    'negative'
+                );
+                throw new Error('Invalid date range');
+            }
+
+            const invoiceDateTime = new Date(params.invoiceDate).getTime();
+            const minInvoiceDateTime = new Date(this.minInvoicingDate).getTime();
+
+            if (this.minInvoicingDate && invoiceDateTime < minInvoiceDateTime) {
+                notify(
+                    'invoiceOut.globalInvoices.errors.invoiceWithFutureDate',
+                    'negative'
+                );
+                throw new Error('Invoice date in the future');
+            }
+
+            if (!params.companyFk) {
+                notify('invoiceOut.globalInvoices.errors.chooseValidCompany', 'negative');
+                throw new Error('Invalid company');
+            }
+            if (!this.printer) {
+                notify('invoiceOut.globalInvoices.errors.chooseValidPrinter', 'negative');
+                throw new Error('Invalid printer');
+            }
+        },
+
+        async invoiceClient(address, formData) {
+            if (this.nRequests === this.parallelism || this.isInvoicing) return;
+
+            if (this.status === 'stopping') {
+                if (this.nRequests) return;
+                this.invoicing = false;
+                this.status = 'done';
+                return;
+            }
+
+            const params = {
+                clientId: address.clientId,
+                addressId: address.id,
+                invoiceDate: new Date(formData.invoiceDate),
+                maxShipped: new Date(formData.maxShipped),
+                companyFk: formData.companyFk,
+            };
+
+            this.status = 'invoicing';
+            this.invoicing = true;
+
+            const invoiceResponse = await invoiceOutService.invoiceClient(params);
+
+            if (invoiceResponse.data.error) {
+                if (invoiceResponse.status >= 400 && invoiceResponse.status < 500) {
+                    this.invoiceClientError(address, invoiceResponse);
+                    this.addressIndex++;
+                    return;
+                } else {
+                    this.invoicing = false;
+                    this.status = 'done';
+                    notify(
+                        'invoiceOut.globalInvoices.errors.criticalInvoiceError',
+                        'negative'
+                    );
+                    throw new Error('Critical invoicing error, process stopped');
+                }
+            } else {
+                this.isInvoicing = false;
+                if (invoiceResponse.data) {
+                    this.makePdfAndNotify(invoiceResponse.data, address);
+                }
+            }
+        },
+
+        async makePdfAndNotify(invoiceId, client) {
+            try {
+                this.nRequests++;
+                this.totalPdfs++;
+                const params = { printerFk: this.printer };
+                await invoiceOutService.makePdfAndNotify(invoiceId, params);
+                this.nPdfs++;
+                this.nRequests--;
+            } catch (err) {
+                this.invoiceClientError(client, err, true);
+            }
+        },
+
+        invoiceClientError(client, response, isWarning) {
+            const message = response.data?.error?.message || response.message;
+            this.errors.unshift({ client, message, isWarning });
+        },
+
+        handleError(err) {
+            this.invoicing = false;
+            this.status = null;
+            throw err;
+        },
+
+        async getNegativeBasesCsv(from, to) {
+            try {
+                const params = { from: from, to: to };
+                const CSVResponse = await invoiceOutService.getNegativeBasesCsv(params);
+
+                if (CSVResponse.data && CSVResponse.data.error) throw new Error();
+
+                const status = exportFile('negativeBases.csv', CSVResponse, {
+                    encoding: 'windows-1252',
+                    mimeType: 'text/csv;charset=windows-1252;',
+                });
+
+                if (status) {
+                    notify('globals.downloadCSVSuccess', 'positive');
+                }
+            } catch (err) {
+                notify('invoiceOut.negativeBases.errors.downloadCsvFailed', 'negative');
+            }
+        },
+
+        // State mutations actions
+
+        setStatusValue(status) {
+            this.status = status;
+        },
+    },
+
+    getters: {
+        getNAddresses(state) {
+            return state.addresses.length;
+        },
+        getPercentage(state) {
+            if (this.getNAdresses <= 0 || !state.addressIndex) {
+                return 0;
+            }
+            let porcentaje = (state.addressIndex / this.getNAddresses) * 100;
+            return porcentaje;
+        },
+        getAddressNumber(state) {
+            return state.addressIndex;
+        },
+    },
+});

src/stores/useNavigationStore.js

@@ -11,10 +11,13 @@ export const useNavigationStore = defineStore('navigationStore', () => {
         'claim',
         'ticket',
         'invoiceOut',
-        'invoiceIn',
         'worker',
+        'shelving',
         'wagon',
         'route',
+        'supplier',
+        'travel',
+        'invoiceIn',
     ];
     const pinnedModules = ref([]);
     const role = useRole();