Merge branch 'dev' into 6321_negative_tickets

.gitignore

@@ -29,5 +29,5 @@ yarn-error.log*
 *.sln
 
 # Cypress directories and files
-/tests/cypress/videos
+/test/cypress/videos
-/tests/cypress/screenshots
+/test/cypress/screenshots

quasar.config.js

@@ -29,8 +29,16 @@ module.exports = configure(function (/* ctx */) {
         // app boot file (/src/boot)
         // --> boot files are part of "main.js"
         // https://v2.quasar.dev/quasar-cli/boot-files
-        boot: ['i18n', 'axios', 'vnDate', 'validations', 'quasar', 'quasar.defaults'],
+        boot: [
-
+            'i18n',
+            'axios',
+            'vnDate',
+            'validations',
+            'quasar',
+            'quasar.defaults',
+            'global-components',
+        ],
+        importStrategy: 'auto',
         // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
         css: ['app.scss'],
 

src/boot/global-components.js

@@ -0,0 +1,13 @@
+// src/boot/global-components.js
+import { defineAsyncComponent } from 'vue';
+
+const components = import.meta.glob('src/components/**/*.vue');
+export default ({ app }) => {
+    for (const path in components) {
+        const componentName = path
+            .split('/')
+            .pop()
+            .replace(/\.\w+$/, '');
+        app.component(componentName, defineAsyncComponent(components[path]));
+    }
+};

src/components/FetchData.vue

@@ -25,7 +25,7 @@ const $props = defineProps({
     },
     limit: {
         type: [String, Number],
-        default: '',
+        default: '30',
     },
     params: {
         type: Object,

src/components/VnTable/VnColumn.vue

@@ -11,6 +11,8 @@ import VnInputNumber from 'components/common/VnInputNumber.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInputTime from 'components/common/VnInputTime.vue';
 import VnComponent from 'components/common/VnComponent.vue';
+import VnDescriptor from 'components/VnTable/VnDescriptor.vue';
+import { QBtn } from 'quasar';
 import VnUserLink from 'components/ui/VnUserLink.vue';
 
 const model = defineModel(undefined, { required: true });
@@ -128,6 +130,17 @@ const defaultComponents = {
     icon: {
         component: markRaw(QIcon),
     },
+    descriptor: {
+        component: markRaw(VnDescriptor),
+        attrs: {
+            class: 'link',
+            flat: true,
+            dense: true,
+        },
+        forceAttrs: {
+            row: $props.row,
+        },
+    },
     userLink: {
         component: markRaw(VnUserLink),
     },

src/components/VnTable/VnDescriptor.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { useQuasar } from 'quasar';
+const quasar = useQuasar();
+import VnComponent from 'components/common/VnComponent.vue';
+import { onMounted, ref } from 'vue';
+import ItemDescriptor from 'src/pages/Item/Card/ItemDescriptor.vue';
+
+const $props = defineProps({
+    label: {
+        type: Function,
+        required: true,
+    },
+    row: {
+        type: Object,
+        default: null,
+    },
+    proxy: {
+        type: Object,
+        default: null,
+    },
+});
+const btnRow = ref(null);
+const popupVisible = ref(true);
+const handleClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    console.log(event);
+    popupVisible.value = true;
+    // quasar.dialog({
+    //     component: $props.proxy.component,
+    //     componentProps: {
+    //         id: $props.row[$props.proxy.key],
+
+    //     },
+    // });
+};
+onMounted(() => {
+    // btnRow.value = btnRow.value.$el;
+});
+</script>
+<template>
+    <QBtn class="link" flat dense ref="btnRow" @click="handleClick"
+        >{{ $props.label($props.row) }}
+    </QBtn>
+    <!-- <VnComponent :id="row.itemFk" /> -->
+
+    <QPopupProxy :target="btnRow"> <ItemDescriptor :id="1" /></QPopupProxy>
+</template>
+<style lang="scss"></style>

src/components/VnTable/VnTable.vue

@@ -390,7 +390,7 @@ function handleOnDataSaved(_) {
                 card-container-class="grid-three"
                 flat
                 :style="isTableMode && `max-height: ${tableHeight}`"
-                :virtual-scroll="isTableMode"
+                :virtual-scroll="!isTableMode"
                 @virtual-scroll="
                     (event) =>
                         event.index > rows.length - 2 &&
@@ -403,6 +403,12 @@ function handleOnDataSaved(_) {
                 <template #top-left v-if="!$props.withoutHeader">
                     <slot name="top-left"></slot>
                 </template>
+                <template #body-selection="props">
+                    <slot name="body-selection" v-bind="props">
+                        <QCheckbox class="q-ma-xs" v-model="props.selected"></QCheckbox>
+                    </slot>
+                </template>
+
                 <template #top-right v-if="!$props.withoutHeader">
                     <VnVisibleColumn
                         v-if="isTableMode"

src/components/common/VnInputDate.vue

@@ -84,8 +84,12 @@ const styleAttrs = computed(() => {
               outlined: true,
               rounded: true,
           }
-        : {};
+        : { eventColor: handleEventColor };
 });
+const handleEventColor = (date) => {
+    console.error(date);
+    return date === Date.now() ? null : 'orange';
+};
 </script>
 
 <template>
@@ -139,6 +143,10 @@ const styleAttrs = computed(() => {
                     :landscape="true"
                     :today-btn="true"
                     :options="$attrs.options"
+                    color="orange"
+                    text-color="black"
+                    dark
+                    bordered
                     @update:model-value="
                         (date) => {
                             formattedDate = date;
@@ -158,6 +166,12 @@ const styleAttrs = computed(() => {
 .vn-input-date.q-field--outlined.q-field--readonly .q-field__control:before {
     border-style: solid;
 }
+.calendar-event {
+    background-color: red;
+    &.--today {
+        border: 2px solid $info;
+    }
+}
 </style>
 <i18n>
     es:

src/components/common/VnSelect.vue

@@ -66,6 +66,10 @@ const $props = defineProps({
         type: String,
         default: null,
     },
+    orderBy: {
+        type: String,
+        default: null,
+    },
     limit: {
         type: [Number, String],
         default: '30',

src/components/ui/VnConfirm.vue

@@ -55,7 +55,7 @@ async function confirm() {
 }
 </script>
 <template>
-    <QDialog ref="dialogRef">
+    <QDialog ref="dialogRef" persistent>
         <QCard class="q-pa-sm">
             <QCardSection class="row items-center q-pb-none">
                 <QAvatar
@@ -70,7 +70,7 @@ async function confirm() {
                 <QBtn icon="close" :disable="isLoading" flat round dense v-close-popup />
             </QCardSection>
             <QCardSection class="q-pb-none">
-                <span v-if="message !== false" v-html="message" />
+                <span id="spanHTML" v-if="message !== false" v-html="message" />
             </QCardSection>
             <QCardSection class="row items-center q-pt-none">
                 <slot name="customHTML"></slot>

src/components/ui/VnImg.vue

@@ -85,4 +85,8 @@ defineExpose({
 .img_zoom {
     border-radius: 0%;
 }
+.image-wrapper {
+    height: 50px;
+    width: 50px;
+}
 </style>

src/components/ui/VnLv.vue

@@ -88,4 +88,15 @@ const val = computed(() => $props.value);
 :deep(.q-checkbox.disabled) {
     opacity: 1 !important;
 }
+
+.image {
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    align-items: center;
+    justify-content: flex-start;
+    & > .q-btn .value {
+        text-transform: uppercase;
+    }
+}
 </style>

src/components/ui/VnPaginate.vue

@@ -6,6 +6,10 @@ import { useArrayData } from 'composables/useArrayData';
 const { t } = useI18n();
 
 const props = defineProps({
+    append: {
+        type: Boolean,
+        default: true,
+    },
     dataKey: {
         type: String,
         required: true,
@@ -182,7 +186,7 @@ defineExpose({ fetch, addFilter, paginate });
 </script>
 
 <template>
-    <div class="full-width">
+    <div v-if="append" class="full-width">
         <div
             v-if="!props.autoLoad && !store.data && !isLoading"
             class="info-row q-pa-md text-center"

src/components/ui/VnStockValueDisplay.vue

@@ -0,0 +1,42 @@
+<!-- src/components/StockValueDisplay.vue -->
+<template>
+    <span :class="valueClass">
+        <QIcon :name="iconName" size="sm" class="value-icon" />
+        {{ formattedValue }}
+    </span>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useQuasar } from 'quasar';
+
+const props = defineProps({
+    value: {
+        type: Number,
+        required: true,
+    },
+});
+
+const valueClass = computed(() =>
+    props.value === 0 ? 'neutral' : props.value > 0 ? 'positive' : 'negative'
+);
+const iconName = computed(() =>
+    props.value === 0 ? 'equal' : props.value > 0 ? 'arrow_upward' : 'arrow_downward'
+);
+const formattedValue = computed(() => props.value);
+</script>
+
+<style scoped>
+.positive {
+    color: green;
+}
+.negative {
+    color: red;
+}
+.neutral {
+    color: orange;
+}
+.value-icon {
+    margin-right: 4px;
+}
+</style>

src/composables/useRole.js

@@ -27,6 +27,15 @@ export function useRole() {
 
         return false;
     }
+    function likeAny(roles) {
+        const roleStore = state.getRoles();
+        for (const role of roles) {
+            if (!roleStore.value.findIndex((rs) => rs.startsWith(role)) !== -1)
+                return true;
+        }
+
+        return false;
+    }
     function isEmployee() {
         return hasAny(['employee']);
     }
@@ -35,6 +44,7 @@ export function useRole() {
         isEmployee,
         fetch,
         hasAny,
+        likeAny,
         state,
     };
 }

src/css/app.scss

@@ -212,6 +212,16 @@ input::-webkit-inner-spin-button {
     max-width: 100%;
 }
 
+.remove-bg {
+    filter: brightness(1.1);
+    mix-blend-mode: multiply;
+}
+
+.remove-bg {
+    filter: brightness(1.1);
+    mix-blend-mode: multiply;
+}
+
 .q-table__container {
     /* ===== Scrollbar CSS ===== /
     / Firefox */

src/css/quasar.variables.scss

@@ -13,7 +13,7 @@
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 // Tip: to add new colors https://quasar.dev/style/color-palette/#adding-your-own-colors
 $primary: #ec8916;
-$secondary: $primary;
+$secondary: #89be34;
 $positive: #c8e484;
 $negative: #fb5252;
 $info: #84d0e2;

src/i18n/locale/en.yml

@@ -7,6 +7,7 @@ globals:
     entity: Entity
     user: User
     details: Details
+    Preview: Preview
     collapseMenu: Collapse left menu
     backToDashboard: Return to dashboard
     notifications: Notifications
@@ -22,6 +23,7 @@ globals:
     search: Search
     changes: Changes
     dataCreated: Data created
+    split: Split
     add: Add
     create: Create
     edit: Edit
@@ -34,6 +36,7 @@ globals:
     clone: Clone
     confirm: Confirm
     assign: Assign
+    replace: Replace
     back: Back
     downloadPdf: Download PDF
     yes: 'Yes'
@@ -64,6 +67,7 @@ globals:
     shipped: Shipped
     totalEntries: Total entries
     amount: Amount
+    removeSelection: Clear selection
     packages: Packages
     download: Download
     selectRows: 'Select all { numberRows } row(s)'
@@ -75,6 +79,7 @@ globals:
     type: Type
     reason: reason
     noResults: No results
+    results: results
     system: System
     notificationSent: Notification sent
     warehouse: Warehouse
@@ -115,6 +120,7 @@ globals:
         agency: Agency
         workCenters: Work centers
         modes: Modes
+        negative: Tickets negative
         zones: Zones
         zonesList: Zones
         deliveryDays: Delivery days
@@ -221,7 +227,6 @@ globals:
         pictures: Pictures
         packages: Packages
         tracking: Tracking
-        labeler: Labeler
         supplierCreate: New supplier
         accounts: Accounts
         addresses: Addresses
@@ -472,6 +477,7 @@ ticket:
         notes: Notes
         sale: Sale
         dms: File management
+        negative: Tickets negative
         volume: Volume
         observation: Notes
         ticketAdvance: Advance tickets

src/i18n/locale/es.yml

@@ -7,6 +7,7 @@ globals:
     entity: Entidad
     user: Usuario
     details: Detalles
+    preview: Vista previa
     collapseMenu: Contraer menú lateral
     backToDashboard: Volver al tablón
     notifications: Notificaciones
@@ -29,11 +30,13 @@ globals:
     saveAndContinue: Guardar y continuar
     remove: Eliminar
     reset: Restaurar
+    refresh: Actualizar
     close: Cerrar
     cancel: Cancelar
     clone: Clonar
     confirm: Confirmar
     assign: Asignar
+    replace: Sustituir
     back: Volver
     yes: Si
     no: No
@@ -46,6 +49,7 @@ globals:
     rowRemoved: Fila eliminada
     pleaseWait: Por favor espera...
     noPinnedModules: No has fijado ningún módulo
+    split: Split
     summary:
         basicData: Datos básicos
     daysOnward: Días adelante
@@ -72,8 +76,10 @@ globals:
     requiredField: Campo obligatorio
     class: clase
     type: Tipo
-    reason: motivo
+    reason: Motivo
+    removeSelection: Eliminar selección
     noResults: Sin resultados
+    results: resultados
     system: Sistema
     notificationSent: Notificación enviada
     warehouse: Almacén
@@ -100,7 +106,6 @@ globals:
     from: Desde
     to: Hasta
     notes: Notas
-    refresh: Actualizar
     item: Artículo
     ticket: Ticket
     campaign: Campaña
@@ -117,6 +122,7 @@ globals:
         agency: Agencia
         workCenters: Centros de trabajo
         modes: Modos
+        negative: Tickets negativos
         zones: Zonas
         zonesList: Zonas
         deliveryDays: Días de entrega
@@ -188,7 +194,6 @@ globals:
         invoiceIns: Fact. recibidas
         invoiceInCreate: Crear fact. recibida
         vat: IVA
-        labeler: Etiquetas
         dueDay: Vencimiento
         intrastat: Intrastat
         corrective: Rectificativa
@@ -474,6 +479,7 @@ ticket:
         notes: Notas
         sale: Lineas del pedido
         dms: Gestión documental
+        negative: Tickets negativos
         volume: Volumen
         observation: Notas
         ticketAdvance: Adelantar tickets

src/pages/Customer/Card/CustomerDescriptor.vue

@@ -91,6 +91,22 @@ const setData = (entity) => (data.value = useCardDescription(entity?.name, entit
                 >
                     <QTooltip>{{ t('customer.card.isDisabled') }}</QTooltip>
                 </QIcon>
+                <QIcon
+                    v-if="!entity?.substitutionAllowed"
+                    name="help"
+                    size="xs"
+                    color="primary"
+                >
+                    <QTooltip>{{ t('Disabled substitution') }}</QTooltip>
+                </QIcon>
+                <QIcon
+                    v-if="entity?.substitutionAllowed"
+                    name="help"
+                    size="xs"
+                    color="primary"
+                >
+                    <QTooltip>{{ t('Allowed substitution') }}</QTooltip>
+                </QIcon>
                 <QIcon
                     v-if="customer.isFreezed"
                     name="vn:frozen"

src/pages/Customer/Card/CustomerDescriptorMenu.vue

@@ -52,6 +52,16 @@ const orderCreateFormDialog = ref(null);
 const openOrderCreateForm = () => {
     orderCreateFormDialog.value.show();
 };
+const updateSubstitutionAllowed = async () => {
+    try {
+        await axios.patch(`Clients/${route.params.id}`, {
+            substitutionAllowed: !$props.customer.substitutionAllowed,
+        });
+        notify('globals.notificationSent', 'positive');
+    } catch (error) {
+        notify(error.message, 'positive');
+    }
+};
 </script>
 
 <template>
@@ -71,6 +81,13 @@ const openOrderCreateForm = () => {
             </QDialog>
         </QItemSection>
     </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection @click="updateSubstitutionAllowed()">{{
+            $props.customer.substitutionAllowed
+                ? t('Disable substitution')
+                : t('Allow substitution')
+        }}</QItemSection>
+    </QItem>
     <QItem v-ripple clickable>
         <QItemSection @click="showSmsDialog()">{{ t('Send SMS') }}</QItemSection>
     </QItem>

src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue

@@ -74,6 +74,9 @@ const formatOpt = (row, { model, options }, prop) => {
     const option = options.find(({ id }) => id == obj);
     return option ? `${obj}:${option[prop]}` : '';
 };
+
+const getTotal = (data, key) =>
+    data.reduce((acc, cur) => acc + +String(cur[key]).replace(',', '.'), 0);
 </script>
 <template>
     <FetchData

src/pages/Item/Card/ItemBotanical.vue

@@ -7,8 +7,8 @@ import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
-import CreateGenusForm from './CreateGenusForm.vue';
+import CreateGenusForm from '../components/CreateGenusForm.vue';
-import CreateSpecieForm from './CreateSpecieForm.vue';
+import CreateSpecieForm from '../components/CreateSpecieForm.vue';
 
 const route = useRoute();
 const { t } = useI18n();

src/pages/Item/components/ItemProposal.vue

@@ -0,0 +1,374 @@
+<script setup>
+import { ref, computed, onUnmounted } from 'vue';
+// import axios from 'axios';
+import { useI18n } from 'vue-i18n';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import VnImg from 'src/components/ui/VnImg.vue';
+import { toCurrency } from 'filters/index';
+import VnStockValueDisplay from 'src/components/ui/VnStockValueDisplay.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+const MATCH_VALUES = [5, 6, 7, 8];
+const { t } = useI18n();
+
+const primaryColor = '#f5b351';
+const colorSpacer = '#ecf0f1';
+const compatibilityItem = (value) => `${100 * (value / MATCH_VALUES.length)}%`;
+const gradientStyle = (value) =>
+    `linear-gradient(to right, ${primaryColor} ${compatibilityItem(
+        value
+    )}, ${colorSpacer} 10%)`;
+
+const $props = defineProps({
+    itemLack: {
+        type: Object,
+        required: true,
+        default: () => {},
+    },
+    replaceAction: {
+        type: Boolean,
+        required: false,
+        default: false,
+    },
+    sales: {
+        type: Array,
+        required: false,
+        default: () => [],
+    },
+});
+const proposalSelected = ref([]);
+const quantity = ref(-1);
+const defaultColumnAttrs = {
+    align: 'center',
+    sortable: false,
+};
+const sale = computed(() => $props.sales[0]);
+const saleFk = computed(() => sale.value.saleFk);
+const statusConditionalValue = (row) => {
+    const total = MATCH_VALUES.reduce((acc, i) => acc + row[`match${i}`], 0);
+    return total;
+};
+const popupProxyRef = ref(null);
+const proposalTableRef = ref(null);
+const emit = defineEmits(['onDialogClosed', 'itemReplaced']);
+
+const conditionalValuePrice = (price) => (price > 1.3 ? 'match' : 'not-match');
+const columns = computed(() => [
+    {
+        ...defaultColumnAttrs,
+        label: t('proposal.available'),
+        name: 'available',
+        field: 'available',
+        columnClass: 'shrink',
+        style: 'max-width: 75px',
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+            columnClass: 'shrink',
+        },
+    },
+    // {
+    //     ...defaultColumnAttrs,
+    //     label: t('proposal.difference'),
+    //     name: 'difference',
+    //     style: 'max-width: 75px',
+    // },
+    // {
+    //     ...defaultColumnAttrs,
+    //     label: t('proposal.compatibility'),
+    //     name: 'status',
+    //     field: statusConditionalValue,
+    //     sortable: true,
+    // },
+    {
+        ...defaultColumnAttrs,
+        label: t('proposal.counter'),
+        name: 'counter',
+        field: 'counter',
+        columnClass: 'shrink',
+        style: 'max-width: 75px',
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+            columnClass: 'shrink',
+        },
+    },
+
+    {
+        align: 'left',
+        sortable: true,
+        label: t('proposal.longName'),
+        name: 'longName',
+        field: 'longName',
+        columnClass: 'expand',
+    },
+
+    {
+        ...defaultColumnAttrs,
+        label: t('proposal.price2'),
+        name: 'price2',
+        style: 'max-width: 75px',
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+            columnClass: 'shrink',
+        },
+    },
+    {
+        ...defaultColumnAttrs,
+        label: t('proposal.minQuantity'),
+        name: 'minQuantity',
+        field: 'minQuantity',
+        style: 'max-width: 75px',
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+            columnClass: 'shrink',
+        },
+    },
+    {
+        ...defaultColumnAttrs,
+        label: t('proposal.located'),
+        name: 'located',
+        field: 'located',
+    },
+]);
+
+async function confirm() {
+    try {
+        // const params = {
+        //     saleFk: saleFk.value,
+        //     substitutionFk: proposalSelected.value[0].id,
+        //     quantity: quantity.value,
+        // };
+        // const { data } = await axios.post('Sales/replaceItem', params);
+        const params = [saleFk.value, proposalSelected.value[0].id, quantity.value];
+        // const { data } = await axios.post('Applications/sale_replaceItem/execute-proc', {
+        //     schema: 'vn',
+        //     params,
+        // });
+        proposalTableRef.value.reload();
+        emit('itemReplaced', {
+            type: 'refresh',
+            quantity: quantity.value,
+            itemProposal: proposalSelected.value[0],
+            ...params,
+        });
+        proposalSelected.value = [];
+        popupProxyRef.value.hide();
+    } catch (error) {
+        console.error(error);
+    }
+}
+// const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent();
+
+// function onDialogClose() {
+//     console.log('Dialog has been closed');
+//     // Emitir el evento personalizado
+//     emit('onDialogClosed', { data: true });
+// }
+onUnmounted(() => {});
+function handleSelection(value, _) {
+    quantity.value = value.available;
+}
+const isSelectionAvailable = (itemProposal) => {
+    const { price2 } = itemProposal;
+    const salePrice = sale.value.price;
+    // debugger;
+    const byPrice = (100 * price2) / salePrice > 30;
+    if (byPrice) {
+        return byPrice;
+    }
+    const byQuantity =
+        (100 * itemProposal.available) / Math.abs($props.itemLack.lack) < 30;
+    return byQuantity;
+    // return $props.replaceAction && row.available >= Math.abs($props.itemLack.lack);
+};
+// watch(proposalSelected, ({ available }) => (quantity.value = available));
+</script>
+<template>
+    <div style="min-width: 65vw">
+        <VnTable
+            ref="proposalTableRef"
+            data-key="ItemsGetSimilar"
+            url="Items/getSimilar"
+            :filter="{
+                where: {
+                    itemFk: $props.itemLack.itemFk,
+                    warehouseFk: $props.itemLack.warehouseFk,
+                },
+            }"
+            auto-load
+            :columns="columns"
+            class="full-width q-mt-md"
+            v-model:selected="proposalSelected"
+            row-key="id"
+            :is-editable="false"
+            :right-search="false"
+            :without-header="false"
+            :disable-option="{ card: true, table: true }"
+            :table="{
+                'row-key': 'id',
+                selection: 'single',
+            }"
+        >
+            <template #top-left>
+                <div v-if="$props.replaceAction" class="q-ml-xs" style="display: flex">
+                    <QBtn
+                        :label="t('globals.replace')"
+                        color="primary"
+                        :loading="isLoading"
+                        @click="confirm"
+                        style="padding-block: 8px"
+                        :disable="
+                            proposalSelected.length < 1 ||
+                            quantity === 0 ||
+                            quantity > Math.abs(itemLack.lack)
+                        "
+                    />
+                    <VnInput
+                        v-model="quantity"
+                        v-if="proposalSelected.length > 0"
+                        @update:model-value="(val) => (quantity = val)"
+                        min="0"
+                        :max="Math.abs(itemLack.lack)"
+                        :label="t('proposal.quantityToReplace')"
+                        dense
+                        autofocus
+                        class="q-ml-xs"
+                    /></div
+            ></template>
+            <template #body-selection="props">
+                <!-- {{ isSelectionAvailable(props) }} -->
+                <QCheckbox
+                    class="q-ma-xs"
+                    flat
+                    :disable="isSelectionAvailable(props.row)"
+                    v-model="props.selected"
+                    @update:model-value="(evt, _) => handleSelection(props.row, null)"
+                >
+                    <QTooltip>
+                        <span v-if="isSelectionAvailable(props.row)">{{
+                            t('proposal.available')
+                        }}</span>
+                        <span v-else>{{ t('proposal.available') }}</span>
+                    </QTooltip>
+                </QCheckbox>
+            </template>
+            <template #column-longName="{ row }">
+                <QTd style="max-width: 800px">
+                    <QTooltip>
+                        {{ row.id }}
+                    </QTooltip>
+                    <!-- <QBtn flat color="blue" dense>{{ }}</QBtn> -->
+                    <span style="font-size: x-small">({{ row.id }})</span
+                    ><span class="link">{{ row.longName }}</span>
+                    <ItemDescriptorProxy :id="row.id" />
+
+                    <div style="display: flex; flex-direction: row">
+                        <div style="display: flex; flex-direction: column">
+                            <!-- -->
+
+                            <VnImg
+                                :id="row.id"
+                                spinner-color="primary"
+                                :ratio="1"
+                                height="50px"
+                                width="50px"
+                                class="image remove-bg"
+                            />
+                            <!-- <span style="font-size: xx-small">ID:</span> -->
+                        </div>
+                        <div
+                            style="
+                                display: flex;
+                                align-items: center;
+                                flex-direction: column;
+                                justify-content: center;
+                            "
+                        >
+                            <FetchedTags :item="row" class="q-mb-xs" />
+                            <div
+                                :style="{
+                                    background: gradientStyle(
+                                        statusConditionalValue(row)
+                                    ),
+                                }"
+                                class="compatibility"
+                            >
+                                <QTooltip>
+                                    {{ compatibilityItem(statusConditionalValue(row)) }}
+                                </QTooltip>
+                            </div>
+                        </div>
+                    </div>
+                </QTd>
+            </template>
+            <template #column-available="{ row }">
+                {{ row.available }}
+            </template>
+            <template #column-counter="{ row }">
+                {{ row.counter }}
+            </template>
+            <template #column-minQuantity="{ row }">
+                {{ row.minQuantity }}
+            </template>
+            <!-- <template #column-status="{ row }">
+                <div
+                    :style="{ background: gradientStyle(statusConditionalValue(row)) }"
+                    class="compatibility"
+                >
+                    <QTooltip>
+                        {{ compatibilityItem(statusConditionalValue(row)) }}
+                    </QTooltip>
+                </div>
+            </template> -->
+            <template #column-price2="{ row }">
+                <div
+                    style="
+                        display: flex;
+                        align-items: center;
+                        flex-direction: column;
+                        justify-content: center;
+                    "
+                >
+                    <VnStockValueDisplay :value="sales[0].price - row.price2" />
+                    <span :class="[conditionalValuePrice(row.price2)]">{{
+                        toCurrency(row.price2)
+                    }}</span>
+                </div>
+            </template>
+            <template #column-difference="{ row }">
+                <VnStockValueDisplay :value="sales[0].price - row.price2" />
+            </template>
+        </VnTable>
+    </div>
+</template>
+<style lang="scss">
+.compatibility {
+    height: 1vh;
+    width: 100%;
+}
+
+.match {
+    color: $negative;
+}
+.not-match {
+    color: inherit;
+}
+.calendars-header {
+    height: 45px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: $primary;
+    font-weight: bold;
+    font-size: 16px;
+}
+</style>
+
+<i18n>
+    en:
+</i18n>

src/pages/Item/components/ItemProposalProxy.vue

@@ -0,0 +1,52 @@
+<script setup>
+import ItemProposal from './ItemProposal.vue';
+import VnImg from 'src/components/ui/VnImg.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+const emit = defineEmits(['onDialogClosed', 'itemReplaced']);
+
+const $props = defineProps({
+    itemLack: {
+        type: Object,
+        required: true,
+        default: () => {},
+    },
+    replaceAction: {
+        type: Boolean,
+        required: false,
+        default: false,
+    },
+    sales: {
+        type: Array,
+        required: false,
+        default: () => [],
+    },
+});
+</script>
+<template>
+    <QPopupProxy>
+        <QCard>
+            <QCardSection class="row items-center q-pb-none">
+                <span class="text-h6 text-grey">{{ $t('Item proposal') }}</span>
+                <QSpace />
+                <QBtn icon="close" flat round dense v-close-popup />
+            </QCardSection>
+            <QCardSection class="row items-center">
+                <VnImg :id="itemLack.id" class="rounded image-wrapper"></VnImg>
+                <QBtn flat class="link text-blue">
+                    {{ itemLack.longName }}
+                    <ItemDescriptorProxy :id="itemLack.id" />
+                </QBtn>
+                <FetchedTags :item="itemLack" />
+
+                <!-- {{ tickets[0].saleFk }} -->
+            </QCardSection>
+            <QCardSection class="q-pt-none">
+                <ItemProposal
+                    v-bind="$props"
+                    @item-replaced="(data) => emit('itemReplaced', data)"
+                ></ItemProposal
+            ></QCardSection>
+        </QCard>
+    </QPopupProxy>
+</template>

src/pages/Item/locale/en.yml

@@ -88,3 +88,22 @@ itemType:
         worker: Worker
         category: Category
         temperature: Temperature
+proposal:
+    difference: Difference
+    title: Items proposal
+    itemFk: Item
+    longName: Name
+    subName: Producer
+    value5: value5
+    value6: value6
+    value7: value7
+    value8: value8
+    available: Available
+    minQuantity: minQuantity
+    price2: Price
+    located: Located
+    counter: Counter
+    groupingPrice: Grouping Price
+    itemOldPrice: itemOld Price
+    status: State
+    quantityToReplace: Quanity to replace

src/pages/Item/locale/es.yml

@@ -88,3 +88,28 @@ itemType:
         worker: Trabajador
         category: Reino
         temperature: Temperatura
+itemProposal: Artículos similares
+proposal:
+    substitutionAvailable: Sustitución disponible
+    notSubstitutionAvailableByPrice: Sustitución no disponible, 30% de diferencia por precio o cantidad
+    compatibility: Compatibilidad
+    title: Items de sustitución para los tickets seleccionados
+    itemFk: Item
+    longName: Nombre
+    subName: Productor
+    value5: value5
+    value6: value6
+    value7: value7
+    value8: value8
+    available: Disponible
+    minQuantity: Min. cantidad
+    price2: Precio
+    located: Ubicado
+    counter: Contador
+    difference: Diferencial
+    groupingPrice: Precio Grouping
+    itemOldPrice: Precio itemOld
+    status: Estado
+    quantityToReplace: Cantidad a reemplazar
+    replace: Sustituir
+    replaceAndConfirm: Sustituir y confirmar precio

src/pages/Order/Card/OrderLines.vue

@@ -277,9 +277,7 @@ watch(
         :user-filter="lineFilter"
     >
         <template #column-image="{ row }">
-            <div class="image-wrapper">
+            <VnImg :id="parseInt(row?.item?.image)" class="rounded image-wrapper" />
-                <VnImg :id="parseInt(row?.item?.image)" class="rounded" />
-            </div>
         </template>
         <template #column-id="{ row }">
             <span class="link" @click.stop>
@@ -339,7 +337,7 @@ watch(
     }
 }
 
-.image-wrapper {
+.imafge-wrapper {
     height: 50px;
     width: 50px;
     margin-left: 30%;

src/pages/Route/Roadmap/RoadmapStops.vue

@@ -5,6 +5,7 @@ import FetchData from 'components/FetchData.vue';
 import { ref } from 'vue';
 import CrudModel from 'components/CrudModel.vue';
 import RoadmapAddStopForm from 'pages/Route/Roadmap/RoadmapAddStopForm.vue';
+import { QBtn } from 'quasar';
 
 const { t } = useI18n();
 const route = useRoute();

src/pages/Route/RouteAutonomous.vue

@@ -232,7 +232,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         :row-click="({ routeFk }) => tableRef.redirect(routeFk)"
         :table="{
             'row-key': '$index',
-            selection: 'multiple',
+            selection: 'single',
         }"
     >
         <template #column-id="{ row }">

src/pages/Route/RouteList.vue

@@ -1,34 +1,19 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useSession } from 'composables/useSession';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import { useQuasar } from 'quasar';
+import { toHour } from 'src/filters';
-import { toDate } from 'src/filters';
-import { useRouter } from 'vue-router';
 
-import axios from 'axios';
 import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
-import RouteListTicketsDialog from 'pages/Route/Card/RouteListTicketsDialog.vue';
 import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
 import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
-
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
-import { usePrintService } from 'src/composables/usePrintService';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 
-const { openReport } = usePrintService();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
-const quasar = useQuasar();
-const session = useSession();
-const selectedRows = ref([]);
 const tableRef = ref([]);
-const confirmationDialog = ref(false);
-const startingDate = ref(null);
-const router = useRouter();
 const routeFilter = {
     include: [
         {
@@ -42,12 +27,12 @@ const routeFilter = {
 const columns = computed(() => [
     {
         align: 'left',
+        isId: true,
         name: 'id',
         label: 'Id',
         chip: {
             condition: () => true,
         },
-        isId: true,
         columnFilter: false,
     },
     {
@@ -55,138 +40,52 @@ const columns = computed(() => [
         name: 'workerFk',
         label: t('Worker'),
         create: true,
-        component: 'select',
-        attrs: {
-            url: 'Workers/activeWithInheritedRole',
-            fields: ['id', 'name'],
-            useLike: false,
-            optionFilter: 'firstName',
-            find: {
-                value: 'workerFk',
-                label: 'workerUserName',
-            },
-        },
-        columnFilter: {
-            inWhere: true,
-        },
-        useLike: false,
         cardVisible: true,
         format: (row, dashIfEmpty) => dashIfEmpty(row.travelRef),
+        columnFilter: false,
     },
     {
         align: 'left',
-        name: 'agencyModeFk',
+        name: 'agencyName',
         label: t('Agency'),
-        isTitle: true,
         cardVisible: true,
         create: true,
-        component: 'select',
-        attrs: {
-            url: 'agencyModes',
-            fields: ['id', 'name'],
-            find: {
-                value: 'agencyModeFk',
-                label: 'agencyName',
-            },
-        },
         columnClass: 'expand',
+        columnFilter: false,
     },
     {
         align: 'left',
-        name: 'vehicleFk',
+        name: 'vehiclePlateNumber',
         label: t('Vehicle'),
         cardVisible: true,
         create: true,
-        component: 'select',
-        attrs: {
-            url: 'vehicles',
-            fields: ['id', 'numberPlate'],
-            optionLabel: 'numberPlate',
-            optionFilterValue: 'numberPlate',
-            find: {
-                value: 'vehicleFk',
-                label: 'vehiclePlateNumber',
-            },
-        },
-        columnFilter: {
-            inWhere: true,
-        },
-    },
-    {
-        align: 'left',
-        name: 'created',
-        label: t('Date'),
         columnFilter: false,
-        cardVisible: true,
-        create: true,
-        component: 'date',
-        format: ({ date }) => toDate(date),
-    },
-    {
-        align: 'left',
-        name: 'from',
-        label: t('From'),
-        visible: false,
-        cardVisible: true,
-        create: true,
-        component: 'date',
-        format: ({ date }) => toDate(date),
-    },
-    {
-        align: 'left',
-        name: 'to',
-        label: t('To'),
-        visible: false,
-        cardVisible: true,
-        create: true,
-        component: 'date',
-        format: ({ date }) => toDate(date),
-    },
-    {
-        align: 'center',
-        name: 'm3',
-        label: t('Volume'),
-        cardVisible: true,
-        columnClass: 'shrink',
     },
     {
         align: 'left',
         name: 'started',
         label: t('hourStarted'),
-        component: 'time',
+        cardVisible: true,
         columnFilter: false,
+        format: (row) => toHour(row.started),
     },
     {
         align: 'left',
         name: 'finished',
         label: t('hourFinished'),
-        component: 'time',
+        cardVisible: true,
         columnFilter: false,
-    },
+        format: (row) => toHour(row.started),
-    {
-        align: 'center',
-        name: 'kmStart',
-        label: t('KmStart'),
-        columnClass: 'shrink',
-        create: true,
-        visible: false,
-    },
-    {
-        align: 'center',
-        name: 'kmEnd',
-        label: t('KmEnd'),
-        columnClass: 'shrink',
-        create: true,
-        visible: false,
     },
     {
         align: 'left',
         name: 'description',
         label: t('Description'),
+        cardVisible: true,
         isTitle: true,
         create: true,
-        component: 'input',
         field: 'description',
+        columnFilter: false,
     },
     {
         align: 'left',
@@ -200,212 +99,53 @@ const columns = computed(() => [
         align: 'right',
         name: 'tableActions',
         actions: [
-            {
-                title: t('Add tickets'),
-                icon: 'vn:ticketAdd',
-                action: (row) => openTicketsDialog(row?.id),
-            },
             {
                 title: t('components.smartCard.viewSummary'),
                 icon: 'preview',
                 action: (row) => viewSummary(row?.id, RouteSummary),
-            },
+                color: 'primary',
-            {
-                title: t('Route summary'),
-                icon: 'arrow_forward',
-                isPrimary: true,
-                action: (row) => navigate(row?.id),
             },
         ],
     },
 ]);
-
-function navigate(id) {
-    router.push({ path: `/route/${id}` });
-}
-
-const cloneRoutes = () => {
-    if (!selectedRows.value.length || !startingDate.value) return;
-    axios.post('Routes/clone', {
-        created: startingDate.value,
-        ids: selectedRows.value.map((row) => row?.id),
-    });
-    startingDate.value = null;
-    tableRef.value.reload();
-};
-
-const showRouteReport = () => {
-    const ids = selectedRows.value.map((row) => row?.id);
-    const idString = ids.join(',');
-    let url = `Routes/${idString}/driver-route-pdf`;
-    let params = {};
-    if (selectedRows.value.length >= 1) {
-        params = {
-            id: idString,
-        };
-        url = `Routes/downloadZip`;
-    }
-    openReport(url, params, '_blank');
-};
-
-function markAsServed() {
-    selectedRows.value.forEach(async (row) => {
-        await axios.patch(`Routes/${row?.id}`, { isOk: true });
-    });
-    tableRef.value.reload();
-    startingDate.value = null;
-}
-
-const openTicketsDialog = (id) => {
-    quasar
-        .dialog({
-            component: RouteListTicketsDialog,
-            componentProps: {
-                id,
-            },
-        })
-        .onOk(() => tableRef.value.reload());
-};
 </script>
-
 <template>
     <RouteSearchbar />
-    <QDialog v-model="confirmationDialog">
-        <QCard style="min-width: 350px">
-            <QCardSection>
-                <p class="text-h6 q-ma-none">{{ t('Select the starting date') }}</p>
-            </QCardSection>
-
-            <QCardSection class="q-pt-none">
-                <VnInputDate
-                    :label="t('Stating date')"
-                    v-model="startingDate"
-                    autofocus
-                />
-            </QCardSection>
-            <QCardActions align="right">
-                <QBtn flat :label="t('Cancel')" v-close-popup class="text-primary" />
-                <QBtn color="primary" v-close-popup @click="cloneRoutes">
-                    {{ t('globals.clone') }}
-                </QBtn>
-            </QCardActions>
-        </QCard>
-    </QDialog>
-    <VnSubToolbar />
     <RightMenu>
         <template #right-panel>
             <RouteFilter data-key="RouteList" />
         </template>
     </RightMenu>
     <VnTable
-        class="route-list"
         ref="tableRef"
         data-key="RouteList"
         url="Routes/filter"
         :columns="columns"
         :right-search="false"
-        :is-editable="true"
         :filter="routeFilter"
         redirect="route"
-        :row-click="false"
         :create="{
             urlCreate: 'Routes',
             title: t('Create route'),
             onDataSaved: ({ id }) => tableRef.redirect(id),
             formInitialData: {},
         }"
-        save-url="Routes/crud"
-        :disable-option="{ card: true }"
         table-height="85vh"
-        v-model:selected="selectedRows"
-        :table="{
-            'row-key': 'id',
-            selection: 'multiple',
-        }"
     >
-        <template #moreBeforeActions>
+        <template #column-workerFk="{ row }">
-            <QBtn
+            <span class="link" @click.stop>
-                icon="vn:clone"
+                {{ row?.workerUserName }}
-                color="primary"
+                <WorkerDescriptorProxy :id="row?.workerFk" v-if="row?.workerFk" />
-                class="q-mr-sm"
+            </span>
-                :disable="!selectedRows?.length"
-                @click="confirmationDialog = true"
-            >
-                <QTooltip>{{ t('Clone Selected Routes') }}</QTooltip>
-            </QBtn>
-            <QBtn
-                icon="cloud_download"
-                color="primary"
-                class="q-mr-sm"
-                :disable="!selectedRows?.length"
-                @click="showRouteReport"
-            >
-                <QTooltip>{{ t('Download selected routes as PDF') }}</QTooltip>
-            </QBtn>
-            <QBtn
-                icon="check"
-                color="primary"
-                class="q-mr-sm"
-                :disable="!selectedRows?.length"
-                @click="markAsServed()"
-            >
-                <QTooltip>{{ t('Mark as served') }}</QTooltip>
-            </QBtn>
         </template>
     </VnTable>
 </template>
-
-<style lang="scss" scoped>
-.table-input-cell {
-    max-width: 143px;
-}
-
-.route-list {
-    width: 100%;
-    max-height: 100%;
-}
-
-.table-actions {
-    gap: 12px;
-}
-th:last-child,
-td:last-child {
-    background-color: var(--vn-section-color);
-    position: sticky;
-    right: 0;
-}
-</style>
 <i18n>
-en:
-    newRoute: New Route
-    hourStarted: Started hour
-    hourFinished: Finished hour
 es:
-    From: Desde
-    To: Hasta
     Worker: Trabajador
     Agency: Agencia
     Vehicle: Vehículo
-    Volume: Volumen
-    Date: Fecha
     Description: Descripción
     Hour started: Hora inicio
     Hour finished: Hora fin
-    KmStart: Km inicio
-    KmEnd: Km fin
-    Served: Servida
-    newRoute: Nueva Ruta
-    Clone Selected Routes: Clonar rutas seleccionadas
-    Select the starting date: Seleccione la fecha de inicio
-    Stating date: Fecha de inicio
-    Cancel: Cancelar
-    Mark as served: Marcar como servidas
-    Download selected routes as PDF: Descargar rutas seleccionadas como PDF
-    Add ticket: Añadir tickets
-    Preview: Vista previa
-    Summary: Resumen
-    Route is closed: La ruta está cerrada
-    Route is not served: La ruta no está servida
-    hourStarted: Hora de inicio
-    hourFinished: Hora de fin
 </i18n>

src/pages/Supplier/Card/SupplierSummary.vue

@@ -6,7 +6,6 @@ import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import { dashIfEmpty } from 'src/filters';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
-import VnTitle from 'src/components/common/VnTitle.vue';
 
 const route = useRoute();
 const { t } = useI18n();

src/pages/Ticket/Card/TicketMassiveUpdate.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+const $props = defineProps({
+    icon: {
+        type: String,
+        default: 'refresh',
+    },
+    color: {
+        type: String,
+        default: 'primary',
+    },
+    label: {
+        type: String,
+        default: 'refresh',
+    },
+    tooltip: {
+        type: String,
+        default: 'primary',
+    },
+});
+</script>
+
+<template>
+    <QBtn :color="$props.color" :icon="$props.icon" :label="t($props.label)">
+        <QPopupProxy ref="popupProxyRef" style="max-width: none">
+            <QCard>
+                <slot></slot>
+            </QCard>
+        </QPopupProxy>
+        <QTooltip>{{ t($props.tooltip) }}</QTooltip>
+    </QBtn>
+</template>
+
+<i18n>
+    en:
+        params:
+            valentinesDay: Valentine's Day
+            mothersDay: Mother's Day
+            allSaints: All Saints' Day
+    es:
+        params:
+            valentinesDay: Día de San Valentín
+            mothersDay: Día de la Madre
+            allSaints: Día de Todos los Santos
+        Campaign consumption: Consumo campaña
+        Campaign: Campaña
+        From: Desde
+        To: Hasta
+</i18n>

src/pages/Ticket/Card/TicketSale.vue

@@ -497,8 +497,9 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     :disable="!isTicketEditable || !selectedSales.length"
                     @click="setTransferParams()"
                 >
-                    <QTooltip>{{ t('Transfer lines') }}</QTooltip>
+                    <QTooltip>{{ t('ticketSale.transferLines') }}</QTooltip>
                     <TicketTransfer
+                        class="full-width"
                         :transfer="transfer"
                         :ticket="store.data"
                         @refresh-data="resetChanges()"
@@ -763,5 +764,4 @@ 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
-    Transfer lines: Transferir líneas
 </i18n>

src/pages/Ticket/Card/TicketSplit.vue

@@ -0,0 +1,113 @@
+<script setup>
+import { ref, toRefs } from 'vue';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify';
+import { useValidator } from 'src/composables/useValidator';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelect from 'components/common/VnSelect.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+import FetchData from 'src/components/FetchData.vue';
+import { watch } from 'vue';
+import { onMounted } from 'vue';
+const { t } = useI18n();
+const columns = [
+    {
+        name: 'name',
+        required: true,
+        label: 'Dessert (100g serving)',
+        align: 'left',
+        field: (row) => row.name,
+        format: (val) => `${val}`,
+        sortable: true,
+    },
+];
+
+const rows = [
+    {
+        name: 'Frozen Yogurt',
+        calories: 159,
+        fat: 6.0,
+        carbs: 24,
+        protein: 4.0,
+        sodium: 87,
+        calcium: '14%',
+        iron: '1%',
+    },
+];
+</script>
+
+<template>
+    <QBtn color="primary" icon="show_chart">
+        <QPopupProxy ref="popupProxyRef" style="max-width: none">
+            <QCard class="column q-pa-md">
+                <span class="text-body1 q-mb-sm">{{ t('Campaign consumption') }}</span>
+                <VnRow class="q-gutter-md q-mb-md" style="min-width: 70vw">
+                    <QCard class="column q-pa-md vn-one">
+                        <VnRow class="row q-gutter-md q-mb-md">
+                            <span class="text-body1 q-mb-sm"
+                                >Lineas a transferir</span
+                            ></VnRow
+                        >
+                        <QTable
+                            flat
+                            bordered
+                            title="Treats"
+                            :rows="rows"
+                            :columns="columns"
+                            row-key="name"
+                        />
+                    </QCard>
+                    <QCard class="column q-pa-md vn-one">
+                        <VnRow class="row q-gutter-md q-mb-md">
+                            <span class="text-body1 q-mb-sm"
+                                >Ticket destinatario</span
+                            ></VnRow
+                        >
+                        <QTable
+                            flat
+                            bordered
+                            title="Treats"
+                            :rows="rows"
+                            :columns="columns"
+                            row-key="name"
+                        />
+                    </QCard>
+                </VnRow>
+                <!-- <div class="q-mt-lg row justify-end">
+                    <QBtn
+                        :label="t('globals.cancel')"
+                        color="primary"
+                        flat
+                        class="q-mr-md"
+                        v-close-popup
+                    />
+                    <QBtn
+                        :label="t('globals.save')"
+                        type="submit"
+                        color="primary"
+                        @click="onSubmit()"
+                    />
+                </div> -->
+            </QCard>
+        </QPopupProxy>
+        <QTooltip>{{ t('Campaign consumption') }}</QTooltip>
+    </QBtn>
+</template>
+
+<i18n>
+    en:
+        params:
+            valentinesDay: Valentine's Day
+            mothersDay: Mother's Day
+            allSaints: All Saints' Day
+    es:
+        params:
+            valentinesDay: Día de San Valentín
+            mothersDay: Día de la Madre
+            allSaints: Día de Todos los Santos
+        Campaign consumption: Consumo campaña
+        Campaign: Campaña
+        From: Desde
+        To: Hasta
+</i18n>

src/pages/Ticket/Card/TicketTransfer.vue

@@ -27,14 +27,14 @@ const $props = defineProps({
         default: () => {},
     },
 });
+const _transfer = ref(null);
 
+onMounted(() => (_transfer.value = $props.transfer));
 const emit = defineEmits(['refreshData']);
 
 const router = useRouter();
 const { t } = useI18n();
-const QPopupProxyRef = ref(null);
+const popupProxyRef = ref(null);
-
-const _transfer = ref(null);
 
 const transferLinesColumns = computed(() => [
     {
@@ -99,13 +99,11 @@ const transferSales = async (ticketId) => {
     if (data && data.id === $props.ticket.id) emit('refreshData');
     else router.push({ name: 'TicketSale', params: { id: data.id } });
 };
-
-onMounted(() => (_transfer.value = $props.transfer));
 </script>
 
 <template>
-    <QPopupProxy ref="QPopupProxyRef">
+    <QPopupProxy ref="popupProxyRef">
-        <QCard class="q-px-md" style="display: flex">
+        <QCard class="full-width q-px-md" style="display: flex; width: 100vw">
             <QTable
                 v-if="transfer.sales"
                 :rows="transfer.sales"
@@ -137,6 +135,9 @@ onMounted(() => (_transfer.value = $props.transfer));
                 :title="t('Destination ticket')"
                 row-key="id"
                 class="full-width q-mt-md"
+                :no-data-label="t('globals.noResults')"
+                :pagination="{ rowsPerPage: 0 }"
+                @row-click="(_, row) => transferSales(row.id)"
             >
                 <template #body-cell-address="{ row }">
                     <QTd @click.stop>
@@ -167,7 +168,11 @@ onMounted(() => (_transfer.value = $props.transfer));
         </QCard>
     </QPopupProxy>
 </template>
-
+<style lang="scss">
+.q-table__bottom.row.items-center.q-table__bottom--nodata {
+    border-top: none;
+}
+</style>
 <i18n>
 es:
     Sales to transfer: Líneas a transferir

src/pages/Ticket/Negative/TicketLackDetail.vue

@@ -0,0 +1,261 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import ChangeQuantityDialog from 'pages/Ticket/Negative/components/ChangeQuantityDialog.vue';
+import ChangeStateDialog from 'pages/Ticket/Negative/components/ChangeStateDialog.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import TicketTransfer from '../Card/TicketTransfer.vue';
+import TicketMassiveUpdate from '../Card/TicketMassiveUpdate.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import FetchData from 'src/components/FetchData.vue';
+import { useStateStore } from 'stores/useStateStore';
+import { useRoute } from 'vue-router';
+// import { useArrayData } from 'src/composables/useArrayData';
+import VnImg from 'src/components/ui/VnImg.vue';
+import TicketLackTable from './TicketLackTable.vue';
+import ItemProposalProxy from 'src/pages/Item/components/ItemProposalProxy.vue';
+import { toCurrency } from 'filters/index';
+
+const { t } = useI18n();
+const URL_KEY = 'Tickets/ItemLack';
+const editableStates = ref([]);
+const stateStore = useStateStore();
+const proposalDialogRef = ref();
+const tableRef = ref();
+const changeStateDialogRef = ref();
+const changeQuantityDialogRef = ref();
+const showProposalDialog = ref(false);
+const showChangeQuantityDialog = ref(false);
+const showFree = ref(true);
+const selectedRows = ref([]);
+const badgeLackRef = ref();
+const route = useRoute();
+const itemLack = ref(null);
+const originalRowDataCopy = ref(null);
+onMounted(() => {
+    stateStore.rightDrawer = false;
+});
+onUnmounted(() => {
+    stateStore.rightDrawer = true;
+});
+
+const copyOriginalRowsData = (rows) => {
+    originalRowDataCopy.value = JSON.parse(JSON.stringify(rows));
+};
+const entityId = computed(() => route.params.id);
+const item = ref({});
+
+const itemLackForm = ref();
+
+const reload = async () => {
+    itemLackForm.value.fetch();
+};
+defineExpose({ reload });
+
+// Función de comparación
+// function freeFirst({ alertLevel: a }, { alertLevel: b }) {
+//     const DEFAULT = 0;
+//     // Si el estado de 'a' es 'free' y el de 'b' no lo es, 'a' viene primero
+//     if (a === DEFAULT && b !== DEFAULT) {
+//         return -1;
+//     }
+//     // Si el estado de 'b' es 'free' y el de 'a' no lo es, 'b' viene primero
+//     if (b === DEFAULT && a !== DEFAULT) {
+//         return 1;
+//     }
+//     // En cualquier otro caso, no se cambia el orden
+//     return 0;
+// }
+// const { store } = useArrayData(URL_KEY);
+// const handleRows = (rows) => {
+//     // rows.forEach((row) => (row.concept = item.value.name));
+//     rows = rows.sort(freeFirst);
+//     if (showFree.value) return rows.filter(({ alertLevel }) => alertLevel === 0);
+//     return rows;
+// };
+
+const itemProposalEvt = (data) => {
+    const { itemProposal, quantity } = data;
+    itemProposalSelected.value = itemProposal;
+    // badgeLackRef.value.reload();
+    itemLack.value.lack += +quantity;
+    tableRef.value.reload();
+    // replaceItem();
+};
+const itemProposalSelected = ref(null);
+// const replaceItem = () => {
+//     const rows = handleRows(originalRowDataCopy.value).sort((row) => row.quantity);
+//     for (const ticket of rows) {
+//         if (ticket.quantity > itemProposalSelected.value.available) continue;
+//         originalRowDataCopy.value.splice(originalRowDataCopy.value.indexOf(ticket));
+//         ticket.itemFk = itemProposalSelected.value.id;
+//         selectedRows.value.push({ ticketFk: ticket.ticketFk });
+//         itemProposalSelected.value.available -= ticket.quantity;
+//         itemLack.value.lack += ticket.quantity;
+//         const index = store.data.findIndex((t) => t.ticketFk === ticket.ticketFk);
+//         store.data.splice(index, 1);
+//         console.log(ticket);
+//         useArrayData('ItemsGetSimilar').store.data[1].available =
+//             itemProposalSelected.value.available;
+//     }
+// };
+</script>
+
+<template>
+    <FetchData
+        url="States/editableStates"
+        @on-fetch="(data) => (editableStates = data)"
+        auto-load
+    />
+    <FetchData
+        :url="`Items/${entityId}/getCard`"
+        :fields="['longName']"
+        @on-fetch="(data) => (item = data)"
+        auto-load
+    />
+    <FetchData
+        :url="`Buys/latestBuysFilter`"
+        :fields="['longName']"
+        :filter="{ where: { 'i.id': '2' } }"
+        @on-fetch="(data) => Object.assign(item.value, data[0])"
+        auto-load
+    />
+    <FetchData
+        :url="`Tickets/itemLack`"
+        :params="{ itemFk: entityId }"
+        @on-fetch="
+            (data) => {
+                itemLack = data[0];
+            }
+        "
+        auto-load
+    />
+    <VnSubToolbar>
+        <template #st-data>
+            <QBtnGroup push style="column-gap: 1px">
+                <TicketMassiveUpdate
+                    :disable="selectedRows.length < 2"
+                    :label="t('negative.buttonsUpdate.state')"
+                    :tooltip="t('negative.detail.modal.changeState.title')"
+                >
+                    <ChangeStateDialog
+                        ref="changeStateDialogRef"
+                        :selected-rows="selectedRows"
+                    ></ChangeStateDialog>
+                </TicketMassiveUpdate>
+                <TicketMassiveUpdate
+                    :label="t('negative.buttonsUpdate.quantity')"
+                    :tooltip="t('negative.detail.modal.changeQuantity.title')"
+                    @click="showChangeQuantityDialog = true"
+                    :disable="selectedRows.length < 2"
+                >
+                    <ChangeQuantityDialog
+                        ref="changeQuantityDialogRef"
+                        :selected-rows="selectedRows"
+                    >
+                    </ChangeQuantityDialog>
+                </TicketMassiveUpdate>
+                <QBtn
+                    color="primary"
+                    icon="vn:splitline"
+                    :disable="selectedRows.length < 1"
+                >
+                    <QTooltip>{{ t('ticketSale.transferLines') }}</QTooltip>
+                    <TicketTransfer
+                        class="full-width"
+                        :transfer="{
+                            sales: selectedRows,
+                            lastActiveTickets: selectedRows.map((row) => row.ticketFk),
+                        }"
+                    ></TicketTransfer>
+                </QBtn>
+                <QBtn
+                    color="primary"
+                    @click="showProposalDialog = true"
+                    :disable="selectedRows.length < 1"
+                >
+                    <QIcon name="import_export" class="rotate-90"></QIcon>
+                    <ItemProposalProxy
+                        ref="proposalDialogRef"
+                        :item-lack="itemLack"
+                        :replace-action="true"
+                        :sales="selectedRows"
+                        @item-replaced="itemProposalEvt"
+                    ></ItemProposalProxy>
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('itemProposal') }}
+                    </QTooltip>
+                </QBtn>
+            </QBtnGroup>
+            <QCheckbox v-model="showFree" :label="t('negative.detail.showFree')" />
+        </template>
+    </VnSubToolbar>
+    <QPage>
+        <div class="full-width" style="padding-bottom: 0px">
+            <VnPaginate
+                :data-key="URL_KEY"
+                :url="`${URL_KEY}/${entityId}`"
+                ref="itemLackForm"
+                @on-fetch="copyOriginalRowsData"
+                auto-load
+                class="full-width q-pa-md"
+            >
+                <template #body>
+                    <div style="display: flex; align-items: center">
+                        <VnImg :id="item.id" class="rounded image-wrapper"></VnImg>
+                        <div
+                            style="
+                                display: flex;
+                                align-items: center;
+                                flex-direction: column;
+                            "
+                        >
+                            <QBadge
+                                ref="badgeLackRef"
+                                class="q-ml-xs"
+                                v-if="itemLack"
+                                text-color="white"
+                                :color="itemLack.lack === 0 ? 'green' : 'red'"
+                                :label="itemLack.lack"
+                            />
+                            <!-- <QBadge
+                                color="secondary"
+                                class="q-ml-xs q-mt-xs"
+                                v-if="itemLack"
+                                :label="toCurrency(itemLack.quantity * itemLack.price)"
+                                outline
+                            /> -->
+                        </div>
+                        <QBtn flat class="link text-blue">
+                            {{ item.longName }}
+                            <ItemDescriptorProxy :id="entityId" />
+                        </QBtn>
+                        <FetchedTags class="q-ml-md" :item="item" />
+                    </div>
+                </template>
+            </VnPaginate>
+        </div>
+
+        <TicketLackTable
+            ref="tableRef"
+            :filter="{ alertLevel: showFree }"
+            @update:selection="({ value }, _) => (selectedRows = value)"
+        ></TicketLackTable>
+    </QPage>
+</template>
+<style lang="scss" scoped>
+.list-enter-active,
+.list-leave-active {
+    transition: all 1s ease;
+}
+.list-enter-from,
+.list-leave-to {
+    opacity: 0;
+    background-color: $primary;
+}
+.q-table.q-table__container > div:first-child {
+    border-radius: unset;
+}
+</style>

src/pages/Ticket/Negative/TicketLackFilter.vue

@@ -0,0 +1,122 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const to = Date.vnNew();
+to.setDate(to.getDate() + 1);
+
+const itemTypesRef = ref(null);
+const itemTypesOptions = ref([]);
+
+const itemTypesFilter = {
+    fields: ['id', 'name', 'categoryFk'],
+    include: 'category',
+    order: 'name ASC',
+    where: {},
+};
+</script>
+
+<template>
+    <FetchData
+        ref="itemTypesRef"
+        url="ItemTypes"
+        :filter="itemTypesFilter"
+        @on-fetch="(data) => (itemTypesOptions = data)"
+        auto-load
+    />
+
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`negative.${tag.label}`) }}</strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params, searchFn }">
+            <QList dense class="q-gutter-y-sm q-mt-sm">
+                <QItem>
+                    <QItemSection>
+                        <VnInput
+                            v-model="params.days"
+                            :label="t('negative.days')"
+                            dense
+                            is-outlined
+                            type="number"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInput
+                            v-model="params.id"
+                            :label="t('negative.id')"
+                            dense
+                            is-outlined
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInput
+                            v-model="params.producer"
+                            :label="t('negative.producer')"
+                            dense
+                            is-outlined
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInput
+                            v-model="params.origen"
+                            :label="t('negative.origen')"
+                            dense
+                            is-outlined
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection v-if="itemTypesOptions">
+                        <VnSelect
+                            :label="t('negative.type')"
+                            v-model="params.typeFk"
+                            @update:model-value="searchFn()"
+                            :options="itemTypesOptions"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
+                                        <QItemLabel caption>{{
+                                            scope.opt?.category?.name
+                                        }}</QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelect> </QItemSection
+                    ><QItemSection v-else>
+                        <QSkeleton class="full-width" type="QSelect" />
+                    </QItemSection>
+                </QItem>
+            </QList>
+        </template>
+    </VnFilterPanel>
+</template>

src/pages/Ticket/Negative/TicketLackList.vue

@@ -0,0 +1,239 @@
+<script setup>
+import { computed, ref, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import NegativeOriginDialog from 'pages/Ticket/Negative/components/NegativeOriginDialog.vue';
+import { onBeforeMount } from 'vue';
+import { dashIfEmpty, toDate, toHour } from 'src/filters';
+import { useRouter } from 'vue-router';
+import { useState } from 'src/composables/useState';
+import { useRole } from 'src/composables/useRole';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+const router = useRouter();
+import TicketLackFilter from './TicketLackFilter.vue';
+
+const stateStore = useStateStore();
+const { t } = useI18n();
+const selectedRows = ref([]);
+const showNegativeOriginDialog = ref(false);
+
+const negativeParams = reactive({
+    days: useRole().likeAny('buyer') ? 2 : 0,
+    warehouseFk: useState().getUser().value.warehouseFk,
+});
+const redirectToCreateView = ({ itemFk }) => {
+    router.push({ name: 'NegativeDetail', params: { id: itemFk } });
+};
+const originDialogRef = ref();
+const columns = computed(() => [
+    {
+        name: 'date',
+        align: 'left',
+        label: t('negative.date'),
+        format: ({ timed }) => toDate(timed),
+        sortable: true,
+        cardVisible: true,
+        isId: true,
+        columnFilter: {
+            component: 'date',
+        },
+    },
+    {
+        columnClass: 'shrink',
+        name: 'timed',
+        align: 'left',
+        label: t('negative.timed'),
+        format: ({ timed }) => toHour(timed),
+        sortable: true,
+        cardVisible: true,
+        columnFilter: {
+            component: 'time',
+        },
+    },
+    {
+        name: 'itemFk',
+        align: 'left',
+        label: t('negative.id'),
+        format: ({ itemFk }) => itemFk,
+        sortable: true,
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+            columnClass: 'shrink',
+        },
+    },
+    {
+        name: 'longName',
+        align: 'left',
+        label: t('negative.longName'),
+        field: ({ longName }) => longName,
+        columnField: {
+            component: 'descriptor',
+            attrs: {
+                label: ({ longName }) => longName,
+                proxy: {
+                    key: 'itemFk',
+                    component: ItemDescriptorProxy,
+                },
+            },
+        },
+        sortable: true,
+        headerStyle: 'width: 350px',
+        cardVisible: true,
+        columnClass: 'expand',
+    },
+    {
+        name: 'producer',
+        align: 'left',
+        label: t('negative.supplier'),
+        field: ({ producer }) => dashIfEmpty(producer),
+        sortable: true,
+        columnClass: 'shrink',
+    },
+    {
+        name: 'inkFk',
+        align: 'left',
+        label: t('negative.colour'),
+        field: ({ inkFk }) => inkFk,
+        sortable: true,
+        cardVisible: true,
+    },
+    {
+        name: 'size',
+        align: 'left',
+        label: t('negative.size'),
+        field: ({ size }) => size,
+        sortable: true,
+        cardVisible: true,
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+            columnClass: 'shrink',
+        },
+    },
+    {
+        name: 'category',
+        align: 'left',
+        label: t('negative.origen'),
+        field: ({ category }) => dashIfEmpty(category),
+        sortable: true,
+        cardVisible: true,
+    },
+    {
+        name: 'lack',
+        align: 'left',
+        label: t('negative.lack'),
+        field: ({ lack }) => lack,
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+            columnClass: 'shrink',
+        },
+        sortable: true,
+        headerStyle: 'padding-left: 33px',
+        cardVisible: true,
+    },
+    {
+        name: 'tableActions',
+        align: 'left',
+        actions: [
+            {
+                title: t('Open details'),
+                icon: 'preview',
+                action: redirectToCreateView,
+                isPrimary: true,
+            },
+        ],
+    },
+]);
+const tableRef = ref();
+onBeforeMount(() => {
+    stateStore.$state.rightDrawer = true;
+});
+</script>
+
+<template>
+    <QPage class="column items-center">
+        <VnSubToolbar class="bg-vn-dark justify-end">
+            <template #st-actions>
+                <QBtn
+                    color="primary"
+                    :disable="!selectedRows?.length"
+                    @click="showNegativeOriginDialog = true"
+                    :label="t('negative.negativeAction')"
+                >
+                    <QPopupProxy ref="popupProxyRef" style="max-width: none">
+                        <QCard>
+                            <NegativeOriginDialog
+                                ref="originDialogRef"
+                                :selected-rows="selectedRows"
+                            /> </QCard
+                    ></QPopupProxy>
+                    <QTooltip>{{ t('negative.negativeAction') }}</QTooltip>
+                </QBtn>
+            </template>
+        </VnSubToolbar>
+        <RightMenu>
+            <template #right-panel>
+                <TicketLackFilter data-key="NegativeList" />
+            </template>
+        </RightMenu>
+        <VnTable
+            ref="tableRef"
+            data-key="NegativeList"
+            :url="`Tickets/itemLack`"
+            :order="['itemFk DESC, date DESC, timed DESC']"
+            :user-params="negativeParams"
+            auto-load
+            :columns="columns"
+            default-mode="table"
+            :right-search="false"
+            :is-editable="false"
+            :use-model="true"
+            :row-click="redirectToCreateView"
+            v-model:selected="selectedRows"
+            :create="false"
+            :table="{
+                'row-key': 'itemFk',
+                selection: 'multiple',
+            }"
+        >
+            <template #column-itemFk="{ row }">
+                {{ row.itemFk }}
+                <VnImg
+                    style="width: 50px; height: 50px; float: inline-end"
+                    :id="row.itemFk"
+                    class="rounded"
+                ></VnImg>
+            </template>
+        </VnTable>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.list {
+    max-height: 100%;
+    padding: 15px;
+    width: 100%;
+}
+
+.grid-style-transition {
+    transition: transform 0.28s, background-color 0.28s;
+}
+
+#true {
+    background-color: $positive;
+}
+
+#false {
+    background-color: $negative;
+}
+
+div.q-dialog__inner > div {
+    max-width: fit-content !important;
+}
+.q-btn-group > .q-btn-item:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+</style>

src/pages/Ticket/Negative/TicketLackTable.vue

@@ -0,0 +1,297 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import FetchData from 'src/components/FetchData.vue';
+import { toDate, toHour } from 'src/filters';
+import useNotify from 'src/composables/useNotify.js';
+import ZoneDescriptorProxy from 'pages/Zone/Card/ZoneDescriptorProxy.vue';
+import { useRoute } from 'vue-router';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import TicketDescriptorProxy from '../Card/TicketDescriptorProxy.vue';
+import VnInputNumber from 'src/components/common/VnInputNumber.vue';
+const selectedRows = ref([]);
+const $props = defineProps({
+    filter: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+watch(
+    () => $props.filter,
+    (v) => {
+        filterLack.value.where = v;
+        tableRef.value.reload(filterLack);
+    }
+);
+const filterLack = ref({
+    include: [
+        {
+            relation: 'workers',
+            scope: {
+                fields: ['id', 'firstName'],
+            },
+        },
+    ],
+    where: { alertLevel: 'FREE' },
+    order: 'ts.alertLevelCODE ASC',
+});
+const { t } = useI18n();
+const URL_KEY = 'Tickets/ItemLack';
+const editableStates = ref([]);
+const { notify } = useNotify();
+
+const route = useRoute();
+const itemLack = ref(null);
+const getInputEvents = ({ col, ...rows }) => ({
+    'update:modelValue': () => saveChange(col.name, rows),
+    'keyup.enter': () => saveChange(col.name, rows),
+});
+const saveChange = async (field, { rowIndex, row }) => {
+    try {
+        switch (field) {
+            case 'code':
+                await axios.post(`Tickets/state`, {
+                    ticketFk: row.ticketFk,
+                    code: row[field],
+                });
+                break;
+
+            case 'quantity':
+                await axios.post(`Sales/${row.saleFk}/updateQuantity`, {
+                    quantity: +row.quantity,
+                });
+                break;
+
+            default:
+                console.error(field, { rowIndex, row });
+                break;
+        }
+        notify('globals.dataSaved', 'positive');
+    } catch (err) {
+        console.error('Error saving changes', err);
+    }
+};
+const entityId = computed(() => route.params.id);
+const item = ref({});
+
+const columns = computed(() => [
+    {
+        name: 'status',
+        align: 'left',
+        sortable: false,
+        columnClass: 'expand',
+        columnFilter: false,
+    },
+    {
+        name: 'saleFk',
+        label: t('negative.detail.saleFk'),
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+        },
+        columnClass: 'shrink',
+    },
+    {
+        name: 'ticketFk',
+        label: t('negative.detail.ticketFk'),
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+        },
+        columnClass: 'shrink',
+    },
+    {
+        name: 'shipped',
+        label: t('negative.detail.shipped'),
+        field: 'shipped',
+        align: 'left',
+        format: ({ shipped }) => toDate(shipped),
+        sortable: true,
+        columnFilter: {
+            component: 'date',
+            columnClass: 'shrink',
+        },
+    },
+    {
+        name: 'theoreticalhour',
+        label: t('negative.detail.theoreticalhour'),
+        field: 'theoreticalhour',
+        align: 'left',
+        format: ({ theoreticalhour }) => toHour(theoreticalhour),
+        sortable: true,
+        component: 'time',
+        columnClass: 'shrink',
+        attrs: { ON: { blur: (data) => console.error(data) } },
+        columnFilter: {},
+    },
+    {
+        name: 'alertLevelCode',
+        label: t('negative.detail.state'),
+
+        align: 'left',
+        sortable: true,
+
+        // columnFilter: {
+        columnField: {
+            component: 'select',
+            attrs: {
+                event: console.error,
+                // event: console.error,
+                options: editableStates.value,
+                'option-value': 'id',
+                'option-label': 'name',
+                // },
+            },
+        },
+    },
+    {
+        name: 'zoneName',
+        label: t('negative.detail.zoneName'),
+        field: 'zoneName',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        name: 'nickname',
+        label: t('negative.detail.nickname'),
+        field: 'nickname',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        name: 'quantity',
+        label: t('negative.detail.quantity'),
+        field: 'quantity',
+        align: 'left',
+        sortable: true,
+        component: 'input',
+        type: 'number',
+    },
+]);
+const itemLackForm = ref();
+
+const reload = async (data) => {
+    // window.location.reload();
+    console.error(data);
+};
+defineExpose({ reload });
+const emit = defineEmits(['update:selection']);
+
+const tableRef = ref(null);
+watch(selectedRows, () => emit('update:selection', selectedRows));
+</script>
+
+<template>
+    <FetchData
+        url="States/editableStates"
+        @on-fetch="(data) => (editableStates = data)"
+        auto-load
+    />
+    <FetchData
+        :url="`Items/${entityId}/getCard`"
+        :fields="['longName']"
+        @on-fetch="(data) => (item = data)"
+        auto-load
+    />
+    <FetchData
+        :url="`Buys/latestBuysFilter`"
+        :fields="['longName']"
+        :filter="{ where: { 'i.id': '2' } }"
+        @on-fetch="(data) => Object.assign(item.value, data[0])"
+        auto-load
+    />
+    <FetchData
+        :url="`Tickets/itemLack`"
+        :params="{ itemFk: entityId }"
+        @on-fetch="
+            (data) => {
+                itemLack = data[0];
+            }
+        "
+        auto-load
+    />
+    <VnTable
+        ref="tableRef"
+        :data-key="URL_KEY"
+        :url="`${URL_KEY}/${entityId}`"
+        :columns="columns"
+        :without-header="true"
+        auto-load
+        :create="false"
+        :create-as-dialog="false"
+        :use-model="true"
+        :filter="filterLack"
+        :order="['ts.alertLevelCode ASC']"
+        :table="{
+            'row-key': 'id',
+            selection: 'multiple',
+        }"
+        dense
+        :is-editable="true"
+        :row-click="false"
+        :right-search="false"
+        v-model:selected="selectedRows"
+    >
+        <template #column-quantity="props">
+            <VnInputNumber
+                v-model.number="props.row.quantity"
+                v-on="getInputEvents(props)"
+            ></VnInputNumber>
+        </template>
+        <template #column-status="{ row }">
+            <QTd style="width: 150px">
+                <QIcon
+                    v-if="row.isRookie"
+                    name="vn:person"
+                    size="xs"
+                    color="primary"
+                    class="cursor-pointer"
+                >
+                    <QTooltip>{{ t('negative.detail.isRookie') }}</QTooltip>
+                </QIcon>
+                <QIcon
+                    v-if="row.peticionCompra"
+                    name="vn:buyrequest"
+                    size="xs"
+                    color="primary"
+                    class="cursor-pointer"
+                >
+                    <QTooltip>{{ t('negative.detail.peticionCompra') }}</QTooltip>
+                </QIcon>
+                <QIcon
+                    v-if="row.turno"
+                    name="vn:calendar"
+                    size="xs"
+                    color="primary"
+                    class="cursor-pointer"
+                >
+                    <QTooltip>{{ t('negative.detail.turno') }}</QTooltip>
+                </QIcon></QTd
+            >
+        </template>
+        <template #column-ticketFk="{ row }"
+            ><span class="link">{{ row.ticketFk }}</span>
+            <TicketDescriptorProxy :id="row.ticketFk"
+        /></template>
+        <template #column-zoneName="{ row }">
+            <span class="link">{{ row.zoneName }}</span>
+            <ZoneDescriptorProxy :id="row.zoneFk" />
+        </template>
+    </VnTable>
+</template>
+<style lang="scss" scoped>
+.list-enter-active,
+.list-leave-active {
+    transition: all 1s ease;
+}
+.list-enter-from,
+.list-leave-to {
+    opacity: 0;
+    background-color: $primary;
+}
+</style>

src/pages/Ticket/Negative/components/ChangeQuantityDialog.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import { useDialogPluginComponent } from 'quasar';
+import VnInput from 'src/components/common/VnInput.vue';
+
+const { t } = useI18n();
+const showChangeQuantityDialog = ref(false);
+const newQuantity = ref(null);
+const { dialogRef } = useDialogPluginComponent();
+const $props = defineProps({
+    selectedRows: {
+        type: Array,
+        default: () => [],
+    },
+});
+const updateQuantity = async () => {
+    showChangeQuantityDialog.value = true;
+    const rowsToUpdate = $props.selectedRows.map(({ saleFk }) =>
+        axios.post(`Sales/${saleFk}/updateQuantity`, {
+            quantity: +newQuantity.value,
+        })
+    );
+
+    try {
+        await Promise.all(rowsToUpdate);
+    } catch (err) {
+        return err;
+    } finally {
+        dialogRef.value.hide({ type: 'refresh', refresh: true });
+    }
+};
+</script>
+
+<template>
+    <QCard class="q-pa-sm">
+        <QCardSection class="row items-center justify-center column items-stretch">
+            <span>{{ t('negative.detail.modal.changeQuantity.title') }}</span>
+            <VnInput
+                type="number"
+                :min="0"
+                :label="t('negative.detail.modal.changeQuantity.placeholder')"
+                v-model="newQuantity"
+            />
+        </QCardSection>
+        <QCardActions align="right">
+            <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
+            <QBtn
+                :label="t('globals.confirm')"
+                color="primary"
+                :disable="!newQuantity || newQuantity < 0"
+                @click="updateQuantity"
+                unelevated
+                autofocus
+            /> </QCardActions
+    ></QCard>
+</template>
+
+<style lang="scss" scoped>
+.list {
+    max-height: 100%;
+    padding: 15px;
+    width: 100%;
+}
+
+.grid-style-transition {
+    transition: transform 0.28s, background-color 0.28s;
+}
+
+#true {
+    background-color: $positive;
+}
+
+#false {
+    background-color: $negative;
+}
+
+div.q-dialog__inner > div {
+    max-width: fit-content !important;
+}
+</style>

src/pages/Ticket/Negative/components/ChangeStateDialog.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import { useDialogPluginComponent } from 'quasar';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+
+const editableStates = ref([]);
+const { t } = useI18n();
+const showChangeStateDialog = ref(false);
+const newState = ref(null);
+const { dialogRef } = useDialogPluginComponent();
+const $props = defineProps({
+    selectedRows: {
+        type: Array,
+        default: () => [],
+    },
+});
+const updateState = async () => {
+    try {
+        showChangeStateDialog.value = true;
+        const rowsToUpdate = $props.selectedRows.map(({ ticketFk }) =>
+            axios.post(`Tickets/state`, {
+                ticketFk,
+                code: newState.value,
+            })
+        );
+        await Promise.all(rowsToUpdate);
+    } catch (err) {
+        return err;
+    } finally {
+        dialogRef.value.hide({ type: 'refresh', refresh: true });
+    }
+};
+</script>
+
+<template>
+    <FetchData
+        url="States/editableStates"
+        @on-fetch="(data) => (editableStates = data)"
+        auto-load
+    />
+    <QCard class="q-pa-sm">
+        <QCardSection class="row items-center justify-center column items-stretch">
+            <span>{{ t('negative.detail.modal.changeState.title') }}</span>
+            <VnSelect
+                :label="t('negative.detail.modal.changeState.placeholder')"
+                v-model="newState"
+                :options="editableStates"
+                option-label="name"
+                option-value="code"
+            />
+        </QCardSection>
+        <QCardActions align="right">
+            <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
+            <QBtn
+                :label="t('globals.confirm')"
+                color="primary"
+                :disable="!newState"
+                @click="updateState"
+                unelevated
+                autofocus
+            /> </QCardActions
+    ></QCard>
+</template>
+
+<style lang="scss" scoped>
+.list {
+    max-height: 100%;
+    padding: 15px;
+    width: 100%;
+}
+
+.grid-style-transition {
+    transition: transform 0.28s, background-color 0.28s;
+}
+
+#true {
+    background-color: $positive;
+}
+
+#false {
+    background-color: $negative;
+}
+
+div.q-dialog__inner > div {
+    max-width: fit-content !important;
+}
+</style>

src/pages/Ticket/Negative/components/HandleSplited.vue

@@ -0,0 +1,270 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import { useDialogPluginComponent } from 'quasar';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+const { t } = useI18n();
+const showSplitDialog = ref(false);
+const newState = ref(null);
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+const $props = defineProps({
+    tickets: {
+        type: Array,
+        default: () => [],
+    },
+});
+const tickets = ref($props.tickets ?? []);
+const rowBtnDisable = () =>
+    !(
+        formData.value?.agencyModeFk &&
+        formData.value?.date &&
+        rowsSelected.value.length > 0
+    );
+const rowsSelected = ref([]);
+
+const columns = computed(() => [
+    {
+        name: 'status',
+        label: t('negative.split.status'),
+        field: ({ status }) => status,
+        sortable: true,
+    },
+    {
+        name: 'ticket',
+        label: t('negative.split.ticket'),
+        field: ({ ticket }) => ticket,
+        sortable: true,
+    },
+    {
+        name: 'newTicket',
+        label: t('negative.split.newTicket'),
+        field: ({ newTicket }) => newTicket,
+        sortable: true,
+    },
+    {
+        name: 'message',
+        label: t('negative.split.message'),
+        field: ({ message }) => message,
+        sortable: true,
+    },
+]);
+
+const formData = ref({ agencies: [] });
+const handleDateChanged = async () => {
+    const { data: agencyData } = await axios.get('Agencies/getLanded', {
+        params: {
+            addressFk: 123,
+            agencyModeFk: 8,
+            warehouseFk: 1,
+            shipped: '2001-02-08T23:00:00.000Z',
+        },
+    });
+    if (!agencyData) formData.value.agencies = [];
+    const { zoneFk } = agencyData;
+    const { data: zoneData } = await axios.get('Zones/Includingexpired', {
+        params: { filter: { fields: ['id', 'name'], where: { id: zoneFk } } },
+    });
+    formData.value.agencies = zoneData;
+    if (zoneData.length === 1) formData.value.agencyModeFk = zoneData[0];
+};
+const ticketsSelected = ref([]);
+onMounted(() => {
+    ticketsSelected.value = [...new Set($props.tickets.map(({ ticketFk }) => ticketFk))];
+});
+
+const updateState = async () => {
+    try {
+        showSplitDialog.value = true;
+        const rowsToUpdate = $props.tickets.map(({ ticketFk }) =>
+            axios.post(`Tickets/state`, {
+                ticketFk,
+                code: newState.value,
+            })
+        );
+        await Promise.all(rowsToUpdate);
+    } catch (err) {
+        return err;
+    } finally {
+        dialogRef.value.hide({ type: 'refresh', refresh: true });
+    }
+};
+
+function getIcon(value) {
+    const icons = {
+        split: {
+            name: 'check_circle',
+            color: 'secondary',
+        },
+        noSplit: {
+            name: 'warning',
+            color: 'primary',
+        },
+        error: {
+            name: 'close',
+            color: 'negative',
+        },
+    };
+    return icons[value];
+}
+
+const updateNewTickets = async () => {
+    tickets.value = $props.tickets.filter((ticket) => ticket.newTicket !== 1000005);
+    console.log('updateNewTickets');
+    rowsSelected.value = [];
+};
+</script>
+
+<template>
+    <QDialog ref="dialogRef" @hide="onDialogHide" v-model="showSplitDialog">
+        <QCard class="q-pa-sm">
+            <QCardSection class="row items-center q-pb-none">
+                <QAvatar
+                    :icon="icon"
+                    color="primary"
+                    text-color="white"
+                    size="xl"
+                    v-if="icon"
+                />
+                <span class="text-h6 text-grey">{{
+                    t('negative.detail.modal.handleSplited.title')
+                }}</span>
+                <QSpace />
+                <QBtn icon="close" flat round dense v-close-popup />
+            </QCardSection>
+            <QCardSection class="row items-center justify-center column items-stretch">
+                <Qform>
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <VnInputDate
+                            :label="t('Max date')"
+                            v-model="formData.date"
+                            @update:model-value="(evt) => handleDateChanged()" />
+
+                        <VnSelect
+                            :disable="formData.agencies.length < 1"
+                            :label="t('Agency')"
+                            v-model="formData.agencyModeFk"
+                            :options="formData.agencies"
+                            option-label="name"
+                            option-value="id" />
+
+                        <QBtn
+                            icon="save"
+                            :disable="rowBtnDisable()"
+                            color="primary"
+                            flat
+                            rounded
+                            @click="updateNewTickets"
+                    /></VnRow>
+                </Qform>
+                <VnPaginate data-key="splitLack" :data="tickets">
+                    <template #body="{ rows }">
+                        <QTable
+                            :rows="rows"
+                            :columns="columns"
+                            selection="multiple"
+                            row-key="newTicket"
+                            v-model:selected="rowsSelected"
+                            :no-data-label="t('globals.noResults')"
+                            flat
+                            dense
+                            hide-bottom
+                            auto-load
+                            :rows-per-page-options="[0]"
+                            hide-pagination
+                            :pagination="{ rowsPerPage: null }"
+                        >
+                            <template #header="props">
+                                <QTr :props="props">
+                                    <QTh></QTh>
+                                    <QTh
+                                        v-for="col in props.cols"
+                                        :key="col.name"
+                                        :props="props"
+                                    >
+                                        {{ t(col.label) }}
+                                    </QTh>
+                                </QTr>
+                            </template>
+                            <template #body="props">
+                                <QTr :props="props">
+                                    <Qtd>
+                                        <QCheckbox v-model="props.selected" />
+                                    </Qtd>
+                                    <QTd
+                                        v-for="col in props.cols"
+                                        :key="col.name"
+                                        :props="props"
+                                    >
+                                        <span
+                                            v-if="
+                                                ![
+                                                    'status',
+                                                    'message',
+                                                    'actions',
+                                                ].includes(col.name)
+                                            "
+                                        >
+                                            {{ col.value }}
+                                        </span>
+                                        <span v-if="'status' === col.name">
+                                            <QIcon
+                                                :name="`${getIcon(col.value).name}`"
+                                                size="xs"
+                                                class="cursor-pointer"
+                                                :color="getIcon(col.value).color"
+                                            >
+                                            </QIcon>
+                                        </span>
+                                        <span v-if="'message' === col.name">message</span>
+                                    </QTd></QTr
+                                ></template
+                            >
+                        </QTable></template
+                    >
+                </VnPaginate>
+            </QCardSection>
+            <QCardActions align="right">
+                <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
+                <QBtn
+                    :label="t('globals.confirm')"
+                    color="primary"
+                    :disable="!newState"
+                    @click="updateState"
+                    unelevated
+                    autofocus
+                /> </QCardActions
+        ></QCard>
+    </QDialog>
+</template>
+
+<style lang="scss" scoped>
+.splitRow {
+    border: 1px solid #ec8916;
+    border-width: 1px 0 1px 0;
+}
+.list {
+    max-height: 100%;
+    padding: 15px;
+    width: 100%;
+}
+
+.grid-style-transition {
+    transition: transform 0.28s, background-color 0.28s;
+}
+
+#true {
+    background-color: $positive;
+}
+
+#false {
+    background-color: $negative;
+}
+
+div.q-dialog__inner > div {
+    max-width: fit-content !important;
+}
+</style>

src/pages/Ticket/Negative/components/NegativeOriginDialog.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import { useDialogPluginComponent } from 'quasar';
+
+const { t } = useI18n();
+const showNegativeOriginDialog = ref(false);
+const reason = ref(null);
+const { dialogRef } = useDialogPluginComponent();
+const $props = defineProps({
+    selectedRows: {
+        type: Array,
+        default: () => [],
+    },
+});
+const update = async () => {
+    showNegativeOriginDialog.value = true;
+    const negativeOrigins = $props.selectedRows.map(({ itemFk, lack }) => ({
+        itemFk,
+        negativeType: reason.value,
+        lack,
+    }));
+
+    try {
+        await axios.post(`Tickets/itemLackOrigin`, negativeOrigins);
+        dialogRef.value.hide();
+    } catch (err) {
+        return err;
+    }
+};
+</script>
+
+<template>
+    <QCard class="q-pa-sm">
+        <QCardSection class="row items-center q-pb-none">
+            <QAvatar
+                :icon="icon"
+                color="primary"
+                text-color="white"
+                size="xl"
+                v-if="icon"
+            />
+            <span class="text-h6 text-grey">{{ t('negative.modalOrigin.title') }}</span>
+            <QSpace />
+            <QBtn icon="close" flat round dense v-close-popup />
+        </QCardSection>
+        <QCardSection class="row items-center justify-center column items-stretch">
+            <span>{{ t('negative.modalOrigin.question') }}</span>
+            <QSelect
+                :label="t('globals.reason')"
+                v-model="reason"
+                :options="[
+                    'FALTAS',
+                    'CONTENEDOR',
+                    'ENTRADAS',
+                    'OVERBOOKING',
+                    'SUSTITUCION',
+                ]"
+            />
+        </QCardSection>
+        <QCardActions align="right">
+            <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
+            <QBtn
+                :label="t('globals.confirm')"
+                color="primary"
+                :disable="!reason"
+                @click="update()"
+                unelevated
+                autofocus
+            /> </QCardActions
+    ></QCard>
+</template>
+
+<style lang="scss" scoped>
+.list {
+    max-height: 100%;
+    padding: 15px;
+    width: 100%;
+}
+
+.grid-style-transition {
+    transition: transform 0.28s, background-color 0.28s;
+}
+
+#true {
+    background-color: $positive;
+}
+
+#false {
+    background-color: $negative;
+}
+
+div.q-dialog__inner > div {
+    max-width: fit-content !important;
+}
+</style>

src/pages/Ticket/Negative/components/TotalNegativeOriginDialog.vue

@@ -0,0 +1,116 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+
+const { t } = useI18n();
+const selectedRows = ref([]);
+const showTotalNegativeOriginDialog = ref(false);
+
+const columns = computed(() => [
+    {
+        name: 'id',
+        label: t('negative.id'),
+        field: ({ id }) => id,
+        sortable: true,
+    },
+    {
+        name: 'itemFk',
+        label: t('negative.detail.itemFk'),
+        field: ({ itemFk }) => itemFk,
+        sortable: true,
+    },
+    {
+        name: 'type',
+        label: t('negative.type'),
+        field: ({ type }) => type,
+        sortable: true,
+    },
+    {
+        name: 'dated',
+        label: t('negative.detail.shipped'),
+        field: ({ dated }) => dated,
+        sortable: true,
+    },
+    {
+        name: 'quantity',
+        label: t('negative.detail.quantity'),
+        field: ({ quantity }) => quantity,
+        sortable: true,
+    },
+]);
+</script>
+
+<template>
+    <QDialog
+        ref="dialogRef"
+        @hide="onDialogHide"
+        v-model="showTotalNegativeOriginDialog"
+        full-width
+    >
+        <QCard class="q-pa-lg">
+            <QCardSection class="row items-center q-pb-none">
+                <span class="text-h6 text-grey">{{ t('negative.totalNegative') }}</span>
+                <QSpace />
+                <QBtn icon="close" flat round dense v-close-popup />
+            </QCardSection>
+            <QCardSection class="row items-center justify-center column items-stretch">
+                <VnPaginate
+                    data-key="NegativeOriginList"
+                    :url="`Tickets/negativeOrigin`"
+                    auto-load
+                >
+                    <template #body="{ rows }">
+                        <QTable
+                            :columns="columns"
+                            :rows="rows"
+                            :dense="$q.screen.lt.md"
+                            flat
+                            row-key="itemFk"
+                            selection="multiple"
+                            v-model:selected="selectedRows"
+                            :grid="$q.screen.lt.md"
+                            auto-load
+                            :rows-per-page-options="[0]"
+                            hide-pagination
+                            :pagination="{ rowsPerPage: null }"
+                            :no-data-label="t('globals.noResults')"
+                        >
+                            <template #top>
+                                <div style="width: 100%; display: table">
+                                    <div style="float: right; color: lightgray">
+                                        {{ `${rows.length} ${t('globals.results')}` }}
+                                    </div>
+                                </div>
+                            </template>
+                        </QTable>
+                    </template>
+                </VnPaginate>
+            </QCardSection>
+        </QCard>
+    </QDialog>
+</template>
+
+<style lang="scss" scoped>
+.list {
+    max-height: 100%;
+    padding: 15px;
+    width: 100%;
+}
+
+.grid-style-transition {
+    transition: transform 0.28s, background-color 0.28s;
+}
+
+#true {
+    background-color: $positive;
+}
+
+#false {
+    background-color: $negative;
+}
+
+div.q-dialog__inner > div {
+    max-width: fit-content !important;
+}
+</style>

src/pages/Ticket/locale/en.yml

@@ -38,6 +38,7 @@ ticketSale:
     shipped: Shipped
     agency: Agency
     address: Address
+    transferLines: Transfer lines
 advanceTickets:
     preparation: Preparation
     origin: Origin
@@ -242,3 +243,74 @@ ticketList:
     summary: Summary
     client: Customer
     createTicket: Create ticket
+negative:
+    hour: 'Hour'
+    id: 'Id Article'
+    longName: 'Article'
+    supplier: 'Supplier'
+    colour: 'Colour'
+    size: 'Size'
+    origen: 'Origin'
+    value: 'Negative'
+    itemFk: 'Article'
+    producer: 'Producer'
+    warehouse: 'Warehouse'
+    warehouseFk: 'Warehouse'
+    category: 'Category'
+    categoryFk: 'Family'
+    type: 'Type'
+    typeFk: 'Type'
+    lack: 'Negative'
+    inkFk: 'inkFk'
+    timed: 'timed'
+    date: 'Date'
+    minTimed: 'minTimed'
+    negativeAction: 'Negative'
+    totalNegative: 'Total negatives'
+    days: Days
+    buttonsUpdate:
+        itemProposal: Item
+        state: State
+        quantity: Quantity
+    modalOrigin:
+        title: 'Update negatives'
+        question: 'Select a state to update'
+    modalSplit:
+        title: Confirm split selected
+        question: 'Select a state to update'
+    detail:
+        saleFk: 'Sale'
+        itemFk: 'Article'
+        ticketFk: 'Ticket'
+        code: 'Code'
+        nickname: 'Alias'
+        name: 'Name'
+        zoneName: 'Agency name'
+        shipped: 'Date'
+        theoreticalhour: 'Theoretical hour'
+        agName: 'Agency'
+        quantity: 'Quantity'
+        alertLevelCode: 'Group state'
+        state: 'State'
+        peticionCompra: 'Ticket request'
+        isRookie: 'Is rookie'
+        turno: 'Turn line'
+        showFree: Show Free lines
+        modal:
+            changeState:
+                title: Update tickets state
+                placeholder: New state
+            changeQuantity:
+                title: Update tickets quantity
+                placeholder: New quantity
+            split:
+                title: Are you sure you want to split selected tickets?
+                subTitle: Confirm split action
+            handleSplited:
+                title: Handle splited  tickets
+                subTitle: Confirm date and agency
+    split:
+        ticket: Old ticket
+        newTicket: New ticket
+        status: Result
+        message: Message

src/pages/Ticket/locale/es.yml

@@ -170,6 +170,7 @@ ticketSale:
     shipped: F. Envío
     agency: Agencia
     address: Consignatario
+    transferLines: Transferir líneas
 ticketComponents:
     item: Artículo
     description: Descripción
@@ -245,3 +246,73 @@ ticketList:
     summary: Resumen
     client: Cliente
     createTicket: Crear ticket
+negative:
+    hour: 'Hora'
+    id: 'Id Articulo'
+    longName: 'Articulo'
+    supplier: 'Productor'
+    colour: 'Color'
+    size: 'Medida'
+    origen: 'Origen'
+    value: 'Negativo'
+    warehouseFk: 'Almacen'
+    producer: 'Producer'
+    category: 'Categoría'
+    categoryFk: 'Familia'
+    typeFk: 'Familia'
+    warehouse: 'Almacen'
+    lack: 'Negativo'
+    inkFk: 'Color'
+    timed: 'Hora'
+    date: 'Fecha'
+    minTimed: 'Hora'
+    type: 'Tipo'
+    negativeAction: 'Negativo'
+    totalNegative: 'Total negativos'
+    days: Rango de dias
+    buttonsUpdate:
+        itemProposal: artículo
+        state: Estado
+        quantity: Cantidad
+    modalOrigin:
+        title: 'Actualizar negativos'
+        question: 'Seleccione un estado para guardar'
+    modalSplit:
+        title: Confirmar acción de split
+        question: 'Selecciona un estado'
+    detail:
+        saleFk: 'Línea'
+        itemFk: 'Artículo'
+        ticketFk: 'Ticket'
+        code: 'code'
+        nickname: 'Alias'
+        name: 'Nombre'
+        zoneName: 'Agencia'
+        shipped: 'F. envío'
+        theoreticalhour: 'Hora teórica'
+        agName: 'Agencia'
+        quantity: 'Cantidad'
+        alertLevelCode: 'Estado agrupado'
+        state: 'Estado'
+        peticionCompra: 'Petición compra'
+        isRookie: 'Cliente nuevo'
+        turno: 'Linea turno'
+        showFree: Solo estado libre
+        modal:
+            changeState:
+                title: Actualizar estado
+                placeholder: Nuevo estado
+            changeQuantity:
+                title: Actualizar cantidad
+                placeholder: Nueva cantidad
+            split:
+                title: ¿Seguro de separar los tickets seleccionados?
+                subTitle: Confirma separar tickets seleccionados
+            handleSplited:
+                title: Gestionar tickets spliteados
+                subTitle: Confir fecha y agencia
+    split:
+        ticket: Ticket viejo
+        newTicket: Ticket nuevo
+        status: Estado
+        message: Mensaje

src/pages/Travel/ExtraCommunity.vue

@@ -270,7 +270,6 @@ async function getData() {
 const onStoreDataChange = () => {
     const newData = JSON.parse(JSON.stringify(arrayData.store.data)) || [];
     rows.value = newData;
-    // el objetivo de esto es guardar una copia de los valores iniciales de todas las rows para corroborar si la data cambio antes de guardar los cambios
     originalRowDataCopy.value = JSON.parse(JSON.stringify(newData));
 };
 

src/router/modules/ticket.js

@@ -12,7 +12,13 @@ export default {
     component: RouterView,
     redirect: { name: 'TicketMain' },
     menus: {
-        main: ['TicketList', 'TicketAdvance', 'TicketWeekly', 'TicketFuture'],
+        main: [
+            'TicketList',
+            'TicketAdvance',
+            'TicketWeekly',
+            'TicketFuture',
+            'TicketNegative',
+        ],
         card: [
             'TicketBasicData',
             'TicketSale',
@@ -48,6 +54,33 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/TicketList.vue'),
                 },
+                {
+                    path: 'negative',
+                    redirect: { name: 'TicketNegative' },
+                    children: [
+                        {
+                            name: 'TicketNegative',
+                            meta: {
+                                title: 'negative',
+                                icon: 'view_list',
+                            },
+                            // redirect: { name: 'TicketNegative' },
+                            component: () =>
+                                import('src/pages/Ticket/Negative/TicketLackList.vue'),
+                            path: '',
+                        },
+                        {
+                            name: 'NegativeDetail',
+                            path: ':id',
+                            meta: {
+                                title: 'summary',
+                                icon: 'launch',
+                            },
+                            component: () =>
+                                import('src/pages/Ticket/Negative/TicketLackDetail.vue'),
+                        },
+                    ],
+                },
                 {
                     path: 'create',
                     name: 'TicketCreate',

test/cypress/integration/item/ItemProposal.spec.js

@@ -0,0 +1,11 @@
+/// <reference types="cypress" />
+describe('ItemProposal', () => {
+    beforeEach(() => {
+        const ticketId = 1;
+
+        cy.login('developer');
+        cy.visit(`/#/ticket/${ticketId}/summary`);
+    });
+
+    describe('Handle item proposal selected', () => {});
+});

test/cypress/integration/ticket/negative/TicketLackDetail.spec.js

@@ -0,0 +1,31 @@
+/// <reference types="cypress" />
+describe('Ticket Lack detail', () => {
+    beforeEach(() => {
+        const ticketId = 1;
+
+        cy.login('developer');
+        cy.visit(`/#/ticket/${ticketId}/summary`);
+    });
+
+    describe('Update quantity', () => {
+        it('Update from popover', () => {});
+        it('Update from table', () => {});
+    });
+    describe('Update state', () => {
+        it('Update from popover', () => {});
+        it('Update from table', () => {});
+    });
+    describe('Ticket transfer', () => {
+        describe('Split ticket if ', () => {
+            it('Ticket has less or equal than 1 row', () => {});
+            it('Ticket has more than 1 row', () => {});
+        });
+    });
+    describe('Item proposal', () => {
+        describe('Replace item if', () => {
+            it('Quantity is less than available', () => {});
+            it('Quantity is equal than available', () => {});
+            it('Quantity is more than available', () => {});
+        });
+    });
+});

test/cypress/integration/ticket/negative/TicketLackList.spec.js

@@ -0,0 +1,17 @@
+/// <reference types="cypress" />
+describe('Ticket Lack list', () => {
+    beforeEach(() => {
+        cy.login('developer');
+        cy.visit(`/#/ticket/negative`);
+    });
+
+    describe('Origin', () => {
+        it('check as origin reason', () => {});
+    });
+
+    describe('Filters', () => {});
+
+    describe('Table actions', () => {
+        it('Open record', () => {});
+    });
+});