From 31f18507045e186fa65c8ae98c32fb4ee17b1a0a Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 16 Apr 2025 14:12:23 +0200
Subject: [PATCH 01/22] feat: add multiple attribute

---
 src/components/common/VnInputDate.vue | 54 ++++++++++++++++++++++-----
 1 file changed, 44 insertions(+), 10 deletions(-)

diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index 343130f1d..f361fb536 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -6,7 +6,6 @@ import { useRequired } from 'src/composables/useRequired';
 
 const $attrs = useAttrs();
 const { isRequired, requiredFieldRule } = useRequired($attrs);
-const model = defineModel({ type: [String, Date] });
 
 const $props = defineProps({
     isOutlined: {
@@ -17,6 +16,15 @@ const $props = defineProps({
         type: Boolean,
         default: true,
     },
+    multiple: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const model = defineModel({
+    type: [String, Date, Array],
+    default: null,
 });
 
 const vnInputDateRef = ref(null);
@@ -31,10 +39,17 @@ const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])];
 const formattedDate = computed({
     get() {
         if (!model.value) return model.value;
+        if ($props.multiple) {
+            return model.value
+                .map((d) => date.formatDate(new Date(d), dateFormat))
+                .join(', ');
+        }
         return date.formatDate(new Date(model.value), dateFormat);
     },
     set(value) {
         if (value == model.value) return;
+        if ($props.multiple) return; // No permitir edición manual en modo múltiple
+
         let newDate;
         if (value) {
             // parse input
@@ -47,7 +62,7 @@ const formattedDate = computed({
             }
             const [year, month, day] = value.split('-').map((e) => parseInt(e));
             newDate = new Date(year, month - 1, day);
-            if (model.value) {
+            if (model.value && !$props.multiple) {
                 const orgDate =
                     model.value instanceof Date ? model.value : new Date(model.value);
 
@@ -63,12 +78,19 @@ const formattedDate = computed({
     },
 });
 
-const popupDate = computed(() =>
-    model.value ? date.formatDate(new Date(model.value), 'YYYY/MM/DD') : model.value,
-);
+const popupDate = computed(() => {
+    if (!model.value) return model.value;
+    if ($props.multiple) {
+        return model.value.map((d) => date.formatDate(new Date(d), 'YYYY/MM/DD'));
+    }
+    return date.formatDate(new Date(model.value), 'YYYY/MM/DD');
+});
 onMounted(() => {
     // fix quasar bug
     mask.value = '##/##/####';
+    if ($props.multiple && !model.value) {
+        model.value = [];
+    }
 });
 watch(
     () => model.value,
@@ -86,8 +108,12 @@ const styleAttrs = computed(() => {
         : {};
 });
 
-const manageDate = (date) => {
-    formattedDate.value = date;
+const manageDate = (dates) => {
+    if ($props.multiple) {
+        model.value = dates.map((d) => new Date(d).toISOString());
+    } else {
+        formattedDate.value = dates;
+    }
     isPopupOpen.value = false;
 };
 </script>
@@ -98,7 +124,7 @@ const manageDate = (date) => {
             ref="vnInputDateRef"
             v-model="formattedDate"
             class="vn-input-date"
-            :mask="mask"
+            :mask="$props.multiple ? undefined : mask"
             placeholder="dd/mm/aaaa"
             v-bind="{ ...$attrs, ...styleAttrs }"
             :class="{ required: isRequired }"
@@ -136,10 +162,18 @@ const manageDate = (date) => {
                 :no-focus="true"
                 :no-parent-event="true"
             >
-                <VnDate v-model="popupDate" @update:model-value="manageDate" />
+                <VnDate
+                    v-model="popupDate"
+                    @update:model-value="manageDate"
+                    :multiple="multiple"
+                />
             </QMenu>
             <QDialog v-else v-model="isPopupOpen">
-                <VnDate v-model="popupDate" @update:model-value="manageDate" />
+                <VnDate
+                    v-model="popupDate"
+                    @update:model-value="manageDate"
+                    :multiple="multiple"
+                />
             </QDialog>
         </QInput>
     </div>

From 6c0fcc38b0cd8d329301f6eab8d486adb7876f48 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 16 Apr 2025 14:13:08 +0200
Subject: [PATCH 02/22] feat: apply multiple

---
 .../Ticket/Negative/TicketLackFilter.vue      | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/pages/Ticket/Negative/TicketLackFilter.vue b/src/pages/Ticket/Negative/TicketLackFilter.vue
index 78c030476..055b86ffd 100644
--- a/src/pages/Ticket/Negative/TicketLackFilter.vue
+++ b/src/pages/Ticket/Negative/TicketLackFilter.vue
@@ -7,6 +7,9 @@ import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDateTime from 'src/components/common/VnInputDateTime.vue';
+import VnDate from 'src/components/common/VnDate.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+
 const { t } = useI18n();
 const props = defineProps({
     dataKey: {
@@ -67,7 +70,6 @@ const setUserParams = (params) => {
         :data-key="props.dataKey"
         :search-button="true"
         @set-user-params="setUserParams"
-        :unremovable-params="['warehouseFk']"
     >
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
@@ -85,7 +87,7 @@ const setUserParams = (params) => {
                             dense
                             filled
                             @update:model-value="
-                                (value) => {
+                                () => {
                                     setUserParams(params);
                                 }
                             "
@@ -120,8 +122,20 @@ const setUserParams = (params) => {
                             dense
                             filled
                         />
-                    </QItemSection> </QItem
-                ><QItem>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInputDate
+                            v-model="params.excludedDates"
+                            filled
+                            :label="t('negative.x')"
+                            :multiple="true"
+                        >
+                        </VnInputDate>
+                    </QItemSection>
+                </QItem>
+                <QItem>
                     <QItemSection v-if="categoriesOptions">
                         <VnSelect
                             :label="t('negative.categoryFk')"

From 0ff6cc5dbea36b680c7490a25e60051be548d5fe Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 16 Apr 2025 14:13:16 +0200
Subject: [PATCH 03/22] feat: add entry

---
 src/pages/Ticket/Negative/TicketLackList.vue | 30 +++++++++++++++++---
 src/pages/Ticket/locale/en.yml               |  4 ++-
 src/pages/Ticket/locale/es.yml               |  3 ++
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/pages/Ticket/Negative/TicketLackList.vue b/src/pages/Ticket/Negative/TicketLackList.vue
index 1e11515f9..59eb6b5b6 100644
--- a/src/pages/Ticket/Negative/TicketLackList.vue
+++ b/src/pages/Ticket/Negative/TicketLackList.vue
@@ -7,7 +7,7 @@ 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 EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
 import TicketLackFilter from './TicketLackFilter.vue';
@@ -45,10 +45,10 @@ const columns = computed(() => [
     },
     {
         columnClass: 'shrink',
-        name: 'timed',
+        name: 'minTimed',
         align: 'center',
         label: t('negative.timed'),
-        format: ({ timed }) => toHour(timed),
+        format: ({ minTimed }) => toHour(minTimed),
         sortable: true,
         cardVisible: true,
         columnFilter: {
@@ -64,9 +64,25 @@ const columns = computed(() => [
         columnFilter: {
             component: 'input',
             type: 'number',
-            inWhere: false,
+            columnClass: 'shrink',
         },
     },
+    {
+        name: 'nextEntryFk',
+        align: 'center',
+        label: t('negative.nextEntryFk'),
+        format: ({ nextEntryFk }) => nextEntryFk,
+        sortable: false,
+        columnFilter: false,
+    },
+    {
+        name: 'nextEntryLanded',
+        align: 'center',
+        label: t('negative.nextEntryLanded'),
+        format: ({ nextEntryLanded }) => toDate(nextEntryLanded),
+        sortable: false,
+        columnFilter: false,
+    },
     {
         name: 'longName',
         align: 'left',
@@ -194,6 +210,12 @@ const setUserParams = (params) => {
                 <span @click.stop>{{ row.itemFk }}</span>
             </div>
         </template>
+        <template #column-nextEntryFk="{ row }">
+            <span class="link" @click.stop>
+                {{ row.nextEntryFk }}
+                <EntryDescriptorProxy :id="row.nextEntryFk" />
+            </span>
+        </template>
         <template #column-longName="{ row }">
             <span class="link" @click.stop>
                 {{ row.longName }}
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index 175f0955b..ed456f171 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -205,7 +205,6 @@ ticketList:
     toLines: Go to lines
     addressNickname: Address nickname
     ref: Reference
-    hour: Hour
     rounding: Rounding
     noVerifiedData: No verified data
     purchaseRequest: Purchase request
@@ -213,6 +212,8 @@ ticketList:
     clientFrozen: Client frozen
     componentLack: Component lack
 negative:
+    nextEntryFk: Next entry
+    nextEntryLanded: Next entry landed
     hour: Hour
     id: Id Article
     longName: Article
@@ -223,6 +224,7 @@ negative:
     value: Negative
     itemFk: Article
     producer: Producer
+    excludedDates: Excluded dates
     warehouse: Warehouse
     warehouseFk: Warehouse
     category: Category
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 3d03a7b33..bb3a5ac10 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -214,6 +214,8 @@ ticketList:
     addressNickname: Alias consignatario
     ref: Referencia
 negative:
+    nextEntryLanded: F. Entrada
+    nextEntryFk: Entrada
     hour: Hora
     id: Id Articulo
     longName: Artículo
@@ -225,6 +227,7 @@ negative:
     value: Negativo
     warehouseFk: Almacen
     producer: Producer
+    excludedDates: Fechas excluidas
     category: Categoría
     categoryFk: Familia
     typeFk: Familia

From 8e47a4134dcaf50d72e88a9246dc93f0b7190d55 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 17 Apr 2025 20:16:20 +0200
Subject: [PATCH 04/22] fix: update label for excluded dates input in
 TicketLackFilter component

---
 src/pages/Ticket/Negative/TicketLackFilter.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Ticket/Negative/TicketLackFilter.vue b/src/pages/Ticket/Negative/TicketLackFilter.vue
index 055b86ffd..f046cf5f2 100644
--- a/src/pages/Ticket/Negative/TicketLackFilter.vue
+++ b/src/pages/Ticket/Negative/TicketLackFilter.vue
@@ -129,7 +129,7 @@ const setUserParams = (params) => {
                         <VnInputDate
                             v-model="params.excludedDates"
                             filled
-                            :label="t('negative.x')"
+                            :label="t('negative.excludedDates')"
                             :multiple="true"
                         >
                         </VnInputDate>

From 22f77fc70cb5cfb673870038ca328d11d463116b Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 2 May 2025 10:09:47 +0200
Subject: [PATCH 05/22] perf: minor changes

---
 src/components/common/VnInputDate.vue         |   4 +-
 src/pages/Item/components/ItemProposal.vue    |  16 +-
 .../Ticket/Negative/TicketLackFilter.vue      |   2 +-
 src/pages/Ticket/locale/es.yml                |   2 +-
 .../ticket/negative/TicketLackDetail.spec.js  | 286 ++++++++++--------
 .../ticket/negative/TicketLackList.spec.js    |  26 +-
 6 files changed, 176 insertions(+), 160 deletions(-)

diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index f361fb536..53c756f42 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -12,7 +12,7 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
-    showEvent: {
+    isPopupOpen: {
         type: Boolean,
         default: true,
     },
@@ -114,7 +114,7 @@ const manageDate = (dates) => {
     } else {
         formattedDate.value = dates;
     }
-    isPopupOpen.value = false;
+    if ($props.isPopupOpen) isPopupOpen.value = false;
 };
 </script>
 
diff --git a/src/pages/Item/components/ItemProposal.vue b/src/pages/Item/components/ItemProposal.vue
index 22c1d3d8b..a827508ad 100644
--- a/src/pages/Item/components/ItemProposal.vue
+++ b/src/pages/Item/components/ItemProposal.vue
@@ -255,9 +255,17 @@ async function handleTicketConfig(data) {
         :row-click="change"
         :is-editable="false"
         :right-search="false"
-        :without-header="true"
         :disable-option="{ card: true, table: true }"
     >
+        <template #top-right>
+            <QBtn
+                flat
+                class="q-mr-sm"
+                color="primary"
+                icon="refresh"
+                @click="proposalTableRef.reload()"
+            />
+        </template>
         <template #column-longName="{ row }">
             <QTd
                 class="flex"
@@ -270,10 +278,10 @@ async function handleTicketConfig(data) {
                     <QTooltip> {{ statusConditionalValue(row) }}% </QTooltip>
                 </div>
                 <div style="flex: 2 0 100%; align-content: center">
-                    <div>
-                        <span class="link">{{ row.longName }}</span>
+                    <span class="link" @click.stop>
+                        {{ row.longName }}
                         <ItemDescriptorProxy :id="row.id" />
-                    </div>
+                    </span>
                 </div>
             </QTd>
         </template>
diff --git a/src/pages/Ticket/Negative/TicketLackFilter.vue b/src/pages/Ticket/Negative/TicketLackFilter.vue
index 60b50362e..705307cbd 100644
--- a/src/pages/Ticket/Negative/TicketLackFilter.vue
+++ b/src/pages/Ticket/Negative/TicketLackFilter.vue
@@ -7,7 +7,6 @@ import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDateTime from 'src/components/common/VnInputDateTime.vue';
-import VnDate from 'src/components/common/VnDate.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 
 const { t } = useI18n();
@@ -131,6 +130,7 @@ const setUserParams = (params) => {
                             filled
                             :label="t('negative.excludedDates')"
                             :multiple="true"
+                            :is-popup-open="false"
                         >
                         </VnInputDate>
                     </QItemSection>
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index ec4534e5f..d2c908b2c 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -227,7 +227,7 @@ negative:
     origen: Origen
     value: Negativo
     warehouseFk: Almacen
-    producer: Producer
+    producer: Productor
     excludedDates: Fechas excluidas
     category: Categoría
     categoryFk: Familia
diff --git a/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js b/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
index b4997fa69..08fdc16d8 100644
--- a/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
+++ b/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
@@ -1,147 +1,173 @@
 /// <reference types="cypress" />
-describe.skip('Ticket Lack detail', () => {
+
+const firstRow = 'tr.cursor-pointer > :nth-child(1)';
+const ticketId = 1000000;
+const findTr = (index) => `tbody > tr > :nth-child(${index}) > div`;
+const clickNotificationAction = () => {
+    const notification = '.q-notification';
+    cy.waitForElement(notification);
+    cy.get(notification).should('be.visible');
+    cy.get(notification).find('.q-btn').click();
+    cy.get(notification).should('not.be.visible');
+};
+describe('Ticket Lack detail', () => {
     beforeEach(() => {
+        cy.viewport(1280, 720);
         cy.login('developer');
-        cy.intercept('GET', /\/api\/Tickets\/itemLack\/5.*$/, {
-            statusCode: 200,
-            body: [
-                {
-                    saleFk: 33,
-                    code: 'OK',
-                    ticketFk: 142,
-                    nickname: 'Malibu Point',
-                    shipped: '2000-12-31T23:00:00.000Z',
-                    hour: 0,
-                    quantity: 50,
-                    agName: 'Super-Man delivery',
-                    alertLevel: 0,
-                    stateName: 'OK',
-                    stateId: 3,
-                    itemFk: 5,
-                    price: 1.79,
-                    alertLevelCode: 'FREE',
-                    zoneFk: 9,
-                    zoneName: 'Zone superMan',
-                    theoreticalhour: '2011-11-01T22:59:00.000Z',
-                    isRookie: 1,
-                    turno: 1,
-                    peticionCompra: 1,
-                    hasObservation: 1,
-                    hasToIgnore: 1,
-                    isBasket: 1,
-                    minTimed: 0,
-                    customerId: 1104,
-                    customerName: 'Tony Stark',
-                    observationTypeCode: 'administrative',
-                },
-            ],
-        }).as('getItemLack');
+        cy.intercept('GET', /\/api\/Tickets\/itemLack\/88.*$/).as('getItemLack');
+        cy.visit('/#/ticket/negative/88');
 
-        cy.visit('/#/ticket/negative/5', false);
-        cy.wait('@getItemLack');
+        cy.wait('@getItemLack').then((interception) => {
+            const { query } = interception.request;
+            const filter = JSON.parse(query.filter);
+            expect(filter).to.have.property('where');
+            expect(filter.where).to.have.property('alertLevelCode', 'FREE');
+        });
+        cy.domContentLoad();
+        cy.waitForElement('.q-table');
     });
-    describe('Table actions', () => {
+    describe('Table detail', () => {
+        it('should open descriptors', () => {
+            cy.get('.q-table').should('be.visible');
+            cy.colField('zoneName').click();
+            cy.dataCy('zoneDescriptorProxy').should('be.visible');
+            cy.get('.q-item > .q-item__label').should('have.text', ' #1');
+            cy.colField('ticketFk').click();
+            cy.dataCy('ticketDescriptorProxy').should('be.visible');
+            cy.get('.q-item > .q-item__label').should('have.text', ` #${ticketId}`);
+            cy.colField('nickname').find('.link').click();
+            cy.waitForElement('[data-cy="customerDescriptorProxy"]');
+            cy.dataCy('customerDescriptorProxy').should('be.visible');
+            cy.get('.q-item > .q-item__label').should('have.text', ' #1');
+        });
         it('should display only one row in the lack list', () => {
-            cy.location('href').should('contain', '#/ticket/negative/5');
-
-            cy.get('[data-cy="changeItem"]').should('be.disabled');
-            cy.get('[data-cy="changeState"]').should('be.disabled');
-            cy.get('[data-cy="changeQuantity"]').should('be.disabled');
-            cy.get('[data-cy="itemProposal"]').should('be.disabled');
-            cy.get('[data-cy="transferLines"]').should('be.disabled');
+            cy.dataCy('changeItem').should('be.disabled');
+            cy.dataCy('changeState').should('be.disabled');
+            cy.dataCy('changeQuantity').should('be.disabled');
+            cy.dataCy('itemProposal').should('be.disabled');
+            cy.dataCy('transferLines').should('be.disabled');
             cy.get('tr.cursor-pointer > :nth-child(1)').click();
-            cy.get('[data-cy="changeItem"]').should('be.enabled');
-            cy.get('[data-cy="changeState"]').should('be.enabled');
-            cy.get('[data-cy="changeQuantity"]').should('be.enabled');
-            cy.get('[data-cy="itemProposal"]').should('be.enabled');
-            cy.get('[data-cy="transferLines"]').should('be.enabled');
+            cy.dataCy('changeItem').should('be.enabled');
+            cy.dataCy('changeState').should('be.enabled');
+            cy.dataCy('changeQuantity').should('be.enabled');
+            cy.dataCy('itemProposal').should('be.enabled');
+            cy.dataCy('transferLines').should('be.enabled');
+        });
+    });
+
+    describe('Split', () => {
+        beforeEach(() => {
+            cy.get(firstRow).click();
+            cy.dataCy('transferLines').click();
+        });
+        it('Split', () => {
+            cy.dataCy('ticketTransferPopup').find('.flex > .q-btn').click();
+
+            clickNotificationAction();
+
+            cy.dataCy('HandleLackDialog').should('be.visible');
+            cy.dataCy('HandleLackDialog').find('tbody > tr > :nth-child(1) > .q-icon');
+            cy.dataCy('HandleLackDialog').find(findTr(2)).should('have.class', 'link');
+            cy.dataCy('HandleLackDialog')
+                .find(`${findTr(2)}.link > div > span`)
+                .should('have.text', `${ticketId} `);
+            cy.dataCy('HandleLackDialog').find(findTr(3)).should('have.text', 'noSplit');
+        });
+    });
+    describe('Change Item', () => {
+        beforeEach(() => {
+            cy.get(firstRow).click();
+            cy.dataCy('changeItem').click();
+        });
+        it('Change failed', () => {
+            cy.dataCy('New item_select').should('be.visible').click();
+            cy.get('.q-item').contains('Palito rojo').click();
+            cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
+
+            clickNotificationAction();
+
+            cy.dataCy('HandleLackDialog').should('be.visible');
+            cy.dataCy('HandleLackDialog').find('tbody > tr > :nth-child(1) > .q-icon');
+            cy.dataCy('HandleLackDialog').find(findTr(2)).should('have.class', 'link');
+            cy.dataCy('HandleLackDialog')
+                .find(`${findTr(2)}.link > span`)
+                .should('have.text', `${ticketId}`);
+            cy.dataCy('HandleLackDialog')
+                .find(findTr(3))
+                .should('have.text', 'price retrieval failed');
+        });
+    });
+    describe('Change state', () => {
+        beforeEach(() => {
+            cy.get(firstRow).click();
+            cy.dataCy('changeState').click();
+        });
+        it('Change success', () => {
+            cy.dataCy('New state_select').should('be.visible').click();
+            cy.get('.q-item').contains('OK').click();
+            cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
+
+            clickNotificationAction();
+
+            cy.dataCy('HandleLackDialog')
+                .should('be.visible')
+                .find('tbody > tr > :nth-child(1) > .q-icon');
+            cy.dataCy('HandleLackDialog').find(findTr(2)).should('have.class', 'link');
+            cy.dataCy('HandleLackDialog')
+                .find(`${findTr(2)}.link > div > span`)
+                .should('have.text', `${ticketId} `);
+            cy.dataCy('HandleLackDialog').find(findTr(3)).should('have.text', 'OK');
+        });
+    });
+    describe('change quantity', () => {
+        beforeEach(() => {
+            cy.get(firstRow).click();
+
+            cy.dataCy('changeQuantity').click();
+        });
+
+        it('Change success', () => {
+            cy.dataCy('New quantity_input').type(10);
+            cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
+
+            clickNotificationAction();
+
+            cy.dataCy('HandleLackDialog')
+                .should('be.visible')
+                .find('tbody > tr > :nth-child(1) > .q-icon');
+            cy.dataCy('HandleLackDialog').find(findTr(2)).should('have.class', 'link');
+            cy.dataCy('HandleLackDialog')
+                .find(`${findTr(2)}.link > div > span`)
+                .should('have.text', `${ticketId} `);
+            cy.dataCy('HandleLackDialog').find(findTr(3)).should('have.text', '10');
         });
     });
     describe('Item proposal', () => {
         beforeEach(() => {
-            cy.get('tr.cursor-pointer > :nth-child(1)').click();
-
-            cy.intercept('GET', /\/api\/Items\/getSimilar\?.*$/, {
-                statusCode: 200,
-                body: [
-                    {
-                        id: 1,
-                        longName: 'Ranged weapon longbow 50cm',
-                        subName: 'Stark Industries',
-                        tag5: 'Color',
-                        value5: 'Brown',
-                        match5: 0,
-                        match6: 0,
-                        match7: 0,
-                        match8: 1,
-                        tag6: 'Categoria',
-                        value6: '+1 precission',
-                        tag7: 'Tallos',
-                        value7: '1',
-                        tag8: null,
-                        value8: null,
-                        available: 20,
-                        calc_id: 6,
-                        counter: 0,
-                        minQuantity: 1,
-                        visible: null,
-                        price2: 1,
-                    },
-                    {
-                        id: 2,
-                        longName: 'Ranged weapon longbow 100cm',
-                        subName: 'Stark Industries',
-                        tag5: 'Color',
-                        value5: 'Brown',
-                        match5: 0,
-                        match6: 1,
-                        match7: 0,
-                        match8: 1,
-                        tag6: 'Categoria',
-                        value6: '+1 precission',
-                        tag7: 'Tallos',
-                        value7: '1',
-                        tag8: null,
-                        value8: null,
-                        available: 50,
-                        calc_id: 6,
-                        counter: 1,
-                        minQuantity: 5,
-                        visible: null,
-                        price2: 10,
-                    },
-                    {
-                        id: 3,
-                        longName: 'Ranged weapon longbow 200cm',
-                        subName: 'Stark Industries',
-                        tag5: 'Color',
-                        value5: 'Brown',
-                        match5: 1,
-                        match6: 1,
-                        match7: 1,
-                        match8: 1,
-                        tag6: 'Categoria',
-                        value6: '+1 precission',
-                        tag7: 'Tallos',
-                        value7: '1',
-                        tag8: null,
-                        value8: null,
-                        available: 185,
-                        calc_id: 6,
-                        counter: 10,
-                        minQuantity: 10,
-                        visible: null,
-                        price2: 100,
-                    },
-                ],
-            }).as('getItemGetSimilar');
-            cy.get('[data-cy="itemProposal"]').click();
-            cy.wait('@getItemGetSimilar');
+            cy.get(firstRow).click();
+            cy.dataCy('itemProposal').click();
         });
-        describe.skip('Replace item if', () => {
-            it('Quantity is less than available', () => {
+        describe('Replace item if', () => {
+            it.skip('Quantity is less than available', () => {
                 cy.get(':nth-child(1) > .text-right  > .q-btn').click();
             });
+
+            it('item proposal cells', () => {
+                cy.get('[data-col-field="longName"] .link').first().click();
+
+                cy.dataCy('itemDescriptorProxy').should('be.visible');
+
+                cy.colField('longName', 2)
+                    .find('.no-padding > .q-td > .middle')
+                    .should('have.class', 'proposal-primary');
+                cy.colField('tag5', 2)
+                    .find('.no-padding > .match')
+                    .should('have.class', 'match');
+                cy.colField('tag6', 2)
+                    .find('.no-padding > .match')
+                    .should('have.class', 'match');
+                cy.colField('tag7', 2).click();
+            });
         });
     });
 });
diff --git a/test/cypress/integration/ticket/negative/TicketLackList.spec.js b/test/cypress/integration/ticket/negative/TicketLackList.spec.js
index 01ab4f621..a53668c12 100644
--- a/test/cypress/integration/ticket/negative/TicketLackList.spec.js
+++ b/test/cypress/integration/ticket/negative/TicketLackList.spec.js
@@ -1,34 +1,16 @@
 /// <reference types="cypress" />
 describe('Ticket Lack list', () => {
     beforeEach(() => {
-        cy.login('developer');
-        cy.intercept('GET', /Tickets\/itemLack\?.*$/, {
-            statusCode: 200,
-            body: [
-                {
-                    itemFk: 5,
-                    longName: 'Ranged weapon pistol 9mm',
-                    warehouseFk: 1,
-                    producer: null,
-                    size: 15,
-                    category: null,
-                    warehouse: 'Warehouse One',
-                    lack: -50,
-                    inkFk: 'SLV',
-                    timed: '2025-01-25T22:59:00.000Z',
-                    minTimed: '23:59',
-                    originFk: 'Holand',
-                },
-            ],
-        }).as('getLack');
+        cy.viewport(1280, 720);
 
+        cy.login('developer');
         cy.visit('/#/ticket/negative');
     });
 
     describe('Table actions', () => {
         it('should display only one row in the lack list', () => {
-            cy.wait('@getLack', { timeout: 10000 });
-
+            cy.get('[data-col-field="longName"]').first().click();
+            cy.dataCy('itemDescriptorProxy').should('be.visible');
             cy.get('.q-virtual-scroll__content > :nth-child(1) > .sticky').click();
             cy.location('href').should('contain', '#/ticket/negative/5');
         });

From 76df3413b9f5765f1d50fdc20de9fa05a3c45fee Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 5 May 2025 12:26:37 +0200
Subject: [PATCH 06/22] feat: solve minor bugs and styles

---
 src/components/ui/VnStockValueDisplay.vue     |  11 +-
 src/pages/Item/components/ItemProposal.vue    | 155 +++++++++++++++---
 .../Item/components/ItemProposalProxy.vue     |  23 ++-
 src/pages/Item/locale/en.yml                  |   5 +
 src/pages/Item/locale/es.yml                  |   5 +
 5 files changed, 158 insertions(+), 41 deletions(-)

diff --git a/src/components/ui/VnStockValueDisplay.vue b/src/components/ui/VnStockValueDisplay.vue
index d8f43323b..b94639603 100644
--- a/src/components/ui/VnStockValueDisplay.vue
+++ b/src/components/ui/VnStockValueDisplay.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { toPercentage } from 'filters/index';
+import { toCurrency, toPercentage } from 'filters/index';
 
 import { computed } from 'vue';
 
@@ -8,6 +8,10 @@ const props = defineProps({
         type: Number,
         required: true,
     },
+    format: {
+        type: String,
+        default: 'percentage', // 'currency'
+    },
 });
 
 const valueClass = computed(() =>
@@ -21,7 +25,10 @@ const formattedValue = computed(() => props.value);
 <template>
     <span :class="valueClass">
         <QIcon :name="iconName" size="sm" class="value-icon" />
-        {{ toPercentage(formattedValue) }}
+        <span v-if="$props.format === 'percentage'">{{
+            toPercentage(formattedValue)
+        }}</span>
+        <span v-if="$props.format === 'currency'">{{ toCurrency(formattedValue) }}</span>
     </span>
 </template>
 
diff --git a/src/pages/Item/components/ItemProposal.vue b/src/pages/Item/components/ItemProposal.vue
index a827508ad..62fe31f8c 100644
--- a/src/pages/Item/components/ItemProposal.vue
+++ b/src/pages/Item/components/ItemProposal.vue
@@ -42,7 +42,7 @@ const ticketConfig = ref({});
 const proposalTableRef = ref(null);
 
 const sale = computed(() => $props.sales[0]);
-const saleFk = computed(() => sale.value.saleFk);
+const saleFk = computed(() => sale.value?.saleFk);
 const filter = computed(() => ({
     where: $props.filter,
 
@@ -56,8 +56,24 @@ const defaultColumnAttrs = {
 };
 const emit = defineEmits(['onDialogClosed', 'itemReplaced']);
 
-const conditionalValuePrice = (price) =>
-    price > 1 + ticketConfig.value.lackAlertPrice / 100 ? 'match' : 'not-match';
+const priceStatusClass = (proposalPrice) => {
+    const originalPrice = sale.value?.price;
+
+    if (
+        !originalPrice ||
+        !ticketConfig.value ||
+        typeof ticketConfig.value.lackAlertPrice !== 'number'
+    ) {
+        return 'price-ok';
+    }
+
+    const priceIncreasePercentage =
+        ((proposalPrice - originalPrice) / originalPrice) * 100;
+
+    return priceIncreasePercentage > ticketConfig.value.lackAlertPrice
+        ? 'price-alert'
+        : 'price-ok';
+};
 
 const columns = computed(() => [
     {
@@ -97,7 +113,15 @@ const columns = computed(() => [
     {
         align: 'left',
         sortable: true,
-        label: t('item.list.color'),
+        label: t('item.list.producer'),
+        name: 'subName',
+        field: 'subName',
+        columnClass: 'expand',
+    },
+    {
+        align: 'left',
+        sortable: true,
+        label: t('proposal.tag5'),
         name: 'tag5',
         field: 'value5',
         columnClass: 'expand',
@@ -105,7 +129,7 @@ const columns = computed(() => [
     {
         align: 'left',
         sortable: true,
-        label: t('item.list.stems'),
+        label: t('proposal.tag6'),
         name: 'tag6',
         field: 'value6',
         columnClass: 'expand',
@@ -113,12 +137,27 @@ const columns = computed(() => [
     {
         align: 'left',
         sortable: true,
-        label: t('item.list.producer'),
+        label: t('proposal.tag7'),
         name: 'tag7',
         field: 'value7',
         columnClass: 'expand',
     },
-
+    {
+        align: 'left',
+        sortable: true,
+        label: t('proposal.tag8'),
+        name: 'tag8',
+        field: 'value8',
+        columnClass: 'expand',
+    },
+    {
+        align: 'left',
+        sortable: true,
+        label: t('proposal.advanceable'),
+        name: 'advanceable',
+        field: 'advanceable',
+        columnClass: 'expand',
+    },
     {
         ...defaultColumnAttrs,
         label: t('proposal.price2'),
@@ -169,14 +208,14 @@ function extractMatchValues(obj) {
         .filter((key) => key.startsWith(MATCH))
         .map((key) => parseInt(key.replace(MATCH, ''), 10));
 }
-const gradientStyle = (value) => {
+const gradientStyleClass = (row) => {
     let color = 'white';
-    const perc = parseFloat(value);
+    const value = parseFloat(row);
     switch (true) {
-        case perc >= 0 && perc < 33:
+        case value >= 0 && value < 33:
             color = 'primary';
             break;
-        case perc >= 33 && perc < 66:
+        case value >= 33 && value < 66:
             color = 'warning';
             break;
 
@@ -193,34 +232,49 @@ const statusConditionalValue = (row) => {
 };
 
 const isSelectionAvailable = (itemProposal) => {
-    const { price2 } = itemProposal;
-    const salePrice = sale.value.price;
-    const byPrice = (100 * price2) / salePrice > ticketConfig.value.lackAlertPrice;
-    if (byPrice) {
-        return byPrice;
+    const { price2, available } = itemProposal;
+    const originalPrice = sale.value?.price;
+    const lackQuantity = $props.itemLack?.lack;
+
+    if (
+        !originalPrice ||
+        !lackQuantity ||
+        !ticketConfig.value ||
+        typeof ticketConfig.value.lackAlertPrice !== 'number'
+    ) {
+        return false;
     }
-    const byQuantity =
-        (100 * itemProposal.available) / Math.abs($props.itemLack.lack) <
-        ticketConfig.value.lackAlertPrice;
-    return byQuantity;
+
+    const priceIncreasePercentage = ((price2 - originalPrice) / originalPrice) * 100;
+    const isPriceTooHigh = priceIncreasePercentage > ticketConfig.value.lackAlertPrice;
+
+    if (isPriceTooHigh) {
+        return false;
+    }
+
+    const availablePercentage = (available / Math.abs(lackQuantity)) * 100;
+    const hasEnoughQuantity = availablePercentage >= ticketConfig.value.lackAlertPrice;
+
+    return hasEnoughQuantity;
 };
 
 async function change({ itemFk: substitutionFk }) {
     try {
+        let body;
         const promises = $props.sales.map(({ saleFk, quantity }) => {
-            const params = {
+            body = {
                 saleFk,
                 substitutionFk,
                 quantity,
             };
-            return axios.post('Sales/replaceItem', params);
+            return axios.post('Sales/replaceItem', body);
         });
         const results = await Promise.allSettled(promises);
 
         notifyResults(results, 'saleFk');
         emit('itemReplaced', {
+            ...body,
             type: 'refresh',
-            quantity: quantity.value,
             itemProposal: proposalSelected.value[0],
         });
         proposalSelected.value = [];
@@ -232,6 +286,13 @@ async function change({ itemFk: substitutionFk }) {
 async function handleTicketConfig(data) {
     ticketConfig.value = data[0];
 }
+
+function filterRows(data) {
+    const filteredRows = data.sort(
+        (a, b) => isSelectionAvailable(b) - isSelectionAvailable(a),
+    );
+    proposalTableRef.value.CrudModelRef.formData = filteredRows;
+}
 </script>
 <template>
     <FetchData
@@ -251,6 +312,7 @@ async function handleTicketConfig(data) {
         :user-filter="filter"
         :columns="columns"
         class="full-width q-mt-md"
+        @on-fetch="filterRows"
         row-key="id"
         :row-click="change"
         :is-editable="false"
@@ -273,7 +335,9 @@ async function handleTicketConfig(data) {
             >
                 <div
                     class="middle full-width"
-                    :class="[`proposal-${gradientStyle(statusConditionalValue(row))}`]"
+                    :class="[
+                        `proposal-${gradientStyleClass(statusConditionalValue(row))}`,
+                    ]"
                 >
                     <QTooltip> {{ statusConditionalValue(row) }}% </QTooltip>
                 </div>
@@ -294,6 +358,9 @@ async function handleTicketConfig(data) {
         <template #column-tag7="{ row }">
             <span :class="{ match: !row.match7 }">{{ row.value7 }}</span>
         </template>
+        <template #column-tag8="{ row }">
+            <span :class="{ match: !row.match8 }">{{ row.value8 }}</span>
+        </template>
         <template #column-counter="{ row }">
             <span
                 :class="{
@@ -308,8 +375,17 @@ async function handleTicketConfig(data) {
         </template>
         <template #column-price2="{ row }">
             <div class="flex column items-center content-center">
-                <VnStockValueDisplay :value="(sales[0].price - row.price2) / 100" />
-                <span :class="[conditionalValuePrice(row.price2)]">{{
+                <!-- Use class binding for tooltip background -->
+                <QTooltip :offset="[0, 5]" anchor="top middle" self="bottom middle">
+                    <div>{{ $t('proposal.price2') }}: {{ toCurrency(row.price2) }}</div>
+                    <div>
+                        {{ $t('proposal.itemOldPrice') }}:
+                        {{ toCurrency(sales[0]?.price) }}
+                    </div>
+                </QTooltip>
+                <VnStockValueDisplay :format="'currency'" :value="-row.price2 / 100" />
+                <!-- Use class binding for text color -->
+                <span :class="[priceStatusClass(row.price2)]">{{
                     toCurrency(row.price2)
                 }}</span>
             </div>
@@ -323,12 +399,37 @@ async function handleTicketConfig(data) {
     margin-right: 2px;
     flex: 2 0 5px;
 }
-.match {
+
+/* Removed old .match / .not-match specific to price */
+/* .match {
     color: $negative;
 }
 .not-match {
     color: inherit;
+} */
+
+/* Added classes for price status */
+.price-alert {
+    color: $negative; /* Alert text color */
+    &.q-tooltip {
+        background-color: $negative; /* Alert tooltip background */
+        color: white; /* Ensure tooltip text is readable */
+    }
 }
+
+.price-ok {
+    color: inherit; /* Default text color */
+    &.q-tooltip {
+        /* Keep default tooltip background or set a specific 'ok' color */
+        background-color: $positive; /* Example: green background for OK price */
+        color: white; /* Ensure tooltip text is readable */
+    }
+}
+
+.match {
+    color: $negative;
+}
+
 .proposal-warning {
     background-color: $warning;
 }
diff --git a/src/pages/Item/components/ItemProposalProxy.vue b/src/pages/Item/components/ItemProposalProxy.vue
index 27edd3670..43af6945d 100644
--- a/src/pages/Item/components/ItemProposalProxy.vue
+++ b/src/pages/Item/components/ItemProposalProxy.vue
@@ -23,33 +23,32 @@ const $props = defineProps({
         default: () => [],
     },
 });
-const { dialogRef } = useDialogPluginComponent();
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
+    useDialogPluginComponent();
 const emit = defineEmits([
     'onDialogClosed',
+    'onDialogOk',
     'itemReplaced',
     ...useDialogPluginComponent.emits,
 ]);
 defineExpose({ show: () => dialogRef.value.show(), hide: () => dialogRef.value.hide() });
+const itemReplaced = (data) => {
+    onDialogOK(data);
+    dialogRef.value.hide();
+};
 </script>
 <template>
     <QDialog ref="dialogRef" transition-show="scale" transition-hide="scale">
         <QCard class="dialog-width">
             <QCardSection class="row items-center q-pb-none">
-                <span class="text-h6 text-grey">{{ $t('itemProposal') }}</span>
+                <span class="text-h6 text-grey" v-text="$t('itemProposal')" />
                 <QSpace />
                 <QBtn icon="close" flat round dense v-close-popup />
             </QCardSection>
             <QCardSection>
-                <ItemProposal
-                    v-bind="$props"
-                    @item-replaced="
-                        (data) => {
-                            emit('itemReplaced', data);
-                            dialogRef.hide();
-                        }
-                    "
-                ></ItemProposal
-            ></QCardSection>
+                <ItemProposal v-bind="$props" @item-replaced="itemReplaced"
+            /></QCardSection>
         </QCard>
     </QDialog>
 </template>
diff --git a/src/pages/Item/locale/en.yml b/src/pages/Item/locale/en.yml
index 017f6b11f..50afca975 100644
--- a/src/pages/Item/locale/en.yml
+++ b/src/pages/Item/locale/en.yml
@@ -231,6 +231,11 @@ proposal:
     value6: value6
     value7: value7
     value8: value8
+    tag5: Tag5
+    tag6: Tag6
+    tag7: Tag7
+    tag8: Tag8
+    advanceable: Advanceable
     available: Available
     minQuantity: minQuantity
     price2: Price
diff --git a/src/pages/Item/locale/es.yml b/src/pages/Item/locale/es.yml
index a06695fe9..4b82cedd4 100644
--- a/src/pages/Item/locale/es.yml
+++ b/src/pages/Item/locale/es.yml
@@ -237,11 +237,16 @@ proposal:
     value6: value6
     value7: value7
     value8: value8
+    tag5: Tag5
+    tag6: Tag6
+    tag7: Tag7
+    tag8: Tag8
     available: Disponible
     minQuantity: Min. cantidad
     price2: Precio
     located: Ubicado
     counter: Contador
+    advanceable: Adelantable
     difference: Diferencial
     groupingPrice: Precio Grouping
     itemOldPrice: Precio itemOld

From 9f7994319bd3834bc2e05f8bdd2d448fb97e66e7 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 14 May 2025 12:55:53 +0200
Subject: [PATCH 07/22] feat: remove vnsleect url inside column

---
 src/pages/Ticket/Negative/TicketLackDetail.vue | 6 ------
 src/pages/Ticket/Negative/TicketLackTable.vue  | 8 +++++++-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/Ticket/Negative/TicketLackDetail.vue b/src/pages/Ticket/Negative/TicketLackDetail.vue
index 64694ef97..e0b0a469f 100644
--- a/src/pages/Ticket/Negative/TicketLackDetail.vue
+++ b/src/pages/Ticket/Negative/TicketLackDetail.vue
@@ -17,7 +17,6 @@ import ItemProposalProxy from 'src/pages/Item/components/ItemProposalProxy.vue';
 import { useQuasar } from 'quasar';
 const quasar = useQuasar();
 const { t } = useI18n();
-const editableStates = ref([]);
 const stateStore = useStateStore();
 const tableRef = ref();
 const changeItemDialogRef = ref(null);
@@ -73,11 +72,6 @@ const showItemProposal = () => {
 </script>
 
 <template>
-    <FetchData
-        url="States/editableStates"
-        @on-fetch="(data) => (editableStates = data)"
-        auto-load
-    />
     <FetchData
         :url="`Items/${entityId}/getCard`"
         :fields="['longName']"
diff --git a/src/pages/Ticket/Negative/TicketLackTable.vue b/src/pages/Ticket/Negative/TicketLackTable.vue
index bf3c07a10..b5cf8608d 100644
--- a/src/pages/Ticket/Negative/TicketLackTable.vue
+++ b/src/pages/Ticket/Negative/TicketLackTable.vue
@@ -35,6 +35,7 @@ const filterLack = ref({
     order: 'ts.alertLevelCode ASC',
 });
 
+const editableStates = ref([]);
 const selectedRows = ref([]);
 const { t } = useI18n();
 const { notify } = useNotify();
@@ -160,6 +161,11 @@ function onBuysFetched(data) {
 </script>
 
 <template>
+    <FetchData
+        url="States/editableStates"
+        @on-fetch="(data) => (editableStates = data)"
+        auto-load
+    />
     <FetchData
         ref="fetchItemLack"
         :url="`Tickets/itemLack`"
@@ -309,7 +315,7 @@ function onBuysFetched(data) {
         </template>
         <template #column-alertLevelCode="props">
             <VnSelect
-                url="States/editableStates"
+                :options="editableStates"
                 auto-load
                 hide-selected
                 option-value="id"

From ac59c79baf8f5c1d11a3a166fac81a4c072489d2 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 14 May 2025 14:24:28 +0200
Subject: [PATCH 08/22] fix: update alert level code handling and binding in
 TicketLackTable

---
 src/pages/Ticket/Negative/TicketLackTable.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/pages/Ticket/Negative/TicketLackTable.vue b/src/pages/Ticket/Negative/TicketLackTable.vue
index b5cf8608d..67758191f 100644
--- a/src/pages/Ticket/Negative/TicketLackTable.vue
+++ b/src/pages/Ticket/Negative/TicketLackTable.vue
@@ -136,9 +136,13 @@ const saveChange = async (field, { row }) => {
     try {
         switch (field) {
             case 'alertLevelCode':
+                const { id: code } = editableStates.value.find(
+                    ({ name }) => name === row.code,
+                );
+                debugger;
                 await axios.post(`Tickets/state`, {
                     ticketFk: row.ticketFk,
-                    code: row[field],
+                    code,
                 });
                 break;
 
@@ -318,9 +322,9 @@ function onBuysFetched(data) {
                 :options="editableStates"
                 auto-load
                 hide-selected
-                option-value="id"
+                option-value="name"
                 option-label="name"
-                v-model="props.row.alertLevelCode"
+                v-model="props.row.code"
                 v-on="getInputEvents(props)"
             />
         </template>

From 3940ac3c82302ab191d5cd683583882314b379f9 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 14 May 2025 14:39:43 +0200
Subject: [PATCH 09/22] feat: new vnInputMultipleDates

---
 src/components/common/VnInputDate.vue         | 218 ++++++++++--------
 src/components/common/VnInputMultipleDate.vue | 184 +++++++++++++++
 .../Ticket/Negative/TicketLackFilter.vue      |   7 +-
 3 files changed, 313 insertions(+), 96 deletions(-)
 create mode 100644 src/components/common/VnInputMultipleDate.vue

diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index 53c756f42..0507fddfb 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -1,101 +1,36 @@
 <script setup>
-import { onMounted, watch, computed, ref, useAttrs } from 'vue';
-import { date } from 'quasar';
+import { nextTick, watch, computed, ref, useAttrs } from 'vue';
+import { date, getCssVar } from 'quasar';
 import VnDate from './VnDate.vue';
 import { useRequired } from 'src/composables/useRequired';
 
 const $attrs = useAttrs();
 const { isRequired, requiredFieldRule } = useRequired($attrs);
+const model = defineModel({ type: [String, Date] });
 
 const $props = defineProps({
     isOutlined: {
         type: Boolean,
         default: false,
     },
-    isPopupOpen: {
+    showEvent: {
         type: Boolean,
         default: true,
     },
-    multiple: {
-        type: Boolean,
-        default: false,
-    },
-});
-
-const model = defineModel({
-    type: [String, Date, Array],
-    default: null,
 });
 
 const vnInputDateRef = ref(null);
+const errColor = getCssVar('negative');
+const textColor = ref('');
 
 const dateFormat = 'DD/MM/YYYY';
 const isPopupOpen = ref();
 const hover = ref();
-const mask = ref();
 
 const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])];
 
-const formattedDate = computed({
-    get() {
-        if (!model.value) return model.value;
-        if ($props.multiple) {
-            return model.value
-                .map((d) => date.formatDate(new Date(d), dateFormat))
-                .join(', ');
-        }
-        return date.formatDate(new Date(model.value), dateFormat);
-    },
-    set(value) {
-        if (value == model.value) return;
-        if ($props.multiple) return; // No permitir edición manual en modo múltiple
-
-        let newDate;
-        if (value) {
-            // parse input
-            if (value.includes('/') && value.length >= 10) {
-                if (value.at(2) == '/') value = value.split('/').reverse().join('/');
-                value = date.formatDate(
-                    new Date(value).toISOString(),
-                    'YYYY-MM-DDTHH:mm:ss.SSSZ',
-                );
-            }
-            const [year, month, day] = value.split('-').map((e) => parseInt(e));
-            newDate = new Date(year, month - 1, day);
-            if (model.value && !$props.multiple) {
-                const orgDate =
-                    model.value instanceof Date ? model.value : new Date(model.value);
-
-                newDate.setHours(
-                    orgDate.getHours(),
-                    orgDate.getMinutes(),
-                    orgDate.getSeconds(),
-                    orgDate.getMilliseconds(),
-                );
-            }
-        }
-        if (!isNaN(newDate)) model.value = newDate.toISOString();
-    },
-});
-
-const popupDate = computed(() => {
-    if (!model.value) return model.value;
-    if ($props.multiple) {
-        return model.value.map((d) => date.formatDate(new Date(d), 'YYYY/MM/DD'));
-    }
-    return date.formatDate(new Date(model.value), 'YYYY/MM/DD');
-});
-onMounted(() => {
-    // fix quasar bug
-    mask.value = '##/##/####';
-    if ($props.multiple && !model.value) {
-        model.value = [];
-    }
-});
-watch(
-    () => model.value,
-    (val) => (formattedDate.value = val),
-    { immediate: true },
+const popupDate = computed(() =>
+    model.value ? date.formatDate(new Date(model.value), 'YYYY/MM/DD') : model.value,
 );
 
 const styleAttrs = computed(() => {
@@ -108,13 +43,116 @@ const styleAttrs = computed(() => {
         : {};
 });
 
-const manageDate = (dates) => {
-    if ($props.multiple) {
-        model.value = dates.map((d) => new Date(d).toISOString());
-    } else {
-        formattedDate.value = dates;
+const inputValue = ref('');
+
+const validateAndCleanInput = (value) => {
+    inputValue.value = value.replace(/[^0-9./-]/g, '');
+};
+
+const manageDate = (date) => {
+    inputValue.value = date.split('/').reverse().join('/');
+    isPopupOpen.value = false;
+};
+
+watch(
+    () => model.value,
+    (nVal) => {
+        if (nVal) inputValue.value = date.formatDate(new Date(model.value), dateFormat);
+        else inputValue.value = '';
+    },
+    { immediate: true },
+);
+
+const formatDate = () => {
+    let value = inputValue.value;
+    if (!value || value === model.value) {
+        textColor.value = '';
+        return;
     }
-    if ($props.isPopupOpen) isPopupOpen.value = false;
+    const regex =
+        /^([0]?[1-9]|[12][0-9]|3[01])([./-])([0]?[1-9]|1[0-2])([./-](\d{1,4}))?$/;
+    if (!regex.test(value)) {
+        textColor.value = errColor;
+        return;
+    }
+
+    value = value.replace(/[.-]/g, '/');
+    const parts = value.split('/');
+    if (parts.length < 2) {
+        textColor.value = errColor;
+        return;
+    }
+
+    let [day, month, year] = parts;
+    if (day.length === 1) day = '0' + day;
+    if (month.length === 1) month = '0' + month;
+
+    const currentYear = Date.vnNew().getFullYear();
+    if (!year) year = currentYear;
+    const millennium = currentYear.toString().slice(0, 1);
+
+    switch (year.length) {
+        case 1:
+            year = `${millennium}00${year}`;
+            break;
+        case 2:
+            year = `${millennium}0${year}`;
+            break;
+        case 3:
+            year = `${millennium}${year}`;
+            break;
+        case 4:
+            break;
+    }
+
+    let isoCandidate = `${year}/${month}/${day}`;
+    isoCandidate = date.formatDate(
+        new Date(isoCandidate).toISOString(),
+        'YYYY-MM-DDTHH:mm:ss.SSSZ',
+    );
+    const [isoYear, isoMonth, isoDay] = isoCandidate.split('-').map((e) => parseInt(e));
+    const parsedDate = new Date(isoYear, isoMonth - 1, isoDay);
+
+    const isValidDate =
+        parsedDate instanceof Date &&
+        !isNaN(parsedDate) &&
+        parsedDate.getFullYear() === parseInt(year) &&
+        parsedDate.getMonth() === parseInt(month) - 1 &&
+        parsedDate.getDate() === parseInt(day);
+
+    if (!isValidDate) {
+        textColor.value = errColor;
+        return;
+    }
+
+    if (model.value) {
+        const original =
+            model.value instanceof Date ? model.value : new Date(model.value);
+        parsedDate.setHours(
+            original.getHours(),
+            original.getMinutes(),
+            original.getSeconds(),
+            original.getMilliseconds(),
+        );
+    }
+
+    model.value = parsedDate.toISOString();
+
+    textColor.value = '';
+};
+
+const handleEnter = (event) => {
+    formatDate();
+
+    nextTick(() => {
+        const newEvent = new KeyboardEvent('keydown', {
+            key: 'Enter',
+            code: 'Enter',
+            bubbles: true,
+            cancelable: true,
+        });
+        vnInputDateRef.value?.$el?.dispatchEvent(newEvent);
+    });
 };
 </script>
 
@@ -122,18 +160,21 @@ const manageDate = (dates) => {
     <div @mouseover="hover = true" @mouseleave="hover = false">
         <QInput
             ref="vnInputDateRef"
-            v-model="formattedDate"
+            v-model="inputValue"
             class="vn-input-date"
-            :mask="$props.multiple ? undefined : mask"
             placeholder="dd/mm/aaaa"
             v-bind="{ ...$attrs, ...styleAttrs }"
             :class="{ required: isRequired }"
             :rules="mixinRules"
             :clearable="false"
+            :input-style="{ color: textColor }"
             @click="isPopupOpen = !isPopupOpen"
             @keydown="isPopupOpen = false"
+            @blur="formatDate"
+            @keydown.enter.prevent="handleEnter"
             hide-bottom-space
             :data-cy="($attrs['data-cy'] ?? $attrs.label) + '_inputDate'"
+            @update:model-value="validateAndCleanInput"
         >
             <template #append>
                 <QIcon
@@ -142,11 +183,12 @@ const manageDate = (dates) => {
                     v-if="
                         ($attrs.clearable == undefined || $attrs.clearable) &&
                         hover &&
-                        model &&
+                        inputValue &&
                         !$attrs.disable
                     "
                     @click="
                         vnInputDateRef.focus();
+                        inputValue = null;
                         model = null;
                         isPopupOpen = false;
                     "
@@ -162,18 +204,10 @@ const manageDate = (dates) => {
                 :no-focus="true"
                 :no-parent-event="true"
             >
-                <VnDate
-                    v-model="popupDate"
-                    @update:model-value="manageDate"
-                    :multiple="multiple"
-                />
+                <VnDate v-model="popupDate" @update:model-value="manageDate" />
             </QMenu>
             <QDialog v-else v-model="isPopupOpen">
-                <VnDate
-                    v-model="popupDate"
-                    @update:model-value="manageDate"
-                    :multiple="multiple"
-                />
+                <VnDate v-model="popupDate" @update:model-value="manageDate" />
             </QDialog>
         </QInput>
     </div>
diff --git a/src/components/common/VnInputMultipleDate.vue b/src/components/common/VnInputMultipleDate.vue
new file mode 100644
index 000000000..70b0e2e03
--- /dev/null
+++ b/src/components/common/VnInputMultipleDate.vue
@@ -0,0 +1,184 @@
+<script setup>
+import { onMounted, watch, computed, ref, useAttrs } from 'vue';
+import { date } from 'quasar';
+import VnDate from './VnDate.vue';
+import { useRequired } from 'src/composables/useRequired';
+
+const $attrs = useAttrs();
+const { isRequired, requiredFieldRule } = useRequired($attrs);
+
+const $props = defineProps({
+    isOutlined: {
+        type: Boolean,
+        default: false,
+    },
+    isPopupOpen: {
+        type: Boolean,
+        default: true,
+    },
+    multiple: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+const model = defineModel({
+    type: [String, Date, Array],
+    default: null,
+});
+
+const vnInputDateRef = ref(null);
+
+const dateFormat = 'DD/MM/YYYY';
+const isPopupOpen = ref();
+const hover = ref();
+const mask = ref();
+
+const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])];
+
+const formattedDate = computed({
+    get() {
+        if (!model.value) return model.value;
+        if ($props.multiple) {
+            return model.value
+                .map((d) => date.formatDate(new Date(d), dateFormat))
+                .join(', ');
+        }
+        return date.formatDate(new Date(model.value), dateFormat);
+    },
+    set(value) {
+        if (value == model.value) return;
+        if ($props.multiple) return; // No permitir edición manual en modo múltiple
+
+        let newDate;
+        if (value) {
+            // parse input
+            if (value.includes('/') && value.length >= 10) {
+                if (value.at(2) == '/') value = value.split('/').reverse().join('/');
+                value = date.formatDate(
+                    new Date(value).toISOString(),
+                    'YYYY-MM-DDTHH:mm:ss.SSSZ',
+                );
+            }
+            const [year, month, day] = value.split('-').map((e) => parseInt(e));
+            newDate = new Date(year, month - 1, day);
+            if (model.value && !$props.multiple) {
+                const orgDate =
+                    model.value instanceof Date ? model.value : new Date(model.value);
+
+                newDate.setHours(
+                    orgDate.getHours(),
+                    orgDate.getMinutes(),
+                    orgDate.getSeconds(),
+                    orgDate.getMilliseconds(),
+                );
+            }
+        }
+        if (!isNaN(newDate)) model.value = newDate.toISOString();
+    },
+});
+
+const popupDate = computed(() => {
+    if (!model.value) return model.value;
+    if ($props.multiple) {
+        return model.value.map((d) => date.formatDate(new Date(d), 'YYYY/MM/DD'));
+    }
+    return date.formatDate(new Date(model.value), 'YYYY/MM/DD');
+});
+onMounted(() => {
+    // fix quasar bug
+    mask.value = '##/##/####';
+    if ($props.multiple && !model.value) {
+        model.value = [];
+    }
+});
+watch(
+    () => model.value,
+    (val) => (formattedDate.value = val),
+    { immediate: true },
+);
+
+const styleAttrs = computed(() => {
+    return $props.isOutlined
+        ? {
+              dense: true,
+              outlined: true,
+              rounded: true,
+          }
+        : {};
+});
+
+const manageDate = (dates) => {
+    if ($props.multiple) {
+        model.value = dates.map((d) => new Date(d).toISOString());
+    } else {
+        formattedDate.value = dates;
+    }
+    if ($props.isPopupOpen) isPopupOpen.value = false;
+};
+</script>
+
+<template>
+    <div @mouseover="hover = true" @mouseleave="hover = false">
+        <QInput
+            ref="vnInputDateRef"
+            v-model="formattedDate"
+            class="vn-input-date"
+            :mask="$props.multiple ? undefined : mask"
+            placeholder="dd/mm/aaaa"
+            v-bind="{ ...$attrs, ...styleAttrs }"
+            :class="{ required: isRequired }"
+            :rules="mixinRules"
+            :clearable="false"
+            @click="isPopupOpen = !isPopupOpen"
+            @keydown="isPopupOpen = false"
+            hide-bottom-space
+            :data-cy="($attrs['data-cy'] ?? $attrs.label) + '_inputDate'"
+        >
+            <template #append>
+                <QIcon
+                    name="close"
+                    size="xs"
+                    v-if="
+                        ($attrs.clearable == undefined || $attrs.clearable) &&
+                        hover &&
+                        model &&
+                        !$attrs.disable
+                    "
+                    @click="
+                        vnInputDateRef.focus();
+                        model = null;
+                        isPopupOpen = false;
+                    "
+                />
+            </template>
+            <QMenu
+                v-if="$q.screen.gt.xs"
+                transition-show="scale"
+                transition-hide="scale"
+                v-model="isPopupOpen"
+                anchor="bottom left"
+                self="top start"
+                :no-focus="true"
+                :no-parent-event="true"
+            >
+                <VnDate
+                    v-model="popupDate"
+                    @update:model-value="manageDate"
+                    :multiple="multiple"
+                />
+            </QMenu>
+            <QDialog v-else v-model="isPopupOpen">
+                <VnDate
+                    v-model="popupDate"
+                    @update:model-value="manageDate"
+                    :multiple="multiple"
+                />
+            </QDialog>
+        </QInput>
+    </div>
+</template>
+<i18n>
+    es:
+        Open date: Abrir fecha
+</i18n>
diff --git a/src/pages/Ticket/Negative/TicketLackFilter.vue b/src/pages/Ticket/Negative/TicketLackFilter.vue
index 31738bc1c..951c7a7a2 100644
--- a/src/pages/Ticket/Negative/TicketLackFilter.vue
+++ b/src/pages/Ticket/Negative/TicketLackFilter.vue
@@ -7,7 +7,7 @@ import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDateTime from 'src/components/common/VnInputDateTime.vue';
-import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnInputMultipleDate from 'src/components/common/VnInputMultipleDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -132,14 +132,13 @@ const setUserParams = (params) => {
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <VnInputDate
+                        <VnInputMultipleDate
                             v-model="params.excludedDates"
                             filled
                             :label="t('negative.excludedDates')"
-                            :multiple="true"
                             :is-popup-open="false"
                         >
-                        </VnInputDate>
+                        </VnInputMultipleDate>
                     </QItemSection>
                 </QItem>
                 <QItem>

From a80f6f9016ef1893c9a5bc86c2b70ac87e599c8e Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 14 May 2025 18:53:37 +0200
Subject: [PATCH 10/22] feat: new ticket payment dialog

---
 .../Ticket/components/TicketNewPayment.vue    | 306 ++++++++++++++++++
 1 file changed, 306 insertions(+)
 create mode 100644 src/pages/Ticket/components/TicketNewPayment.vue

diff --git a/src/pages/Ticket/components/TicketNewPayment.vue b/src/pages/Ticket/components/TicketNewPayment.vue
new file mode 100644
index 000000000..98df543a2
--- /dev/null
+++ b/src/pages/Ticket/components/TicketNewPayment.vue
@@ -0,0 +1,306 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import { useDialogPluginComponent } from 'quasar';
+
+import { usePrintService } from 'src/composables/usePrintService';
+import useNotify from 'src/composables/useNotify.js';
+
+import FormModelPopup from 'src/components/FormModelPopup.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnInputNumber from 'src/components/common/VnInputNumber.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnAccountNumber from 'src/components/common/VnAccountNumber.vue';
+import { useState } from 'src/composables/useState';
+
+const { t } = useI18n();
+const { notify } = useNotify();
+const { sendEmail, openReport } = usePrintService();
+const { dialogRef } = useDialogPluginComponent();
+
+const $props = defineProps({
+    formData: {
+        type: Object,
+        required: true,
+    },
+    clientId: {
+        type: Number,
+        required: true,
+    },
+    promise: {
+        type: Function,
+        default: null,
+    },
+});
+
+const closeButton = ref(null);
+const viewReceipt = ref();
+const shouldSendEmail = ref(false);
+const maxAmount = ref();
+const accountingType = ref({});
+const isCash = ref(false);
+const formModelRef = ref(false);
+const amountToReturn = ref();
+const filterBanks = {
+    fields: ['id', 'bank', 'accountingTypeFk'],
+    include: { relation: 'accountingType' },
+    order: 'id',
+    limit: 30,
+};
+
+const state = useState();
+const user = state.getUser();
+const initialData = ref({
+    ...$props.formData.value,
+    companyFk: user.value.companyFk,
+    payed: Date.vnNew(),
+});
+
+function setPaymentType(data, accounting) {
+    data.bankFk = accounting.id;
+    if (!accounting) return;
+    accountingType.value = accounting.accountingType;
+    data.description = [];
+    data.payed = Date.vnNew();
+    isCash.value = accountingType.value.code == 'cash';
+    viewReceipt.value = isCash.value;
+    if (accountingType.value.daysInFuture)
+        data.payed.setDate(data.payed.getDate() + accountingType.value.daysInFuture);
+    maxAmount.value = accountingType.value && accountingType.value.maxAmount;
+    if (accountingType.value.code == 'compensation') return (data.description = '');
+
+    let descriptions = [];
+    if (accountingType.value.receiptDescription)
+        descriptions.push(accountingType.value.receiptDescription);
+    if (data.description > 0) descriptions.push(data.description);
+    data.description = descriptions.join(', ');
+}
+
+const calculateFromAmount = (event) => {
+    initialData.value.amountToReturn = Number(
+        (parseFloat(initialData.value.deliveredAmount) + parseFloat(event) * -1).toFixed(
+            2,
+        ),
+    );
+};
+
+const calculateFromDeliveredAmount = (event) => {
+    amountToReturn.value = Number((event - initialData.value.amountPaid).toFixed(2));
+};
+
+function onBeforeSave(data) {
+    const exceededAmount = data.amountPaid > maxAmount.value;
+    if (isCash.value && exceededAmount)
+        return notify(t('Amount exceeded', { maxAmount: maxAmount.value }), 'negative');
+
+    if (isCash.value && shouldSendEmail.value && !data.email)
+        return notify(t('There is no assigned email for this client'), 'negative');
+
+    return data;
+}
+
+async function onDataSaved({ email, id }) {
+    try {
+        debugger;
+        if (shouldSendEmail.value && isCash.value)
+            await sendEmail(`Receipts/${id}/receipt-email`, {
+                recipient: email,
+            });
+
+        if (viewReceipt.value) openReport(`Receipts/${id}/receipt-pdf`, {}, '_blank');
+    } finally {
+        if ($props.promise) $props.promise();
+        if (closeButton.value) closeButton.value.click();
+    }
+}
+
+async function getSupplierClientReferences(data) {
+    if (!data) return (initialData.value.description = '');
+    const params = { bankAccount: data.compensationAccount };
+    const { data: reference } = await axios(`Clients/getClientOrSupplierReference`, {
+        params,
+    });
+    if (reference.supplierId) {
+        data.description = t('Supplier Compensation Reference', {
+            supplierId: reference.supplierId,
+            supplierName: reference.supplierName,
+        });
+        return;
+    }
+    data.description = t('Client Compensation Reference', {
+        clientId: reference.clientId,
+        clientName: reference.clientName,
+    });
+}
+
+async function getAmountPaid() {
+    const filter = {
+        where: {
+            clientFk: $props.clientId,
+            companyFk: initialData.value.companyFk,
+        },
+    };
+
+    const { data } = await getClientRisk(filter);
+    initialData.value.amountPaid = (data?.length && data[0].amount) || undefined;
+}
+
+async function onSubmit(formData) {
+    const {
+        data: [{ email }],
+    } = await axios.get('Clients', {
+        params: {
+            filter: JSON.stringify({ where: { id: $props.clientFk } }),
+        },
+    });
+
+    const { data } = await axios.post(`Clients/${formData.clientFk}/createReceipt`, {
+        payed: formData.payed,
+        companyFk: formData.companyFk,
+        bankFk: formData.bankFk,
+        amountPaid: formData.amountPaid,
+        description: formData.description,
+        clientFk: $props.clientFk,
+        email,
+    });
+
+    if (data) notify('globals.dataSaved', 'positive');
+    await onDataSaved(data);
+}
+</script>
+
+<template>
+    <QDialog ref="dialogRef" persistent>
+        <FormModelPopup
+            ref="formModelRef"
+            :form-initial-data="initialData"
+            :save-fn="onSubmit"
+            :prevent-submit="true"
+            :mapper="onBeforeSave"
+        >
+            <template #form-inputs="{ data, validate }">
+                <h5 class="q-mt-none">{{ t('New payment') }}</h5>
+                <VnRow>
+                    <VnSelect
+                        autofocus
+                        :label="t('Bank')"
+                        v-model="data.bankFk"
+                        url="Accountings"
+                        :filter="filterBanks"
+                        option-label="bank"
+                        :include="{ relation: 'accountingType' }"
+                        sort-by="id"
+                        :limit="0"
+                        @update:model-value="
+                            (value, options) => setPaymentType(data, value, options)
+                        "
+                        :emit-value="false"
+                        data-cy="paymentBank"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>
+                                        {{ scope.opt.id }}:&ensp;{{ scope.opt.bank }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelect>
+                    <VnInputNumber
+                        :label="t('Amount')"
+                        :required="true"
+                        @update:model-value="calculateFromAmount($event)"
+                        clearable
+                        v-model.number="data.amountPaid"
+                        data-cy="paymentAmount"
+                        :positive="false"
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnInputDate
+                        :label="t('Date')"
+                        v-model="data.payed"
+                        :required="true"
+                    />
+                    <VnSelect
+                        url="Companies"
+                        :label="t('Company')"
+                        :required="true"
+                        :rules="validate('entry.companyFk')"
+                        hide-selected
+                        option-label="code"
+                        v-model="data.companyFk"
+                        @update:model-value="getAmountPaid()"
+                    />
+                </VnRow>
+                <div v-if="accountingType.code == 'compensation'">
+                    <div class="text-h6">
+                        {{ t('Compensation') }}
+                    </div>
+                    <VnRow>
+                        <VnAccountNumber
+                            :label="t('Compensation account')"
+                            clearable
+                            v-model="data.compensationAccount"
+                            @blur="getSupplierClientReferences(data)"
+                        />
+                    </VnRow>
+                </div>
+                <VnInput
+                    :label="t('Reference')"
+                    :required="true"
+                    clearable
+                    v-model="data.description"
+                />
+                <div v-if="accountingType.code == 'cash'">
+                    <div class="text-h6">{{ t('Cash') }}</div>
+                    <VnRow>
+                        <VnInputNumber
+                            :label="t('Delivered amount')"
+                            @update:model-value="calculateFromDeliveredAmount($event)"
+                            clearable
+                            v-model="data.deliveredAmount"
+                        />
+                        <VnInputNumber
+                            :label="t('Amount to return')"
+                            disable
+                            v-model="amountToReturn"
+                        />
+                    </VnRow>
+                    <VnRow>
+                        <QCheckbox v-model="viewReceipt" :label="t('View recipt')" />
+                        <QCheckbox v-model="shouldSendEmail" :label="t('Send email')" />
+                    </VnRow>
+                </div>
+            </template>
+        </FormModelPopup>
+    </QDialog>
+</template>
+
+<i18n>
+en:
+    Supplier Compensation Reference: ({supplierId}) Ntro Proveedor {supplierName}
+    Client Compensation Reference: ({clientId}) Ntro Cliente {clientName}
+es:
+    New payment: Añadir pago
+    Date: Fecha
+    Company: Empresa
+    Bank: Caja
+    Amount: Importe
+    Reference: Referencia
+    Cash: Efectivo
+    Delivered amount: Cantidad entregada
+    Amount to return: Cantidad a devolver
+    View recipt: Ver recibido
+    Send email: Enviar correo
+    Compensation: Compensación
+    Compensation account: Cuenta para compensar
+    Supplier Compensation Reference: ({supplierId}) Ntro Proveedor {supplierName}
+    Client Compensation Reference: ({clientId}) Ntro Cliente {clientName}
+    There is no assigned email for this client: No hay correo asignado para este cliente
+    Amount exceeded: Según ley contra el fraude no se puede recibir cobros por importe igual o superior a {maxAmount}
+</i18n>

From 4bbdd3f162116a0811972604b1d91e5ef3db84a5 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 14 May 2025 18:53:52 +0200
Subject: [PATCH 11/22] feat: use new ticket payment dialog

---
 src/pages/Ticket/TicketList.vue | 192 ++------------------------------
 1 file changed, 7 insertions(+), 185 deletions(-)

diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index 66b8e0bfe..38edae3f3 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -14,8 +14,6 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import VnRow from 'src/components/ui/VnRow.vue';
 import TicketFilter from './TicketFilter.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import FetchData from 'src/components/FetchData.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import DepartmentDescriptorProxy from 'src/pages/Worker/Department/Card/DepartmentDescriptorProxy.vue';
 import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
@@ -25,6 +23,7 @@ import TicketProblems from 'src/components/TicketProblems.vue';
 import VnSection from 'src/components/common/VnSection.vue';
 import { getAddresses } from 'src/pages/Customer/composables/getAddresses';
 import { getAgencies } from 'src/pages/Route/Agency/composables/getAgencies';
+import TicketNewPayment from './components/TicketNewPayment.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -73,11 +72,6 @@ const initializeFromQuery = () => {
 
 const selectedRows = ref([]);
 const hasSelectedRows = computed(() => selectedRows.value.length > 0);
-const showForm = ref(false);
-const dialogData = ref();
-const companiesOptions = ref([]);
-const accountingOptions = ref([]);
-const amountToReturn = ref();
 const dataKey = 'TicketList';
 const formInitialData = ref({});
 
@@ -381,101 +375,22 @@ function openBalanceDialog(ticket) {
         description.value.push(ticketData.id);
     }
 
-    const balanceCreateDialog = ref({
+    const dialogData = ref({
         amountPaid: amountPaid.value,
         clientFk: clientFk.value,
         description: `Albaran: ${description.value.join(', ')}`,
     });
-    dialogData.value = balanceCreateDialog;
-    showForm.value = true;
-}
-
-async function onSubmit() {
-    const { data: email } = await axios.get('Clients', {
-        params: {
-            filter: JSON.stringify({ where: { id: dialogData.value.value.clientFk } }),
+    quasar.dialog({
+        component: TicketNewPayment,
+        componentProps: {
+            clientId: clientFk.value,
+            formData: dialogData.value,
         },
     });
-
-    const { data } = await axios.post(
-        `Clients/${dialogData.value.value.clientFk}/createReceipt`,
-        {
-            payed: dialogData.value.payed,
-            companyFk: dialogData.value.companyFk,
-            bankFk: dialogData.value.bankFk,
-            amountPaid: dialogData.value.value.amountPaid,
-            description: dialogData.value.value.description,
-            clientFk: dialogData.value.value.clientFk,
-            email: email[0].email,
-        },
-    );
-
-    if (data) notify('globals.dataSaved', 'positive');
-    showForm.value = false;
-}
-
-const setAmountToReturn = (newAmountGiven) => {
-    const amountPaid = dialogData.value.value.amountPaid;
-
-    amountToReturn.value = newAmountGiven - amountPaid;
-};
-
-function setReference(data) {
-    let newDescription = '';
-
-    switch (data) {
-        case 1:
-            newDescription = `${t(
-                'ticketList.creditCard',
-            )}, ${dialogData.value.value.description.replace(
-                /^(Credit Card, |Cash, |Transfers, )/,
-                '',
-            )}`;
-            break;
-        case 2:
-            newDescription = `${t(
-                'ticketList.cash',
-            )}, ${dialogData.value.value.description.replace(
-                /^(Credit Card, |Cash, |Transfers, )/,
-                '',
-            )}`;
-            break;
-        case 3:
-            newDescription = `${newDescription.replace(
-                /^(Credit Card, |Cash, |Transfers, )/,
-                '',
-            )}`;
-            break;
-        case 4:
-            newDescription = `${t(
-                'ticketList.transfers',
-            )}, ${dialogData.value.value.description.replace(
-                /^(Credit Card, |Cash, |Transfers, )/,
-                '',
-            )}`;
-            break;
-        case 3317:
-            newDescription = '';
-            break;
-        default:
-            break;
-    }
-
-    dialogData.value.value.description = newDescription;
 }
 </script>
 
 <template>
-    <FetchData
-        url="Companies"
-        @on-fetch="(data) => (companiesOptions = data)"
-        auto-load
-    />
-    <FetchData
-        url="Accountings"
-        @on-fetch="(data) => (accountingOptions = data)"
-        auto-load
-    />
     <VnSection
         :data-key="dataKey"
         :columns="columns"
@@ -722,99 +637,6 @@ function setReference(data) {
             {{ t('ticketList.accountPayment') }}
         </QTooltip>
     </QPageSticky>
-    <QDialog ref="dialogRef" v-model="showForm">
-        <QCard class="q-pa-md q-mb-md">
-            <QForm @submit="onSubmit()" class="q-pa-sm">
-                {{ t('ticketList.addPayment') }}
-                <VnRow>
-                    <VnInputDate
-                        :label="t('ticketList.date')"
-                        v-model="dialogData.payed"
-                    />
-                    <VnSelect
-                        :label="t('ticketList.company')"
-                        v-model="dialogData.companyFk"
-                        :options="companiesOptions"
-                        option-label="code"
-                        hide-selected
-                    >
-                    </VnSelect>
-                </VnRow>
-                <VnRow>
-                    <VnSelect
-                        :label="t('ticketList.bank')"
-                        v-model="dialogData.bankFk"
-                        :options="accountingOptions"
-                        option-label="bank"
-                        hide-selected
-                        @update:model-value="setReference"
-                    />
-                    <VnInput
-                        :label="t('ticketList.amount')"
-                        v-model="dialogData.value.amountPaid"
-                    />
-                </VnRow>
-                <VnRow v-if="dialogData.bankFk === 2">
-                    <span>
-                        {{ t('ticketList.cash') }}
-                    </span>
-                </VnRow>
-                <VnRow v-if="dialogData.bankFk === 2">
-                    <VnInput
-                        :label="t('ticketList.deliveredAmount')"
-                        v-model="dialogData.value.amountGiven"
-                        @update:model-value="setAmountToReturn"
-                        type="number"
-                    />
-                    <VnInput
-                        :label="t('ticketList.amountToReturn')"
-                        :model-value="amountToReturn"
-                        type="number"
-                        readonly
-                    />
-                </VnRow>
-                <VnRow v-if="dialogData.bankFk === 3 || dialogData.bankFk === 3117">
-                    <VnInput
-                        :label="t('ticketList.compensation')"
-                        v-model="dialogData.value.compensation"
-                        type="text"
-                    />
-                </VnRow>
-                <VnRow>
-                    <VnInput
-                        :label="t('ticketList.reference')"
-                        v-model="dialogData.value.description"
-                        type="text"
-                    />
-                </VnRow>
-                <VnRow v-if="dialogData.bankFk === 2">
-                    <QCheckbox
-                        :label="t('ticketList.viewReceipt')"
-                        v-model="dialogData.value.viewReceipt"
-                        :toggle-indeterminate="false"
-                    />
-                    <QCheckbox
-                        :label="t('ticketList.sendEmail')"
-                        v-model="dialogData.value.senEmail"
-                        :toggle-indeterminate="false"
-                    />
-                </VnRow>
-                <div class="q-mt-lg row justify-end">
-                    <QBtn
-                        :label="t('globals.save')"
-                        color="primary"
-                        @click="onSubmit()"
-                    />
-                    <QBtn
-                        flat
-                        :label="t('globals.close')"
-                        color="primary"
-                        v-close-popup
-                    />
-                </div>
-            </QForm>
-        </QCard>
-    </QDialog>
     <QPageSticky v-if="hasSelectedRows" :offset="[20, 200]" style="z-index: 2">
         <QBtn
             @click="sendDocuware(selectedRows)"

From 0b1b0b40a2edf84d63f8689995a836c46076f32e Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 14 May 2025 19:27:34 +0200
Subject: [PATCH 12/22] fix: remove limit

---
 src/pages/Customer/components/CustomerNewPayment.vue | 2 +-
 src/pages/Ticket/components/TicketNewPayment.vue     | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/pages/Customer/components/CustomerNewPayment.vue b/src/pages/Customer/components/CustomerNewPayment.vue
index eb56f5fd2..089821402 100644
--- a/src/pages/Customer/components/CustomerNewPayment.vue
+++ b/src/pages/Customer/components/CustomerNewPayment.vue
@@ -55,7 +55,6 @@ const filterBanks = {
     fields: ['id', 'bank', 'accountingTypeFk'],
     include: { relation: 'accountingType' },
     order: 'id',
-    limit: 30,
 };
 
 const filterClientFindOne = {
@@ -190,6 +189,7 @@ async function getAmountPaid() {
             :prevent-submit="true"
         >
             <template #form-inputs="{ data, validate }">
+                {{ initialData }}
                 <h5 class="q-mt-none">{{ t('New payment') }}</h5>
                 <VnRow>
                     <VnSelect
diff --git a/src/pages/Ticket/components/TicketNewPayment.vue b/src/pages/Ticket/components/TicketNewPayment.vue
index 98df543a2..986e4bf28 100644
--- a/src/pages/Ticket/components/TicketNewPayment.vue
+++ b/src/pages/Ticket/components/TicketNewPayment.vue
@@ -48,7 +48,6 @@ const filterBanks = {
     fields: ['id', 'bank', 'accountingTypeFk'],
     include: { relation: 'accountingType' },
     order: 'id',
-    limit: 30,
 };
 
 const state = useState();
@@ -104,7 +103,6 @@ function onBeforeSave(data) {
 
 async function onDataSaved({ email, id }) {
     try {
-        debugger;
         if (shouldSendEmail.value && isCash.value)
             await sendEmail(`Receipts/${id}/receipt-email`, {
                 recipient: email,

From e5952015013ce372c8fcd48c54425e108e693503 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 14 May 2025 19:29:56 +0200
Subject: [PATCH 13/22] fix: remove limit=0

---
 src/pages/Customer/components/CustomerNewPayment.vue | 1 -
 src/pages/Ticket/components/TicketNewPayment.vue     | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/pages/Customer/components/CustomerNewPayment.vue b/src/pages/Customer/components/CustomerNewPayment.vue
index 089821402..dca347745 100644
--- a/src/pages/Customer/components/CustomerNewPayment.vue
+++ b/src/pages/Customer/components/CustomerNewPayment.vue
@@ -200,7 +200,6 @@ async function getAmountPaid() {
                         option-label="bank"
                         :include="{ relation: 'accountingType' }"
                         sort-by="id"
-                        :limit="0"
                         @update:model-value="
                             (value, options) => setPaymentType(data, value, options)
                         "
diff --git a/src/pages/Ticket/components/TicketNewPayment.vue b/src/pages/Ticket/components/TicketNewPayment.vue
index 986e4bf28..710eb8caf 100644
--- a/src/pages/Ticket/components/TicketNewPayment.vue
+++ b/src/pages/Ticket/components/TicketNewPayment.vue
@@ -191,7 +191,6 @@ async function onSubmit(formData) {
                         option-label="bank"
                         :include="{ relation: 'accountingType' }"
                         sort-by="id"
-                        :limit="0"
                         @update:model-value="
                             (value, options) => setPaymentType(data, value, options)
                         "

From 044c06e963c90d74599241c52bfaf24eac23dc09 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 14 May 2025 19:41:29 +0200
Subject: [PATCH 14/22] fix: remove print variable

---
 src/pages/Customer/components/CustomerNewPayment.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/Customer/components/CustomerNewPayment.vue b/src/pages/Customer/components/CustomerNewPayment.vue
index dca347745..9f7ef51cd 100644
--- a/src/pages/Customer/components/CustomerNewPayment.vue
+++ b/src/pages/Customer/components/CustomerNewPayment.vue
@@ -189,7 +189,6 @@ async function getAmountPaid() {
             :prevent-submit="true"
         >
             <template #form-inputs="{ data, validate }">
-                {{ initialData }}
                 <h5 class="q-mt-none">{{ t('New payment') }}</h5>
                 <VnRow>
                     <VnSelect

From f4171d8efae01d69889226e52034b3c2bdb10dbf Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 15 May 2025 14:08:39 +0200
Subject: [PATCH 15/22] test: fix test

---
 cypress.config.js                             |   2 +-
 src/pages/Ticket/Card/components/split.js     |   4 +-
 .../Ticket/Negative/TicketLackDetail.vue      |  16 +--
 .../Negative/components/ChangeItemDialog.vue  |   1 +
 .../Negative/components/ChangeStateDialog.vue |   8 +-
 .../Ticket/components/TicketNewPayment.vue    |   0
 .../integration/order/orderCatalog.spec.js    |   2 +-
 .../ticket/negative/TicketLackDetail.spec.js  | 131 ++++++++----------
 .../ticket/negative/TicketLackList.spec.js    |   4 +-
 .../integration/ticket/ticketSale.spec.js     |  13 +-
 .../vnComponent/vnConfirm.commands.js         |   6 +
 .../vnComponent/vnTable.commands.js           |  34 +++++
 12 files changed, 119 insertions(+), 102 deletions(-)
 create mode 100644 src/pages/Ticket/components/TicketNewPayment.vue

diff --git a/cypress.config.js b/cypress.config.js
index 90d950450..4b0c93aae 100644
--- a/cypress.config.js
+++ b/cypress.config.js
@@ -39,7 +39,7 @@ if (process.env.CI) {
 export default defineConfig({
     e2e: {
         baseUrl: `http://${urlHost}:9000`,
-        experimentalStudio: false,
+        experimentalStudio: true,
         trashAssetsBeforeRuns: false,
         defaultBrowser: 'chromium',
         fixturesFolder: 'test/cypress/fixtures',
diff --git a/src/pages/Ticket/Card/components/split.js b/src/pages/Ticket/Card/components/split.js
index f366ca177..74639e848 100644
--- a/src/pages/Ticket/Card/components/split.js
+++ b/src/pages/Ticket/Card/components/split.js
@@ -1,11 +1,11 @@
 import axios from 'axios';
-export default async function (data, date) {
+export default async function (data, landed) {
     const reducedData = data.reduce((acc, item) => {
         const existing = acc.find(({ ticketFk }) => ticketFk === item.id);
         if (existing) {
             existing.sales.push(item.saleFk);
         } else {
-            acc.push({ ticketFk: item.ticketFk, sales: [item.saleFk], date });
+            acc.push({ ticketFk: item.ticketFk, sales: [item.saleFk], landed });
         }
         return acc;
     }, []);
diff --git a/src/pages/Ticket/Negative/TicketLackDetail.vue b/src/pages/Ticket/Negative/TicketLackDetail.vue
index e0b0a469f..305c27208 100644
--- a/src/pages/Ticket/Negative/TicketLackDetail.vue
+++ b/src/pages/Ticket/Negative/TicketLackDetail.vue
@@ -69,6 +69,8 @@ const showItemProposal = () => {
         })
         .onOk(itemProposalEvt);
 };
+
+const isButtonDisabled = computed(() => selectedRows.value.length !== 1);
 </script>
 
 <template>
@@ -93,11 +95,7 @@ const showItemProposal = () => {
     >
         <template #top-right>
             <QBtnGroup push class="q-mr-lg" style="column-gap: 1px">
-                <QBtn
-                    data-cy="transferLines"
-                    color="primary"
-                    :disable="!(selectedRows.length === 1)"
-                >
+                <QBtn data-cy="transferLines" color="primary" :disable="isButtonDisabled">
                     <template #default>
                         <QIcon name="vn:splitline" />
                         <QIcon name="vn:ticket" />
@@ -118,7 +116,7 @@ const showItemProposal = () => {
                 <QBtn
                     color="primary"
                     @click="showItemProposal"
-                    :disable="!(selectedRows.length === 1)"
+                    :disable="isButtonDisabled"
                     data-cy="itemProposal"
                 >
                     <QIcon name="import_export" class="rotate-90" />
@@ -129,7 +127,7 @@ const showItemProposal = () => {
                 <VnPopupProxy
                     data-cy="changeItem"
                     icon="sync"
-                    :disable="!(selectedRows.length === 1)"
+                    :disable="isButtonDisabled"
                     :tooltip="t('negative.detail.modal.changeItem.title')"
                 >
                     <template #extraIcon> <QIcon name="vn:item" /> </template>
@@ -143,7 +141,7 @@ const showItemProposal = () => {
                 <VnPopupProxy
                     data-cy="changeState"
                     icon="sync"
-                    :disable="!(selectedRows.length === 1)"
+                    :disable="isButtonDisabled"
                     :tooltip="t('negative.detail.modal.changeState.title')"
                 >
                     <template #extraIcon> <QIcon name="vn:eye" /> </template>
@@ -157,7 +155,7 @@ const showItemProposal = () => {
                 <VnPopupProxy
                     data-cy="changeQuantity"
                     icon="sync"
-                    :disable="!(selectedRows.length === 1)"
+                    :disable="isButtonDisabled"
                     :tooltip="t('negative.detail.modal.changeQuantity.title')"
                     @click="showChangeQuantityDialog = true"
                 >
diff --git a/src/pages/Ticket/Negative/components/ChangeItemDialog.vue b/src/pages/Ticket/Negative/components/ChangeItemDialog.vue
index e77bcb3bb..4238bcc37 100644
--- a/src/pages/Ticket/Negative/components/ChangeItemDialog.vue
+++ b/src/pages/Ticket/Negative/components/ChangeItemDialog.vue
@@ -41,6 +41,7 @@ const updateItem = async () => {
         <QCardSection class="row items-center justify-center column items-stretch">
             <span>{{ $t('negative.detail.modal.changeItem.title') }}</span>
             <VnSelect
+                data-cy="New item_select"
                 url="Items/WithName"
                 :fields="['id', 'name']"
                 :sort-by="['id DESC']"
diff --git a/src/pages/Ticket/Negative/components/ChangeStateDialog.vue b/src/pages/Ticket/Negative/components/ChangeStateDialog.vue
index 273006dcb..8aac08fe3 100644
--- a/src/pages/Ticket/Negative/components/ChangeStateDialog.vue
+++ b/src/pages/Ticket/Negative/components/ChangeStateDialog.vue
@@ -18,10 +18,11 @@ const $props = defineProps({
 });
 const updateState = async () => {
     try {
+        debugger;
         showChangeStateDialog.value = true;
-        const rowsToUpdate = $props.selectedRows.map(({ id }) =>
+        const rowsToUpdate = $props.selectedRows.map(({ ticketFk }) =>
             axios.post(`Tickets/state`, {
-                ticketFk: id,
+                ticketFk,
                 code: newState.value,
             }),
         );
@@ -49,8 +50,9 @@ const updateState = async () => {
                 v-model="newState"
                 :options="editableStates"
                 option-label="name"
-                option-value="code"
+                option-value="id"
                 autofocus
+                data-cy="New state_select"
             />
         </QCardSection>
         <QCardActions align="right">
diff --git a/src/pages/Ticket/components/TicketNewPayment.vue b/src/pages/Ticket/components/TicketNewPayment.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/test/cypress/integration/order/orderCatalog.spec.js b/test/cypress/integration/order/orderCatalog.spec.js
index c07183fed..ef64d1b23 100644
--- a/test/cypress/integration/order/orderCatalog.spec.js
+++ b/test/cypress/integration/order/orderCatalog.spec.js
@@ -45,7 +45,7 @@ describe('OrderCatalog', { testIsolation: true }, () => {
         ).type('{enter}');
         cy.get(':nth-child(1) > [data-cy="catalogFilterCategory"]').click();
         cy.dataCy('catalogFilterValueDialogBtn').last().click();
-        cy.selectOption("[data-cy='catalogFilterValueDialogTagSelect']", 'Tallos');
+        cy.selectOption('[data-cy="catalogFilterValueDialogTagSelect"]', 'Tallos');
         cy.dataCy('catalogFilterValueDialogValueInput').find('input').focus();
         cy.dataCy('catalogFilterValueDialogValueInput').find('input').type('2');
         cy.dataCy('catalogFilterValueDialogValueInput').find('input').type('{enter}');
diff --git a/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js b/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
index 08fdc16d8..c02336ae5 100644
--- a/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
+++ b/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
@@ -1,8 +1,6 @@
 /// <reference types="cypress" />
-
 const firstRow = 'tr.cursor-pointer > :nth-child(1)';
 const ticketId = 1000000;
-const findTr = (index) => `tbody > tr > :nth-child(${index}) > div`;
 const clickNotificationAction = () => {
     const notification = '.q-notification';
     cy.waitForElement(notification);
@@ -10,9 +8,9 @@ const clickNotificationAction = () => {
     cy.get(notification).find('.q-btn').click();
     cy.get(notification).should('not.be.visible');
 };
-describe('Ticket Lack detail', () => {
+describe('Ticket Lack detail', { testIsolation: true }, () => {
     beforeEach(() => {
-        cy.viewport(1280, 720);
+        cy.viewport(1980, 1020);
         cy.login('developer');
         cy.intercept('GET', /\/api\/Tickets\/itemLack\/88.*$/).as('getItemLack');
         cy.visit('/#/ticket/negative/88');
@@ -23,21 +21,19 @@ describe('Ticket Lack detail', () => {
             expect(filter).to.have.property('where');
             expect(filter.where).to.have.property('alertLevelCode', 'FREE');
         });
-        cy.domContentLoad();
-        cy.waitForElement('.q-table');
     });
     describe('Table detail', () => {
         it('should open descriptors', () => {
             cy.get('.q-table').should('be.visible');
             cy.colField('zoneName').click();
-            cy.dataCy('zoneDescriptorProxy').should('be.visible');
+            cy.dataCy('ZoneDescriptor').should('be.visible');
             cy.get('.q-item > .q-item__label').should('have.text', ' #1');
             cy.colField('ticketFk').click();
-            cy.dataCy('ticketDescriptorProxy').should('be.visible');
+            cy.dataCy('TicketDescriptor').should('be.visible');
             cy.get('.q-item > .q-item__label').should('have.text', ` #${ticketId}`);
             cy.colField('nickname').find('.link').click();
-            cy.waitForElement('[data-cy="customerDescriptorProxy"]');
-            cy.dataCy('customerDescriptorProxy').should('be.visible');
+            cy.waitForElement('[data-cy="CustomerDescriptor"]');
+            cy.dataCy('CustomerDescriptor').should('be.visible');
             cy.get('.q-item > .q-item__label').should('have.text', ' #1');
         });
         it('should display only one row in the lack list', () => {
@@ -63,60 +59,7 @@ describe('Ticket Lack detail', () => {
         it('Split', () => {
             cy.dataCy('ticketTransferPopup').find('.flex > .q-btn').click();
 
-            clickNotificationAction();
-
-            cy.dataCy('HandleLackDialog').should('be.visible');
-            cy.dataCy('HandleLackDialog').find('tbody > tr > :nth-child(1) > .q-icon');
-            cy.dataCy('HandleLackDialog').find(findTr(2)).should('have.class', 'link');
-            cy.dataCy('HandleLackDialog')
-                .find(`${findTr(2)}.link > div > span`)
-                .should('have.text', `${ticketId} `);
-            cy.dataCy('HandleLackDialog').find(findTr(3)).should('have.text', 'noSplit');
-        });
-    });
-    describe('Change Item', () => {
-        beforeEach(() => {
-            cy.get(firstRow).click();
-            cy.dataCy('changeItem').click();
-        });
-        it('Change failed', () => {
-            cy.dataCy('New item_select').should('be.visible').click();
-            cy.get('.q-item').contains('Palito rojo').click();
-            cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
-
-            clickNotificationAction();
-
-            cy.dataCy('HandleLackDialog').should('be.visible');
-            cy.dataCy('HandleLackDialog').find('tbody > tr > :nth-child(1) > .q-icon');
-            cy.dataCy('HandleLackDialog').find(findTr(2)).should('have.class', 'link');
-            cy.dataCy('HandleLackDialog')
-                .find(`${findTr(2)}.link > span`)
-                .should('have.text', `${ticketId}`);
-            cy.dataCy('HandleLackDialog')
-                .find(findTr(3))
-                .should('have.text', 'price retrieval failed');
-        });
-    });
-    describe('Change state', () => {
-        beforeEach(() => {
-            cy.get(firstRow).click();
-            cy.dataCy('changeState').click();
-        });
-        it('Change success', () => {
-            cy.dataCy('New state_select').should('be.visible').click();
-            cy.get('.q-item').contains('OK').click();
-            cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
-
-            clickNotificationAction();
-
-            cy.dataCy('HandleLackDialog')
-                .should('be.visible')
-                .find('tbody > tr > :nth-child(1) > .q-icon');
-            cy.dataCy('HandleLackDialog').find(findTr(2)).should('have.class', 'link');
-            cy.dataCy('HandleLackDialog')
-                .find(`${findTr(2)}.link > div > span`)
-                .should('have.text', `${ticketId} `);
-            cy.dataCy('HandleLackDialog').find(findTr(3)).should('have.text', 'OK');
+            cy.checkNotification('Ticket 1000000: No split');
         });
     });
     describe('change quantity', () => {
@@ -126,22 +69,60 @@ describe('Ticket Lack detail', () => {
             cy.dataCy('changeQuantity').click();
         });
 
-        it('Change success', () => {
+        it('by popup', () => {
             cy.dataCy('New quantity_input').type(10);
             cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
 
             clickNotificationAction();
-
-            cy.dataCy('HandleLackDialog')
-                .should('be.visible')
-                .find('tbody > tr > :nth-child(1) > .q-icon');
-            cy.dataCy('HandleLackDialog').find(findTr(2)).should('have.class', 'link');
-            cy.dataCy('HandleLackDialog')
-                .find(`${findTr(2)}.link > div > span`)
-                .should('have.text', `${ticketId} `);
-            cy.dataCy('HandleLackDialog').find(findTr(3)).should('have.text', '10');
         });
     });
+    describe('Change state', () => {
+        beforeEach(() => {
+            cy.get(firstRow).click();
+            cy.dataCy('changeState').click();
+        });
+        it('by popup', () => {
+            cy.dataCy('New state_select').should('be.visible');
+            cy.selectOption('[data-cy="New state_select"]', 'OK');
+            cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
+
+            clickNotificationAction();
+        });
+    });
+    describe('Change Item', () => {
+        beforeEach(() => {
+            cy.get(firstRow).click();
+            cy.dataCy('changeItem').click();
+        });
+        it('by popup', () => {
+            cy.dataCy('New item_select').should('be.visible');
+
+            cy.selectOption('[data-cy="New item_select"]', 'Palito rojo');
+            cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
+            cy.checkNotification('Ticket 43: price retrieval failed');
+            cy.dataCy('changeItem').click();
+            cy.selectOption('[data-cy="New item_select"]', 'Ranged weapon longbow 200cm');
+            cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
+
+            clickNotificationAction();
+        });
+        after(() => {
+            cy.visit('/#/ticket/1000000/sale');
+            const quantity = Math.floor(Math.random() * 100) + 1;
+
+            cy.dataCy('ticketSaleQuantityInput')
+                .find('input')
+                .eq(1)
+                .type(quantity)
+                .trigger('tab');
+            cy.get('.q-page > :nth-child(6)').click();
+
+            cy.get('[data-cy="ticketSaleQuantityInput"]')
+                .find('input')
+                .should('have.value', `${quantity}`);
+        });
+    });
+
     describe('Item proposal', () => {
         beforeEach(() => {
             cy.get(firstRow).click();
@@ -155,7 +136,7 @@ describe('Ticket Lack detail', () => {
             it('item proposal cells', () => {
                 cy.get('[data-col-field="longName"] .link').first().click();
 
-                cy.dataCy('itemDescriptorProxy').should('be.visible');
+                cy.dataCy('ItemDescriptor').should('be.visible');
 
                 cy.colField('longName', 2)
                     .find('.no-padding > .q-td > .middle')
diff --git a/test/cypress/integration/ticket/negative/TicketLackList.spec.js b/test/cypress/integration/ticket/negative/TicketLackList.spec.js
index a53668c12..16a73e332 100644
--- a/test/cypress/integration/ticket/negative/TicketLackList.spec.js
+++ b/test/cypress/integration/ticket/negative/TicketLackList.spec.js
@@ -1,7 +1,7 @@
 /// <reference types="cypress" />
 describe('Ticket Lack list', () => {
     beforeEach(() => {
-        cy.viewport(1280, 720);
+        cy.viewport(1980, 1020);
 
         cy.login('developer');
         cy.visit('/#/ticket/negative');
@@ -10,7 +10,7 @@ describe('Ticket Lack list', () => {
     describe('Table actions', () => {
         it('should display only one row in the lack list', () => {
             cy.get('[data-col-field="longName"]').first().click();
-            cy.dataCy('itemDescriptorProxy').should('be.visible');
+            cy.dataCy('ItemDescriptor').should('be.visible');
             cy.get('.q-virtual-scroll__content > :nth-child(1) > .sticky').click();
             cy.location('href').should('contain', '#/ticket/negative/5');
         });
diff --git a/test/cypress/integration/ticket/ticketSale.spec.js b/test/cypress/integration/ticket/ticketSale.spec.js
index 7fc843cf1..483d91974 100644
--- a/test/cypress/integration/ticket/ticketSale.spec.js
+++ b/test/cypress/integration/ticket/ticketSale.spec.js
@@ -22,7 +22,7 @@ describe('TicketSale', { testIsolation: true }, () => {
             cy.intercept('POST', /\/api\/Sales\/\d+\/updatePrice/).as('updatePrice');
 
             cy.dataCy('saveManaBtn').click();
-            handleVnConfirm();
+            cy.handleVnConfirm();
             cy.wait('@updatePrice').its('response.statusCode').should('eq', 200);
 
             cy.get('[data-col-field="price"]')
@@ -43,7 +43,7 @@ describe('TicketSale', { testIsolation: true }, () => {
             );
 
             cy.dataCy('saveManaBtn').click();
-            handleVnConfirm();
+            cy.handleVnConfirm();
             cy.wait('@updateDiscount').its('response.statusCode').should('eq', 204);
 
             cy.get('[data-col-field="discount"]')
@@ -61,7 +61,7 @@ describe('TicketSale', { testIsolation: true }, () => {
                 .find('[data-cy="undefined_input"]')
                 .type(concept)
                 .type('{enter}');
-            handleVnConfirm();
+            cy.handleVnConfirm();
 
             cy.get('[data-col-field="item"]').should('contain.text', `${concept}`);
         });
@@ -77,7 +77,7 @@ describe('TicketSale', { testIsolation: true }, () => {
                 .trigger('tab');
             cy.get('.q-page > :nth-child(6)').click();
 
-            handleVnConfirm();
+            cy.handleVnConfirm();
 
             cy.get('[data-cy="ticketSaleQuantityInput"]')
                 .find('input')
@@ -210,8 +210,3 @@ function selectFirstRow() {
     cy.waitForElement(firstRow);
     cy.get(firstRow).find('.q-checkbox__inner').click();
 }
-function handleVnConfirm() {
-    cy.confirmVnConfirm();
-
-    cy.checkNotification('Data saved');
-}
diff --git a/test/cypress/integration/vnComponent/vnConfirm.commands.js b/test/cypress/integration/vnComponent/vnConfirm.commands.js
index 9f93967d6..b486386f7 100644
--- a/test/cypress/integration/vnComponent/vnConfirm.commands.js
+++ b/test/cypress/integration/vnComponent/vnConfirm.commands.js
@@ -1,3 +1,9 @@
+Cypress.Commands.add('handleVnConfirm', () => {
+    cy.confirmVnConfirm();
+
+    cy.checkNotification('Data saved');
+});
+
 Cypress.Commands.add('confirmVnConfirm', () =>
     cy.dataCy('VnConfirm_confirm').should('exist').click(),
 );
diff --git a/test/cypress/integration/vnComponent/vnTable.commands.js b/test/cypress/integration/vnComponent/vnTable.commands.js
index 316fc12f1..f43d6ed68 100644
--- a/test/cypress/integration/vnComponent/vnTable.commands.js
+++ b/test/cypress/integration/vnComponent/vnTable.commands.js
@@ -18,3 +18,37 @@ Cypress.Commands.add('tableActions', (n = 0, child = 1) =>
         `:nth-child(${child}) > .q-table--col-auto-width > [data-cy="tableAction-${n}"] > .q-btn__content > .q-icon`,
     ),
 );
+
+Cypress.Commands.add('validateVnTableRows', (opts = {}) => {
+    let { cols = [] } = opts;
+    const { rows = [] } = opts;
+    if (!Array.isArray(cols)) cols = [cols];
+    const rowSelector = rows.length
+        ? rows.map((row) => `> :nth-child(${row})`).join(', ')
+        : '> *';
+    cy.get(`[data-cy="vnTable"] .q-virtual-scroll__content`).within(() => {
+        cy.get(`${rowSelector}`).each(($el) => {
+            for (const { name, type = 'string', val, operation = 'equal' } of cols) {
+                cy.wrap($el)
+                    .find(`[data-cy="vnTableCell_${name}"]`)
+                    .invoke('text')
+                    .then((text) => {
+                        if (type === 'string')
+                            expect(text.trim().toLowerCase()).to[operation](
+                                val.toLowerCase(),
+                            );
+                        if (type === 'number') cy.checkNumber(text, val, operation);
+                        if (type === 'date') cy.checkDate(text, val, operation);
+                    });
+            }
+        });
+    });
+});
+
+Cypress.Commands.add('colField', (name, index = null, key = 'data-col-field') => {
+    if (index) {
+        cy.get(`:nth-child(${index}) > [${key}="${name}"]`);
+    } else {
+        cy.get(`[${key}="${name}"]`);
+    }
+});

From e6e4588d7ca503e5609863b031d6840d31668713 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 15 May 2025 14:27:08 +0200
Subject: [PATCH 16/22] test: minor change

---
 .../integration/ticket/negative/TicketLackDetail.spec.js      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js b/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
index c02336ae5..948b1fc08 100644
--- a/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
+++ b/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
@@ -59,7 +59,7 @@ describe('Ticket Lack detail', { testIsolation: true }, () => {
         it('Split', () => {
             cy.dataCy('ticketTransferPopup').find('.flex > .q-btn').click();
 
-            cy.checkNotification('Ticket 1000000: No split');
+            cy.checkNotification(`Ticket ${ticketId}: No split`);
         });
     });
     describe('change quantity', () => {
@@ -107,7 +107,7 @@ describe('Ticket Lack detail', { testIsolation: true }, () => {
             clickNotificationAction();
         });
         after(() => {
-            cy.visit('/#/ticket/1000000/sale');
+            cy.visit(`/#/ticket/${ticketId}/sale`);
             const quantity = Math.floor(Math.random() * 100) + 1;
 
             cy.dataCy('ticketSaleQuantityInput')

From a677abf35bbef01701578aace9d8542c17e34f3b Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 19 May 2025 11:22:55 +0200
Subject: [PATCH 17/22] test: fix test ticketLackDetail

---
 src/pages/Item/components/ItemProposal.vue    | 107 ++++++++----------
 src/pages/Ticket/Negative/TicketLackTable.vue |   1 -
 .../Negative/components/ChangeItemDialog.vue  |   6 +-
 .../Negative/components/ChangeStateDialog.vue |   1 -
 .../ticket/negative/TicketLackDetail.spec.js  |  45 +++++---
 5 files changed, 76 insertions(+), 84 deletions(-)

diff --git a/src/pages/Item/components/ItemProposal.vue b/src/pages/Item/components/ItemProposal.vue
index d59a18400..30f050097 100644
--- a/src/pages/Item/components/ItemProposal.vue
+++ b/src/pages/Item/components/ItemProposal.vue
@@ -8,10 +8,11 @@ import VnTable from 'src/components/VnTable/VnTable.vue';
 import axios from 'axios';
 import { displayResults } from 'src/pages/Ticket/Negative/composables/notifyResults';
 import FetchData from 'components/FetchData.vue';
-import { useState } from 'src/composables/useState';
+import useNotify from 'src/composables/useNotify.js';
 
 const MATCH = 'match';
 const { notifyResults } = displayResults();
+const { notify } = useNotify();
 
 const { t } = useI18n();
 const $props = defineProps({
@@ -233,54 +234,42 @@ const statusConditionalValue = (row) => {
 
 const isSelectionAvailable = (itemProposal) => {
     const { price2, available } = itemProposal;
-    const originalPrice = sale.value?.price;
-    const lackQuantity = $props.itemLack?.lack;
-
-    if (
-        !originalPrice ||
-        !lackQuantity ||
-        !ticketConfig.value ||
-        typeof ticketConfig.value.lackAlertPrice !== 'number'
-    ) {
-        return false;
-    }
-
-    const priceIncreasePercentage = ((price2 - originalPrice) / originalPrice) * 100;
-    const isPriceTooHigh = priceIncreasePercentage > ticketConfig.value.lackAlertPrice;
-
+    const salePrice = sale.value.price;
+    const { lackAlertPrice } = ticketConfig.value;
+    const isPriceTooHigh = (100 * price2) / salePrice > lackAlertPrice;
     if (isPriceTooHigh) {
-        return false;
+        return isPriceTooHigh;
     }
-
-    const availablePercentage = (available / Math.abs(lackQuantity)) * 100;
-    const hasEnoughQuantity = availablePercentage >= ticketConfig.value.lackAlertPrice;
-
+    const hasEnoughQuantity =
+        (100 * available) / Math.abs($props.itemLack.lack) < lackAlertPrice;
     return hasEnoughQuantity;
 };
 
-async function change({ itemFk: substitutionFk }) {
-    try {
-        let body;
-        const promises = $props.sales.map(({ saleFk, quantity }) => {
-            body = {
-                saleFk,
-                substitutionFk,
-                quantity,
-            };
-            return axios.post('Sales/replaceItem', body);
-        });
-        const results = await Promise.allSettled(promises);
-
-        notifyResults(results, 'saleFk');
-        emit('itemReplaced', {
-            ...body,
-            type: 'refresh',
-            itemProposal: proposalSelected.value[0],
-        });
-        proposalSelected.value = [];
-    } catch (error) {
-        console.error(error);
+async function change(itemSubstitution) {
+    if (!isSelectionAvailable(itemSubstitution)) {
+        notify(t('notAvailable'), 'warning');
+        return;
     }
+    const { itemFk: substitutionFk } = itemSubstitution;
+    let body;
+    const promises = $props.sales.map(({ saleFk, quantity, ticketFk }) => {
+        body = {
+            saleFk,
+            substitutionFk,
+            quantity,
+            ticketFk,
+        };
+        return axios.post('Sales/replaceItem', body);
+    });
+    const results = await Promise.allSettled(promises);
+
+    notifyResults(results, 'ticketFk');
+    emit('itemReplaced', {
+        ...body,
+        type: 'refresh',
+        itemProposal: proposalSelected.value[0],
+    });
+    proposalSelected.value = [];
 }
 
 async function handleTicketConfig(data) {
@@ -299,7 +288,8 @@ function filterRows(data) {
         url="TicketConfigs"
         :filter="{ fields: ['lackAlertPrice'] }"
         @on-fetch="handleTicketConfig"
-    ></FetchData>
+        auto-load
+    />
     <QInnerLoading
         :showing="isLoading"
         :label="t && t('globals.pleaseWait')"
@@ -403,30 +393,19 @@ function filterRows(data) {
     margin-right: 2px;
     flex: 2 0 5px;
 }
-
-/* Removed old .match / .not-match specific to price */
-/* .match {
-    color: $negative;
-}
-.not-match {
-    color: inherit;
-} */
-
-/* Added classes for price status */
 .price-alert {
-    color: $negative; /* Alert text color */
+    color: $negative;
     &.q-tooltip {
-        background-color: $negative; /* Alert tooltip background */
-        color: white; /* Ensure tooltip text is readable */
+        background-color: $negative;
+        color: white;
     }
 }
 
 .price-ok {
-    color: inherit; /* Default text color */
+    color: inherit;
     &.q-tooltip {
-        /* Keep default tooltip background or set a specific 'ok' color */
-        background-color: $positive; /* Example: green background for OK price */
-        color: white; /* Ensure tooltip text is readable */
+        background-color: $positive;
+        color: white;
     }
 }
 
@@ -453,3 +432,9 @@ function filterRows(data) {
     font-size: smaller;
 }
 </style>
+<i18n>
+en:
+    notAvailable: 'Not available for replacement'
+es:
+    notAvailable: 'No disponible para reemplazo'
+</i18n>
diff --git a/src/pages/Ticket/Negative/TicketLackTable.vue b/src/pages/Ticket/Negative/TicketLackTable.vue
index 67758191f..8ce3291a2 100644
--- a/src/pages/Ticket/Negative/TicketLackTable.vue
+++ b/src/pages/Ticket/Negative/TicketLackTable.vue
@@ -139,7 +139,6 @@ const saveChange = async (field, { row }) => {
                 const { id: code } = editableStates.value.find(
                     ({ name }) => name === row.code,
                 );
-                debugger;
                 await axios.post(`Tickets/state`, {
                     ticketFk: row.ticketFk,
                     code,
diff --git a/src/pages/Ticket/Negative/components/ChangeItemDialog.vue b/src/pages/Ticket/Negative/components/ChangeItemDialog.vue
index 4238bcc37..f34a13c26 100644
--- a/src/pages/Ticket/Negative/components/ChangeItemDialog.vue
+++ b/src/pages/Ticket/Negative/components/ChangeItemDialog.vue
@@ -19,18 +19,18 @@ const $props = defineProps({
 const updateItem = async () => {
     try {
         showChangeItemDialog.value = true;
-        const rowsToUpdate = $props.selectedRows.map(({ saleFk, quantity }) =>
+        const rowsToUpdate = $props.selectedRows.map(({ saleFk, ticketFk, quantity }) =>
             axios.post(`Sales/replaceItem`, {
                 saleFk,
+                ticketFk,
                 substitutionFk: newItem.value,
                 quantity,
             }),
         );
         const result = await Promise.allSettled(rowsToUpdate);
-        notifyResults(result, 'saleFk');
+        notifyResults(result, 'ticketFk');
         emit('update-item', newItem.value);
     } catch (err) {
-        console.error('Error updating item:', err);
         return err;
     }
 };
diff --git a/src/pages/Ticket/Negative/components/ChangeStateDialog.vue b/src/pages/Ticket/Negative/components/ChangeStateDialog.vue
index 8aac08fe3..b615a0d2f 100644
--- a/src/pages/Ticket/Negative/components/ChangeStateDialog.vue
+++ b/src/pages/Ticket/Negative/components/ChangeStateDialog.vue
@@ -18,7 +18,6 @@ const $props = defineProps({
 });
 const updateState = async () => {
     try {
-        debugger;
         showChangeStateDialog.value = true;
         const rowsToUpdate = $props.selectedRows.map(({ ticketFk }) =>
             axios.post(`Tickets/state`, {
diff --git a/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js b/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
index 948b1fc08..0aa4b4fc2 100644
--- a/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
+++ b/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
@@ -5,8 +5,13 @@ const clickNotificationAction = () => {
     const notification = '.q-notification';
     cy.waitForElement(notification);
     cy.get(notification).should('be.visible');
-    cy.get(notification).find('.q-btn').click();
-    cy.get(notification).should('not.be.visible');
+    cy.get('.q-notification__actions > .q-btn').click();
+    cy.get('@open').should((openStub) => {
+        expect(openStub).to.be.called;
+        const firstArg = openStub.args[0][0];
+        expect(firstArg).to.match(/\/ticket\/\d+\/sale/);
+        expect(firstArg).to.include(`/ticket/${ticketId}/sale`);
+    });
 };
 describe('Ticket Lack detail', { testIsolation: true }, () => {
     beforeEach(() => {
@@ -14,7 +19,9 @@ describe('Ticket Lack detail', { testIsolation: true }, () => {
         cy.login('developer');
         cy.intercept('GET', /\/api\/Tickets\/itemLack\/88.*$/).as('getItemLack');
         cy.visit('/#/ticket/negative/88');
-
+        cy.window().then((win) => {
+            cy.stub(win, 'open').as('open');
+        });
         cy.wait('@getItemLack').then((interception) => {
             const { query } = interception.request;
             const filter = JSON.parse(query.filter);
@@ -96,10 +103,9 @@ describe('Ticket Lack detail', { testIsolation: true }, () => {
         });
         it('by popup', () => {
             cy.dataCy('New item_select').should('be.visible');
-
             cy.selectOption('[data-cy="New item_select"]', 'Palito rojo');
             cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
-            cy.checkNotification('Ticket 43: price retrieval failed');
+            cy.checkNotification('Ticket 1000000: price retrieval failed');
             cy.dataCy('changeItem').click();
             cy.selectOption('[data-cy="New item_select"]', 'Ranged weapon longbow 200cm');
             cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
@@ -109,16 +115,18 @@ describe('Ticket Lack detail', { testIsolation: true }, () => {
         after(() => {
             cy.visit(`/#/ticket/${ticketId}/sale`);
             const quantity = Math.floor(Math.random() * 100) + 1;
-
+            const rowIndex = 1;
             cy.dataCy('ticketSaleQuantityInput')
                 .find('input')
-                .eq(1)
+                .eq(rowIndex)
+                .clear()
                 .type(quantity)
                 .trigger('tab');
             cy.get('.q-page > :nth-child(6)').click();
 
-            cy.get('[data-cy="ticketSaleQuantityInput"]')
+            cy.dataCy('ticketSaleQuantityInput')
                 .find('input')
+                .eq(rowIndex)
                 .should('have.value', `${quantity}`);
         });
     });
@@ -129,25 +137,26 @@ describe('Ticket Lack detail', { testIsolation: true }, () => {
             cy.dataCy('itemProposal').click();
         });
         describe('Replace item if', () => {
-            it.skip('Quantity is less than available', () => {
-                cy.get(':nth-child(1) > .text-right  > .q-btn').click();
+            it('Quantity is less than available', () => {
+                const index = 2;
+                cy.colField('tag7', index).click();
+                cy.checkNotification('Not available for replacement');
             });
 
             it('item proposal cells', () => {
-                cy.get('[data-col-field="longName"] .link').first().click();
-
-                cy.dataCy('ItemDescriptor').should('be.visible');
-
-                cy.colField('longName', 2)
+                const index = 1;
+                cy.colField('longName', index)
                     .find('.no-padding > .q-td > .middle')
                     .should('have.class', 'proposal-primary');
-                cy.colField('tag5', 2)
+                cy.colField('tag5', index)
                     .find('.no-padding > .match')
                     .should('have.class', 'match');
-                cy.colField('tag6', 2)
+                cy.colField('tag6', index)
                     .find('.no-padding > .match')
                     .should('have.class', 'match');
-                cy.colField('tag7', 2).click();
+                cy.colField('tag7', index).click();
+
+                clickNotificationAction();
             });
         });
     });

From b8f38a4ae80ad93fad81d9a1694112efa7d8b1ea Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 19 May 2025 11:23:23 +0200
Subject: [PATCH 18/22] test: remove only

---
 test/cypress/integration/ticket/ticketBasicData.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/cypress/integration/ticket/ticketBasicData.spec.js b/test/cypress/integration/ticket/ticketBasicData.spec.js
index 443e9569b..94d481d3a 100644
--- a/test/cypress/integration/ticket/ticketBasicData.spec.js
+++ b/test/cypress/integration/ticket/ticketBasicData.spec.js
@@ -16,7 +16,7 @@ describe('TicketBasicData', () => {
         ).click();
         cy.url().should('include', '/customer/1104/basic-data');
     });
-    it.only('stepper', () => {
+    it('stepper', () => {
         cy.get('.q-stepper__tab--active').should('have.class', 'q-stepper__tab--active');
 
         cy.get('.q-stepper__nav > .q-btn--standard').click();

From 2bdb73dfde71801f24f3f6190e0ec5f7b7d35585 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 19 May 2025 11:33:01 +0200
Subject: [PATCH 19/22] feat: hide excludedDates chip

---
 cypress.config.js                                          | 2 +-
 .../common/{VnInputMultipleDate.vue => VnInputDates.vue}   | 0
 src/pages/Ticket/Negative/TicketLackFilter.vue             | 7 ++++---
 src/pages/Ticket/components/TicketNewPayment.vue           | 0
 4 files changed, 5 insertions(+), 4 deletions(-)
 rename src/components/common/{VnInputMultipleDate.vue => VnInputDates.vue} (100%)
 delete mode 100644 src/pages/Ticket/components/TicketNewPayment.vue

diff --git a/cypress.config.js b/cypress.config.js
index 4b0c93aae..90d950450 100644
--- a/cypress.config.js
+++ b/cypress.config.js
@@ -39,7 +39,7 @@ if (process.env.CI) {
 export default defineConfig({
     e2e: {
         baseUrl: `http://${urlHost}:9000`,
-        experimentalStudio: true,
+        experimentalStudio: false,
         trashAssetsBeforeRuns: false,
         defaultBrowser: 'chromium',
         fixturesFolder: 'test/cypress/fixtures',
diff --git a/src/components/common/VnInputMultipleDate.vue b/src/components/common/VnInputDates.vue
similarity index 100%
rename from src/components/common/VnInputMultipleDate.vue
rename to src/components/common/VnInputDates.vue
diff --git a/src/pages/Ticket/Negative/TicketLackFilter.vue b/src/pages/Ticket/Negative/TicketLackFilter.vue
index 951c7a7a2..84f173157 100644
--- a/src/pages/Ticket/Negative/TicketLackFilter.vue
+++ b/src/pages/Ticket/Negative/TicketLackFilter.vue
@@ -7,7 +7,7 @@ import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDateTime from 'src/components/common/VnInputDateTime.vue';
-import VnInputMultipleDate from 'src/components/common/VnInputMultipleDate.vue';
+import VnInputDates from 'src/components/common/VnInputDates.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -75,6 +75,7 @@ const setUserParams = (params) => {
     <VnFilterPanel
         :data-key="props.dataKey"
         :search-button="true"
+        :hidden-tags="['excludedDates']"
         @set-user-params="setUserParams"
     >
         <template #tags="{ tag, formatFn }">
@@ -132,13 +133,13 @@ const setUserParams = (params) => {
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <VnInputMultipleDate
+                        <VnInputDates
                             v-model="params.excludedDates"
                             filled
                             :label="t('negative.excludedDates')"
                             :is-popup-open="false"
                         >
-                        </VnInputMultipleDate>
+                        </VnInputDates>
                     </QItemSection>
                 </QItem>
                 <QItem>
diff --git a/src/pages/Ticket/components/TicketNewPayment.vue b/src/pages/Ticket/components/TicketNewPayment.vue
deleted file mode 100644
index e69de29bb..000000000

From 0505fb69b6b66764e2d82e747fc9982f09f7a1c9 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 19 May 2025 11:36:31 +0200
Subject: [PATCH 20/22] perf: change default prop

---
 src/components/common/VnInputDates.vue         | 2 +-
 src/pages/Ticket/Negative/TicketLackFilter.vue | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/common/VnInputDates.vue b/src/components/common/VnInputDates.vue
index 70b0e2e03..3135d3006 100644
--- a/src/components/common/VnInputDates.vue
+++ b/src/components/common/VnInputDates.vue
@@ -14,7 +14,7 @@ const $props = defineProps({
     },
     isPopupOpen: {
         type: Boolean,
-        default: true,
+        default: false,
     },
     multiple: {
         type: Boolean,
diff --git a/src/pages/Ticket/Negative/TicketLackFilter.vue b/src/pages/Ticket/Negative/TicketLackFilter.vue
index 84f173157..5e827c596 100644
--- a/src/pages/Ticket/Negative/TicketLackFilter.vue
+++ b/src/pages/Ticket/Negative/TicketLackFilter.vue
@@ -137,7 +137,6 @@ const setUserParams = (params) => {
                             v-model="params.excludedDates"
                             filled
                             :label="t('negative.excludedDates')"
-                            :is-popup-open="false"
                         >
                         </VnInputDates>
                     </QItemSection>

From 1396758761468514e3551d4d41ca6fb373719376 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 19 May 2025 12:06:36 +0200
Subject: [PATCH 21/22] test: fix test

---
 .../integration/ticket/negative/TicketLackDetail.spec.js    | 5 ++---
 test/cypress/integration/ticket/ticketBasicData.spec.js     | 2 +-
 test/cypress/integration/ticket/ticketSale.spec.js          | 6 +-----
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js b/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
index 0aa4b4fc2..4d1b0251d 100644
--- a/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
+++ b/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
@@ -116,13 +116,12 @@ describe('Ticket Lack detail', { testIsolation: true }, () => {
             cy.visit(`/#/ticket/${ticketId}/sale`);
             const quantity = Math.floor(Math.random() * 100) + 1;
             const rowIndex = 1;
+
             cy.dataCy('ticketSaleQuantityInput')
                 .find('input')
                 .eq(rowIndex)
                 .clear()
-                .type(quantity)
-                .trigger('tab');
-            cy.get('.q-page > :nth-child(6)').click();
+                .type(`${quantity}{enter}`);
 
             cy.dataCy('ticketSaleQuantityInput')
                 .find('input')
diff --git a/test/cypress/integration/ticket/ticketBasicData.spec.js b/test/cypress/integration/ticket/ticketBasicData.spec.js
index 94d481d3a..443e9569b 100644
--- a/test/cypress/integration/ticket/ticketBasicData.spec.js
+++ b/test/cypress/integration/ticket/ticketBasicData.spec.js
@@ -16,7 +16,7 @@ describe('TicketBasicData', () => {
         ).click();
         cy.url().should('include', '/customer/1104/basic-data');
     });
-    it('stepper', () => {
+    it.only('stepper', () => {
         cy.get('.q-stepper__tab--active').should('have.class', 'q-stepper__tab--active');
 
         cy.get('.q-stepper__nav > .q-btn--standard').click();
diff --git a/test/cypress/integration/ticket/ticketSale.spec.js b/test/cypress/integration/ticket/ticketSale.spec.js
index 483d91974..0d29f062c 100644
--- a/test/cypress/integration/ticket/ticketSale.spec.js
+++ b/test/cypress/integration/ticket/ticketSale.spec.js
@@ -71,11 +71,7 @@ describe('TicketSale', { testIsolation: true }, () => {
             cy.dataCy('ticketSaleQuantityInput').find('input').clear();
             cy.intercept('POST', '**/api').as('postRequest');
 
-            cy.dataCy('ticketSaleQuantityInput')
-                .find('input')
-                .type(quantity)
-                .trigger('tab');
-            cy.get('.q-page > :nth-child(6)').click();
+            cy.dataCy('ticketSaleQuantityInput').find('input').type(`${quantity}{enter}`);
 
             cy.handleVnConfirm();
 

From 67b51d7833e25238f54473d763f8714ef1eecd1b Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 19 May 2025 14:04:55 +0200
Subject: [PATCH 22/22] fix: improve ticketNewPayment

---
 src/pages/Ticket/components/TicketNewPayment.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/pages/Ticket/components/TicketNewPayment.vue b/src/pages/Ticket/components/TicketNewPayment.vue
index 710eb8caf..4951e5249 100644
--- a/src/pages/Ticket/components/TicketNewPayment.vue
+++ b/src/pages/Ticket/components/TicketNewPayment.vue
@@ -53,7 +53,7 @@ const filterBanks = {
 const state = useState();
 const user = state.getUser();
 const initialData = ref({
-    ...$props.formData.value,
+    ...$props.formData,
     companyFk: user.value.companyFk,
     payed: Date.vnNew(),
 });
@@ -147,21 +147,22 @@ async function getAmountPaid() {
 }
 
 async function onSubmit(formData) {
+    const clientFk = $props.clientId;
     const {
         data: [{ email }],
     } = await axios.get('Clients', {
         params: {
-            filter: JSON.stringify({ where: { id: $props.clientFk } }),
+            filter: JSON.stringify({ where: { id: clientFk } }),
         },
     });
 
-    const { data } = await axios.post(`Clients/${formData.clientFk}/createReceipt`, {
+    const { data } = await axios.post(`Clients/${clientFk}/createReceipt`, {
         payed: formData.payed,
         companyFk: formData.companyFk,
         bankFk: formData.bankFk,
         amountPaid: formData.amountPaid,
         description: formData.description,
-        clientFk: $props.clientFk,
+        clientFk,
         email,
     });