Merge branch 'dev' into feature/SaleTracking

src/boot/axios.js

@@ -55,10 +55,10 @@ const onResponseError = (error) => {
     }
 
     if (session.isLoggedIn() && response?.status === 401) {
-        session.destroy();
+        session.destroy(false);
         const hash = window.location.hash;
         const url = hash.slice(1);
-        Router.push({ path: url });
+        Router.push(`/login?redirect=${url}`);
     } else if (!session.isLoggedIn()) {
         return Promise.reject(error);
     }

src/components/CreateManualInvoiceForm.vue

@@ -46,22 +46,6 @@ const onDataSaved = async (formData, requestResponse) => {
         @on-fetch="(data) => (taxAreasOptions = data)"
         auto-load
     />
-    <FetchData
-        url="Tickets"
-        :filter="{
-            fields: ['id', 'nickname'],
-            where: { refFk: null },
-            order: 'shipped DESC',
-        }"
-        @on-fetch="(data) => (ticketsOptions = data)"
-        auto-load
-    />
-    <FetchData
-        url="Clients"
-        :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
-        @on-fetch="(data) => (clientsOptions = data)"
-        auto-load
-    />
     <FormModelPopup
         ref="formModelPopupRef"
         :title="t('Create manual invoice')"
@@ -84,6 +68,10 @@ const onDataSaved = async (formData, requestResponse) => {
                     option-value="id"
                     v-model="data.ticketFk"
                     @update:model-value="data.clientFk = null"
+                    url="Tickets"
+                    :where="{ refFk: null }"
+                    :fields="['id', 'nickname']"
+                    :filter-options="{ order: 'shipped DESC' }"
                 >
                     <template #option="scope">
                         <QItem v-bind="scope.itemProps">
@@ -105,6 +93,9 @@ const onDataSaved = async (formData, requestResponse) => {
                     option-value="id"
                     v-model="data.clientFk"
                     @update:model-value="data.ticketFk = null"
+                    url="Clients"
+                    :fields="['id', 'name']"
+                    :filter-options="{ order: 'name ASC' }"
                 />
                 <VnInputDate :label="t('Max date')" v-model="data.maxShipped" />
             </VnRow>
@@ -116,7 +107,6 @@ const onDataSaved = async (formData, requestResponse) => {
                     option-label="description"
                     option-value="code"
                     v-model="data.serial"
-                    :required="true"
                 />
                 <VnSelect
                     :label="t('Area')"
@@ -125,7 +115,6 @@ const onDataSaved = async (formData, requestResponse) => {
                     option-label="code"
                     option-value="code"
                     v-model="data.taxArea"
-                    :required="true"
                 />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">

src/components/CrudModel.vue

@@ -10,7 +10,6 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import SkeletonTable from 'components/ui/SkeletonTable.vue';
 import { tMobile } from 'src/composables/tMobile';
-import VnSubToolbar from './ui/VnSubToolbar.vue';
 
 const { push } = useRouter();
 const quasar = useQuasar();

src/components/TransferInvoiceForm.vue

@@ -8,7 +8,7 @@ import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
 import VnSelect from 'components/common/VnSelect.vue';
 import FormPopup from './FormPopup.vue';
-
+import { useDialogPluginComponent } from 'quasar';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 
@@ -18,7 +18,7 @@ const $props = defineProps({
         default: () => {},
     },
 });
-
+const { dialogRef } = useDialogPluginComponent();
 const quasar = useQuasar();
 const { t } = useI18n();
 const router = useRouter();
@@ -116,6 +116,7 @@ const makeInvoice = async () => {
         @on-fetch="(data) => (invoiceCorrectionTypesOptions = data)"
         auto-load
     />
+    <QDialog ref="dialogRef">
         <FormPopup
         @on-submit="makeInvoice()"
         :title="t('Transfer invoice')"
@@ -200,6 +201,7 @@ const makeInvoice = async () => {
                 </VnRow>
             </template>
         </FormPopup>
+    </QDialog>
 </template>
 
 <i18n>

src/components/VnTable/VnFilter.vue

@@ -40,7 +40,7 @@ const enterEvent = {
 
 const defaultAttrs = {
     filled: !$props.showTitle,
-    class: 'q-px-sm q-pb-xs q-pt-none fit',
+    class: 'q-px-xs q-pb-xs q-pt-none fit',
     dense: true,
 };
 
@@ -101,7 +101,7 @@ const components = {
         component: markRaw(VnSelect),
         event: updateEvent,
         attrs: {
-            class: 'q-px-md q-pb-xs q-pt-none fit',
+            class: 'q-px-sm q-pb-xs q-pt-none fit',
             dense: true,
             filled: !$props.showTitle,
         },

src/components/VnTable/VnTable.vue

@@ -13,6 +13,7 @@ import VnLv from 'components/ui/VnLv.vue';
 import VnTableColumn from 'components/VnTable/VnColumn.vue';
 import VnTableFilter from 'components/VnTable/VnFilter.vue';
 import VnTableChip from 'components/VnTable/VnChip.vue';
+import TableVisibleColumns from 'src/components/VnTable/VnVisibleColumn.vue';
 
 const $props = defineProps({
     columns: {
@@ -67,6 +68,14 @@ const $props = defineProps({
         type: Object,
         default: () => ({ card: false, table: false }),
     },
+    tableCode: {
+        type: String,
+        default: null,
+    },
+    table: {
+        type: Object,
+        default: () => ({}),
+    },
 });
 const { t } = useI18n();
 const stateStore = useStateStore();
@@ -115,6 +124,14 @@ watch(
     (val) => setUserParams(val)
 );
 
+const rowClickFunction = computed(() => {
+    if ($props.rowClick) return $props.rowClick;
+    if ($props.redirect) return ({ id }) => redirectFn(id);
+    return () => {};
+});
+
+const isTableMode = computed(() => mode.value == TABLE_MODE);
+
 function setUserParams(watchedParams) {
     if (!watchedParams) return;
 
@@ -158,12 +175,6 @@ function splitColumns(columns) {
     }
 }
 
-const rowClickFunction = computed(() => {
-    if ($props.rowClick) return $props.rowClick;
-    if ($props.redirect) return ({ id }) => redirectFn(id);
-    return () => {};
-});
-
 function redirectFn(id) {
     router.push({ path: `/${$props.redirect}/${id}` });
 }
@@ -210,6 +221,7 @@ defineExpose({
                 v-model="params"
                 :disable-submit-event="true"
                 :search-url="searchUrl"
+                :redirect="!!redirect"
             >
                 <template #body>
                     <VnTableFilter
@@ -236,7 +248,7 @@ defineExpose({
             :limit="20"
             ref="CrudModelRef"
             :search-url="searchUrl"
-            :disable-infinite-scroll="mode == TABLE_MODE"
+            :disable-infinite-scroll="isTableMode"
             @save-changes="reload"
             :has-sub-toolbar="$attrs['hasSubToolbar'] ?? isEditable"
         >
@@ -249,16 +261,16 @@ defineExpose({
             </template>
             <template #body="{ rows }">
                 <QTable
-                    v-bind="$attrs['q-table']"
+                    v-bind="table"
                     class="vnTable"
                     :columns="splittedColumns.columns"
                     :rows="rows"
                     v-model:selected="selected"
-                    :grid="mode != TABLE_MODE"
+                    :grid="!isTableMode"
                     table-header-class="bg-header"
                     card-container-class="grid-three"
                     flat
-                    :style="mode == TABLE_MODE && 'max-height: 90vh'"
+                    :style="isTableMode && 'max-height: 90vh'"
                     virtual-scroll
                     @virtual-scroll="
                         (event) =>
@@ -272,13 +284,11 @@ defineExpose({
                         <slot name="top-left"></slot>
                     </template>
                     <template #top-right>
-                        <!-- <QBtn
+                        <TableVisibleColumns
-                        icon="visibility"
+                            v-if="isTableMode"
-                        title="asd"
+                            v-model="splittedColumns.columns"
-                        class="bg-vn-section-color q-mr-md"
+                            :table-code="tableCode ?? route.name"
-                        dense
+                        />
-                        v-if="mode == 'table'"
-                    /> -->
                         <QBtnToggle
                             v-model="mode"
                             toggle-color="primary"
@@ -287,6 +297,7 @@ defineExpose({
                             :options="tableModes"
                         />
                         <QBtn
+                            v-if="$props.rightSearch"
                             icon="filter_alt"
                             title="asd"
                             class="bg-vn-section-color q-ml-md"
@@ -298,7 +309,7 @@ defineExpose({
                         <QTh
                             auto-width
                             style="min-width: 100px"
-                            v-if="$props.columnSearch"
+                            v-if="$props.columnSearch && col.visible"
                         >
                             <VnTableFilter
                                 :column="col"
@@ -330,6 +341,7 @@ defineExpose({
                             auto-width
                             class="no-margin q-px-xs"
                             :class="getColAlign(col)"
+                            v-if="col.visible"
                         >
                             <slot :name="`column-${col.name}`" :col="col" :row="row">
                                 <VnTableColumn

src/components/VnTable/VnVisibleColumn.vue

@@ -0,0 +1,181 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { ref, computed, onMounted } from 'vue';
+
+import { useState } from 'src/composables/useState';
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+
+const columns = defineModel({ type: Object, default: [] });
+const $props = defineProps({
+    tableCode: {
+        type: String,
+        default: '',
+    },
+});
+
+const { notify } = useNotify();
+const { t } = useI18n();
+const state = useState();
+const user = state.getUser();
+const popupProxyRef = ref();
+const initialUserConfigViewData = ref();
+const localColumns = ref([]);
+
+const areAllChecksMarked = computed(() => {
+    return localColumns.value.every((col) => col.visible);
+});
+
+function setUserConfigViewData(data, isLocal) {
+    if (!data) return;
+    // Importante: El name de las columnas de la tabla debe conincidir con el name de las variables que devuelve la view config
+    if (!isLocal) localColumns.value = [];
+    for (let column of columns.value) {
+        const { label, name } = column;
+        column.visible = data[name] ?? true;
+        if (!isLocal) localColumns.value.push({ name, label, visible: column.visible });
+    }
+}
+
+function toggleMarkAll(val) {
+    localColumns.value.forEach((col) => (col.visible = val));
+}
+
+async function getConfig(url, filter) {
+    const response = await axios.get(url, {
+        params: { filter: filter },
+    });
+    return response.data && response.data.length > 0 ? response.data[0] : null;
+}
+
+async function fetchViewConfigData() {
+    try {
+        const defaultFilter = {
+            where: { tableCode: $props.tableCode },
+        };
+
+        const userConfig = await getConfig('UserConfigViews', {
+            where: {
+                ...defaultFilter.where,
+                ...{ userFk: user.id },
+            },
+        });
+
+        if (userConfig) {
+            initialUserConfigViewData.value = userConfig;
+            setUserConfigViewData(userConfig.configuration);
+            return;
+        }
+
+        const defaultConfig = await getConfig('DefaultViewConfigs', defaultFilter);
+        if (defaultConfig) {
+            setUserConfigViewData(defaultConfig.columns);
+            return;
+        }
+    } catch (err) {
+        console.err('Error fetching config view data', err);
+    }
+}
+
+async function saveConfig() {
+    const configuration = {};
+    for (const { name, visible } of localColumns.value)
+        configuration[name] = visible ?? true;
+    setUserConfigViewData(configuration, true);
+    if (!$props.tableCode) return popupProxyRef.value.hide();
+
+    try {
+        const params = {};
+        // Si existe una view config del usuario hacemos un update si no la creamos
+        if (initialUserConfigViewData.value) {
+            params.updates = [
+                {
+                    data: {
+                        configuration,
+                    },
+                    where: {
+                        id: initialUserConfigViewData.value.id,
+                    },
+                },
+            ];
+        } else {
+            params.creates = [
+                {
+                    userFk: user.value.id,
+                    tableCode: $props.tableCode,
+                    tableConfig: $props.tableCode,
+                    configuration,
+                },
+            ];
+        }
+
+        const response = await axios.post('UserConfigViews/crud', params);
+        if (response.data && response.data[0]) {
+            initialUserConfigViewData.value = response.data[0];
+        }
+        notify('globals.dataSaved', 'positive');
+        popupProxyRef.value.hide();
+    } catch (err) {
+        console.error('Error saving user view config', err);
+        notify('errors.writeRequest', 'negative');
+    }
+}
+
+onMounted(async () => {
+    setUserConfigViewData({});
+    await fetchViewConfigData();
+});
+</script>
+<template>
+    <QBtn icon="vn:visible_columns" class="bg-vn-section-color q-mr-md" dense>
+        <QPopupProxy ref="popupProxyRef">
+            <QCard class="column q-pa-md">
+                <QIcon name="info" size="sm" class="info-icon">
+                    <QTooltip>{{ t('Check the columns you want to see') }}</QTooltip>
+                </QIcon>
+                <span class="text-body1 q-mb-sm">{{ t('Visible columns') }}</span>
+                <QCheckbox
+                    :label="t('Tick all')"
+                    :model-value="areAllChecksMarked"
+                    @update:model-value="toggleMarkAll($event)"
+                    class="q-mb-sm"
+                />
+                <div v-if="columns.length > 0" class="checks-layout">
+                    <QCheckbox
+                        v-for="col in localColumns"
+                        :key="col.name"
+                        :label="col.label"
+                        v-model="col.visible"
+                    />
+                </div>
+                <QBtn
+                    class="full-width q-mt-md"
+                    color="primary"
+                    @click="saveConfig()"
+                    :label="t('globals.save')"
+                />
+            </QCard>
+        </QPopupProxy>
+        <QTooltip>{{ t('Visible columns') }}</QTooltip>
+    </QBtn>
+</template>
+
+<style lang="scss" scoped>
+.info-icon {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+}
+
+.checks-layout {
+    display: grid;
+    grid-template-columns: repeat(3, 200px);
+}
+</style>
+
+<i18n>
+    es:
+        Check the columns you want to see: Marca las columnas que quieres ver
+        Visible columns: Columnas visibles
+        Tick all: Marcar todas
+</i18n>

src/components/common/TableVisibleColumns.vue

@@ -52,7 +52,7 @@ const toggleMarkAll = (val) => {
 
 const getConfig = async (url, filter) => {
     const response = await axios.get(url, {
-        params: { filter: filter },
+        params: { filter: JSON.stringify(filter) },
     });
     return response.data && response.data.length > 0 ? response.data[0] : null;
 };
@@ -60,7 +60,7 @@ const getConfig = async (url, filter) => {
 const fetchViewConfigData = async () => {
     try {
         const userConfigFilter = {
-            where: { tableCode: $props.tableCode, userFk: user.id },
+            where: { tableCode: $props.tableCode, userFk: user.value.id },
         };
         const userConfig = await getConfig('UserConfigViews', userConfigFilter);
 
@@ -74,8 +74,14 @@ const fetchViewConfigData = async () => {
         const defaultConfig = await getConfig('DefaultViewConfigs', defaultConfigFilter);
 
         if (defaultConfig) {
+            // Si el backend devuelve una configuración por defecto la usamos
             setUserConfigViewData(defaultConfig.columns);
             return;
+        } else {
+            // Si no hay configuración por defecto mostramos todas las columnas
+            const defaultColumns = {};
+            $props.allColumns.forEach((col) => (defaultColumns[col] = true));
+            setUserConfigViewData(defaultColumns);
         }
     } catch (err) {
         console.err('Error fetching config view data', err);

src/components/common/VnCard.vue

@@ -39,7 +39,7 @@ const arrayData = useArrayData(props.dataKey, {
 
 onBeforeMount(async () => {
     if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
-    await arrayData.fetch({ append: false });
+    await arrayData.fetch({ append: false, updateRouter: false });
 });
 
 if (props.baseUrl) {

src/components/ui/CardDescriptor.vue

@@ -165,9 +165,9 @@ const toModule = computed(() =>
                     <QTooltip>
                         {{ t('components.cardDescriptor.moreOptions') }}
                     </QTooltip>
-                    <QMenu>
+                    <QMenu ref="menuRef">
                         <QList>
-                            <slot name="menu" :entity="entity" />
+                            <slot name="menu" :entity="entity" :menu-ref="menuRef" />
                         </QList>
                     </QMenu>
                 </QBtn>

src/components/ui/CatalogItem.vue

@@ -7,7 +7,7 @@ import VnImg from 'src/components/ui/VnImg.vue';
 import OrderCatalogItemDialog from 'pages/Order/Card/OrderCatalogItemDialog.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
-import toCurrency from '../../../filters/toCurrency';
+import { toCurrency } from 'filters/index';
 
 const DEFAULT_PRICE_KG = 0;
 
@@ -18,6 +18,10 @@ defineProps({
         type: Object,
         required: true,
     },
+    isCatalog: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const dialog = ref(null);
@@ -28,7 +32,7 @@ const dialog = ref(null);
         <QCard class="card shadow-6">
             <div class="img-wrapper">
                 <VnImg :id="item.id" zoom-size="lg" class="image" />
-                <div v-if="item.hex" class="item-color-container">
+                <div v-if="item.hex && isCatalog" class="item-color-container">
                     <div
                         class="item-color"
                         :style="{ backgroundColor: `#${item.hex}` }"
@@ -50,11 +54,12 @@ const dialog = ref(null);
                 </template>
                 <div class="footer">
                     <div class="price">
-                        <p>
+                        <p v-if="isCatalog">
                             {{ item.available }} {{ t('to') }}
                             {{ toCurrency(item.price) }}
                         </p>
-                        <QIcon name="add_circle" class="icon">
+                        <slot name="price" />
+                        <QIcon v-if="isCatalog" name="add_circle" class="icon">
                             <QTooltip>{{ t('globals.add') }}</QTooltip>
                             <QPopupProxy ref="dialog">
                                 <OrderCatalogItemDialog

src/components/ui/VnFilterPanel.vue

@@ -58,6 +58,7 @@ const $props = defineProps({
     },
 });
 
+defineExpose({ search });
 const emit = defineEmits([
     'update:modelValue',
     'refresh',
@@ -112,9 +113,7 @@ async function search(evt) {
     isLoading.value = true;
     const filter = { ...userParams.value };
     store.userParamsChanged = true;
-    store.filter.skip = 0;
+    arrayData.reset(['skip', 'filter.skip', 'page']);
-    store.skip = 0;
-    store.page = 1;
     const { params: newParams } = await arrayData.addFilter({ params: userParams.value });
     userParams.value = newParams;
 
@@ -138,9 +137,7 @@ async function reload() {
 async function clearFilters() {
     isLoading.value = true;
     store.userParamsChanged = true;
-    store.filter.skip = 0;
+    arrayData.reset(['skip', 'filter.skip', 'page']);
-    store.skip = 0;
-    store.page = 1;
     // Filtrar los params no removibles
     const removableFilters = Object.keys(userParams.value).filter((param) =>
         $props.unremovableParams.includes(param)
@@ -196,6 +193,14 @@ function formatValue(value) {
 </script>
 
 <template>
+    <QBtn
+        class="q-mt-lg q-mr-xs q-mb-lg"
+        round
+        color="primary"
+        style="position: fixed; z-index: 1; right: 0; bottom: 0"
+        icon="search"
+        @click="search()"
+    ></QBtn>
     <QForm @submit="search" id="filterPanelForm">
         <QList dense>
             <QItem class="q-mt-xs">
@@ -269,23 +274,6 @@ function formatValue(value) {
         <QList dense class="list q-gutter-y-sm q-mt-sm">
             <slot name="body" :params="userParams" :search-fn="search"></slot>
         </QList>
-        <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="disableSubmitEvent ? 'button' : 'submit'"
-                        unelevated
-                    />
-                </QItemSection>
-            </QItem>
-            <QSeparator />
-        </template>
     </QForm>
     <QInnerLoading
         :label="t('globals.pleaseWait')"

src/components/ui/VnImg.vue

@@ -28,7 +28,7 @@ const $props = defineProps({
 const show = ref(false);
 const token = useSession().getTokenMultimedia();
 const timeStamp = ref(`timestamp=${Date.now()}`);
-import noImage from '/public/no-user.png';
+import noImage from '/no-user.png';
 import { useRole } from 'src/composables/useRole';
 const url = computed(() => {
     const isEmployee = useRole().isEmployee();

src/components/ui/VnPaginate.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, watch } from 'vue';
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
 
@@ -26,6 +26,10 @@ const props = defineProps({
         type: Object,
         default: null,
     },
+    userFilter: {
+        type: Object,
+        default: null,
+    },
     where: {
         type: Object,
         default: null,
@@ -80,6 +84,7 @@ const pagination = ref({
 const arrayData = useArrayData(props.dataKey, {
     url: props.url,
     filter: props.filter,
+    userFilter: props.userFilter,
     where: props.where,
     limit: props.limit,
     order: props.order,
@@ -95,6 +100,8 @@ onMounted(async () => {
     mounted.value = true;
 });
 
+onBeforeUnmount(() => arrayData.reset());
+
 watch(
     () => props.data,
     () => {
@@ -118,8 +125,7 @@ const addFilter = async (filter, params) => {
 
 async function fetch(params) {
     useArrayData(props.dataKey, params);
-    store.filter.skip = 0;
+    arrayData.reset(['filter.skip', 'skip']);
-    store.skip = 0;
     await arrayData.fetch({ append: false });
     if (!store.hasMoreData) {
         isLoading.value = false;

src/components/ui/VnSearchbar.vue

@@ -103,8 +103,7 @@ async function search() {
     const staticParams = Object.entries(store.userParams).filter(
         ([key, value]) => value && (props.staticParams || []).includes(key)
     );
-    store.skip = 0;
+    arrayData.reset(['skip', 'page']);
-    store.page = 1;
 
     if (props.makeFetch)
         await arrayData.applyFilter({

src/composables/useArrayData.js

@@ -18,7 +18,8 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
 
     onMounted(() => {
         setOptions();
-        store.skip = 0;
+        arrayDataStore.reset(['skip']);
+
         const query = route.query;
         const searchUrl = store.searchUrl;
         if (query[searchUrl]) {
@@ -84,8 +85,12 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         }
 
         Object.assign(filter, store.userFilter, exprFilter);
-        Object.assign(store.filter, filter);
+        let where;
-        const params = { filter: store.filter };
+        if (filter?.where || store.filter?.where)
+            where = Object.assign(filter?.where ?? {}, store.filter?.where ?? {});
+        Object.assign(filter, store.filter);
+        filter.where = where;
+        const params = { filter };
 
         Object.assign(params, userParams);
         params.filter.skip = store.skip;
@@ -126,6 +131,10 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         delete store[option];
     }
 
+    function reset(opts = []) {
+        if (arrayDataStore.get(key)) arrayDataStore.reset(key, opts);
+    }
+
     function cancelRequest() {
         if (canceller) {
             canceller.abort();
@@ -143,21 +152,20 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
     }
 
     async function addFilter({ filter, params }) {
-        if (filter) store.userFilter = Object.assign(store.userFilter, filter);
+        if (filter) store.filter = filter;
 
         let userParams = { ...store.userParams, ...params };
         userParams = sanitizerParams(userParams, store?.exprBuilder);
 
         store.userParams = userParams;
-        store.skip = 0;
+        arrayDataStore.reset(['skip', 'filter.skip', 'page']);
-        store.filter.skip = 0;
+
-        store.page = 1;
         await fetch({ append: false });
         return { filter, params };
     }
 
     async function addFilterWhere(where) {
-        const storedFilter = { ...store.userFilter };
+        const storedFilter = { ...store.filter };
         if (!storedFilter?.where) storedFilter.where = {};
         where = { ...storedFilter.where, ...where };
         await addFilter({ filter: { where } });
@@ -187,7 +195,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         store.page += 1;
 
         await fetch({ append: true });
-        updateStateParams();
     }
 
     async function refresh() {
@@ -241,5 +248,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         updateStateParams,
         isLoading,
         deleteOption,
+        reset,
     };
 }

src/composables/useSession.js

@@ -58,20 +58,25 @@ export function useSession() {
             }
         }
     }
-    async function destroy() {
+    async function destroy(destroyTokens = true) {
         const tokens = {
             tokenMultimedia: 'Accounts/logout',
             token: 'VnUsers/logout',
         };
         const storage = keepLogin() ? localStorage : sessionStorage;
-
+        let destroyTokenPromises = [];
-        for (const [key, url] of Object.entries(tokens)) {
+        try {
-            await destroyToken(url, storage, key);
+            if (destroyTokens) {
+                const { data: isValidToken } = await axios.get('VnUsers/validateToken');
+                if (isValidToken)
+                    destroyTokenPromises = Object.entries(tokens).map(([key, url]) =>
+                        destroyToken(url, storage, key)
+                    );
             }
-
+        } finally {
             localStorage.clear();
             sessionStorage.clear();
-
+            await Promise.allSettled(destroyTokenPromises);
             const { setUser } = useState();
 
             setUser({
@@ -84,6 +89,7 @@ export function useSession() {
 
             stopRenewer();
         }
+    }
 
     async function login(data) {
         setSession(data);

src/i18n/locale/en.yml

@@ -232,6 +232,7 @@ globals:
         formation: Formation
         locations: Locations
         warehouses: Warehouses
+        saleTracking: Sale tracking
         roles: Roles
         connections: Connections
         acls: ACLs
@@ -550,11 +551,15 @@ ticket:
         observation: Notes
         ticketAdvance: Advance tickets
         futureTickets: Future tickets
+        expedition: Expedition
         purchaseRequest: Purchase request
         weeklyTickets: Weekly tickets
         saleTracking: Sale tracking
         services: Service
         tracking: Tracking
+        components: Components
+        pictures: Pictures
+        packages: Packages
     list:
         nickname: Nickname
         state: State

src/i18n/locale/es.yml

@@ -239,6 +239,14 @@ globals:
         mailForwarding: Reenvío de correo
         mailAlias: Alias de correo
         privileges: Privilegios
+        observation: Notas
+        expedition: Expedición
+        saleTracking: Líneas preparadas
+        services: Servicios
+        tracking: Estados
+        components: Componentes
+        pictures: Fotos
+        packages: Bultos
     created: Fecha creación
     worker: Trabajador
     now: Ahora
@@ -548,11 +556,15 @@ ticket:
         observation: Notas
         ticketAdvance: Adelantar tickets
         futureTickets: Tickets a futuro
+        expedition: Expedición
         purchaseRequest: Petición de compra
         weeklyTickets: Tickets programados
         saleTracking: Líneas preparadas
         services: Servicios
         tracking: Estados
+        components: Componentes
+        pictures: Fotos
+        packages: Bultos
     list:
         nickname: Alias
         state: Estado

src/pages/Customer/Card/CustomerFiscalData.vue

@@ -147,6 +147,7 @@ function handleLocation(data, location) {
                     :label="t('Electronic invoice')"
                     v-model="data.hasElectronicInvoice"
                 />
+                <QCheckbox :label="t('Daily invoice')" v-model="data.hasDailyInvoice" />
             </VnRow>
         </template>
     </FormModel>
@@ -176,6 +177,7 @@ es:
     onlyLetters: Sólo se pueden usar letras, números y espacios
     whenActivatingIt: Al activarlo, no informar el código del país en el campo nif
     inOrderToInvoice: Para facturar no se consulta este campo, sino el RE de consignatario. Al modificar este campo si no esta marcada la casilla Facturar por consignatario, se propagará automaticamente el cambio a todos lo consignatarios, en caso contrario preguntará al usuario si quiere o no propagar
+    Daily invoice: Facturación diaria
 en:
     onlyLetters: Only letters, numbers and spaces can be used
     whenActivatingIt: When activating it, do not enter the country code in the ID field

src/pages/Customer/CustomerList.vue

@@ -408,7 +408,6 @@ function handleLocation(data, location) {
         default-mode="table"
         redirect="customer"
         auto-load
-        :disable-option="{ card: true }"
     >
         <template #more-create-dialog="{ data }">
             <VnLocation

src/pages/Entry/Card/EntrySummary.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, computed, onUpdated } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 

src/pages/Entry/EntryLatestBuys.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, computed, reactive, onUnmounted } from 'vue';
+import { onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import RightMenu from 'src/components/common/RightMenu.vue';
 import VnTable from 'components/VnTable/VnTable.vue';

src/pages/Entry/EntryList.vue

@@ -1,8 +1,6 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import { useRoute } from 'vue-router';
 import EntryFilter from './EntryFilter.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import { useStateStore } from 'stores/useStateStore';
@@ -12,8 +10,6 @@ import { toDate } from 'src/filters';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
-const route = useRoute();
-const entityId = computed(() => route.params.id);
 const tableRef = ref();
 
 const entryFilter = {

src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue

@@ -63,8 +63,8 @@ const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.
         @on-fetch="setData"
         data-key="invoiceOutData"
     >
-        <template #menu="{ entity }">
+        <template #menu="{ entity, menuRef }">
-            <InvoiceOutDescriptorMenu :invoice-out-data="entity" />
+            <InvoiceOutDescriptorMenu :invoice-out-data="entity" :menu-ref="menuRef" />
         </template>
         <template #body="{ entity }">
             <VnLv :label="t('invoiceOut.card.issued')" :value="toDate(entity.issued)" />

src/pages/InvoiceOut/Card/InvoiceOutDescriptorMenu.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, onBeforeMount } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
@@ -11,13 +11,20 @@ import useNotify from 'src/composables/useNotify';
 import { useSession } from 'src/composables/useSession';
 import { usePrintService } from 'composables/usePrintService';
 import { useVnConfirm } from 'composables/useVnConfirm';
+import { getUrl } from 'src/composables/getUrl';
 import axios from 'axios';
 
+onBeforeMount(async () => (salixUrl.value = await getUrl('')));
+
 const $props = defineProps({
     invoiceOutData: {
         type: Object,
         default: () => {},
     },
+    menuRef: {
+        type: Object,
+        default: () => {},
+    },
 });
 
 const { notify } = useNotify();
@@ -28,8 +35,7 @@ const { t } = useI18n();
 const { openReport, sendEmail } = usePrintService();
 const { openConfirmationModal } = useVnConfirm();
 const quasar = useQuasar();
-
+const salixUrl = ref();
-const transferInvoiceDialogRef = ref();
 const invoiceFormType = ref('pdf');
 const defaultEmailAddress = ref($props.invoiceOutData.client?.email);
 
@@ -115,6 +121,7 @@ const refundInvoice = async (withWarehouse) => {
     try {
         const params = { ref: $props.invoiceOutData.ref, withWarehouse: withWarehouse };
         const { data } = await axios.post('InvoiceOuts/refund', params);
+        location.href = window.origin + `/#/ticket/${data[0].id}/sale`;
         notify(
             t('refundInvoiceSuccessMessage', {
                 refundTicket: data[0].id,
@@ -125,11 +132,22 @@ const refundInvoice = async (withWarehouse) => {
         console.error('Error generating invoice out pdf', err);
     }
 };
+
+const showTransferInvoiceForm = async () => {
+    quasar.dialog({
+        component: TransferInvoiceForm,
+        componentProps: {
+            invoiceOutData: $props.invoiceOutData,
+        },
+    });
+};
 </script>
 
 <template>
-    <QItem v-ripple clickable @click="transferInvoiceDialogRef.show()">
+    <QItem v-ripple clickable>
-        <QItemSection>{{ t('Transfer invoice to...') }}</QItemSection>
+        <QItemSection @click="showTransferInvoiceForm()">{{
+            t('Transfer invoice to...')
+        }}</QItemSection>
     </QItem>
     <QItem v-ripple clickable>
         <QItemSection>{{ t('Show invoice...') }}</QItemSection>
@@ -222,10 +240,6 @@ const refundInvoice = async (withWarehouse) => {
             {{ t('Create a single ticket with all the content of the current invoice') }}
         </QTooltip>
     </QItem>
-
-    <QDialog ref="transferInvoiceDialogRef">
-        <TransferInvoiceForm :invoice-out-data="invoiceOutData" />
-    </QDialog>
 </template>
 
 <i18n>

src/pages/InvoiceOut/Card/InvoiceOutSummary.vue

@@ -3,7 +3,7 @@ import { onMounted, ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
-import { toCurrency, toDate } from 'src/filters';
+import { toCurrency, toDate, toPercentage } from 'src/filters';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import { getUrl } from 'src/composables/getUrl';
@@ -57,12 +57,14 @@ const taxColumns = ref([
         name: 'quantity',
         label: 'invoiceOut.summary.rate',
         field: (row) => row.rate,
+        format: (value) => toPercentage(value / 100),
         sortable: true,
     },
     {
         name: 'invoiceOuted',
         label: 'invoiceOut.summary.fee',
         field: (row) => row.vat,
+        format: (value) => toCurrency(value),
         sortable: true,
     },
 ]);
@@ -113,7 +115,7 @@ const ticketsColumns = ref([
         </template>
         <template #body="{ entity: { invoiceOut } }">
             <QCard class="vn-one">
-                <VnTitle :text="t('invoiceOut.pageTitles.basicData')" />
+                <VnTitle :text="t('globals.pageTitles.basicData')" />
                 <VnLv
                     :label="t('invoiceOut.summary.issued')"
                     :value="toDate(invoiceOut.issued)"
@@ -164,7 +166,7 @@ const ticketsColumns = ref([
                     </template>
                     <template #body-cell-item="{ value }">
                         <QTd>
-                            <QBtn flat color="primary">
+                            <QBtn flat class="link">
                                 {{ value }}
                                 <TicketDescriptorProxy :id="value" />
                             </QBtn>
@@ -172,7 +174,7 @@ const ticketsColumns = ref([
                     </template>
                     <template #body-cell-quantity="{ value, row }">
                         <QTd>
-                            <QBtn class="no-uppercase" flat color="primary" dense>
+                            <QBtn class="no-uppercase link" flat dense>
                                 {{ value }}
                                 <CustomerDescriptorProxy :id="row.id" />
                             </QBtn>

src/pages/InvoiceOut/InvoiceOutFilter.vue

@@ -41,7 +41,7 @@ function setWorkers(data) {
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
-        <template #body="{ params, searchFn }">
+        <template #body="{ params }">
             <QItem>
                 <QItemSection>
                     <VnInput
@@ -93,7 +93,6 @@ function setWorkers(data) {
                 <QItemSection>
                     <QCheckbox
                         :label="t('Has PDF')"
-                        @update:model-value="searchFn()"
                         toggle-indeterminate
                         v-model="params.hasPdf"
                     />

src/pages/InvoiceOut/InvoiceOutGlobal.vue

@@ -30,7 +30,7 @@ const selectedCustomerId = ref(null);
 const tableColumnComponents = {
     clientId: {
         component: QBtn,
-        props: { flat: true, color: 'blue' },
+        props: { flat: true, class: 'link' },
         event: (prop) => selectCustomerId(prop.value),
     },
     clientName: {
@@ -52,7 +52,12 @@ const tableColumnComponents = {
 };
 
 const columns = computed(() => [
-    { label: 'Id', field: 'clientId', name: 'clientId', align: 'left' },
+    {
+        align: 'left',
+        name: 'clientId',
+        label: 'Id',
+        field: 'clientId',
+    },
     {
         label: t('invoiceOut.globalInvoices.table.client'),
         field: 'clientName',

src/pages/InvoiceOut/InvoiceOutGlobalForm.vue

@@ -48,7 +48,7 @@ const getStatus = computed({
 
 onMounted(async () => {
     await invoiceOutGlobalStore.init();
-    formData.value = { ...formInitialData.value };
+    formData.value = formInitialData.value.invoiceDate;
 });
 </script>
 

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -1,96 +1,177 @@
 <script setup>
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import VnSelect from 'src/components/common/VnSelect.vue';
-
+import VnInputDate from 'src/components/common/VnInputDate.vue';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import InvoiceOutSummary from './Card/InvoiceOutSummary.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import CardList from 'src/components/ui/CardList.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
-import CreateManualInvoiceForm from 'src/components/CreateManualInvoiceForm.vue';
-
-import InvoiceOutFilter from './InvoiceOutFilter.vue';
-import { toDate, toCurrency } from 'src/filters/index';
-import { useStateStore } from 'stores/useStateStore';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import { useSession } from 'src/composables/useSession';
+import { usePrintService } from 'composables/usePrintService';
-import RightMenu from 'src/components/common/RightMenu.vue';
+import VnTable from 'components/VnTable/VnTable.vue';
+import InvoiceOutSummary from './Card/InvoiceOutSummary.vue';
+import { toCurrency, toDate } from 'src/filters/index';
+import { useStateStore } from 'stores/useStateStore';
+import { QBtn } from 'quasar';
+import { watchEffect } from 'vue';
 
 const { t } = useI18n();
-const router = useRouter();
 const stateStore = useStateStore();
-const session = useSession();
-const tokenMultimedia = session.getTokenMultimedia();
 const { viewSummary } = useSummaryDialog();
+const tableRef = ref();
+const invoiceOutSerialsOptions = ref([]);
+const ticketsOptions = ref([]);
+const customerOptions = ref([]);
+const selectedRows = ref([]);
+const hasSelectedCards = computed(() => selectedRows.value.length > 0);
+const MODEL = 'InvoiceOuts';
+const { openReport } = usePrintService();
 
-const manualInvoiceDialogRef = ref(null);
+const columns = computed(() => [
-const selectedCards = ref(new Map());
+    {
-
+        align: 'left',
+        name: 'id',
+        label: t('invoiceOutList.tableVisibleColumns.id'),
+        chip: {
+            condition: () => true,
+        },
+        isId: true,
+    },
+    {
+        align: 'left',
+        name: 'ref',
+        label: t('invoiceOutList.tableVisibleColumns.ref'),
+        isTitle: true,
+        component: 'select',
+        attrs: {
+            url: MODEL,
+            optionLabel: 'ref',
+            optionValue: 'id',
+        },
+        columnField: {
+            component: null,
+        },
+    },
+    {
+        align: 'left',
+        name: 'Issued',
+        label: t('invoiceOutList.tableVisibleColumns.issued'),
+        component: 'date',
+        format: (row) => toDate(row.issued),
+        columnField: {
+            component: null,
+        },
+    },
+    {
+        align: 'left',
+        name: 'clientSocialName',
+        label: t('invoiceOutModule.customer'),
+        cardVisible: true,
+        component: 'select',
+        attrs: {
+            url: 'Clients',
+            fields: ['id', 'name'],
+        },
+        columnField: {
+            component: null,
+        },
+    },
+    {
+        align: 'left',
+        name: 'companyCode',
+        label: t('invoiceOutModule.company'),
+        cardVisible: true,
+        component: 'select',
+        attrs: {
+            url: 'Companies',
+            optionLabel: 'code',
+            optionValue: 'id',
+        },
+        columnField: {
+            component: null,
+        },
+    },
+    {
+        align: 'left',
+        name: 'amount',
+        label: t('invoiceOutModule.amount'),
+        cardVisible: true,
+        format: (row) => toCurrency(row.amount),
+    },
+    {
+        align: 'left',
+        name: 'created',
+        label: t('invoiceOutList.tableVisibleColumns.created'),
+        component: 'date',
+        columnField: {
+            component: null,
+        },
+        format: (row) => toDate(row.created),
+    },
+    {
+        align: 'left',
+        name: 'dued',
+        label: t('invoiceOutList.tableVisibleColumns.dueDate'),
+        component: 'date',
+        columnField: {
+            component: null,
+        },
+        format: (row) => toDate(row.dued),
+    },
+    {
+        align: 'right',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('InvoiceOutSummary'),
+                icon: 'preview',
+                action: (row) => viewSummary(row.id, InvoiceOutSummary),
+            },
+            {
+                title: t('DownloadPdf'),
+                icon: 'vn:ticket',
+                isPrimary: true,
+                action: (row) => openPdf(row.id),
+            },
+        ],
+    },
+]);
 onMounted(() => (stateStore.rightDrawer = true));
 onUnmounted(() => (stateStore.rightDrawer = false));
 
-function navigate(id) {
+function openPdf(id) {
-    router.push({ path: `/invoice-out/${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 openPdf = () => {
     try {
-        if (selectedCards.value.size === 0) return;
+        openReport(`${MODEL}/${id}/download`);
-        const selectedCardsArray = Array.from(selectedCards.value.values());
+    } catch (err) {
+        console.error('Error opening PDF', err);
+    }
+}
 
-        if (selectedCards.value.size === 1) {
+function downloadPdf() {
+    try {
+        if (selectedRows.value.size === 0) return;
+        const selectedCardsArray = Array.from(selectedRows.value.values());
+
+        if (selectedRows.value.size === 1) {
             const [invoiceOut] = selectedCardsArray;
-            const url = `api/InvoiceOuts/${invoiceOut.id}/download?access_token=${tokenMultimedia}`;
+            openPdf(invoiceOut.id);
-            window.open(url, '_blank');
         } else {
             const invoiceOutIdsArray = selectedCardsArray.map(
                 (invoiceOut) => invoiceOut.id
             );
             const invoiceOutIds = invoiceOutIdsArray.join(',');
 
-            const params = new URLSearchParams({
+            const params = {
-                access_token: tokenMultimedia,
                 ids: invoiceOutIds,
-            });
+            };
 
-            const url = `api/InvoiceOuts/downloadZip?${params}`;
+            openReport(`${MODEL}/downloadZip`, params);
-            window.open(url, '_blank');
         }
     } catch (err) {
         console.error('Error opening PDF');
     }
-};
+}
 
-const openCreateInvoiceModal = () => {
+watchEffect(selectedRows);
-    manualInvoiceDialogRef.value.show();
-};
 </script>
 
 <template>
@@ -99,115 +180,84 @@ const openCreateInvoiceModal = () => {
         :label="t('searchInvoice')"
         data-key="InvoiceOutList"
     />
-    <RightMenu>
+    <VnSubToolbar>
-        <template #right-panel>
-            <InvoiceOutFilter data-key="InvoiceOutList" />
-        </template>
-    </RightMenu>
-    <QPage>
-        <VnPaginate
-            auto-load
-            data-key="InvoiceOutList"
-            :order="['issued DESC', 'id DESC']"
-            url="InvoiceOuts/filter"
-        >
-            <template #body="{ rows }">
-                <VnSubToolbar class="justify-end">
         <template #st-actions>
             <QBtn
-                            @click="openPdf()"
-                            class="q-mr-md"
                 color="primary"
-                            icon="cloud_download"
+                icon-right="cloud_download"
-                            :disable="selectedCards.size === 0"
+                @click="downloadPdf()"
+                :disable="!hasSelectedCards"
             >
                 <QTooltip>{{ t('globals.downloadPdf') }}</QTooltip>
             </QBtn>
-                        <QCheckbox
-                            left-label
-                            :label="t('globals.markAll')"
-                            @click="toggleAllCards(rows)"
-                            :model-value="selectedCards.size === rows.length"
-                            class="q-mr-md"
-                        />
         </template>
     </VnSubToolbar>
-                <div class="flex flex-center q-pa-md">
+    <VnTable
-                    <div class="vn-card-list">
+        ref="tableRef"
-                        <CardList
+        data-key="invoiceOut"
-                            :element="row"
+        :url="`${MODEL}/filter`"
-                            :id="row.id"
+        :create="{
-                            :show-checkbox="true"
+            urlCreate: 'InvoiceOuts/createManualInvoice',
-                            :is-selected="selectedCards.has(row.id)"
+            title: t('Create Manual Invoice'),
-                            :key="row.id"
+            onDataSaved: ({ id }) => tableRef.redirect(id),
-                            :title="row.ref"
+            formInitialData: {
-                            @click="navigate(row.id)"
+                active: true,
-                            @toggle-card-check="toggleIndividualCard(row)"
+            },
-                            v-for="row of rows"
+        }"
+        v-model:selected="selectedRows"
+        order="id DESC"
+        :columns="columns"
+        default-mode="table"
+        redirect="invoice-out"
+        auto-load
+        :table="{
+            'row-key': 'id',
+            selection: 'multiple',
+        }"
     >
-                            <template #list-items>
+        <template #more-create-dialog="{ data }">
-                                <VnLv
+            <VnSelect
-                                    :label="t('invoiceOut.list.issued')"
+                url="Tickets"
-                                    :value="toDate(row.issued)"
+                v-model="data.ticketFk"
+                :label="t('invoiceOutList.tableVisibleColumns.ticket')"
+                :options="ticketsOptions"
+                option-label="nickname"
+                option-value="id"
             />
-                                <VnLv
+            <VnSelect
-                                    :label="t('invoiceOut.list.amount')"
+                url="Clients"
-                                    :value="toCurrency(row.amount)"
+                v-model="data.clientFk"
+                :label="t('invoiceOutModule.customer')"
+                :options="customerOptions"
+                option-label="name"
+                option-value="id"
             />
-                                <VnLv :label="t('invoiceOut.list.client')">
+            <VnInputDate
-                                    <template #value>
+                :label="t('invoiceOutList.tableVisibleColumns.dueDate')"
-                                        <span class="link" @click.stop>
+                v-model="data.maxShipped"
-                                            {{ row?.clientSocialName }}
-                                            <CustomerDescriptorProxy
-                                                :id="row?.clientFk"
             />
-                                        </span>
+            <VnSelect
-                                    </template>
+                url="InvoiceOutSerials"
-                                </VnLv>
+                v-model="data.invoiceOutSerial"
-                                <VnLv
+                :label="t('invoiceOutList.tableVisibleColumns.invoiceOutSerial')"
-                                    :label="t('invoiceOut.list.shortCreated')"
+                :options="invoiceOutSerialsOptions"
-                                    :title-label="t('invoiceOut.list.created')"
+                option-label="description"
-                                    :value="toDate(row.created)"
+                option-value="code"
             />
-                                <VnLv
+            <VnSelect
-                                    :label="t('invoiceOut.list.company')"
+                url="TaxAreas"
-                                    :value="row.companyCode"
+                v-model="data.area"
+                :label="t('invoiceOutList.tableVisibleColumns.taxArea')"
+                :options="taxAreasOptions"
+                option-label="code"
+                option-value="code"
             />
-                                <VnLv
+            <QInput
-                                    :label="t('invoiceOut.list.shortDued')"
+                v-model="data.reference"
-                                    :title-label="t('invoiceOut.list.dued')"
+                :label="t('invoiceOutList.tableVisibleColumns.ref')"
-                                    :value="toDate(row.dued)"
             />
         </template>
-                            <template #actions>
+    </VnTable>
-                                <QBtn
-                                    :label="t('components.smartCard.openSummary')"
-                                    @click.stop="viewSummary(row.id, InvoiceOutSummary)"
-                                    color="primary"
-                                    style="margin-top: 15px"
-                                    type="submit"
-                                />
-                            </template>
-                        </CardList>
-                    </div>
-                </div>
-            </template>
-        </VnPaginate>
-        <QPageSticky :offset="[20, 20]">
-            <QBtn fab icon="add" color="primary" @click="openCreateInvoiceModal()" />
-            <QTooltip>
-                {{ t('createInvoice') }}
-            </QTooltip>
-        </QPageSticky>
-
-        <QDialog
-            ref="manualInvoiceDialogRef"
-            transition-show="scale"
-            transition-hide="scale"
-        >
-            <CreateManualInvoiceForm />
-        </QDialog>
-    </QPage>
 </template>
 
 <i18n>

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -1,29 +1,158 @@
 <script setup>
-import { computed, onBeforeMount } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
-import InvoiceOutNegativeFilter from './InvoiceOutNegativeBasesFilter.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
-import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import { toCurrency } from 'src/filters';
+import VnTable from 'src/components/VnTable/VnTable.vue';
 import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
-import { useStateStore } from 'stores/useStateStore';
+import { useArrayData } from 'src/composables/useArrayData';
-import { useArrayData } from 'composables/useArrayData';
-import RightMenu from 'src/components/common/RightMenu.vue';
 
-const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
-const stateStore = useStateStore();
 const { t } = useI18n();
-
+const tableRef = ref();
-const arrayData = useArrayData('InvoiceOutNegative', {
+const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
-    url: 'InvoiceOuts/negativeBases',
+const userParams = {
-    limit: 0,
-    userParams: {
     from: Date.vnFirstDayOfMonth().toISOString(),
     to: Date.vnLastDayOfMonth().toISOString(),
+};
+useArrayData('InvoiceOutNegative', { userParams });
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'company',
+        label: t('invoiceOutModule.company'),
+        component: 'select',
+        cardVisible: true,
+        attrs: {
+            url: 'Companies',
+            optionLabel: 'code',
+            optionValue: 'id',
         },
-    exprBuilder: (param, value) => {
+        columnField: {
+            component: null,
+        },
+    },
+    {
+        align: 'left',
+        name: 'country',
+        label: t('negativeBases.country'),
+        component: 'select',
+        attrs: {
+            url: 'Countries',
+            optionLabel: 'name',
+            optionValue: 'id',
+        },
+        columnField: {
+            component: null,
+        },
+    },
+    {
+        align: 'left',
+        name: 'clientId',
+        label: t('negativeBases.clientId'),
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'clientSocialName',
+        label: t('invoiceOutModule.customer'),
+        component: 'select',
+        isTitle: true,
+        cardVisible: true,
+        attrs: {
+            url: 'Clients',
+            fields: ['id', 'name'],
+        },
+        columnField: {
+            component: null,
+        },
+    },
+    {
+        align: 'left',
+        name: 'amount',
+        label: t('invoiceOutModule.amount'),
+        format: (row) => toCurrency(row.amount),
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'taxableBase',
+        label: t('negativeBases.base'),
+    },
+    {
+        align: 'left',
+        name: 'ticketFk',
+        label: t('negativeBases.ticketId'),
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'isActive',
+        label: t('negativeBases.active'),
+    },
+    {
+        align: 'left',
+        name: 'hasToInvoice',
+        label: t('negativeBases.hasToInvoice'),
+    },
+    {
+        align: 'left',
+        name: 'hasVerifiedData',
+        label: t('negativeBases.verifiedData'),
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
+        name: 'workerName',
+        component: 'select',
+        attrs: {
+            url: 'Workers/activeWithInheritedRole',
+            fields: ['id', 'name'],
+            where: { role: 'salesPerson' },
+        },
+        columnField: {
+            component: null,
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.workerName),
+    },
+]);
+
+const downloadCSV = async () => {
+    const filterParams = {
+        limit: 20,
+        where: {
+            and: [],
+        },
+    };
+
+    for (const [key, value] of Object.entries(userParams)) {
+        if (value) {
+            filterParams.where.and.push({ [key]: value });
+        }
+    }
+
+    await invoiceOutGlobalStore.getNegativeBasesCsv(
+        userParams.from,
+        userParams.to,
+        filterParams
+    );
+};
+</script>
+<template>
+    <VnSubToolbar>
+        <template #st-actions>
+            <QBtn color="primary" icon-right="download" @click="downloadCSV()">
+                <QTooltip>{{ t('Download as CSV') }}</QTooltip>
+            </QBtn>
+        </template>
+    </VnSubToolbar>
+    <VnTable
+        ref="tableRef"
+        data-key="negativeFilter"
+        url="InvoiceOuts/negativeBases"
+        :user-params="userParams"
+        :expr-builder="
+            (param, value) => {
                 switch (param) {
                     case 'from':
                     case 'to':
@@ -31,169 +160,17 @@ const arrayData = useArrayData('InvoiceOutNegative', {
                     default:
                         return { [param]: value };
                 }
-    },
-});
-
-onBeforeMount(async () => {
-    await arrayData.fetch({ append: false });
-    stateStore.rightDrawer = true;
-});
-
-const columns = computed(() => [
-    {
-        label: t('invoiceOut.negativeBases.company'),
-        field: 'company',
-        name: 'company',
-        align: 'left',
-    },
-    {
-        label: t('invoiceOut.negativeBases.country'),
-        field: 'country',
-        name: 'country',
-        align: 'left',
-    },
-    {
-        label: t('invoiceOut.negativeBases.clientId'),
-        field: 'clientId',
-        name: 'clientId',
-        align: 'left',
-    },
-    {
-        label: t('invoiceOut.negativeBases.client'),
-        field: 'clientSocialName',
-        name: 'client',
-        align: 'left',
-    },
-    {
-        label: t('invoiceOut.negativeBases.amount'),
-        field: 'amount',
-        name: 'amount',
-        align: 'left',
-        format: (value) => toCurrency(value),
-    },
-    {
-        label: t('invoiceOut.negativeBases.base'),
-        field: 'taxableBase',
-        name: 'base',
-        align: 'left',
-    },
-    {
-        label: t('invoiceOut.negativeBases.ticketId'),
-        field: 'ticketFk',
-        name: 'ticketId',
-        align: 'left',
-    },
-    {
-        label: t('invoiceOut.negativeBases.active'),
-        field: 'isActive',
-        name: 'active',
-        align: 'left',
-    },
-    {
-        label: t('invoiceOut.negativeBases.hasToInvoice'),
-        field: 'hasToInvoice',
-        name: 'hasToInvoice',
-        align: 'left',
-    },
-    {
-        label: t('invoiceOut.negativeBases.verifiedData'),
-        field: 'isTaxDataChecked',
-        name: 'verifiedData',
-        align: 'left',
-    },
-    {
-        label: t('invoiceOut.negativeBases.comercial'),
-        field: 'workerName',
-        name: 'worker',
-        align: 'left',
-    },
-]);
-
-const downloadCSV = async () => {
-    const params = {}; // filter.value;
-    const filterParams = {
-        limit: 20,
-        where: {
-            and: [],
-        },
-    };
-    for (const param in params) {
-        if (params[param]) filterParams.where.and.push({ [param]: params[param] });
             }
-
+        "
-    await invoiceOutGlobalStore.getNegativeBasesCsv(
+        :limit="0"
-        arrayData.value.store.userParams.from,
-        arrayData.value.store.userParams.to,
-        params
-    );
-};
-</script>
-<template>
-    <VnSubToolbar>
-        <template #st-actions>
-            <QBtn color="primary" icon-right="download" no-caps @click="downloadCSV()">
-                <QTooltip>{{ t('Download as CSV') }}</QTooltip>
-            </QBtn>
-        </template>
-    </VnSubToolbar>
-    <RightMenu>
-        <template #right-panel>
-            <InvoiceOutNegativeFilter data-key="InvoiceOutNegative" />
-        </template>
-    </RightMenu>
-    <QPage class="column items-center q-pa-md">
-        <QTable
         :columns="columns"
-            :rows="arrayData.store.data"
+        default-mode="table"
-            row-key="clientId"
+        auto-load
-            class="full-width q-mt-md"
+        :is-editable="false"
+        :use-model="true"
     >
-            <template #body-cell-clientId="{ row }">
+    </VnTable>
-                <QTd>
-                    <QBtn flat dense class="link"> {{ row.clientId }}</QBtn>
-                    <CustomerDescriptorProxy :id="row.clientId" />
-                </QTd>
 </template>
-            <template #body-cell-ticketId="{ row }">
-                <QTd>
-                    <QBtn flat dense class="link"> {{ row.ticketFk }}</QBtn>
-                    <TicketDescriptorProxy :id="row.ticketFk" />
-                </QTd>
-            </template>
-            <template #body-cell-worker="{ row }">
-                <QTd>
-                    <QBtn class="no-uppercase link" flat dense>{{ row.workerName }}</QBtn>
-                    <WorkerDescriptorProxy :id="row.comercialId" />
-                </QTd>
-            </template>
-            <template #body-cell-active="{ row }">
-                <QTd>
-                    <QCheckbox :model-value="!!row.isActive" disable />
-                </QTd>
-            </template>
-            <template #body-cell-hasToInvoice="{ row }">
-                <QTd>
-                    <QCheckbox :model-value="!!row.hasToInvoice" disable />
-                </QTd>
-            </template>
-            <template #body-cell-verifiedData="{ row }">
-                <QTd>
-                    <QCheckbox :model-value="!!row.isTaxDataChecked" disable />
-                </QTd>
-            </template>
-        </QTable>
-    </QPage>
-</template>
-
-<style lang="scss" scoped>
-.col-content {
-    border-radius: 4px;
-    padding: 6px;
-}
-.no-uppercase {
-    text-transform: none;
-}
-</style>
 
 <i18n>
 es:

src/pages/InvoiceOut/locale/en.yml

@@ -0,0 +1,25 @@
+invoiceOutModule:
+    customer: Client
+    amount: Amount
+    company: Company
+invoiceOutList:
+    tableVisibleColumns:
+        id: ID
+        ref: Reference
+        issued: Issued
+        created: Created
+        dueDate: Max date
+        invoiceOutSerial: Serial
+        ticket: Ticket
+        taxArea: Tax area
+DownloadPdf: Download PDF
+InvoiceOutSummary: Summary
+negativeBases:
+        country: Country
+        clientId: Client ID
+        base: Base
+        ticketId: Ticket
+        active: Active
+        hasToInvoice: Has to invoice
+        verifiedData: Verified data
+        commercial: Commercial

src/pages/InvoiceOut/locale/es.yml

@@ -1,2 +1,31 @@
 Search invoice: Buscar factura emitida
 You can search by invoice reference: Puedes buscar por referencia de la factura
+invoiceOutModule:
+    customer: Cliente
+    amount: Importe
+    company: Empresa
+invoiceOutList:
+    tableVisibleColumns:
+        id: ID
+        ref: Referencia
+        issued: Fecha emisión
+        customer: Cliente
+        company: Empresa
+        amount: Importe
+        created: F. creación
+        dueDate: F. máxima
+        invoiceOutSerial: Serial
+        ticket: Ticket
+        taxArea: Area
+DownloadPdf: Descargar PDF
+InvoiceOutSummary: Resumen
+negativeBases:
+        country: País
+        clientId: ID del cliente
+        client: Cliente
+        base: Base
+        ticketId: Ticket
+        active: Activo
+        hasToInvoice: Debe facturar
+        verifiedData: Datos verificados
+        commercial: Comercial

src/pages/Order/Card/OrderForm.vue

@@ -1,11 +1,10 @@
 <script setup>
 import { useRoute, useRouter } from 'vue-router';
-import { reactive, ref } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import { useState } from 'composables/useState';
 import FormModel from 'components/FormModel.vue';
-import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSelect from 'components/common/VnSelect.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
@@ -18,29 +17,9 @@ const ORDER_MODEL = 'order';
 
 const router = useRouter();
 const isNew = Boolean(!route.params.id);
-const initialFormState = reactive({
-    clientFk: null,
-    addressFk: null,
-    agencyModeFk: null,
-    landed: null,
-});
 const clientList = ref([]);
 const agencyList = ref([]);
 const addressList = ref([]);
-const clientId = ref(null);
-
-const onClientsFetched = (data) => {
-    clientList.value = data;
-    initialFormState.clientFk = Number(route.query?.clientFk) || null;
-    clientId.value = initialFormState.clientFk;
-
-    const client = clientList.value.find(
-        (client) => client.id === initialFormState.clientFk
-    );
-    if (!client?.defaultAddressFk)
-        throw new Error(t(`No default address found for the client`));
-    fetchAddressList(client.defaultAddressFk);
-};
 
 const fetchAddressList = async (addressId) => {
     try {
@@ -128,28 +107,19 @@ const onClientChange = async (clientId) => {
     }
 };
 
-async function onDataSaved(data) {
+async function onDataSaved({ id }) {
-    await router.push({ path: `/order/${data}/catalog` });
+    await router.push({ path: `/order/${id}/catalog` });
 }
 </script>
 
 <template>
-    <FetchData
-        url="Clients"
-        @on-fetch="(data) => onClientsFetched(data)"
-        :filter="{ fields: ['id', 'name', 'defaultAddressFk'] }"
-        auto-load
-    />
     <VnSubToolbar v-if="isNew" />
     <div class="q-pa-md">
         <FormModel
-            :url="!isNew ? `Orders/${route.params.id}` : null"
+            :url="`Orders/${route.params.id}`"
-            url-create="Orders/new"
             @on-data-saved="onDataSaved"
             :model="ORDER_MODEL"
-            :form-initial-data="isNew ? initialFormState : null"
+            :mapper="orderMapper"
-            :observe-form-changes="!isNew"
-            :mapper="isNew ? orderMapper : null"
             :filter="orderFilter"
             @on-fetch="fetchOrderDetails"
             auto-load
@@ -157,11 +127,15 @@ async function onDataSaved(data) {
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <VnSelect
+                        url="Clients"
                         :label="t('order.form.clientFk')"
                         v-model="data.clientFk"
                         :options="clientList"
                         option-value="id"
                         option-label="name"
+                        :filter="{
+                            fields: ['id', 'name', 'defaultAddressFk'],
+                        }"
                         hide-selected
                         @update:model-value="onClientChange"
                     >
@@ -183,7 +157,6 @@ async function onDataSaved(data) {
                         option-label="street"
                         hide-selected
                         :disable="!addressList?.length"
-                        @update:model-value="onAddressChange"
                     >
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">

src/pages/Order/Card/OrderSummary.vue

@@ -196,7 +196,7 @@ const detailsColumns = ref([
                                     {{ props.row.quantity }}
                                 </QTd>
                                 <QTd key="price" :props="props">
-                                    {{ props.row.price }}
+                                    {{ toCurrency(props.row.price) }}
                                 </QTd>
                                 <QTd key="amount" :props="props">
                                     {{

src/pages/Order/OrderCatalog.vue

@@ -4,7 +4,7 @@ import { useRoute } from 'vue-router';
 import { onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnPaginate from 'components/ui/VnPaginate.vue';
-import OrderCatalogItem from 'pages/Order/Card/OrderCatalogItem.vue';
+import CatalogItem from 'components/ui/CatalogItem.vue';
 import OrderCatalogFilter from 'pages/Order/Card/OrderCatalogFilter.vue';
 
 const route = useRoute();
@@ -77,7 +77,12 @@ function extractValueTags(items) {
                         <div v-if="rows && !rows?.length" class="no-result">
                             {{ t('globals.noResults') }}
                         </div>
-                        <OrderCatalogItem v-for="row in rows" :key="row.id" :item="row" />
+                        <CatalogItem
+                            v-for="row in rows"
+                            :key="row.id"
+                            :item="row"
+                            is-catalog
+                        />
                     </div>
                 </template>
             </VnPaginate>

src/pages/Order/OrderLines.vue

@@ -1,33 +1,70 @@
 <script setup>
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { useQuasar } from 'quasar';
 
-import VnPaginate from 'components/ui/VnPaginate.vue';
-import FetchData from 'components/FetchData.vue';
-import VnLv from 'components/ui/VnLv.vue';
-import FetchedTags from 'components/ui/FetchedTags.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
-import VnImg from 'components/ui/VnImg.vue';
-
 import { toCurrency, toDate } from 'src/filters';
 import axios from 'axios';
-import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnImg from 'src/components/ui/VnImg.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import FetchedTags from 'src/components/ui/FetchedTags.vue';
+import { useStateStore } from 'stores/useStateStore';
 
+const stateStore = useStateStore();
 const route = useRoute();
 const { t } = useI18n();
 const quasar = useQuasar();
+const componentKey = ref(0);
+const tableLinesRef = ref();
+const order = ref();
+const refresh = () => {
+    componentKey.value += 1;
+};
 const orderSummary = ref({
     total: null,
     vat: null,
 });
-const componentKey = ref(0);
-const order = ref(0);
 
-const refresh = () => {
+const lineFilter = ref({
-    componentKey.value += 1;
+    include: [
-};
+        {
+            relation: 'item',
+            scope: {
+                fields: [
+                    'id',
+                    'name',
+                    'subName',
+                    'image',
+                    'tag4',
+                    'value4',
+                    'tag5',
+                    'value5',
+                    'tag6',
+                    'value6',
+                    'tag7',
+                    'value7',
+                    'tag8',
+                    'value8',
+                    'tag9',
+                    'value9',
+                    'tag10',
+                    'value10',
+                ],
+            },
+        },
+        {
+            relation: 'warehouse',
+            scope: {
+                fields: ['id', 'name'],
+            },
+        },
+    ],
+    where: { orderFk: route.params.id },
+});
 
 function confirmRemove(item) {
     quasar.dialog({
@@ -60,53 +97,103 @@ async function confirmOrder() {
     });
 }
 
-const detailsColumns = ref([
+const columns = computed(() => [
     {
-        name: 'img',
+        align: 'center',
-        label: '',
+        label: t('lines.image'),
-        field: (row) => row?.item?.id,
+        name: 'image',
+        columnField: {
+            component: VnImg,
+            attrs: (id) => {
+                return {
+                    id,
+                    width: '50px',
+                };
+            },
+        },
+        columnFilter: false,
     },
     {
-        name: 'item',
+        align: 'left',
-        label: t('order.summary.item'),
+        name: 'id',
-        field: (row) => row?.item?.id,
+        label: t('lines.item'),
-        sortable: true,
+        chip: {
+            condition: () => true,
+        },
+        isId: true,
     },
     {
-        name: 'description',
+        align: 'left',
+        name: 'itemFk',
         label: t('globals.description'),
-        field: (row) => row?.item?.name,
+        isTitle: true,
+        cardVisible: true,
+        component: 'select',
+        attrs: {
+            url: 'Items',
+            fields: ['id', 'name', 'subName'],
+        },
+        columnField: {
+            component: null,
+        },
+        format: (row) => row?.item?.name,
     },
     {
-        name: 'warehouse',
+        align: 'left',
-        label: t('warehouse'),
+        name: 'warehouseFk',
-        field: (row) => row?.warehouse?.name,
+        label: t('lines.warehouse'),
-        sortable: true,
+        cardVisible: true,
+        component: 'select',
+        attrs: {
+            url: 'Warehouses',
+            fields: ['id', 'name'],
+        },
+        columnField: {
+            component: null,
+        },
+        format: (row) => row?.warehouse?.name,
     },
     {
+        align: 'left',
         name: 'shipped',
-        label: t('shipped'),
+        label: t('lines.shipped'),
-        field: (row) => toDate(row?.shipped),
+        cardVisible: true,
+        component: 'date',
+        columnField: {
+            component: null,
+        },
+        format: (row) => toDate(row.shipped),
     },
     {
+        align: 'left',
         name: 'quantity',
-        label: t('order.summary.quantity'),
+        label: t('lines.quantity'),
-        field: (row) => row?.quantity,
     },
     {
+        align: 'left',
         name: 'price',
-        label: t('order.summary.price'),
+        label: t('lines.price'),
-        field: (row) => toCurrency(row?.price),
+        cardVisible: true,
+        format: (row) => toCurrency(row.price),
     },
     {
+        align: 'left',
         name: 'amount',
-        label: t('order.summary.amount'),
+        label: t('lines.amount'),
-        field: (row) => toCurrency(row?.quantity * row?.price),
+        format: (row) => toCurrency(row.amount),
     },
     {
-        name: 'actions',
+        align: 'right',
         label: '',
-        field: (row) => row?.id,
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('delete'),
+                icon: 'delete',
+                click: (row) => confirmRemove(row.item),
+                isPrimary: true,
+            },
+        ],
     },
 ]);
 </script>
@@ -130,120 +217,60 @@ const detailsColumns = ref([
         @on-fetch="(data) => (orderSummary.vat = data)"
         auto-load
     />
-    <QPage :key="componentKey" class="column items-center q-pa-md">
+    <QDrawer side="right" :width="270" v-model="stateStore.rightDrawer">
-        <div class="order-list full-width">
-            <div v-if="!orderSummary.total" class="no-result">
-                {{ t('globals.noResults') }}
-            </div>
-
-            <QDrawer side="right" :width="270" show-if-above>
         <QCard class="order-lines-summary q-pa-lg">
             <p class="header text-right block">
                 {{ t('summary') }}
             </p>
             <VnLv
                 v-if="orderSummary.vat && orderSummary.total"
-                        :label="t('subtotal')"
+                :label="t('subtotal') + ': '"
                 :value="toCurrency(orderSummary.total - orderSummary.vat)"
             />
             <VnLv
                 v-if="orderSummary.vat"
-                        :label="t('VAT')"
+                :label="t('VAT') + ': '"
                 :value="toCurrency(orderSummary?.vat)"
             />
             <VnLv
                 v-if="orderSummary.total"
-                        :label="t('total')"
+                :label="t('total') + ': '"
                 :value="toCurrency(orderSummary?.total)"
             />
         </QCard>
     </QDrawer>
-            <VnPaginate
+    <QPage :key="componentKey" class="column items-center">
+        <div class="order-list full-width">
+            <div v-if="!orderSummary.total" class="no-result">
+                {{ t('globals.noResults') }}
+            </div>
+            <VnTable
+                ref="tableLinesRef"
                 data-key="OrderLines"
                 url="OrderRows"
-                :limit="20"
+                :columns="columns"
+                default-mode="table"
+                :right-search="false"
+                :use-model="true"
                 auto-load
-                :filter="{
+                :user-filter="lineFilter"
-                    include: [
-                        {
-                            relation: 'item',
-                        },
-                        {
-                            relation: 'warehouse',
-                        },
-                    ],
-                    where: { orderFk: route.params.id },
-                }"
             >
-                <template #body="{ rows }">
+                <template #column-image="{ row }">
-                    <div class="q-pa-md">
-                        <QTable
-                            :columns="detailsColumns"
-                            :rows="rows"
-                            flat
-                            class="full-width"
-                            style="text-align: center"
-                        >
-                            <template #header="props">
-                                <QTr class="tr-header" :props="props">
-                                    <QTh
-                                        v-for="col in props.cols"
-                                        :key="col.name"
-                                        :props="props"
-                                        style="text-align: center"
-                                    >
-                                        {{ t(col.label) }}
-                                    </QTh>
-                                </QTr>
-                            </template>
-                            <template #body-cell-img="{ value }">
-                                <QTd>
                     <div class="image-wrapper">
-                                        <VnImg :id="value" class="rounded" />
+                        <VnImg :id="parseInt(row?.item?.image)" class="rounded" />
                     </div>
-                                </QTd>
-                            </template>
-                            <template #body-cell-item="{ value }">
-                                <QTd class="item">
-                                    <span class="link">
-                                        <QBtn flat>
-                                            {{ value }}
-                                        </QBtn>
-                                        <ItemDescriptorProxy :id="value" />
-                                    </span>
-                                </QTd>
-                            </template>
-                            <template #body-cell-description="{ row, value }">
-                                <QTd>
-                                    <div
-                                        class="row column full-width justify-between items-start"
-                                    >
-                                        {{ value }}
-                                        <div v-if="value" class="subName">
-                                            {{ value.toUpperCase() }}
-                                        </div>
-                                    </div>
-                                    <FetchedTags :item="row.item" :max-length="6" />
-                                </QTd>
                 </template>
 
-                            <template #body-cell-actions="{ value }">
+                <template #column-itemFk="{ row }">
-                                <QTd>
+                    <div class="row column full-width justify-between items-start">
-                                    <QIcon
+                        {{ row?.item?.name }}
-                                        name="delete"
+                        <div v-if="row?.item?.subName" class="subName">
-                                        color="primary"
+                            {{ row?.item?.subName.toUpperCase() }}
-                                        size="sm"
-                                        class="cursor-pointer"
-                                        @click.stop="confirmRemove(value)"
-                                    >
-                                        <QTooltip>{{ t('Remove thermograph') }}</QTooltip>
-                                    </QIcon>
-                                </QTd>
-                            </template>
-                        </QTable>
                         </div>
+                    </div>
+                    <FetchedTags :item="row?.item" :max-length="6" />
                 </template>
-            </VnPaginate>
+            </VnTable>
         </div>
         <QPageSticky :offset="[20, 20]" v-if="!order?.isConfirmed">
             <QBtn fab icon="check" color="primary" @click="confirmOrder()" />
@@ -253,7 +280,8 @@ const detailsColumns = ref([
         </QPageSticky>
     </QPage>
 </template>
-<style lang="scss">
+
+<style lang="scss" scoped>
 .order-lines-summary {
     .vn-label-value {
         display: flex;
@@ -274,8 +302,13 @@ const detailsColumns = ref([
         }
     }
 }
-</style>
+
-<style lang="scss" scoped>
+.image-wrapper {
+    height: 50px;
+    width: 50px;
+    margin-left: 30%;
+}
+
 .header {
     color: $primary;
     font-weight: bold;
@@ -284,12 +317,6 @@ const detailsColumns = ref([
     display: inline-block;
 }
 
-.image-wrapper {
-    height: 50px;
-    width: 50px;
-    margin-left: 30%;
-}
-
 .no-result {
     font-size: 24px;
     font-weight: bold;
@@ -302,6 +329,7 @@ const detailsColumns = ref([
     color: var(--vn-label-color);
 }
 </style>
+
 <i18n>
 en:
     summary: Summary

src/pages/Order/OrderList.vue

@@ -1,30 +1,135 @@
 <script setup>
+import axios from 'axios';
 import { useI18n } from 'vue-i18n';
-import { onMounted, onUnmounted } from 'vue';
+import { computed, ref } from 'vue';
-import { useRouter } from 'vue-router';
+import { dashIfEmpty, toCurrency, toDate } from 'src/filters';
-import { useStateStore } from 'stores/useStateStore';
-import { toCurrency, toDate } from 'src/filters';
-import CardList from 'components/ui/CardList.vue';
-import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
-import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
-import VnPaginate from 'components/ui/VnPaginate.vue';
-import VnLv from 'components/ui/VnLv.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import OrderFilter from 'pages/Order/Card/OrderFilter.vue';
 import OrderSummary from 'pages/Order/Card/OrderSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import RightMenu from 'src/components/common/RightMenu.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
-const stateStore = useStateStore();
-const router = useRouter();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
+const tableRef = ref();
+const clientList = ref([]);
+const agencyList = ref([]);
+const selectedAddress = ref();
 
-onMounted(() => (stateStore.rightDrawer = true));
+const columns = computed(() => [
-onUnmounted(() => (stateStore.rightDrawer = false));
+    {
+        align: 'left',
+        name: 'id',
+        label: t('module.id'),
+        chip: {
+            condition: () => true,
+        },
+        isId: true,
+    },
+    {
+        align: 'left',
+        name: 'clientName',
+        label: t('module.customer'),
+        isTitle: true,
+        cardVisible: true,
+        component: 'select',
+        attrs: {
+            url: 'Clients',
+            fields: ['id', 'name'],
+        },
+        columnField: {
+            component: null,
+        },
+    },
+    {
+        align: 'left',
+        name: 'name',
+        label: t('module.salesPerson'),
+        component: 'select',
+        attrs: {
+            url: 'Workers/activeWithInheritedRole',
+            fields: ['id', 'name'],
+            where: { role: 'salesPerson' },
+        },
+        columnField: {
+            component: null,
+        },
+    },
+    {
+        align: 'left',
+        name: 'isConfirmed',
+        label: t('module.isConfirmed'),
+    },
+    {
+        align: 'left',
+        name: 'created',
+        label: t('module.created'),
+        component: 'date',
+        cardVisible: true,
+        format: (row) => toDate(row?.landed),
+        columnField: {
+            component: null,
+        },
+    },
+    {
+        align: 'left',
+        name: 'landed',
+        label: t('module.landed'),
+        component: 'date',
+        format: (row) => toDate(row?.landed),
+        columnField: {
+            component: null,
+        },
+        style: 'color="positive"',
+    },
+    {
+        align: 'left',
+        name: 'hour',
+        label: t('module.hour'),
+        format: ({ hourTheoretical, hourEffective }) =>
+            dashIfEmpty(hourTheoretical || hourEffective),
+    },
+    {
+        align: 'left',
+        name: 'agencyName',
+        label: t('module.agency'),
+        component: 'select',
+        cardVisible: true,
+        attrs: {
+            url: 'Agencies',
+            fields: ['id', 'name'],
+        },
+        columnField: {
+            component: null,
+        },
+    },
+    {
+        align: 'left',
+        name: 'total',
+        label: t('module.total'),
+        format: ({ total }) => toCurrency(total),
+        cardVisible: true,
+    },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('InvoiceOutSummary'),
+                icon: 'preview',
+                action: (row) => viewSummary(row.id, OrderSummary),
+            },
+        ],
+    },
+]);
 
-function navigate(id) {
+async function fetchClientAddress(id, data) {
-    router.push({ path: `/order/${id}` });
+    console.log('data: ', data);
+    const clientData = await axios.get(`Clients/${id}`);
+    selectedAddress.value = clientData.data.defaultAddressFk;
+    data.addressId = selectedAddress.value;
 }
 </script>
 <template>
@@ -33,100 +138,53 @@ function navigate(id) {
         :label="t('Search order')"
         :info="t('You can search orders by reference')"
     />
-    <RightMenu>
+    <VnTable
-        <template #right-panel>
+        ref="tableRef"
-            <OrderFilter data-key="OrderList" />
-        </template>
-    </RightMenu>
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
         data-key="OrderList"
         url="Orders/filter"
-                :limit="20"
+        :create="{
-                :order="['landed DESC', 'clientFk', 'id DESC']"
+            urlCreate: 'Orders/new',
-                :user-params="{ showEmpty: false }"
+            title: 'Create Order',
-                :keep-opts="['userParams']"
+            onDataSaved: (url) => {
+                tableRef.redirect(url);
+            },
+            formInitialData: {
+                active: true,
+                addressId: null,
+            },
+        }"
+        :columns="columns"
+        default-mode="table"
+        redirect="order"
         auto-load
     >
-                <template #body="{ rows }">
+        <template #more-create-dialog="{ data }">
-                    <CardList
+            <VnSelect
-                        v-for="row of rows"
+                url="Clients"
-                        :key="row.id"
+                v-model="data.id"
-                        :id="row.id"
+                :label="t('module.customer')"
-                        :title="`${row?.clientName} (${row?.clientFk})`"
+                :options="clientList"
-                        @click="navigate(row.id)"
+                option-value="id"
-                    >
+                option-label="name"
-                        <template #list-items>
+                @update:model-value="(id) => fetchClientAddress(id, data)"
-                            <VnLv
-                                :label="t('order.field.salesPersonFk')"
-                                :title-label="t('order.field.salesPersonFk')"
-                            >
-                                <template #value>
-                                    <span class="link" @click.stop>
-                                        {{ row?.name || '-' }}
-                                        <WorkerDescriptorProxy :id="row?.salesPersonFk" />
-                                    </span>
-                                </template>
-                            </VnLv>
-                            <VnLv
-                                :label="t('order.field.clientFk')"
-                                :title-label="t('order.field.clientFk')"
-                            >
-                                <template #value>
-                                    <span class="link" @click.stop>
-                                        {{ row?.clientName || '-' }}
-                                        <CustomerDescriptorProxy :id="row?.clientFk" />
-                                    </span>
-                                </template>
-                            </VnLv>
-                            <VnLv
-                                :label="t('order.field.isConfirmed')"
-                                :value="row?.isConfirmed === 1"
             />
-                            <VnLv
+            <VnSelect
-                                :label="t('order.field.created')"
+                url="Clients"
-                                :value="toDate(row?.created)"
+                v-model="selectedAddress"
+                :label="t('module.address')"
+                :options="selectedAddress"
+                option-value="defaultAddressFk"
+                option-label="street"
             />
-                            <VnLv :label="t('order.field.landed')">
+            <VnInputDate v-model="data.landed" :label="t('module.landed')" />
-                                <template #value>
+            <VnSelect
-                                    <QBadge text-color="black" color="positive" dense>
+                url="Agencies"
-                                        {{ toDate(row?.landed) }}
+                v-model="data.agencyModeId"
-                                    </QBadge>
+                :label="t('module.agency')"
-                                </template>
+                :options="agencyList"
-                            </VnLv>
+                option-value="id"
-                            <VnLv
+                option-label="name"
-                                :label="t('order.field.hour')"
-                                :value="row.hourTheoretical || row.hourEffective"
-                            />
-                            <VnLv
-                                :label="t('order.field.agency')"
-                                :value="row?.agencyName"
-                            />
-                            <VnLv
-                                :label="t('order.field.total')"
-                                :value="toCurrency(row?.total)"
             />
         </template>
-                        <template #actions>
+    </VnTable>
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, OrderSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-        <QPageSticky :offset="[20, 20]">
-            <RouterLink :to="{ name: 'OrderCreate' }">
-                <QBtn fab icon="add" color="primary" />
-                <QTooltip>
-                    {{ t('order.list.newOrder') }}
-                </QTooltip>
-            </RouterLink>
-        </QPageSticky>
-    </QPage>
 </template>

src/pages/Order/locale/en.yml

@@ -0,0 +1,22 @@
+module:
+    id: ID
+    name: Name
+    customer: Client
+    isConfirmed: Confirmed
+    created: Created
+    landed: Landed
+    hour: Hour
+    agency: Agency
+    total: Total
+    salesPerson: Sales Person
+    address: Address
+lines:
+    item: Item
+    warehouse: Warehouse
+    shipped: Shipped
+    quantity: Quantity
+    price: Price
+    amount: Amount
+    image: Image
+params:
+    tagGroups: Tags

src/pages/Order/locale/es.yml

@@ -0,0 +1,22 @@
+module:
+    id: ID
+    name: Nombre
+    customer: Cliente
+    isConfirmed: Confirmado
+    created: Creado
+    landed: F. Entrega
+    hour: Hora
+    agency: Agencia
+    total: Total
+    salesPerson: Comercial
+    address: Dirección
+lines:
+    item: Artículo
+    warehouse: Almacén
+    shipped: Envío
+    quantity: Cantidad
+    price: Precio
+    amount: Importe
+    image: Imagen
+params:
+    tagGroups: Tags

src/pages/Ticket/Card/ExpeditionNewTicket.vue

@@ -0,0 +1,78 @@
+<script setup>
+import { reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import VnInput from 'src/components/common/VnInput.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import FormModelPopup from 'components/FormModelPopup.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+
+const $props = defineProps({
+    ticket: {
+        type: Boolean,
+        default: false,
+    },
+    withRoute: {
+        type: Boolean,
+        default: false,
+    },
+    selectedExpeditions: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+const { t } = useI18n();
+const router = useRouter();
+const { notify } = useNotify();
+
+const newTicketFormData = reactive({});
+
+const createTicket = async () => {
+    try {
+        const expeditionIds = $props.selectedExpeditions.map(
+            (expedition) => expedition.id
+        );
+        const params = {
+            clientId: $props.ticket.clientFk,
+            landed: newTicketFormData.landed,
+            warehouseId: $props.ticket.warehouseFk,
+            addressId: $props.ticket.addressFk,
+            agencyModeId: $props.ticket.agencyModeFk,
+            routeId: newTicketFormData.routeFk,
+            expeditionIds: expeditionIds,
+        };
+
+        const { data } = await axios.post('Expeditions/moveExpeditions', params);
+        notify(t('globals.dataSaved'), 'positive');
+        router.push({ name: 'TicketSummary', params: { id: data.id } });
+    } catch (error) {
+        console.error(error);
+    }
+};
+</script>
+
+<template>
+    <FormModelPopup
+        model="expeditionNewTicket"
+        :form-initial-data="newTicketFormData"
+        :save-fn="createTicket"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInputDate :label="t('expedition.landed')" v-model="data.landed" />
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    v-if="withRoute"
+                    :label="t('expedition.routeId')"
+                    v-model="data.routeFk"
+                />
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>

src/pages/Ticket/Card/TicketComponents.vue

@@ -0,0 +1,354 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import FetchData from 'components/FetchData.vue';
+import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { dashIfEmpty } from 'src/filters';
+import { useArrayData } from 'composables/useArrayData';
+import { toCurrency } from 'filters/index';
+import axios from 'axios';
+
+const route = useRoute();
+const stateStore = useStateStore();
+const { t } = useI18n();
+const salesRef = ref(null);
+const arrayData = useArrayData('ticketData');
+const { store } = arrayData;
+
+const ticketData = computed(() => store.data);
+const components = ref([]);
+const componentsList = ref([]);
+const theoricalCost = ref(0);
+const ticketVolume = ref(null);
+
+watch(
+    () => ticketData.value,
+    async () => {
+        await nextTick();
+        salesRef.value.fetch();
+        getComponentsSum();
+        getTheoricalCost();
+        if (ticketData.value?.zone && ticketData.value?.zone?.isVolumetric)
+            getTicketVolume();
+    },
+    { immediate: true }
+);
+
+const salesFilter = computed(() => ({
+    order: 'concept ASC',
+    include: [
+        {
+            relation: 'item',
+        },
+        {
+            relation: 'components',
+            scope: {
+                fields: ['componentFk', 'value'],
+                include: {
+                    relation: 'component',
+                    scope: {
+                        fields: ['typeFk', 'name'],
+                        include: {
+                            relation: 'componentType',
+                            scope: {
+                                fields: ['type', 'isBase', 'name'],
+                            },
+                        },
+                    },
+                },
+            },
+        },
+    ],
+    where: { ticketFk: route.params.id },
+}));
+
+const columns = computed(() => [
+    {
+        label: t('components.item'),
+        name: 'item',
+        align: 'left',
+    },
+    {
+        label: t('components.description'),
+        name: 'description',
+        align: 'left',
+    },
+    {
+        label: t('components.quantity'),
+        name: 'quantity',
+        field: 'quantity',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('components.serie'),
+        name: 'serie',
+        align: 'left',
+    },
+    {
+        label: t('components.components'),
+        name: 'components',
+        align: 'left',
+    },
+    {
+        label: t('components.import'),
+        name: 'import',
+        align: 'left',
+    },
+    {
+        label: t('components.total'),
+        name: 'total',
+        align: 'left',
+    },
+]);
+
+const getBase = computed(() => {
+    let sum = 0;
+    for (let sale of components.value) {
+        for (let saleComponent of sale.components) {
+            if (saleComponent.component.componentType.isBase) {
+                sum += sale.quantity * saleComponent.value;
+            }
+        }
+    }
+    return sum;
+});
+
+const getTotal = computed(() => {
+    let total = 0;
+    for (let sale of components.value) {
+        for (let saleComponent of sale.components) {
+            total += sale.quantity * saleComponent.value;
+        }
+    }
+    return total;
+});
+
+const getComponentsSum = async () => {
+    try {
+        const { data } = await axios.get(`Tickets/${route.params.id}/getComponentsSum`);
+        componentsList.value = data;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const getTheoricalCost = async () => {
+    try {
+        const { data } = await axios.get(`Tickets/${route.params.id}/freightCost`);
+        theoricalCost.value = data;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const getTicketVolume = async () => {
+    try {
+        if (!ticketData.value) return;
+        const { data } = await axios.get(`Tickets/${ticketData.value.id}/getVolume`);
+        ticketVolume.value = data[0].volume;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+onMounted(() => {
+    stateStore.rightDrawer = true;
+});
+
+onUnmounted(() => (stateStore.rightDrawer = false));
+</script>
+
+<template>
+    <FetchData
+        ref="salesRef"
+        url="Sales"
+        :filter="salesFilter"
+        @on-fetch="(data) => (components = data)"
+        auto-load
+    />
+    <RightMenu>
+        <template #right-panel>
+            <QCard
+                class="q-pa-sm color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
+                <QCardSection horizontal>
+                    <span class="text-weight-bold text-subtitle1 text-center full-width">
+                        {{ t('components.total') }}
+                    </span>
+                </QCardSection>
+                <QCardSection horizontal>
+                    <span class="q-mr-xs color-vn-label"
+                        >{{ t('components.baseToCommission') }}:
+                    </span>
+                    <span>{{ toCurrency(getBase) }}</span>
+                </QCardSection>
+                <QCardSection horizontal>
+                    <span class="q-mr-xs color-vn-label"
+                        >{{ t('components.totalWithoutVat') }}:
+                    </span>
+                    <span>{{ toCurrency(getTotal) }}</span>
+                </QCardSection>
+            </QCard>
+            <QCard
+                class="q-pa-sm color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
+                <QCardSection horizontal>
+                    <span class="text-weight-bold text-subtitle1 text-center full-width">
+                        {{ t('components.components') }}
+                    </span>
+                </QCardSection>
+                <QCardSection
+                    v-for="(component, index) in componentsList"
+                    :key="index"
+                    horizontal
+                >
+                    <span v-if="component.name" class="q-mr-xs color-vn-label">
+                        {{ component.name }}:
+                    </span>
+                    <span v-if="component.value">{{
+                        toCurrency(component.value, 'EUR', 3)
+                    }}</span>
+                </QCardSection>
+            </QCard>
+            <QCard
+                class="q-pa-sm color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
+                <QCardSection horizontal>
+                    <span class="text-weight-bold text-subtitle1 text-center full-width">
+                        {{ t('components.zoneBreakdown') }}
+                    </span>
+                </QCardSection>
+                <QCardSection horizontal>
+                    <span class="q-mr-xs color-vn-label">
+                        {{ t('components.price') }}:
+                    </span>
+                    <span>{{ toCurrency(ticketData?.zonePrice, 'EUR', 2) }}</span>
+                </QCardSection>
+                <QCardSection horizontal>
+                    <span class="q-mr-xs color-vn-label">
+                        {{ t('components.bonus') }}:
+                    </span>
+                    <span>{{ toCurrency(ticketData?.zoneBonus, 'EUR', 2) }}</span>
+                </QCardSection>
+                <QCardSection horizontal>
+                    <span class="q-mr-xs color-vn-label">
+                        {{ t('components.zone') }}:
+                    </span>
+                    <span class="link">
+                        {{ dashIfEmpty(ticketData?.zone?.name) }}
+                        <ZoneDescriptorProxy :id="ticketData?.zone?.id" />
+                    </span>
+                </QCardSection>
+                <QCardSection v-if="ticketData?.zone?.isVolumetric" horizontal>
+                    <span class="q-mr-xs color-vn-label">
+                        {{ t('components.volume') }}:
+                    </span>
+                    <span>{{ ticketVolume }}</span>
+                </QCardSection>
+                <QCardSection horizontal>
+                    <span class="q-mr-xs color-vn-label">
+                        {{ t('components.packages') }}:
+                    </span>
+                    <span>{{ dashIfEmpty(ticketData?.packages) }}</span>
+                </QCardSection>
+            </QCard>
+            <QCard
+                class="q-pa-sm color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
+                <QCardSection horizontal>
+                    <span class="text-weight-bold text-subtitle1 text-center full-width">
+                        {{ t('components.theoricalCost') }}
+                    </span>
+                </QCardSection>
+                <QCardSection horizontal>
+                    <span class="q-mr-xs color-vn-label">
+                        {{ t('components.totalPrice') }}:
+                    </span>
+                    <span>{{ toCurrency(theoricalCost, 'EUR', 2) }}</span>
+                </QCardSection>
+            </QCard>
+        </template>
+    </RightMenu>
+    <QTable
+        :rows="components"
+        :columns="columns"
+        row-key="id"
+        :pagination="{ rowsPerPage: 0 }"
+        class="full-width q-mt-md"
+        :no-data-label="t('globals.noResults')"
+    >
+        <template #body-cell-item="{ row }">
+            <QTd>
+                <QBtn flat color="primary">
+                    <span class="link">{{ row.itemFk }}</span>
+                    <ItemDescriptorProxy :id="row.itemFk" />
+                </QBtn>
+            </QTd>
+        </template>
+        <template #body-cell-description="{ row }">
+            <QTd>
+                <div class="column">
+                    <span>{{ row.item.name }}</span>
+                    <span class="color-vn-label">{{ row.item.subName }}</span>
+                    <FetchedTags :item="row.item" :max-length="6" />
+                </div>
+            </QTd>
+        </template>
+        <template #body-cell-serie="{ row }">
+            <QTd>
+                <div class="column">
+                    <span v-for="(saleComponent, index) in row.components" :key="index">
+                        {{ saleComponent.component?.componentType?.name }}
+                    </span>
+                </div>
+            </QTd>
+        </template>
+        <template #body-cell-components="{ row }">
+            <QTd>
+                <div class="column">
+                    <span v-for="(saleComponent, index) in row.components" :key="index">
+                        {{ saleComponent.component?.name }}
+                    </span>
+                </div>
+            </QTd>
+        </template>
+        <template #body-cell-import="{ row }">
+            <QTd>
+                <div class="column text-right">
+                    <span v-for="(saleComponent, index) in row.components" :key="index">
+                        {{ toCurrency(saleComponent.value, 'EUR', 3) }}
+                    </span>
+                </div>
+            </QTd>
+        </template>
+        <template #body-cell-total="{ row }">
+            <QTd>
+                <div class="column text-right">
+                    <span v-for="(saleComponent, index) in row.components" :key="index">
+                        {{ toCurrency(saleComponent.value * row.quantity, 'EUR', 3) }}
+                    </span>
+                </div>
+            </QTd>
+        </template>
+    </QTable>
+</template>

src/pages/Ticket/Card/TicketDescriptor.vue

@@ -66,6 +66,23 @@ const filter = {
                 fields: ['id', 'name'],
             },
         },
+        {
+            relation: 'zone',
+            scope: {
+                fields: [
+                    'agencyModeFk',
+                    'bonus',
+                    'hour',
+                    'id',
+                    'isVolumetric',
+                    'itemMaxSize',
+                    'm3Max',
+                    'name',
+                    'price',
+                    'travelingDays',
+                ],
+            },
+        },
     ],
 };
 

src/pages/Ticket/Card/TicketExpedition.vue

@@ -0,0 +1,474 @@
+<script setup>
+import { onMounted, ref, computed, onUnmounted, reactive, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import TicketEditManaProxy from './TicketEditMana.vue';
+import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import ExpeditionNewTicket from './ExpeditionNewTicket.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { toCurrency, toPercentage } from 'src/filters';
+import { useArrayData } from 'composables/useArrayData';
+import { useVnConfirm } from 'composables/useVnConfirm';
+import useNotify from 'src/composables/useNotify.js';
+import { toDateTimeFormat } from 'src/filters/date';
+import axios from 'axios';
+
+const route = useRoute();
+const stateStore = useStateStore();
+const { t } = useI18n();
+const { notify } = useNotify();
+const { openConfirmationModal } = useVnConfirm();
+const editPriceProxyRef = ref(null);
+const newTicketDialogRef = ref(null);
+const logsTableDialogRef = ref(null);
+
+const expeditionsLogsData = ref([]);
+const selectedExpeditions = ref([]);
+const allColumnNames = ref([]);
+const visibleColumns = ref([]);
+const newTicketWithRoute = ref(false);
+const itemsOptions = ref([]);
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'expeditionFk':
+            return { id: value };
+        case 'packageItemName':
+            return { packagingItemFk: value };
+    }
+};
+
+const expeditionsFilter = computed(() => ({
+    where: { ticketFk: route.params.id },
+    order: ['created DESC'],
+}));
+
+const expeditionsArrayData = useArrayData('ticketExpeditions', {
+    url: 'Expeditions/filter',
+    filter: expeditionsFilter.value,
+    exprBuilder: exprBuilder,
+});
+const expeditionsStore = expeditionsArrayData.store;
+const ticketExpeditions = computed(() => expeditionsStore.data);
+
+const ticketArrayData = useArrayData('ticketData');
+const ticketStore = ticketArrayData.store;
+const ticketData = computed(() => ticketStore.data);
+
+const refetchExpeditions = async () => {
+    await expeditionsArrayData.applyFilter({
+        params: { filter: JSON.stringify(expeditionsFilter.value) },
+    });
+};
+
+watch(
+    () => route.params.id,
+    async () => await refetchExpeditions(),
+    { immediate: true }
+);
+
+const params = reactive({});
+
+const applyColumnFilter = async (col) => {
+    try {
+        const paramKey = col.columnFilter?.filterParamKey || col.field;
+        params[paramKey] = col.columnFilter.filterValue;
+        await expeditionsArrayData.addFilter({ params });
+    } catch (err) {
+        console.error('Error applying column filter', err);
+    }
+};
+
+const getInputEvents = (col) => {
+    return col.columnFilter.type === 'select'
+        ? { 'update:modelValue': () => applyColumnFilter(col) }
+        : {
+              'keyup.enter': () => applyColumnFilter(col),
+          };
+};
+
+const columns = computed(() => [
+    {
+        label: t('expedition.id'),
+        name: 'id',
+        field: 'id',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterParamKey: 'expeditionFk',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('expedition.item'),
+        name: 'item',
+        align: 'left',
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterParamKey: 'packageItemName',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('expedition.name'),
+        name: 'name',
+        field: 'packageItemName',
+        align: 'left',
+        columnFilter: {
+            component: VnSelect,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: itemsOptions.value,
+                'option-value': 'id',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('expedition.packageType'),
+        name: 'packageType',
+        field: 'freightItemName',
+        align: 'left',
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            // filterParamKey: 'expeditionFk',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('expedition.counter'),
+        name: 'counter',
+        field: 'counter',
+        align: 'left',
+        columnFilter: null,
+    },
+    {
+        label: t('expedition.externalId'),
+        name: 'externalId',
+        field: 'externalId',
+        align: 'left',
+        columnFilter: null,
+    },
+    {
+        label: t('expedition.created'),
+        name: 'created',
+        field: 'created',
+        align: 'left',
+        columnFilter: null,
+        format: (value) => toDateTimeFormat(value),
+    },
+    {
+        label: t('expedition.state'),
+        name: 'state',
+        field: 'state',
+        align: 'left',
+        columnFilter: null,
+    },
+    {
+        label: '',
+        name: 'history',
+        align: 'left',
+        columnFilter: null,
+    },
+]);
+
+const logTableColumns = computed(() => [
+    {
+        label: t('expedition.state'),
+        name: 'state',
+        field: 'state',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('expedition.name'),
+        name: 'name',
+        align: 'name',
+        columnFilter: null,
+    },
+    {
+        label: t('expedition.created'),
+        name: 'created',
+        field: 'created',
+        align: 'left',
+        columnFilter: null,
+        format: (value) => toDateTimeFormat(value),
+    },
+]);
+
+const showNewTicketDialog = (withRoute = false) => {
+    newTicketWithRoute.value = withRoute;
+    newTicketDialogRef.value.show();
+};
+
+const deleteExpedition = async () => {
+    try {
+        const expeditionIds = selectedExpeditions.value.map(
+            (expedition) => expedition.id
+        );
+        const params = { expeditionIds };
+        await axios.post('Expeditions/deleteExpeditions', params);
+        await refetchExpeditions();
+        selectedExpeditions.value = [];
+        notify(t('expedition.expeditionRemoved'), 'positive');
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const showLog = async (expedition) => {
+    await getExpeditionState(expedition);
+    logsTableDialogRef.value.show();
+};
+
+const getExpeditionState = async (expedition) => {
+    try {
+        const filter = {
+            where: { expeditionFk: expedition.id },
+            order: ['created DESC'],
+        };
+
+        const { data } = await axios.get(`ExpeditionStates/filter`, {
+            params: { filter: JSON.stringify(filter) },
+        });
+        expeditionsLogsData.value = data;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+    const filteredColumns = columns.value.filter((col) => col.name !== 'history');
+    allColumnNames.value = filteredColumns.map((col) => col.name);
+    // await expeditionsArrayData.fetch({ append: false });
+});
+
+onUnmounted(() => (stateStore.rightDrawer = false));
+</script>
+
+<template>
+    <FetchData
+        url="Items"
+        auto-load
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        @on-fetch="(data) => (itemsOptions = data)"
+    />
+    <VnSubToolbar>
+        <template #st-data>
+            <TableVisibleColumns
+                :all-columns="allColumnNames"
+                table-code="expeditionIndex"
+                labels-traductions-path="expedition"
+                @on-config-saved="visibleColumns = [...$event, 'history']"
+            />
+        </template>
+        <template #st-actions>
+            <QBtnGroup push class="q-gutter-x-sm" flat>
+                <QBtnDropdown
+                    ref="btnDropdownRef"
+                    color="primary"
+                    :label="t('expedition.move')"
+                    :disable="!selectedExpeditions.length"
+                >
+                    <template #label>
+                        <QTooltip>{{ t('Select lines to see the options') }}</QTooltip>
+                    </template>
+                    <QList>
+                        <QItem
+                            clickable
+                            v-close-popup
+                            v-ripple
+                            @click="showNewTicketDialog(false)"
+                        >
+                            <QItemSection>
+                                <QItemLabel>{{
+                                    t('expedition.newTicketWithoutRoute')
+                                }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                        <QItem
+                            clickable
+                            v-close-popup
+                            v-ripple
+                            @click="showNewTicketDialog(true)"
+                        >
+                            <QItemSection>
+                                <QItemLabel>{{
+                                    t('expedition.newTicketWithRoute')
+                                }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </QList>
+                </QBtnDropdown>
+                <QBtn
+                    :disable="!selectedExpeditions.length"
+                    icon="delete"
+                    color="primary"
+                    @click="
+                        openConfirmationModal(
+                            '',
+                            t('expedition.removeExpeditionSubtitle'),
+                            deleteExpedition
+                        )
+                    "
+                />
+            </QBtnGroup>
+        </template>
+    </VnSubToolbar>
+
+    <QTable
+        :rows="ticketExpeditions"
+        :columns="columns"
+        row-key="id"
+        :pagination="{ rowsPerPage: 0 }"
+        class="full-width q-mt-md"
+        selection="multiple"
+        v-model:selected="selectedExpeditions"
+        :visible-columns="visibleColumns"
+        :no-data-label="t('globals.noResults')"
+    >
+        <template #top-row="{ cols }">
+            <QTr>
+                <QTd />
+                <QTd v-for="(col, index) in cols" :key="index" style="max-width: 100px">
+                    <component
+                        :is="col.columnFilter.component"
+                        v-if="col.columnFilter"
+                        v-model="col.columnFilter.filterValue"
+                        v-bind="col.columnFilter.attrs"
+                        v-on="col.columnFilter.event(col)"
+                        dense
+                    />
+                </QTd>
+            </QTr>
+        </template>
+        <template #body-cell-item="{ row }">
+            <QTd auto-width @click.stop>
+                <QBtn flat color="primary">{{ row.packagingItemFk }}</QBtn>
+                <ItemDescriptorProxy :id="row.packagingItemFk" />
+            </QTd>
+        </template>
+        <template #body-cell-available="{ row }">
+            <QTd @click.stop>
+                <QBadge :color="row.available < 0 ? 'alert' : 'transparent'" dense>
+                    {{ row.available }}
+                </QBadge>
+            </QTd>
+        </template>
+
+        <template #body-cell-price="{ row }">
+            <QTd>
+                <template v-if="isTicketEditable && row.id">
+                    <QBtn flat color="primary" dense @click="onOpenEditPricePopover(row)">
+                        {{ toCurrency(row.price) }}
+                    </QBtn>
+                    <TicketEditManaProxy
+                        ref="editPriceProxyRef"
+                        :mana="mana"
+                        :new-price="getNewPrice"
+                        @save="updatePrice(row)"
+                    >
+                        <VnInput
+                            v-model.number="edit.price"
+                            :label="t('ticketSale.price')"
+                            type="number"
+                        />
+                    </TicketEditManaProxy>
+                </template>
+                <span v-else>{{ toCurrency(row.price) }}</span>
+            </QTd>
+        </template>
+        <template #body-cell-discount="{ row }">
+            <QTd>
+                <template v-if="!isLocked && row.id">
+                    <QBtn
+                        flat
+                        color="primary"
+                        dense
+                        @click="onOpenEditDiscountPopover(row)"
+                    >
+                        {{ toPercentage(row.discount / 100) }}
+                    </QBtn>
+                    <TicketEditManaProxy
+                        :mana="mana"
+                        :new-price="getNewPrice"
+                        @save="changeDiscount(row)"
+                    >
+                        <VnInput
+                            v-model.number="edit.discount"
+                            :label="t('ticketSale.discount')"
+                            type="number"
+                        />
+                    </TicketEditManaProxy>
+                </template>
+                <span v-else>{{ toPercentage(row.discount / 100) }}</span>
+            </QTd>
+        </template>
+        <template #body-cell-history="{ row }">
+            <QTd>
+                <QBtn
+                    @click.stop="showLog(row)"
+                    color="primary"
+                    icon="history"
+                    size="md"
+                    flat
+                >
+                    <QTooltip class="text-no-wrap">
+                        {{ t('expedition.historyAction') }}
+                    </QTooltip>
+                </QBtn>
+            </QTd>
+        </template>
+    </QTable>
+    <QDialog ref="newTicketDialogRef" transition-show="scale" transition-hide="scale">
+        <ExpeditionNewTicket
+            :ticket="ticketData"
+            :with-route="newTicketWithRoute"
+            :selected-expeditions="selectedExpeditions"
+        />
+    </QDialog>
+    <QDialog ref="logsTableDialogRef" transition-show="scale" transition-hide="scale">
+        <QTable
+            ref="tableRef"
+            data-key="TicketExpeditionLog"
+            :rows="expeditionsLogsData"
+            :columns="logTableColumns"
+            class="q-pa-sm"
+        >
+            <template #body-cell-name="{ row }">
+                <QTd auto-width>
+                    <QBtn flat dense color="primary">{{ row.name }}</QBtn>
+                    <WorkerDescriptorProxy :id="row.workerFk" />
+                </QTd>
+            </template>
+        </QTable>
+    </QDialog>
+</template>

src/pages/Ticket/Card/TicketPackage.vue

@@ -0,0 +1,132 @@
+<script setup>
+import { ref, watch, computed, reactive } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CrudModel from 'components/CrudModel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+
+import { useArrayData } from 'src/composables/useArrayData';
+
+const route = useRoute();
+const { t } = useI18n();
+const ticketPackagingsCrudRef = ref(null);
+const listPackagingsOptions = ref([]);
+const arrayData = useArrayData('TicketPackagings');
+const { store } = arrayData;
+
+const crudModelFilter = reactive({
+    fields: ['id', 'ticketFk', 'packagingFk', 'quantity', 'created'],
+    where: { ticketFk: route.params.id },
+});
+
+const crudModelRequiredData = computed(() => ({
+    packagingFk: null,
+    quantity: 0,
+    created: Date.vnNew(),
+    ticketFk: route.params.id,
+}));
+
+const handleInputQuantityClear = (row) => {
+    if (row.quantity === null || row.quantity === undefined) row.quantity = 0;
+};
+
+watch(
+    () => route.params.id,
+    async () => {
+        crudModelFilter.where.ticketFk = route.params.id;
+        store.filter = crudModelFilter;
+        await ticketPackagingsCrudRef.value.reload();
+    }
+);
+</script>
+
+<template>
+    <FetchData
+        @on-fetch="(data) => (listPackagingsOptions = data)"
+        auto-load
+        :filter="{ fields: ['packagingFk', 'name'], order: 'name ASC', limit: 30 }"
+        url="Packagings/listPackaging"
+    />
+    <div class="flex justify-center">
+        <CrudModel
+            ref="ticketPackagingsCrudRef"
+            data-key="TicketPackagings"
+            url="TicketPackagings"
+            model="TicketPackagings"
+            :filter="crudModelFilter"
+            :data-required="crudModelRequiredData"
+            :default-remove="false"
+            auto-load
+            style="max-width: 800px"
+        >
+            <template #body="{ rows, validate }">
+                <QCard class="q-px-lg q-py-md">
+                    <div
+                        v-for="(row, index) in rows"
+                        :key="index"
+                        class="q-mb-md row items-center q-gutter-x-md"
+                    >
+                        <VnSelect
+                            :label="t('package.package')"
+                            :options="listPackagingsOptions"
+                            hide-selected
+                            option-label="name"
+                            option-value="packagingFk"
+                            v-model="row.packagingFk"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>
+                                            {{ scope.opt?.name }}
+                                        </QItemLabel>
+                                        <QItemLabel caption>
+                                            #{{ scope.opt?.itemFk }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelect>
+                        <VnInput
+                            :label="t('package.quantity')"
+                            v-model.number="row.quantity"
+                            class="col"
+                            type="number"
+                            min="1"
+                            :required="true"
+                            @update:model-value="handleInputQuantityClear(row)"
+                            :rules="validate('TicketPackaging.quantity')"
+                        />
+                        <VnInputDate :label="t('package.added')" v-model="row.created" />
+                        <QIcon
+                            name="delete"
+                            size="sm"
+                            class="cursor-pointer"
+                            color="primary"
+                            @click="ticketPackagingsCrudRef.remove([row])"
+                        >
+                            <QTooltip>
+                                {{ t('package.removePackage') }}
+                            </QTooltip>
+                        </QIcon>
+                    </div>
+                    <QIcon
+                        name="add_circle"
+                        class="fill-icon-on-hover q-ml-md"
+                        size="sm"
+                        color="primary"
+                        @click="ticketPackagingsCrudRef.insert()"
+                    >
+                        <QTooltip>
+                            {{ t('package.addPackage') }}
+                        </QTooltip>
+                    </QIcon>
+                </QCard>
+            </template>
+        </CrudModel>
+    </div>
+</template>

src/pages/Ticket/Card/TicketPicture.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import CatalogItem from 'components/ui/CatalogItem.vue';
+
+import { toCurrency } from 'filters/index';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const salesFilter = {
+    include: {
+        relation: 'item',
+        scope: {
+            field: ['name', 'image'],
+        },
+    },
+    where: { ticketFk: route.params.id },
+};
+const sales = ref([]);
+</script>
+
+<template>
+    <FetchData
+        ref="salesRef"
+        url="sales"
+        :filter="salesFilter"
+        @on-fetch="(data) => (sales = data)"
+        auto-load
+    />
+    <div class="pictures-list">
+        <CatalogItem v-for="(sale, index) in sales" :key="index" :item="sale.item">
+            <template #price>
+                <div class="q-mt-md full-width row justify-between items-center">
+                    <span class="text-h6">{{ sale.quantity }}</span>
+                    <span>{{ t('by') }}</span>
+                    <span class="text-h6">{{ toCurrency(sale?.price) }}</span>
+                </div>
+            </template>
+        </CatalogItem>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.pictures-list {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 16px;
+}
+</style>
+
+<i18n>
+es:
+    by: por
+</i18n>

src/pages/Ticket/Card/TicketSale.vue

@@ -515,8 +515,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             </QBtnGroup>
         </template>
     </VnSubToolbar>
-    <RightMenu>
+    <QDrawer side="right" :width="270" v-model="stateStore.rightDrawer">
-        <template #right-panel>
         <div
             class="q-pa-md q-mb-md q-ma-md color-vn-text"
             style="border: 2px solid black"
@@ -528,9 +527,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 <span>{{ toCurrency(store.data?.totalWithoutVat) }}</span>
             </QCardSection>
             <QCardSection class="justify-center text-subtitle1" horizontal>
-                    <span class="q-mr-xs color-vn-label">
+                <span class="q-mr-xs color-vn-label"> {{ t('ticketSale.tax') }}: </span>
-                        {{ t('ticketSale.tax') }}:
-                    </span>
                 <span>{{
                     toCurrency(store.data?.totalWithVat - store.data?.totalWithoutVat)
                 }}</span>
@@ -539,14 +536,11 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 class="justify-center text-weight-bold text-subtitle1"
                 horizontal
             >
-                    <span class="q-mr-xs color-vn-label">
+                <span class="q-mr-xs color-vn-label"> {{ t('ticketSale.total') }}: </span>
-                        {{ t('ticketSale.total') }}:
-                    </span>
                 <span>{{ toCurrency(store.data?.totalWithVat) }}</span>
             </QCardSection>
-            </div>
+        </div></QDrawer
-        </template>
+    >
-    </RightMenu>
     <QTable
         :rows="sales"
         :columns="columns"
@@ -774,6 +768,5 @@ es:
     Continue anyway?: ¿Continuar de todas formas?
     You are going to delete lines of the ticket: Vas a eliminar lineas del ticket
     Add item: Añadir artículo
-    Select lines to see the options: Selecciona líneas para ver las opciones
     Transfer lines: Transferir líneas
 </i18n>

src/pages/Ticket/Card/TicketService.vue

@@ -77,7 +77,6 @@ const getDefaultTaxClass = async () => {
             params: { filter: JSON.stringify(filter) },
         });
         defaultTaxClass.value = data;
-        console.log('defaultTaxClass', defaultTaxClass.value);
     } catch (error) {
         console.error(error);
     }

src/pages/Ticket/TicketFilter.vue

@@ -6,7 +6,6 @@ import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
-import toDateString from 'filters/toDateString';
 import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();

src/pages/Ticket/TicketList.vue

@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import { toDate, toDateString, toCurrency } from 'src/filters/index';
 import TicketSummary from './Card/TicketSummary.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import TicketFilter from './TicketFilter.vue';

src/pages/Ticket/locale/en.yml

@@ -93,6 +93,25 @@ futureTickets:
     moveTicketSuccess: Tickets moved successfully!
     searchInfo: Search future tickets by date
     futureTicket: Future tickets
+expedition:
+    id: Expedition
+    item: Item
+    name: Name
+    packageType: Package type
+    counter: Counter
+    externalId: externalId
+    created: Created
+    state: State
+    historyAction: Status log
+    newTicketWithRoute: New ticket with route
+    newTicketWithoutRoute: New ticket without route
+    landed: Landed
+    routeId: Route id
+    deleteExpedition: Delete expedition
+    expeditionRemoved: Expedition removed
+    removeExpeditionSubtitle: Are you sure you want to delete this expedition?
+    worker: Worker
+    move: Move
 basicData:
     next: Next
     back: Back
@@ -177,8 +196,32 @@ service:
     addService: Add service
     quantityInfo: To create services with negative amounts mark the service on the source ticket and press the pay button.
     createRefundSuccess: 'The following refund ticket have been created: { ticketId }'
+components:
+    item: Item
+    description: Description
+    quantity: Quantity
+    serie: Serie
+    components: Components
+    import: Import
+    total: Total
+    baseToCommission: Base to commission
+    totalWithoutVat: Total without VAT
+    zoneBreakdown: Zone breakdown
+    price: Price
+    bonus: Bonus
+    zone: Zone
+    volume: Volume
+    theoricalCost: Theorical cost
+    totalPrice: Total price
+    packages: Packages
 tracking:
     state: State
     worker: Worker
     created: Created
     addState: Add state
+package:
+    package: Package
+    quantity: Quantity
+    added: Added
+    addPackage: Add package
+    removePackage: Remove package

src/pages/Ticket/locale/es.yml

@@ -164,6 +164,49 @@ ticketSale:
     shipped: F. Envío
     agency: Agencia
     address: Consignatario
+components:
+    item: Artículo
+    description: Descripción
+    quantity: Cantidad
+    serie: Serie
+    components: Componentes
+    import: Importe
+    total: Total
+    baseToCommission: Base comisionable
+    totalWithoutVat: Total sin IVA
+    zoneBreakdown: Desglose zona
+    price: Precio
+    bonus: Bonificación
+    zone: Zona
+    volume: Volúmen
+    theoricalCost: Porte teórico
+    totalPrice: Precio total
+    packages: Bultos
+expedition:
+    id: Expedición
+    item: Artículo
+    name: Nombre
+    packageType: Package type
+    counter: Contador
+    externalId: externalId
+    created: Fecha creación
+    state: Estado
+    historyAction: Historial de estados
+    newTicketWithRoute: Nuevo ticket con ruta
+    newTicketWithoutRoute: Nuevo ticket sin ruta
+    landed: F. entrega
+    routeId: Id ruta
+    deleteExpedition: Eliminar expedición
+    expeditionRemoved: Expedición eliminada
+    removeExpeditionSubtitle: ¿Está seguro de eliminar esta expedición?
+    worker: Trabajador
+    move: Mover
+package:
+    package: Embalaje
+    quantity: Cantidad
+    added: Añadido
+    addPackage: Añadir embalaje
+    removePackage: Quitar embalaje
 ticketSaleTracking:
     isChecked: Comprobado
     item: Artículo
@@ -184,3 +227,4 @@ ticketSaleTracking:
     checked: revisado
 Search ticket: Buscar tickets
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket
+Select lines to see the options: Selecciona líneas para ver las opciones

src/pages/Travel/Card/TravelDescriptor.vue

@@ -65,7 +65,6 @@ const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.
         :subtitle="data.subtitle"
         :filter="filter"
         data-key="travelData"
-        :summary="$attrs"
         @on-fetch="setData"
     >
         <template #menu="{ entity }">

src/pages/Travel/Card/TravelSummary.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onUpdated } from 'vue';
+import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 

src/pages/Travel/TravelList.vue

@@ -71,6 +71,7 @@ const columns = computed(() => [
             url: 'agencyModes',
             fields: ['id', 'name'],
         },
+        format: (row) => row.agencyModeName,
         columnField: {
             component: null,
         },
@@ -112,7 +113,10 @@ const columns = computed(() => [
         attrs: {
             url: 'warehouses',
             fields: ['id', 'name'],
+            optionLabel: 'name',
+            optionValue: 'id',
         },
+        format: (row) => row.warehouseInName,
         columnField: {
             component: null,
         },
@@ -129,6 +133,7 @@ const columns = computed(() => [
             url: 'warehouses',
             fields: ['id', 'name'],
         },
+        format: (row) => row.warehouseOutName,
         columnField: {
             component: null,
         },
@@ -196,7 +201,6 @@ const columns = computed(() => [
         default-mode="table"
         auto-load
         redirect="travel"
-        :right-search="false"
         :is-editable="false"
         :use-model="true"
     />

src/router/modules/invoiceOut.js

@@ -35,7 +35,7 @@ export default {
                     name: 'InvoiceOutGlobal',
                     meta: {
                         title: 'globalInvoicing',
-                        icon: 'contact_support',
+                        icon: 'Date_Range',
                     },
                     component: () => import('src/pages/InvoiceOut/InvoiceOutGlobal.vue'),
                 },

src/router/modules/order.js

@@ -37,7 +37,7 @@ export default {
                         title: 'orderCreate',
                         icon: 'add',
                     },
-                    component: () => import('src/pages/Order/Card/OrderForm.vue'),
+                    component: () => import('src/pages/Order/OrderList.vue'),
                 },
             ],
         },

src/router/modules/ticket.js

@@ -15,9 +15,10 @@ export default {
         card: [
             'TicketBasicData',
             'TicketSale',
+            'TicketLog',
+            'TicketExpedition',
             'TicketPurchaseRequest',
             'TicketTracking',
-            'TicketLog',
             'TicketNotes',
             'TicketVolume',
             'TicketService',
@@ -71,8 +72,8 @@ export default {
                     component: () => import('src/pages/Ticket/TicketFuture.vue'),
                 },
                 {
-                    path: 'advance',
                     name: 'TicketAdvance',
+                    path: 'advance',
                     meta: {
                         title: 'ticketAdvance',
                         icon: 'keyboard_double_arrow_left',
@@ -143,7 +144,15 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/Card/TicketLog.vue'),
                 },
-
+                {
+                    path: 'boxing',
+                    name: 'TicketBoxing',
+                    meta: {
+                        title: 'boxing',
+                        icon: 'vn:package',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketBoxing.vue'),
+                },
                 {
                     path: 'service',
                     name: 'TicketService',
@@ -181,15 +190,6 @@ export default {
                     component: () =>
                         import('src/pages/Ticket/Card/TicketSaleTracking.vue'),
                 },
-                {
-                    path: 'boxing',
-                    name: 'TicketBoxing',
-                    meta: {
-                        title: 'boxing',
-                        icon: 'science',
-                    },
-                    component: () => import('src/pages/Ticket/Card/TicketBoxing.vue'),
-                },
                 {
                     path: 'sms',
                     name: 'TicketSms',

src/stores/invoiceOutGlobal.js

@@ -237,7 +237,7 @@ export const useInvoiceOutGlobalStore = defineStore({
         async getNegativeBasesCsv() {
             try {
                 const arrayData = useArrayData('InvoiceOutNegative');
-                const params = arrayData.store.currentFilter;
+                const params = arrayData.store.userParams;
 
                 const { data } = await axios.get('InvoiceOuts/negativeBasesCsv', {
                     params,

src/stores/useArrayDataStore.js

@@ -3,13 +3,7 @@ import { defineStore } from 'pinia';
 
 export const useArrayDataStore = defineStore('arrayDataStore', () => {
     const state = ref({});
-
+    const defaultOpts = {
-    function get(key) {
-        return state.value[key];
-    }
-
-    function set(key) {
-        state.value[key] = {
         filter: {},
         userFilter: {},
         userParams: {},
@@ -17,7 +11,6 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
         limit: 10,
         skip: 0,
         order: '',
-            data: ref(),
         isLoading: false,
         userParamsChanged: false,
         exprBuilder: null,
@@ -25,15 +18,41 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
         navigate: null,
         page: 1,
     };
+
+    function get(key) {
+        return state.value[key];
+    }
+
+    function set(key) {
+        state.value[key] = getDefaultState();
     }
 
     function clear(key) {
         delete state.value[key];
     }
 
+    function reset(key, opts = []) {
+        if (!opts.length) state.value[key] = getDefaultState();
+        else
+            opts.forEach((opt) => {
+                if (opt.includes('.')) {
+                    const [parent, child] = opt.split('.');
+                    state.value[key][parent][child] = defaultOpts[child];
+                } else if (Object.hasOwn(state.value[key], opt))
+                    state.value[key][opt] = defaultOpts[opt];
+            });
+    }
+
+    function getDefaultState() {
+        return Object.assign(JSON.parse(JSON.stringify(defaultOpts)), {
+            data: ref(),
+        });
+    }
+
     return {
         get,
         set,
         clear,
+        reset,
     };
 });

test/cypress/integration/entry/entryDms.spec.js

@@ -1,4 +1,4 @@
-describe('WagonTypeCreate', () => {
+describe('EntryDms', () => {
     const entryId = 1;
 
     beforeEach(() => {

test/cypress/integration/entry/myEntry.spec.js

@@ -1,7 +1,7 @@
-describe('WagonTypeCreate', () => {
+describe('EntryMy when is supplier', () => {
     beforeEach(() => {
         cy.viewport(1920, 1080);
-        cy.login('customer');
+        cy.login('supplier');
         cy.visit(`/#/entry/my`, {
             onBeforeLoad(win) {
                 cy.stub(win, 'open');
@@ -10,7 +10,7 @@ describe('WagonTypeCreate', () => {
         cy.waitForElement('.q-page', 6000);
     });
 
-    it('should create edit and remove new dms', () => {
+    it('should open buyLabel when is supplier', () => {
         cy.get(
             '[to="/null/2"] > .q-card > .column > .q-btn > .q-btn__content > .q-icon'
         ).click();

test/cypress/integration/logout.spec.js

@@ -0,0 +1,39 @@
+/// <reference types="cypress" />
+describe('Logout', () => {
+    beforeEach(() => {
+        cy.login('developer');
+        cy.visit(`/#/dashboard`);
+        cy.waitForElement('.q-page', 6000);
+    });
+    describe('by user', () => {
+        it('should logout', () => {
+            cy.get(
+                '#user > .q-btn__content > .q-avatar > .q-avatar__content > .q-img > .q-img__container > .q-img__image'
+            ).click();
+            cy.get('.block').click();
+        });
+    });
+    describe('not user', () => {
+        beforeEach(() => {
+            cy.intercept('GET', '**/VnUsers/acl', {
+                statusCode: 401,
+                body: {
+                    error: {
+                        statusCode: 401,
+                        name: 'Error',
+                        message: 'Authorization Required',
+                        code: 'AUTHORIZATION_REQUIRED',
+                    },
+                },
+                statusMessage: 'AUTHORIZATION_REQUIRED',
+            }).as('someRoute');
+        });
+        it('when token not exists', () => {
+            cy.reload();
+            cy.get('.q-notification__message').should(
+                'have.text',
+                'Authorization Required'
+            );
+        });
+    });
+});

test/cypress/support/commands.js

@@ -239,5 +239,5 @@ Cypress.Commands.add('validateContent', (selector, expectedValue) => {
 });
 
 Cypress.Commands.add('openActionsDescriptor', () => {
-    cy.get('.descriptor > .header > .q-btn').click();
+    cy.get('.header > :nth-child(3) > .q-btn__content > .q-icon').click();
 });

test/vitest/__tests__/composables/useSession.spec.js

@@ -55,6 +55,7 @@ describe('session', () => {
             expect(user.value).toEqual(previousUser);
 
             vi.spyOn(axios, 'post').mockResolvedValue({ data: true });
+            vi.spyOn(axios, 'get').mockResolvedValue({ data: true });
             await session.destroy();
 
             user = state.getUser();