From 0afd7f4ae1e32e35b97a6442ee975e1a30027ce4 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 19 Jun 2024 10:22:20 -0300
Subject: [PATCH 01/21] Ticket tracking

---
 src/i18n/locale/en.yml                        |   1 +
 src/i18n/locale/es.yml                        |   1 +
 .../Ticket/Card/TicketCreateTracking.vue      |  73 +++++++++++
 src/pages/Ticket/Card/TicketTracking.vue      | 121 ++++++++++++++++++
 src/pages/Ticket/locale/en.yml                |   4 +
 src/pages/Ticket/locale/es.yml                |   4 +
 src/router/modules/ticket.js                  |  11 +-
 7 files changed, 214 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Ticket/Card/TicketCreateTracking.vue
 create mode 100644 src/pages/Ticket/Card/TicketTracking.vue
 create mode 100644 src/pages/Ticket/locale/en.yml

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index b3a85eefa..419c33f8a 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -443,6 +443,7 @@ ticket:
         sms: Sms
         notes: Notes
         sale: Sale
+        tracking: Tracking
     list:
         nickname: Nickname
         state: State
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index d03ee9d5c..192c17c90 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -441,6 +441,7 @@ ticket:
         sms: Sms
         notes: Notas
         sale: Lineas del pedido
+        tracking: Estados
     list:
         nickname: Alias
         state: Estado
diff --git a/src/pages/Ticket/Card/TicketCreateTracking.vue b/src/pages/Ticket/Card/TicketCreateTracking.vue
new file mode 100644
index 000000000..b340b406a
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketCreateTracking.vue
@@ -0,0 +1,73 @@
+<script setup>
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import FormModelPopup from 'components/FormModelPopup.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+
+import { useState } from 'src/composables/useState';
+
+const emit = defineEmits(['onRequestCreated']);
+
+const route = useRoute();
+const { t } = useI18n();
+const state = useState();
+const user = state.getUser();
+const stateFetchDataRef = ref(null);
+
+const statesOptions = ref([]);
+const workersOptions = ref([]);
+
+const onStateFkChange = (formData) => (formData.userFk = user.value.id);
+</script>
+<template>
+    <FetchData
+        ref="stateFetchDataRef"
+        url="States"
+        auto-load
+        @on-fetch="(data) => (statesOptions = data)"
+    />
+    <FetchData
+        url="Workers/search"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        auto-load
+        @on-fetch="(data) => (workersOptions = data)"
+    />
+    <FormModelPopup
+        :title="t('Create tracking')"
+        url-create="Tickets/state"
+        model="CreateTicketTracking"
+        :form-initial-data="{ ticketFk: route.params.id }"
+        @on-data-saved="() => emit('onRequestCreated')"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnSelect
+                    v-model="data.stateFk"
+                    :label="t('tracking.state')"
+                    :options="statesOptions"
+                    @update:model-value="onStateFkChange(data)"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                />
+                <VnSelect
+                    :label="t('tracking.worker')"
+                    v-model="data.userFk"
+                    :options="workersOptions"
+                    hide-selected
+                    option-label="nickname"
+                    option-value="id"
+                />
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+    es:
+        Create tracking: Crear estado
+</i18n>
diff --git a/src/pages/Ticket/Card/TicketTracking.vue b/src/pages/Ticket/Card/TicketTracking.vue
new file mode 100644
index 000000000..548bba831
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketTracking.vue
@@ -0,0 +1,121 @@
+<script setup>
+import { ref, computed, watch, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import TicketCreateTracking from './TicketCreateTracking.vue';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+
+import { toDateTimeFormat } from 'src/filters/date.js';
+
+const route = useRoute();
+const { t } = useI18n();
+const createTrackingDialogRef = ref(null);
+const paginateRef = ref(null);
+
+watch(
+    () => route.params.id,
+    async (val) => {
+        paginateFilter.where.ticketFk = val;
+        paginateRef.value.fetch();
+    }
+);
+
+const paginateFilter = reactive({
+    include: [
+        {
+            relation: 'user',
+            scope: {
+                fields: ['id', 'name'],
+                include: {
+                    relation: 'worker',
+                    scope: {
+                        fields: ['id'],
+                    },
+                },
+            },
+        },
+        {
+            relation: 'state',
+            scope: {
+                fields: ['name'],
+            },
+        },
+    ],
+
+    order: ['created DESC'],
+    where: {
+        ticketFk: route.params.id,
+    },
+});
+
+const columns = computed(() => [
+    {
+        label: t('tracking.state'),
+        name: 'state',
+        field: 'state',
+        align: 'left',
+        format: (val) => val.name,
+    },
+    {
+        label: t('tracking.worker'),
+        name: 'worker',
+        align: 'left',
+    },
+    {
+        label: t('tracking.created'),
+        name: 'created',
+        field: 'created',
+        align: 'left',
+        format: (val) => toDateTimeFormat(val),
+    },
+]);
+
+const openCreateModal = () => createTrackingDialogRef.value.show();
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <VnPaginate
+            ref="paginateRef"
+            data-key="TicketTracking"
+            :filter="paginateFilter"
+            url="TicketTrackings"
+            auto-load
+        >
+            <template #body="{ rows }">
+                <QTable
+                    :rows="rows"
+                    :columns="columns"
+                    row-key="id"
+                    :pagination="{ rowsPerPage: 0 }"
+                    class="full-width q-mt-md"
+                    :no-data-label="t('globals.noResults')"
+                >
+                    <template #body-cell-worker="{ row }">
+                        <QTd @click.stop>
+                            <QBtn flat color="primary">
+                                {{ row.user?.name }}
+                                <WorkerDescriptorProxy :id="row.user?.worker?.id" />
+                            </QBtn>
+                        </QTd>
+                    </template>
+                </QTable>
+            </template>
+        </VnPaginate>
+        <QDialog
+            ref="createTrackingDialogRef"
+            transition-show="scale"
+            transition-hide="scale"
+        >
+            <TicketCreateTracking @on-request-created="paginateRef.fetch()" />
+        </QDialog>
+        <QPageSticky :offset="[20, 20]">
+            <QBtn @click="openCreateModal()" color="primary" fab icon="add" />
+            <QTooltip class="text-no-wrap">
+                {{ t('purchaseRequest.newRequest') }}
+            </QTooltip>
+        </QPageSticky>
+    </QPage>
+</template>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
new file mode 100644
index 000000000..88f5642cd
--- /dev/null
+++ b/src/pages/Ticket/locale/en.yml
@@ -0,0 +1,4 @@
+tracking:
+    state: State
+    worker: Worker
+    created: Created
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 5348b29b9..6f68842fb 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -1,2 +1,6 @@
+tracking:
+    state: Estado
+    worker: Trabajador
+    created: Fecha creación
 Search ticket: Buscar ticket
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index 6cb7291dc..6f63eb75d 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -12,7 +12,7 @@ export default {
     redirect: { name: 'TicketMain' },
     menus: {
         main: ['TicketList'],
-        card: ['TicketBoxing', 'TicketSms', 'TicketSale'],
+        card: ['TicketBoxing', 'TicketSms', 'TicketSale', 'TicketTracking'],
     },
     children: [
         {
@@ -93,6 +93,15 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/Card/TicketSms.vue'),
                 },
+                {
+                    path: 'tracking',
+                    name: 'TicketTracking',
+                    meta: {
+                        title: 'tracking',
+                        icon: 'vn:eye',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketTracking.vue'),
+                },
             ],
         },
     ],

From 17e9d95702e562b5c721b9f66c47c07fda4de482 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 24 Jun 2024 09:02:29 -0300
Subject: [PATCH 02/21] Ticket notes

---
 src/i18n/locale/en.yml                |   1 +
 src/i18n/locale/es.yml                |   1 +
 src/pages/Ticket/Card/TicketCard.vue  |  24 ++++--
 src/pages/Ticket/Card/TicketNotes.vue | 102 ++++++++++++++++++++++++++
 src/pages/Ticket/locale/en.yml        |   8 ++
 src/pages/Ticket/locale/es.yml        |   8 ++
 src/router/modules/ticket.js          |  11 ++-
 7 files changed, 148 insertions(+), 7 deletions(-)
 create mode 100644 src/pages/Ticket/Card/TicketNotes.vue
 create mode 100644 src/pages/Ticket/locale/en.yml

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index b3a85eefa..996ead262 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -443,6 +443,7 @@ ticket:
         sms: Sms
         notes: Notes
         sale: Sale
+        observation: Notes
     list:
         nickname: Nickname
         state: State
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index d03ee9d5c..8358953eb 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -441,6 +441,7 @@ ticket:
         sms: Sms
         notes: Notas
         sale: Lineas del pedido
+        observation: Notas
     list:
         nickname: Alias
         state: Estado
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 04363b506..a75cacd6c 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -1,17 +1,29 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { computed } from 'vue';
+
 import VnCard from 'components/common/VnCard.vue';
 import TicketDescriptor from './TicketDescriptor.vue';
 import TicketFilter from '../TicketFilter.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const routeName = computed(() => route.name);
+const searchBarDataKeys = {
+    TicketSummary: 'TicketSummary',
+    TicketNotes: 'TicketNotes',
+};
 </script>
 <template>
     <VnCard
         data-key="Ticket"
-        base-url="Tickets"
-        :descriptor="TicketDescriptor"
         :filter-panel="TicketFilter"
-        search-data-key="TicketList"
-        search-url="Tickets/filter"
-        searchbar-label="Search ticket"
-        searchbar-info="You can search by ticket id or alias"
+        :descriptor="TicketDescriptor"
+        :search-data-key="searchBarDataKeys[routeName]"
+        :search-custom-route-redirect="routeName"
+        :searchbar-label="t('card.search')"
+        :searchbar-info="t('card.searchInfo')"
     />
 </template>
diff --git a/src/pages/Ticket/Card/TicketNotes.vue b/src/pages/Ticket/Card/TicketNotes.vue
new file mode 100644
index 000000000..732395584
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketNotes.vue
@@ -0,0 +1,102 @@
+<script setup>
+import { ref, watch, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CrudModel from 'components/CrudModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+
+import { useArrayData } from 'src/composables/useArrayData';
+
+const route = useRoute();
+const { t } = useI18n();
+const ticketNotesCrudRef = ref(null);
+const observationTypes = ref([]);
+const arrayData = useArrayData('TicketNotes');
+const { store } = arrayData;
+
+const crudModelFilter = computed(() => ({
+    where: { ticketFk: route.params.id },
+    fields: ['id', 'ticketFk', 'observationTypeFk', 'description'],
+}));
+
+const crudModelRequiredData = computed(() => ({ ticketFk: route.params.id }));
+
+watch(
+    () => route.params.id,
+    async () => {
+        store.filter = crudModelFilter.value;
+        await ticketNotesCrudRef.value.reload();
+    }
+);
+</script>
+
+<template>
+    <FetchData
+        @on-fetch="(data) => (observationTypes = data)"
+        auto-load
+        url="ObservationTypes"
+    />
+    <CrudModel
+        ref="ticketNotesCrudRef"
+        data-key="TicketNotes"
+        url="TicketObservations"
+        model="TicketNotes"
+        :filter="crudModelFilter"
+        :data-required="crudModelRequiredData"
+        :default-remove="false"
+        auto-load
+    >
+        <template #body="{ rows }">
+            <QCard class="q-px-lg q-py-md">
+                <div
+                    v-for="(row, index) in rows"
+                    :key="index"
+                    class="q-mb-md row items-center q-gutter-x-md"
+                >
+                    <VnSelect
+                        :label="t('ticketNotes.observationType')"
+                        :options="observationTypes"
+                        hide-selected
+                        option-label="description"
+                        option-value="id"
+                        v-model="row.observationTypeFk"
+                        :disable="!!row.id"
+                    />
+                    <VnInput
+                        :label="t('ticketNotes.description')"
+                        v-model="row.description"
+                        class="col"
+                    />
+                    <QIcon
+                        name="delete"
+                        size="sm"
+                        class="cursor-pointer"
+                        color="primary"
+                        @click="ticketNotesCrudRef.remove([row])"
+                    >
+                        <QTooltip>
+                            {{ t('ticketNotes.removeNote') }}
+                        </QTooltip>
+                    </QIcon>
+                </div>
+                <VnRow v-if="observationTypes.length > rows.length">
+                    <QIcon
+                        name="add_circle"
+                        class="fill-icon-on-hover q-ml-md"
+                        size="sm"
+                        color="primary"
+                        @click="ticketNotesCrudRef.insert()"
+                    >
+                        <QTooltip>
+                            {{ t('ticketNotes.addNote') }}
+                        </QTooltip>
+                    </QIcon>
+                </VnRow>
+            </QCard>
+        </template>
+    </CrudModel>
+</template>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
new file mode 100644
index 000000000..087102a07
--- /dev/null
+++ b/src/pages/Ticket/locale/en.yml
@@ -0,0 +1,8 @@
+card:
+    search: Search tickets
+    searchInfo: You can search by ticket id or alias
+ticketNotes:
+    observationType: Observation type
+    description: Description
+    removeNote: Remove note
+    addNote: Add note
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 5348b29b9..d596fa217 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -1,2 +1,10 @@
+card:
+    search: Buscar tickets
+    searchInfo: Buscar tickets por identificador o alias
+ticketNotes:
+    observationType: Tipo de observación
+    description: Descripción
+    removeNote: Quitar nota
+    addNote: Añadir nota
 Search ticket: Buscar ticket
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index 6cb7291dc..a69a92e84 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -12,7 +12,7 @@ export default {
     redirect: { name: 'TicketMain' },
     menus: {
         main: ['TicketList'],
-        card: ['TicketBoxing', 'TicketSms', 'TicketSale'],
+        card: ['TicketBoxing', 'TicketSms', 'TicketSale', 'TicketNotes'],
     },
     children: [
         {
@@ -93,6 +93,15 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/Card/TicketSms.vue'),
                 },
+                {
+                    path: 'observation',
+                    name: 'TicketNotes',
+                    meta: {
+                        title: 'notes',
+                        icon: 'vn:notes',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketNotes.vue'),
+                },
             ],
         },
     ],

From 91df35fcaecb88f791402ebbd03be6f27378a6f4 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 24 Jun 2024 11:12:49 -0300
Subject: [PATCH 03/21] Ticket volume

---
 src/i18n/locale/en.yml                 |   1 +
 src/i18n/locale/es.yml                 |   1 +
 src/pages/Ticket/Card/TicketCard.vue   |  24 +++-
 src/pages/Ticket/Card/TicketVolume.vue | 153 +++++++++++++++++++++++++
 src/pages/Ticket/locale/en.yml         |  11 ++
 src/pages/Ticket/locale/es.yml         |  11 ++
 src/router/modules/ticket.js           |  11 +-
 7 files changed, 205 insertions(+), 7 deletions(-)
 create mode 100644 src/pages/Ticket/Card/TicketVolume.vue
 create mode 100644 src/pages/Ticket/locale/en.yml

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index b3a85eefa..4edd310ff 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -443,6 +443,7 @@ ticket:
         sms: Sms
         notes: Notes
         sale: Sale
+        volume: Volume
     list:
         nickname: Nickname
         state: State
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index d03ee9d5c..ceef27f1a 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -441,6 +441,7 @@ ticket:
         sms: Sms
         notes: Notas
         sale: Lineas del pedido
+        volume: Volumen
     list:
         nickname: Alias
         state: Estado
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 04363b506..9b4e05c93 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -1,17 +1,29 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { computed } from 'vue';
+
 import VnCard from 'components/common/VnCard.vue';
 import TicketDescriptor from './TicketDescriptor.vue';
 import TicketFilter from '../TicketFilter.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const routeName = computed(() => route.name);
+const searchBarDataKeys = {
+    TicketSummary: 'TicketSummary',
+    TicketVolume: 'TicketVolume',
+};
 </script>
 <template>
     <VnCard
         data-key="Ticket"
-        base-url="Tickets"
-        :descriptor="TicketDescriptor"
         :filter-panel="TicketFilter"
-        search-data-key="TicketList"
-        search-url="Tickets/filter"
-        searchbar-label="Search ticket"
-        searchbar-info="You can search by ticket id or alias"
+        :descriptor="TicketDescriptor"
+        :search-data-key="searchBarDataKeys[routeName]"
+        :search-custom-route-redirect="routeName"
+        :searchbar-label="t('card.search')"
+        :searchbar-info="t('card.searchInfo')"
     />
 </template>
diff --git a/src/pages/Ticket/Card/TicketVolume.vue b/src/pages/Ticket/Card/TicketVolume.vue
new file mode 100644
index 000000000..93da31e53
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketVolume.vue
@@ -0,0 +1,153 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import FetchData from 'components/FetchData.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { dashIfEmpty } from 'src/filters';
+import axios from 'axios';
+
+const route = useRoute();
+const stateStore = useStateStore();
+const { t } = useI18n();
+const salesRef = ref(null);
+
+watch(
+    () => route.params.id,
+    async () => {
+        await nextTick();
+        salesRef.value?.fetch();
+    }
+);
+
+const salesFilter = computed(() => ({
+    include: { relation: 'item' },
+    order: 'concept',
+    where: { ticketFk: route.params.id },
+    limit: 20,
+}));
+
+const sales = ref([]);
+const packingTypeVolume = ref([]);
+const rows = computed(() => sales.value);
+
+const columns = computed(() => [
+    {
+        label: t('volume.item'),
+        name: 'item',
+        align: 'left',
+    },
+    {
+        label: t('volume.description'),
+        name: 'description',
+        align: 'left',
+    },
+    {
+        label: t('volume.packingType'),
+        name: 'quantity',
+        field: (row) => row.item.itemPackingTypeFk,
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('volume.quantity'),
+        name: 'quantity',
+        field: 'quantity',
+        align: 'left',
+    },
+    {
+        label: t('volume.volumeQuantity'),
+        name: 'quantity',
+        field: (row) => row.saleVolume?.volume,
+        align: 'left',
+    },
+]);
+
+const applyVolumes = async (salesData) => {
+    try {
+        if (!salesData.length) return;
+
+        sales.value = salesData;
+        const ticket = sales.value[0].ticketFk;
+        const { data } = await axios.get(`Tickets/${ticket}/getVolume`);
+        const volumes = new Map(data.saleVolume.map((volume) => [volume.saleFk, volume]));
+
+        sales.value.forEach((sale) => {
+            sale.saleVolume = volumes.get(sale.id);
+        });
+
+        packingTypeVolume.value = data.packingTypeVolume;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+onMounted(() => {
+    stateStore.rightDrawer = true;
+});
+
+onUnmounted(() => (stateStore.rightDrawer = false));
+</script>
+
+<template>
+    <FetchData
+        ref="salesRef"
+        url="sales"
+        :filter="salesFilter"
+        @on-fetch="(data) => applyVolumes(data)"
+        auto-load
+    />
+    <RightMenu v-if="packingTypeVolume.length">
+        <template #right-panel>
+            <QCard
+                v-for="(packingType, index) in packingTypeVolume"
+                :key="index"
+                class="q-pa-md q-mb-md q-ma-md color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
+                <QCardSection class="column items-center" horizontal>
+                    <span>
+                        {{ t('volume.type') }}:
+                        {{ dashIfEmpty(packingType.description) }}
+                    </span>
+                </QCardSection>
+                <QCardSection class="column items-center" horizontal>
+                    <span> {{ t('volume.volume') }}: {{ packingType.volume }} </span>
+                </QCardSection>
+            </QCard>
+        </template>
+    </RightMenu>
+    <QTable
+        :rows="rows"
+        :columns="columns"
+        row-key="id"
+        :pagination="{ rowsPerPage: 0 }"
+        class="full-width q-mt-md"
+        :no-data-label="t('globals.noResults')"
+    >
+        <template #body-cell-item="{ row }">
+            <QTd>
+                <QBtn flat color="primary">
+                    {{ row.itemFk }}
+                    <ItemDescriptorProxy :id="row.itemFk" />
+                </QBtn>
+            </QTd>
+        </template>
+        <template #body-cell-description="{ row }">
+            <QTd>
+                <div class="column">
+                    <span>{{ row.item.name }}</span>
+                    <span class="color-vn-label">{{ row.item.subName }}</span>
+                    <FetchedTags :item="row.item" :max-length="6" />
+                </div>
+            </QTd>
+        </template>
+    </QTable>
+</template>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
new file mode 100644
index 000000000..6955fd0dd
--- /dev/null
+++ b/src/pages/Ticket/locale/en.yml
@@ -0,0 +1,11 @@
+card:
+    search: Search tickets
+    searchInfo: You can search by ticket id or alias
+volume:
+    item: Item
+    description: Description
+    packingType: Packing Type
+    quantity: Quantity
+    volumeQuantity: m³ per quantity
+    type: Type
+    volume: Volume
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 5348b29b9..e4bce2480 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -1,2 +1,13 @@
+card:
+    search: Buscar tickets
+    searchInfo: Buscar tickets por identificador o alias
+volume:
+    item: Artículo
+    description: Descripción
+    packingType: Encajado
+    quantity: Cantidad
+    volumeQuantity: m³ por cantidad
+    type: Tipo
+    volume: Volumen
 Search ticket: Buscar ticket
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index 6cb7291dc..1202115fa 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -12,7 +12,7 @@ export default {
     redirect: { name: 'TicketMain' },
     menus: {
         main: ['TicketList'],
-        card: ['TicketBoxing', 'TicketSms', 'TicketSale'],
+        card: ['TicketBoxing', 'TicketSms', 'TicketSale', 'TicketVolume', 'TicketVolume'],
     },
     children: [
         {
@@ -93,6 +93,15 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/Card/TicketSms.vue'),
                 },
+                {
+                    path: 'volume',
+                    name: 'TicketVolume',
+                    meta: {
+                        title: 'volume',
+                        icon: 'vn:volume',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketVolume.vue'),
+                },
             ],
         },
     ],

From fb12d4ddc085b7f0de5a13c78bbb9ddfd586a88d Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 24 Jun 2024 17:24:36 -0300
Subject: [PATCH 04/21] WIP

---
 src/i18n/locale/en.yml                  |  5 +++++
 src/i18n/locale/es.yml                  |  5 +++++
 src/pages/Ticket/Card/TicketService.vue |  1 +
 src/pages/Ticket/locale/en.yml          |  8 ++++++++
 src/pages/Ticket/locale/es.yml          |  8 ++++++++
 src/router/modules/ticket.js            | 25 +++++++++++++++++++++++++
 6 files changed, 52 insertions(+)
 create mode 100644 src/pages/Ticket/Card/TicketService.vue
 create mode 100644 src/pages/Ticket/locale/en.yml

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index b3a85eefa..347543092 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -443,6 +443,11 @@ ticket:
         sms: Sms
         notes: Notes
         sale: Sale
+<<<<<<< Updated upstream
+=======
+        dms: File management
+        services: Service
+>>>>>>> Stashed changes
     list:
         nickname: Nickname
         state: State
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index d03ee9d5c..3151d72bf 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -441,6 +441,11 @@ ticket:
         sms: Sms
         notes: Notas
         sale: Lineas del pedido
+<<<<<<< Updated upstream
+=======
+        dms: Gestión documental
+        service: Servicios
+>>>>>>> Stashed changes
     list:
         nickname: Alias
         state: Estado
diff --git a/src/pages/Ticket/Card/TicketService.vue b/src/pages/Ticket/Card/TicketService.vue
new file mode 100644
index 000000000..25e345de0
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketService.vue
@@ -0,0 +1 @@
+<template>Ticket service</template>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
new file mode 100644
index 000000000..b8c21600d
--- /dev/null
+++ b/src/pages/Ticket/locale/en.yml
@@ -0,0 +1,8 @@
+service:
+    pay: Pay
+    description: Description
+    quantity: Quantity
+    price: Price
+    removeService: Remove service
+    newService: New service type
+    addService: Add service
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 5348b29b9..a8ef0347b 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -1,2 +1,10 @@
+service:
+    pay: Abonar
+    description: Descripción
+    quantity: Cantidad
+    price: Precio
+    removeService: Quitar servicio
+    newService: Nuevo tipo de servicio
+    addService: Añadir servicio
 Search ticket: Buscar ticket
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index 6cb7291dc..cbcc4b762 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -12,7 +12,11 @@ export default {
     redirect: { name: 'TicketMain' },
     menus: {
         main: ['TicketList'],
+<<<<<<< Updated upstream
         card: ['TicketBoxing', 'TicketSms', 'TicketSale'],
+=======
+        card: ['TicketBoxing', 'TicketSms', 'TicketSale', 'TicketDms', 'TicketService'],
+>>>>>>> Stashed changes
     },
     children: [
         {
@@ -93,6 +97,27 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/Card/TicketSms.vue'),
                 },
+<<<<<<< Updated upstream
+=======
+                {
+                    path: 'dms',
+                    name: 'TicketDms',
+                    meta: {
+                        title: 'dms',
+                        icon: 'cloud_upload',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketDms.vue'),
+                },
+                {
+                    path: 'service',
+                    name: 'TicketService',
+                    meta: {
+                        title: 'service',
+                        icon: 'cloud_upload',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketService.vue'),
+                },
+>>>>>>> Stashed changes
             ],
         },
     ],

From 8e538fb4638f705656d7544a3d2578373cffa3b5 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 25 Jun 2024 08:27:25 -0300
Subject: [PATCH 05/21] WIP

---
 src/i18n/locale/en.yml                        |   4 -
 src/i18n/locale/es.yml                        |   4 -
 .../Ticket/Card/TicketCreateServiceType.vue   |  49 +++++++
 src/pages/Ticket/Card/TicketService.vue       | 138 +++++++++++++++++-
 src/pages/Ticket/locale/en.yml                |   1 +
 src/pages/Ticket/locale/es.yml                |   1 +
 src/router/modules/ticket.js                  |  19 +--
 7 files changed, 190 insertions(+), 26 deletions(-)
 create mode 100644 src/pages/Ticket/Card/TicketCreateServiceType.vue

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 347543092..5e7b3621b 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -443,11 +443,7 @@ ticket:
         sms: Sms
         notes: Notes
         sale: Sale
-<<<<<<< Updated upstream
-=======
-        dms: File management
         services: Service
->>>>>>> Stashed changes
     list:
         nickname: Nickname
         state: State
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 3151d72bf..fd3dad952 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -441,11 +441,7 @@ ticket:
         sms: Sms
         notes: Notas
         sale: Lineas del pedido
-<<<<<<< Updated upstream
-=======
-        dms: Gestión documental
         service: Servicios
->>>>>>> Stashed changes
     list:
         nickname: Alias
         state: Estado
diff --git a/src/pages/Ticket/Card/TicketCreateServiceType.vue b/src/pages/Ticket/Card/TicketCreateServiceType.vue
new file mode 100644
index 000000000..d392ec206
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketCreateServiceType.vue
@@ -0,0 +1,49 @@
+<script setup>
+import { reactive, ref, onMounted, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import VnRow from 'components/ui/VnRow.vue';
+import FormModelPopup from 'components/FormModelPopup.vue';
+
+const { t } = useI18n();
+const emit = defineEmits(['onDataSaved']);
+
+const nameInputRef = ref(null);
+const serviceFormData = reactive({});
+
+const onDataSaved = (formData, requestResponse) => {
+    emit('onDataSaved', formData, requestResponse);
+};
+
+onMounted(async () => {
+    await nextTick();
+    nameInputRef.value.focus();
+});
+</script>
+
+<template>
+    <FormModelPopup
+        url-create="TicketServiceTypes"
+        model="TicketServiceType"
+        :title="t('New service type')"
+        :form-initial-data="serviceFormData"
+        @on-data-saved="onDataSaved"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    ref="nameInputRef"
+                    :label="t('service.description')"
+                    v-model="data.name"
+                    :required="true"
+                />
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    New service type: Nuevo tipo de servicio
+</i18n>
diff --git a/src/pages/Ticket/Card/TicketService.vue b/src/pages/Ticket/Card/TicketService.vue
index 25e345de0..af2a5c664 100644
--- a/src/pages/Ticket/Card/TicketService.vue
+++ b/src/pages/Ticket/Card/TicketService.vue
@@ -1 +1,137 @@
-<template>Ticket service</template>
+<script setup>
+import { ref, watch, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CrudModel from 'components/CrudModel.vue';
+import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
+import FetchData from 'components/FetchData.vue';
+import TicketCreateServiceType from './TicketCreateServiceType.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+
+import { useArrayData } from 'src/composables/useArrayData';
+
+const route = useRoute();
+const { t } = useI18n();
+const ticketServiceTypeFetchRef = ref(null);
+const ticketServiceCrudRef = ref(null);
+const ticketServiceOptions = ref([]);
+const arrayData = useArrayData('TicketNotes');
+const { store } = arrayData;
+
+const selectedServices = ref(new Set());
+
+const toggleCheckSelection = (id) => {
+    if (selectedServices.value.has(id)) selectedServices.value.delete(id);
+    else selectedServices.value.add(id);
+};
+
+const crudModelFilter = computed(() => ({
+    where: { ticketFk: route.params.id },
+}));
+
+const crudModelRequiredData = computed(() => ({ ticketFk: route.params.id }));
+
+watch(
+    () => route.params.id,
+    async () => {
+        store.filter = crudModelFilter.value;
+        await ticketServiceCrudRef.value.reload();
+    }
+);
+</script>
+
+<template>
+    <FetchData
+        ref="ticketServiceTypeFetchRef"
+        @on-fetch="(data) => (ticketServiceOptions = data)"
+        auto-load
+        url="TicketServiceTypes"
+    />
+    <!-- <Teleport v-if="" to="#st-actions">
+        <QBtn
+            color="primary"
+            :label="t('service.pay')"
+            :disabled="!selectedServices.size"
+            @click.stop="viewAddObservation(selected)"
+        />
+    </Teleport> -->
+    <CrudModel
+        ref="ticketServiceCrudRef"
+        data-key="TicketService"
+        url="TicketServices"
+        model="TicketService"
+        :filter="crudModelFilter"
+        :data-required="crudModelRequiredData"
+        :default-remove="false"
+        auto-load
+    >
+        <template #body="{ rows }">
+            <QCard class="q-px-lg q-py-md">
+                <div
+                    v-for="(row, index) in rows"
+                    :key="index"
+                    class="q-mb-md row items-center q-gutter-x-md"
+                >
+                    <QCheckbox
+                        size="sm"
+                        @update:model-value="toggleCheckSelection(row.id)"
+                        :model-value="selectedServices.has(row.id)"
+                        :toggle-indeterminate="false"
+                    />
+                    <VnSelectDialog
+                        :label="t('service.description')"
+                        v-model="row.ticketServiceTypeFk"
+                        :options="ticketServiceOptions"
+                        option-label="name"
+                        option-value="id"
+                        hide-selected
+                    >
+                        <template #form>
+                            <TicketCreateServiceType
+                                @on-data-saved="ticketServiceTypeFetchRef.fetch()"
+                            />
+                        </template>
+                    </VnSelectDialog>
+                    <VnInput
+                        :label="t('service.quantity')"
+                        v-model="row.quantity"
+                        type="number"
+                        min="0"
+                        :info="t('service.quantityInfo')"
+                    />
+                    <VnInput
+                        :label="t('service.price')"
+                        v-model="row.price"
+                        type="number"
+                        min="0"
+                    />
+                    <QIcon
+                        name="delete"
+                        size="sm"
+                        class="cursor-pointer"
+                        color="primary"
+                        @click="ticketServiceCrudRef.remove([row])"
+                    >
+                        <QTooltip>
+                            {{ t('service.removeNote') }}
+                        </QTooltip>
+                    </QIcon>
+                </div>
+                <QIcon
+                    name="add_circle"
+                    class="fill-icon-on-hover q-ml-md"
+                    size="sm"
+                    color="primary"
+                    @click="ticketServiceCrudRef.insert()"
+                >
+                    <QTooltip>
+                        {{ t('service.addService') }}
+                    </QTooltip>
+                </QIcon>
+            </QCard>
+        </template>
+    </CrudModel>
+    <pre>checkeds: {{ selectedServices }}</pre>
+</template>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index b8c21600d..ff928c492 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -6,3 +6,4 @@ service:
     removeService: Remove service
     newService: New service type
     addService: Add service
+    quantityInfo: To create services with negative amounts mark the service on the source ticket and press the pay button.
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index a8ef0347b..f1326e502 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -6,5 +6,6 @@ service:
     removeService: Quitar servicio
     newService: Nuevo tipo de servicio
     addService: Añadir servicio
+    quantityInfo: Para crear sevicios con cantidades negativas marcar servicio en el ticket origen y apretar el boton abonar.
 Search ticket: Buscar ticket
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index cbcc4b762..eadaa1cab 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -12,11 +12,7 @@ export default {
     redirect: { name: 'TicketMain' },
     menus: {
         main: ['TicketList'],
-<<<<<<< Updated upstream
-        card: ['TicketBoxing', 'TicketSms', 'TicketSale'],
-=======
-        card: ['TicketBoxing', 'TicketSms', 'TicketSale', 'TicketDms', 'TicketService'],
->>>>>>> Stashed changes
+        card: ['TicketBoxing', 'TicketSms', 'TicketSale', 'TicketService'],
     },
     children: [
         {
@@ -97,17 +93,7 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/Card/TicketSms.vue'),
                 },
-<<<<<<< Updated upstream
-=======
-                {
-                    path: 'dms',
-                    name: 'TicketDms',
-                    meta: {
-                        title: 'dms',
-                        icon: 'cloud_upload',
-                    },
-                    component: () => import('src/pages/Ticket/Card/TicketDms.vue'),
-                },
+
                 {
                     path: 'service',
                     name: 'TicketService',
@@ -117,7 +103,6 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/Card/TicketService.vue'),
                 },
->>>>>>> Stashed changes
             ],
         },
     ],

From a57df459a6be01d2e312ff16477aa3be95143745 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 25 Jun 2024 12:54:21 -0300
Subject: [PATCH 06/21] Add pay button

---
 src/pages/Ticket/Card/TicketService.vue | 39 +++++++++++++++++++++----
 src/pages/Ticket/locale/en.yml          |  1 +
 src/pages/Ticket/locale/es.yml          |  1 +
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/pages/Ticket/Card/TicketService.vue b/src/pages/Ticket/Card/TicketService.vue
index af2a5c664..f071c7baa 100644
--- a/src/pages/Ticket/Card/TicketService.vue
+++ b/src/pages/Ticket/Card/TicketService.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, watch, computed } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
 import CrudModel from 'components/CrudModel.vue';
@@ -8,17 +8,22 @@ import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import FetchData from 'components/FetchData.vue';
 import TicketCreateServiceType from './TicketCreateServiceType.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 import { useArrayData } from 'src/composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
+import useNotify from 'src/composables/useNotify.js';
+import axios from 'axios';
 
+const stateStore = useStateStore();
 const route = useRoute();
+const router = useRouter();
 const { t } = useI18n();
 const ticketServiceTypeFetchRef = ref(null);
 const ticketServiceCrudRef = ref(null);
 const ticketServiceOptions = ref([]);
 const arrayData = useArrayData('TicketNotes');
 const { store } = arrayData;
+const { notify } = useNotify();
 
 const selectedServices = ref(new Set());
 
@@ -40,6 +45,29 @@ watch(
         await ticketServiceCrudRef.value.reload();
     }
 );
+
+const createRefund = async () => {
+    try {
+        if (!selectedServices.value.size) return;
+
+        const params = {
+            servicesIds: Array.from(selectedServices.value),
+            withWarehouse: false,
+            negative: true,
+        };
+        const { data } = await axios.post('Sales/clone', params);
+        const [refundTicket] = data;
+        notify(
+            t('service.createRefundSuccess', {
+                ticketId: refundTicket.id,
+            }),
+            'positive'
+        );
+        router.push({ name: 'TicketSale', params: { id: refundTicket.id } });
+    } catch (error) {
+        console.error(error);
+    }
+};
 </script>
 
 <template>
@@ -49,14 +77,14 @@ watch(
         auto-load
         url="TicketServiceTypes"
     />
-    <!-- <Teleport v-if="" to="#st-actions">
+    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
         <QBtn
             color="primary"
             :label="t('service.pay')"
             :disabled="!selectedServices.size"
-            @click.stop="viewAddObservation(selected)"
+            @click.stop="createRefund()"
         />
-    </Teleport> -->
+    </Teleport>
     <CrudModel
         ref="ticketServiceCrudRef"
         data-key="TicketService"
@@ -133,5 +161,4 @@ watch(
             </QCard>
         </template>
     </CrudModel>
-    <pre>checkeds: {{ selectedServices }}</pre>
 </template>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index ff928c492..9162ca945 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -7,3 +7,4 @@ service:
     newService: New service type
     addService: Add service
     quantityInfo: To create services with negative amounts mark the service on the source ticket and press the pay button.
+    createRefundSuccess: 'The following refund ticket have been created: { ticketId }'
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index f1326e502..bb02a946f 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -7,5 +7,6 @@ service:
     newService: Nuevo tipo de servicio
     addService: Añadir servicio
     quantityInfo: Para crear sevicios con cantidades negativas marcar servicio en el ticket origen y apretar el boton abonar.
+    createRefundSuccess: 'Se ha creado siguiente ticket de abono: { ticketId }'
 Search ticket: Buscar ticket
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket

From 1529e2dd4f15dd693abed81c2732c335f618aa84 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 25 Jun 2024 12:58:49 -0300
Subject: [PATCH 07/21] Add tooltip to add state button

---
 src/pages/Ticket/Card/TicketTracking.vue | 2 +-
 src/pages/Ticket/locale/en.yml           | 1 +
 src/pages/Ticket/locale/es.yml           | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/Ticket/Card/TicketTracking.vue b/src/pages/Ticket/Card/TicketTracking.vue
index 548bba831..2ddb278fa 100644
--- a/src/pages/Ticket/Card/TicketTracking.vue
+++ b/src/pages/Ticket/Card/TicketTracking.vue
@@ -114,7 +114,7 @@ const openCreateModal = () => createTrackingDialogRef.value.show();
         <QPageSticky :offset="[20, 20]">
             <QBtn @click="openCreateModal()" color="primary" fab icon="add" />
             <QTooltip class="text-no-wrap">
-                {{ t('purchaseRequest.newRequest') }}
+                {{ t('tracking.addState') }}
             </QTooltip>
         </QPageSticky>
     </QPage>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index 88f5642cd..4fe6072b2 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -2,3 +2,4 @@ tracking:
     state: State
     worker: Worker
     created: Created
+    addState: Add state
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 6f68842fb..d116abb12 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -2,5 +2,6 @@ tracking:
     state: Estado
     worker: Trabajador
     created: Fecha creación
+    addState: Añadir estado
 Search ticket: Buscar ticket
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket

From d409b9ea8688658593c8cdb04a83a20ed5f157da Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 25 Jun 2024 22:51:26 +0200
Subject: [PATCH 08/21] fix: WorkerSelect option format

---
 src/pages/Ticket/Card/TicketCreateTracking.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/pages/Ticket/Card/TicketCreateTracking.vue b/src/pages/Ticket/Card/TicketCreateTracking.vue
index b340b406a..399663571 100644
--- a/src/pages/Ticket/Card/TicketCreateTracking.vue
+++ b/src/pages/Ticket/Card/TicketCreateTracking.vue
@@ -59,9 +59,22 @@ const onStateFkChange = (formData) => (formData.userFk = user.value.id);
                     v-model="data.userFk"
                     :options="workersOptions"
                     hide-selected
-                    option-label="nickname"
+                    option-label="name"
                     option-value="id"
-                />
+                >
+                    <template #option="{ opt, itemProps }">
+                        <QItem v-bind="itemProps">
+                            <QItemSection>
+                                <QItemLabel>
+                                    {{ opt.name }}
+                                </QItemLabel>
+                                <QItemLabel caption>
+                                    {{ opt.nickname }}, {{ opt.code }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template></VnSelect
+                >
             </VnRow>
         </template>
     </FormModelPopup>

From 151978160b0f1cf2f02d3ca474d051817f0da14d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 25 Jun 2024 23:01:26 +0200
Subject: [PATCH 09/21] fix: ticket order

---
 src/router/modules/ticket.js | 61 +++++++++++++++++++++---------------
 1 file changed, 35 insertions(+), 26 deletions(-)

diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index 475552585..2766d034a 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -11,7 +11,7 @@ export default {
     component: RouterView,
     redirect: { name: 'TicketMain' },
     menus: {
-        main: ['TicketList', 'TicketAdvance', 'TicketFuture'],
+        main: ['TicketList', 'TicketAdvance', 'TicketWeekly', 'TicketFuture'],
         card: [
             'TicketBasicData',
             'TicketBoxing',
@@ -49,13 +49,13 @@ export default {
                     component: () => import('src/pages/Ticket/TicketCreate.vue'),
                 },
                 {
-                    name: 'TicketAdvance',
-                    path: 'advance',
+                    name: 'TicketWeekly',
+                    path: 'weekly',
                     meta: {
-                        title: 'ticketAdvance',
-                        icon: 'keyboard_double_arrow_left',
+                        title: 'weeklyTickets',
+                        icon: 'access_time',
                     },
-                    component: () => import('src/pages/Ticket/TicketAdvance.vue'),
+                    component: () => import('src/pages/Ticket/TicketWeekly.vue'),
                 },
                 {
                     name: 'TicketFuture',
@@ -66,6 +66,15 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/TicketFuture.vue'),
                 },
+                {
+                    name: 'TicketAdvance',
+                    path: 'advance',
+                    meta: {
+                        title: 'ticketAdvance',
+                        icon: 'keyboard_double_arrow_left',
+                    },
+                    component: () => import('src/pages/Ticket/TicketAdvance.vue'),
+                },
             ],
         },
         {
@@ -103,22 +112,14 @@ export default {
                     component: () => import('src/pages/Ticket/Card/TicketSale.vue'),
                 },
                 {
-                    path: 'boxing',
-                    name: 'TicketBoxing',
+                    path: 'request',
+                    name: 'TicketPurchaseRequest',
                     meta: {
-                        title: 'boxing',
-                        icon: 'vn:package',
+                        title: 'purchaseRequest',
+                        icon: 'vn:buyrequest',
                     },
-                    component: () => import('src/pages/Ticket/Card/TicketBoxing.vue'),
-                },
-                {
-                    path: 'sms',
-                    name: 'TicketSms',
-                    meta: {
-                        title: 'sms',
-                        icon: 'sms',
-                    },
-                    component: () => import('src/pages/Ticket/Card/TicketSms.vue'),
+                    component: () =>
+                        import('src/pages/Ticket/Card/TicketPurchaseRequest.vue'),
                 },
                 {
                     path: 'tracking',
@@ -139,14 +140,22 @@ export default {
                     component: () => import('src/pages/Ticket/Card/TicketLog.vue'),
                 },
                 {
-                    path: 'request',
-                    name: 'TicketPurchaseRequest',
+                    path: 'boxing',
+                    name: 'TicketBoxing',
                     meta: {
-                        title: 'purchaseRequest',
-                        icon: 'vn:buyrequest',
+                        title: 'boxing',
+                        icon: 'vn:package',
                     },
-                    component: () =>
-                        import('src/pages/Ticket/Card/TicketPurchaseRequest.vue'),
+                    component: () => import('src/pages/Ticket/Card/TicketBoxing.vue'),
+                },
+                {
+                    path: 'sms',
+                    name: 'TicketSms',
+                    meta: {
+                        title: 'sms',
+                        icon: 'sms',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketSms.vue'),
                 },
             ],
         },

From cd01ba8fe1b90a1abfac8e97660a90f13a6b4d15 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 26 Jun 2024 08:36:17 -0300
Subject: [PATCH 10/21] changes

---
 src/pages/Ticket/Card/TicketNotes.vue | 119 +++++++++++++-------------
 1 file changed, 61 insertions(+), 58 deletions(-)

diff --git a/src/pages/Ticket/Card/TicketNotes.vue b/src/pages/Ticket/Card/TicketNotes.vue
index 732395584..747955e6d 100644
--- a/src/pages/Ticket/Card/TicketNotes.vue
+++ b/src/pages/Ticket/Card/TicketNotes.vue
@@ -40,63 +40,66 @@ watch(
         auto-load
         url="ObservationTypes"
     />
-    <CrudModel
-        ref="ticketNotesCrudRef"
-        data-key="TicketNotes"
-        url="TicketObservations"
-        model="TicketNotes"
-        :filter="crudModelFilter"
-        :data-required="crudModelRequiredData"
-        :default-remove="false"
-        auto-load
-    >
-        <template #body="{ rows }">
-            <QCard class="q-px-lg q-py-md">
-                <div
-                    v-for="(row, index) in rows"
-                    :key="index"
-                    class="q-mb-md row items-center q-gutter-x-md"
-                >
-                    <VnSelect
-                        :label="t('ticketNotes.observationType')"
-                        :options="observationTypes"
-                        hide-selected
-                        option-label="description"
-                        option-value="id"
-                        v-model="row.observationTypeFk"
-                        :disable="!!row.id"
-                    />
-                    <VnInput
-                        :label="t('ticketNotes.description')"
-                        v-model="row.description"
-                        class="col"
-                    />
-                    <QIcon
-                        name="delete"
-                        size="sm"
-                        class="cursor-pointer"
-                        color="primary"
-                        @click="ticketNotesCrudRef.remove([row])"
+    <div class="flex justify-center">
+        <CrudModel
+            ref="ticketNotesCrudRef"
+            data-key="TicketNotes"
+            url="TicketObservations"
+            model="TicketNotes"
+            :filter="crudModelFilter"
+            :data-required="crudModelRequiredData"
+            :default-remove="false"
+            auto-load
+            style="max-width: 800px"
+        >
+            <template #body="{ rows }">
+                <QCard class="q-px-lg q-py-md">
+                    <div
+                        v-for="(row, index) in rows"
+                        :key="index"
+                        class="q-mb-md row items-center q-gutter-x-md"
                     >
-                        <QTooltip>
-                            {{ t('ticketNotes.removeNote') }}
-                        </QTooltip>
-                    </QIcon>
-                </div>
-                <VnRow v-if="observationTypes.length > rows.length">
-                    <QIcon
-                        name="add_circle"
-                        class="fill-icon-on-hover q-ml-md"
-                        size="sm"
-                        color="primary"
-                        @click="ticketNotesCrudRef.insert()"
-                    >
-                        <QTooltip>
-                            {{ t('ticketNotes.addNote') }}
-                        </QTooltip>
-                    </QIcon>
-                </VnRow>
-            </QCard>
-        </template>
-    </CrudModel>
+                        <VnSelect
+                            :label="t('ticketNotes.observationType')"
+                            :options="observationTypes"
+                            hide-selected
+                            option-label="description"
+                            option-value="id"
+                            v-model="row.observationTypeFk"
+                            :disable="!!row.id"
+                        />
+                        <VnInput
+                            :label="t('ticketNotes.description')"
+                            v-model="row.description"
+                            class="col"
+                        />
+                        <QIcon
+                            name="delete"
+                            size="sm"
+                            class="cursor-pointer"
+                            color="primary"
+                            @click="ticketNotesCrudRef.remove([row])"
+                        >
+                            <QTooltip>
+                                {{ t('ticketNotes.removeNote') }}
+                            </QTooltip>
+                        </QIcon>
+                    </div>
+                    <VnRow v-if="observationTypes.length > rows.length">
+                        <QIcon
+                            name="add_circle"
+                            class="fill-icon-on-hover q-ml-md"
+                            size="sm"
+                            color="primary"
+                            @click="ticketNotesCrudRef.insert()"
+                        >
+                            <QTooltip>
+                                {{ t('ticketNotes.addNote') }}
+                            </QTooltip>
+                        </QIcon>
+                    </VnRow>
+                </QCard>
+            </template>
+        </CrudModel>
+    </div>
 </template>

From ae73dd047f214d8dcf94882602338898a4209c35 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 26 Jun 2024 08:55:30 -0300
Subject: [PATCH 11/21] changes

---
 src/pages/Ticket/Card/TicketCard.vue       | 1 -
 src/pages/Ticket/Card/TicketDescriptor.vue | 8 ++++----
 src/pages/Ticket/Card/TicketNotes.vue      | 9 +++++----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 62b112d5d..689a717e6 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -13,7 +13,6 @@ const route = useRoute();
 const routeName = computed(() => route.name);
 const searchBarDataKeys = {
     TicketSummary: 'TicketSummary',
-    TicketNotes: 'TicketNotes',
     TicketSale: 'TicketSale',
     TicketPurchaseRequest: 'TicketPurchaseRequest',
 };
diff --git a/src/pages/Ticket/Card/TicketDescriptor.vue b/src/pages/Ticket/Card/TicketDescriptor.vue
index dfbcfc106..5fb312b28 100644
--- a/src/pages/Ticket/Card/TicketDescriptor.vue
+++ b/src/pages/Ticket/Card/TicketDescriptor.vue
@@ -71,7 +71,7 @@ const filter = {
 
 const data = ref(useCardDescription());
 const setData = (entity) =>
-    (data.value = useCardDescription(entity.client.name, entity.id));
+    (data.value = useCardDescription(entity.client?.name, entity.id));
 </script>
 
 <template>
@@ -92,7 +92,7 @@ const setData = (entity) =>
                 <template #value>
                     <span class="link">
                         {{ entity.clientFk }}
-                        <CustomerDescriptorProxy :id="entity.client.id" />
+                        <CustomerDescriptorProxy :id="entity.client?.id" />
                     </span>
                 </template>
             </VnLv>
@@ -109,8 +109,8 @@ const setData = (entity) =>
             <VnLv :label="t('ticket.summary.salesPerson')">
                 <template #value>
                     <VnUserLink
-                        :name="entity.client.salesPersonUser?.name"
-                        :worker-id="entity.client.salesPersonFk"
+                        :name="entity.client?.salesPersonUser?.name"
+                        :worker-id="entity.client?.salesPersonFk"
                     />
                 </template>
             </VnLv>
diff --git a/src/pages/Ticket/Card/TicketNotes.vue b/src/pages/Ticket/Card/TicketNotes.vue
index 747955e6d..cfc0c2431 100644
--- a/src/pages/Ticket/Card/TicketNotes.vue
+++ b/src/pages/Ticket/Card/TicketNotes.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, reactive } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -18,17 +18,18 @@ const observationTypes = ref([]);
 const arrayData = useArrayData('TicketNotes');
 const { store } = arrayData;
 
-const crudModelFilter = computed(() => ({
+const crudModelFilter = reactive({
     where: { ticketFk: route.params.id },
     fields: ['id', 'ticketFk', 'observationTypeFk', 'description'],
-}));
+});
 
 const crudModelRequiredData = computed(() => ({ ticketFk: route.params.id }));
 
 watch(
     () => route.params.id,
     async () => {
-        store.filter = crudModelFilter.value;
+        crudModelFilter.where.ticketFk = route.params.id;
+        store.filter = crudModelFilter;
         await ticketNotesCrudRef.value.reload();
     }
 );

From 5b07f3015d9be4ffb6fdd8f610b901bf6ceedaf7 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 26 Jun 2024 17:02:21 -0300
Subject: [PATCH 12/21] small change

---
 src/pages/Ticket/Card/TicketCard.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 65abcc010..689a717e6 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -13,7 +13,6 @@ const route = useRoute();
 const routeName = computed(() => route.name);
 const searchBarDataKeys = {
     TicketSummary: 'TicketSummary',
-    TicketVolume: 'TicketVolume',
     TicketSale: 'TicketSale',
     TicketPurchaseRequest: 'TicketPurchaseRequest',
 };

From ed642b299efd2cbccf110d472799fe664616992c Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 27 Jun 2024 12:27:04 +0200
Subject: [PATCH 13/21] feat: refs #7436 show checkbox

---
 src/components/ui/CardSummary.vue |  5 --
 src/components/ui/VnLv.vue        | 96 ++++++++++++++++++-------------
 2 files changed, 56 insertions(+), 45 deletions(-)

diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index 253683889..11dcbee3b 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -187,15 +187,10 @@ function existSummary(routes) {
                 color: lighten($primary, 20%);
             }
             .q-checkbox {
-                display: flex;
-                margin-bottom: 9px;
                 & .q-checkbox__label {
-                    margin-left: 31px;
                     color: var(--vn-text-color);
                 }
                 & .q-checkbox__inner {
-                    position: absolute;
-                    left: 0;
                     color: var(--vn-label-color);
                 }
             }
diff --git a/src/components/ui/VnLv.vue b/src/components/ui/VnLv.vue
index 3220bce6a..ff65f759b 100644
--- a/src/components/ui/VnLv.vue
+++ b/src/components/ui/VnLv.vue
@@ -2,6 +2,7 @@
 import { dashIfEmpty } from 'src/filters';
 import { useI18n } from 'vue-i18n';
 import { useClipboard } from 'src/composables/useClipboard';
+import { computed } from 'vue';
 
 const $props = defineProps({
     label: { type: String, default: null },
@@ -24,52 +25,67 @@ function copyValueText() {
         },
     });
 }
+const val = computed(() => $props.value);
 </script>
-<style scoped>
-.label,
-.value {
-    white-space: pre-line;
-    word-wrap: break-word;
-}
-</style>
 <template>
     <div class="vn-label-value">
-        <div v-if="$props.label || $slots.label" class="label">
-            <slot name="label">
-                <span>{{ $props.label }}</span>
-            </slot>
-        </div>
-        <div class="value">
-            <slot name="value">
-                <span :title="$props.value">
-                    {{ $props.dash ? dashIfEmpty($props.value) : $props.value }}
-                </span>
-            </slot>
-        </div>
-        <div class="info" v-if="$props.info">
-            <QIcon name="info" class="cursor-pointer" size="xs" color="grey">
-                <QTooltip class="bg-dark text-white shadow-4" :offset="[10, 10]">
-                    {{ $props.info }}
-                </QTooltip>
-            </QIcon>
-        </div>
-        <div class="copy" v-if="$props.copy && $props.value" @click="copyValueText()">
-            <QIcon name="Content_Copy" color="primary">
-                <QTooltip>{{ t('globals.copyClipboard') }}</QTooltip>
-            </QIcon>
-        </div>
+        <QCheckbox
+            v-if="typeof value === 'boolean'"
+            v-model="val"
+            :label="label"
+            disable
+            dense
+        />
+        <template v-else>
+            <div v-if="label || $slots.label" class="label">
+                <slot name="label">
+                    <span>{{ label }}</span>
+                </slot>
+            </div>
+            <div class="value">
+                <slot name="value">
+                    <span :title="value">
+                        {{ dash ? dashIfEmpty(value) : value }}
+                    </span>
+                </slot>
+            </div>
+            <div class="info" v-if="info">
+                <QIcon name="info" class="cursor-pointer" size="xs" color="grey">
+                    <QTooltip class="bg-dark text-white shadow-4" :offset="[10, 10]">
+                        {{ info }}
+                    </QTooltip>
+                </QIcon>
+            </div>
+            <div class="copy" v-if="copy && value" @click="copyValueText()">
+                <QIcon name="Content_Copy" color="primary">
+                    <QTooltip>{{ t('globals.copyClipboard') }}</QTooltip>
+                </QIcon>
+            </div>
+        </template>
     </div>
 </template>
-
 <style lang="scss" scoped>
-.vn-label-value:hover .copy {
-    visibility: visible;
-    cursor: pointer;
+.vn-label-value {
+    &:hover .copy {
+        visibility: visible;
+        cursor: pointer;
+    }
+
+    .label,
+    .value {
+        white-space: pre-line;
+        word-wrap: break-word;
+    }
+    .copy {
+        visibility: hidden;
+    }
+
+    .info {
+        margin-left: 5px;
+    }
 }
-.copy {
-    visibility: hidden;
-}
-.info {
-    margin-left: 5px;
+
+:deep(.q-checkbox.disabled) {
+    opacity: 1 !important;
 }
 </style>

From db4c3a67995926291f81426e18655c478b182a08 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 27 Jun 2024 11:46:31 -0300
Subject: [PATCH 14/21] Changes

---
 src/i18n/locale/es.yml                  |   2 +-
 src/pages/Ticket/Card/TicketService.vue | 164 ++++++++++++++----------
 src/router/modules/ticket.js            |   4 +-
 3 files changed, 97 insertions(+), 73 deletions(-)

diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index fd3dad952..d528dbb7d 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -441,7 +441,7 @@ ticket:
         sms: Sms
         notes: Notas
         sale: Lineas del pedido
-        service: Servicios
+        services: Servicios
     list:
         nickname: Alias
         state: Estado
diff --git a/src/pages/Ticket/Card/TicketService.vue b/src/pages/Ticket/Card/TicketService.vue
index f071c7baa..bacad697e 100644
--- a/src/pages/Ticket/Card/TicketService.vue
+++ b/src/pages/Ticket/Card/TicketService.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -26,6 +26,7 @@ const { store } = arrayData;
 const { notify } = useNotify();
 
 const selectedServices = ref(new Set());
+const defaultTaxClass = ref(null);
 
 const toggleCheckSelection = (id) => {
     if (selectedServices.value.has(id)) selectedServices.value.delete(id);
@@ -36,7 +37,10 @@ const crudModelFilter = computed(() => ({
     where: { ticketFk: route.params.id },
 }));
 
-const crudModelRequiredData = computed(() => ({ ticketFk: route.params.id }));
+const crudModelRequiredData = computed(() => ({
+    ticketFk: route.params.id,
+    taxClassFk: defaultTaxClass.value?.id,
+}));
 
 watch(
     () => route.params.id,
@@ -68,6 +72,23 @@ const createRefund = async () => {
         console.error(error);
     }
 };
+
+const getDefaultTaxClass = async () => {
+    try {
+        let filter = {
+            where: { code: 'G' },
+        };
+        const { data } = await axios.get('TaxClasses/findOne', {
+            params: { filter: JSON.stringify(filter) },
+        });
+        defaultTaxClass.value = data;
+        console.log('defaultTaxClass', defaultTaxClass.value);
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+onMounted(async () => await getDefaultTaxClass());
 </script>
 
 <template>
@@ -85,80 +106,83 @@ const createRefund = async () => {
             @click.stop="createRefund()"
         />
     </Teleport>
-    <CrudModel
-        ref="ticketServiceCrudRef"
-        data-key="TicketService"
-        url="TicketServices"
-        model="TicketService"
-        :filter="crudModelFilter"
-        :data-required="crudModelRequiredData"
-        :default-remove="false"
-        auto-load
-    >
-        <template #body="{ rows }">
-            <QCard class="q-px-lg q-py-md">
-                <div
-                    v-for="(row, index) in rows"
-                    :key="index"
-                    class="q-mb-md row items-center q-gutter-x-md"
-                >
-                    <QCheckbox
-                        size="sm"
-                        @update:model-value="toggleCheckSelection(row.id)"
-                        :model-value="selectedServices.has(row.id)"
-                        :toggle-indeterminate="false"
-                    />
-                    <VnSelectDialog
-                        :label="t('service.description')"
-                        v-model="row.ticketServiceTypeFk"
-                        :options="ticketServiceOptions"
-                        option-label="name"
-                        option-value="id"
-                        hide-selected
+    <div class="flex justify-center">
+        <CrudModel
+            ref="ticketServiceCrudRef"
+            data-key="TicketService"
+            url="TicketServices"
+            model="TicketService"
+            :filter="crudModelFilter"
+            :data-required="crudModelRequiredData"
+            :default-remove="false"
+            auto-load
+            style="max-width: 800px"
+        >
+            <template #body="{ rows }">
+                <QCard class="q-px-lg q-py-md">
+                    <div
+                        v-for="(row, index) in rows"
+                        :key="index"
+                        class="q-mb-md row items-center q-gutter-x-md"
                     >
-                        <template #form>
-                            <TicketCreateServiceType
-                                @on-data-saved="ticketServiceTypeFetchRef.fetch()"
-                            />
-                        </template>
-                    </VnSelectDialog>
-                    <VnInput
-                        :label="t('service.quantity')"
-                        v-model="row.quantity"
-                        type="number"
-                        min="0"
-                        :info="t('service.quantityInfo')"
-                    />
-                    <VnInput
-                        :label="t('service.price')"
-                        v-model="row.price"
-                        type="number"
-                        min="0"
-                    />
+                        <QCheckbox
+                            size="sm"
+                            @update:model-value="toggleCheckSelection(row.id)"
+                            :model-value="selectedServices.has(row.id)"
+                            :toggle-indeterminate="false"
+                        />
+                        <VnSelectDialog
+                            :label="t('service.description')"
+                            v-model="row.ticketServiceTypeFk"
+                            :options="ticketServiceOptions"
+                            option-label="name"
+                            option-value="id"
+                            hide-selected
+                        >
+                            <template #form>
+                                <TicketCreateServiceType
+                                    @on-data-saved="ticketServiceTypeFetchRef.fetch()"
+                                />
+                            </template>
+                        </VnSelectDialog>
+                        <VnInput
+                            :label="t('service.quantity')"
+                            v-model.number="row.quantity"
+                            type="number"
+                            min="0"
+                            :info="t('service.quantityInfo')"
+                        />
+                        <VnInput
+                            :label="t('service.price')"
+                            v-model.number="row.price"
+                            type="number"
+                            min="0"
+                        />
+                        <QIcon
+                            name="delete"
+                            size="sm"
+                            class="cursor-pointer"
+                            color="primary"
+                            @click="ticketServiceCrudRef.remove([row])"
+                        >
+                            <QTooltip>
+                                {{ t('service.removeNote') }}
+                            </QTooltip>
+                        </QIcon>
+                    </div>
                     <QIcon
-                        name="delete"
+                        name="add_circle"
+                        class="fill-icon-on-hover q-ml-md"
                         size="sm"
-                        class="cursor-pointer"
                         color="primary"
-                        @click="ticketServiceCrudRef.remove([row])"
+                        @click="ticketServiceCrudRef.insert()"
                     >
                         <QTooltip>
-                            {{ t('service.removeNote') }}
+                            {{ t('service.addService') }}
                         </QTooltip>
                     </QIcon>
-                </div>
-                <QIcon
-                    name="add_circle"
-                    class="fill-icon-on-hover q-ml-md"
-                    size="sm"
-                    color="primary"
-                    @click="ticketServiceCrudRef.insert()"
-                >
-                    <QTooltip>
-                        {{ t('service.addService') }}
-                    </QTooltip>
-                </QIcon>
-            </QCard>
-        </template>
-    </CrudModel>
+                </QCard>
+            </template>
+        </CrudModel>
+    </div>
 </template>
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index eadaa1cab..ceada90a8 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -98,8 +98,8 @@ export default {
                     path: 'service',
                     name: 'TicketService',
                     meta: {
-                        title: 'service',
-                        icon: 'cloud_upload',
+                        title: 'services',
+                        icon: 'vn:services',
                     },
                     component: () => import('src/pages/Ticket/Card/TicketService.vue'),
                 },

From 63a05130e3df039c9b243da9068619682ca4c1e3 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 28 Jun 2024 12:46:14 +0200
Subject: [PATCH 15/21] chore: refs #7436 fix e2e

---
 .../integration/invoiceIn/invoiceInDescriptor.spec.js      | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/test/cypress/integration/invoiceIn/invoiceInDescriptor.spec.js b/test/cypress/integration/invoiceIn/invoiceInDescriptor.spec.js
index ca0b309e9..a2e9998bb 100644
--- a/test/cypress/integration/invoiceIn/invoiceInDescriptor.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInDescriptor.spec.js
@@ -1,8 +1,7 @@
 describe('InvoiceInDescriptor', () => {
     const dialogBtns = '.q-card__actions button';
     const firstDescritorOpt = '.q-menu > .q-list > :nth-child(1) > .q-item__section';
-    const isBookedField =
-        '.q-card:nth-child(3) .vn-label-value:nth-child(5) > .value > span';
+    const isBookedField = '.q-card:nth-child(3) .vn-label-value:nth-child(5) .q-checkbox';
 
     it('should booking and unbooking the invoice properly', () => {
         cy.viewport(1280, 720);
@@ -12,10 +11,10 @@ describe('InvoiceInDescriptor', () => {
         cy.openActionsDescriptor();
         cy.get(firstDescritorOpt).click();
         cy.get(dialogBtns).eq(1).click();
-        cy.get(isBookedField).should('have.attr', 'title', 'true');
+        cy.get(isBookedField).should('have.attr', 'aria-checked', 'true');
 
         cy.get(firstDescritorOpt).click();
         cy.get(dialogBtns).eq(1).click();
-        cy.get(isBookedField).should('have.attr', 'title', 'false');
+        cy.get(isBookedField).should('have.attr', 'aria-checked', 'false');
     });
 });

From 128303939b5d73cdc16b9189f1a28be383f5dd5e Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 1 Jul 2024 07:41:58 +0200
Subject: [PATCH 16/21] fix(ticket router): typo

---
 src/router/modules/ticket.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index c13801fc5..5c03366e0 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -19,7 +19,6 @@ export default {
             'TicketSale',
             'TicketLog',
             'TicketPurchaseRequest',
-            ,
             'TicketService',
         ],
     },

From 7b9e26528a324475dcdf59bb974e0610f9b104d7 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 1 Jul 2024 08:08:41 +0200
Subject: [PATCH 17/21] feat(TicketService): use correct format

---
 src/pages/Ticket/Card/TicketService.vue | 145 ++++++++++++------------
 1 file changed, 74 insertions(+), 71 deletions(-)

diff --git a/src/pages/Ticket/Card/TicketService.vue b/src/pages/Ticket/Card/TicketService.vue
index bacad697e..5d9688834 100644
--- a/src/pages/Ticket/Card/TicketService.vue
+++ b/src/pages/Ticket/Card/TicketService.vue
@@ -10,17 +10,16 @@ import TicketCreateServiceType from './TicketCreateServiceType.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
 import { useArrayData } from 'src/composables/useArrayData';
-import { useStateStore } from 'stores/useStateStore';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 
-const stateStore = useStateStore();
 const route = useRoute();
 const router = useRouter();
 const { t } = useI18n();
 const ticketServiceTypeFetchRef = ref(null);
 const ticketServiceCrudRef = ref(null);
 const ticketServiceOptions = ref([]);
+const selected = ref([]);
 const arrayData = useArrayData('TicketNotes');
 const { store } = arrayData;
 const { notify } = useNotify();
@@ -28,11 +27,6 @@ const { notify } = useNotify();
 const selectedServices = ref(new Set());
 const defaultTaxClass = ref(null);
 
-const toggleCheckSelection = (id) => {
-    if (selectedServices.value.has(id)) selectedServices.value.delete(id);
-    else selectedServices.value.add(id);
-};
-
 const crudModelFilter = computed(() => ({
     where: { ticketFk: route.params.id },
 }));
@@ -50,6 +44,8 @@ watch(
     }
 );
 
+onMounted(async () => await getDefaultTaxClass());
+
 const createRefund = async () => {
     try {
         if (!selectedServices.value.size) return;
@@ -88,7 +84,29 @@ const getDefaultTaxClass = async () => {
     }
 };
 
-onMounted(async () => await getDefaultTaxClass());
+const columns = computed(() => [
+    {
+        name: 'description',
+        label: t('service.description'),
+        field: (row) => row.ticketServiceTypeFk,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'quantity',
+        label: t('service.quantity'),
+        field: (row) => row.quantity,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'price',
+        label: t('service.price'),
+        field: (row) => row.price,
+        sortable: true,
+        align: 'left',
+    },
+]);
 </script>
 
 <template>
@@ -98,41 +116,37 @@ onMounted(async () => await getDefaultTaxClass());
         auto-load
         url="TicketServiceTypes"
     />
-    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
-        <QBtn
-            color="primary"
-            :label="t('service.pay')"
-            :disabled="!selectedServices.size"
-            @click.stop="createRefund()"
-        />
-    </Teleport>
-    <div class="flex justify-center">
-        <CrudModel
-            ref="ticketServiceCrudRef"
-            data-key="TicketService"
-            url="TicketServices"
-            model="TicketService"
-            :filter="crudModelFilter"
-            :data-required="crudModelRequiredData"
-            :default-remove="false"
-            auto-load
-            style="max-width: 800px"
-        >
-            <template #body="{ rows }">
-                <QCard class="q-px-lg q-py-md">
-                    <div
-                        v-for="(row, index) in rows"
-                        :key="index"
-                        class="q-mb-md row items-center q-gutter-x-md"
-                    >
-                        <QCheckbox
-                            size="sm"
-                            @update:model-value="toggleCheckSelection(row.id)"
-                            :model-value="selectedServices.has(row.id)"
-                            :toggle-indeterminate="false"
-                        />
+    <CrudModel
+        ref="ticketServiceCrudRef"
+        data-key="TicketService"
+        url="TicketServices"
+        model="TicketService"
+        :filter="crudModelFilter"
+        :data-required="crudModelRequiredData"
+        auto-load
+        v-model:selected="selected"
+    >
+        <template #moreBeforeActions>
+            <QBtn
+                color="primary"
+                :label="t('service.pay')"
+                :disabled="!selectedServices.size"
+                @click.stop="createRefund()"
+            />
+        </template>
+        <template #body="{ rows }">
+            <QTable
+                :columns="columns"
+                :rows="rows"
+                row-key="$index"
+                selection="multiple"
+                v-model:selected="selected"
+                table-header-class="text-left"
+            >
+                <template #body-cell-description="{ row, col }">
+                    <QTd auto-width>
                         <VnSelectDialog
-                            :label="t('service.description')"
+                            :label="col.label"
                             v-model="row.ticketServiceTypeFk"
                             :options="ticketServiceOptions"
                             option-label="name"
@@ -145,44 +159,33 @@ onMounted(async () => await getDefaultTaxClass());
                                 />
                             </template>
                         </VnSelectDialog>
+                    </QTd>
+                </template>
+                <template #body-cell-quantity="{ row, col }">
+                    <QTd auto-width>
                         <VnInput
-                            :label="t('service.quantity')"
+                            :label="col.label"
                             v-model.number="row.quantity"
                             type="number"
                             min="0"
                             :info="t('service.quantityInfo')"
                         />
+                    </QTd>
+                </template>
+                <template #body-cell-price="{ row, col }">
+                    <QTd auto-width>
                         <VnInput
-                            :label="t('service.price')"
+                            :label="col.label"
                             v-model.number="row.price"
                             type="number"
                             min="0"
                         />
-                        <QIcon
-                            name="delete"
-                            size="sm"
-                            class="cursor-pointer"
-                            color="primary"
-                            @click="ticketServiceCrudRef.remove([row])"
-                        >
-                            <QTooltip>
-                                {{ t('service.removeNote') }}
-                            </QTooltip>
-                        </QIcon>
-                    </div>
-                    <QIcon
-                        name="add_circle"
-                        class="fill-icon-on-hover q-ml-md"
-                        size="sm"
-                        color="primary"
-                        @click="ticketServiceCrudRef.insert()"
-                    >
-                        <QTooltip>
-                            {{ t('service.addService') }}
-                        </QTooltip>
-                    </QIcon>
-                </QCard>
-            </template>
-        </CrudModel>
-    </div>
+                    </QTd>
+                </template>
+            </QTable>
+        </template>
+    </CrudModel>
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <QBtn fab color="primary" icon="add" @click="ticketServiceCrudRef.insert()" />
+    </QPageSticky>
 </template>

From 3b18375cdbc1417e7080584b0dbba15463b47d46 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 1 Jul 2024 08:13:49 +0200
Subject: [PATCH 18/21] fix(TicketService): pay use selected

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

diff --git a/src/pages/Ticket/Card/TicketService.vue b/src/pages/Ticket/Card/TicketService.vue
index 5d9688834..1ec072dd2 100644
--- a/src/pages/Ticket/Card/TicketService.vue
+++ b/src/pages/Ticket/Card/TicketService.vue
@@ -19,12 +19,11 @@ const { t } = useI18n();
 const ticketServiceTypeFetchRef = ref(null);
 const ticketServiceCrudRef = ref(null);
 const ticketServiceOptions = ref([]);
-const selected = ref([]);
 const arrayData = useArrayData('TicketNotes');
 const { store } = arrayData;
 const { notify } = useNotify();
 
-const selectedServices = ref(new Set());
+const selected = ref([]);
 const defaultTaxClass = ref(null);
 
 const crudModelFilter = computed(() => ({
@@ -48,10 +47,10 @@ onMounted(async () => await getDefaultTaxClass());
 
 const createRefund = async () => {
     try {
-        if (!selectedServices.value.size) return;
+        if (!selected.value.length) return;
 
         const params = {
-            servicesIds: Array.from(selectedServices.value),
+            servicesIds: selected.value.map((s) => s.id),
             withWarehouse: false,
             negative: true,
         };
@@ -130,7 +129,7 @@ const columns = computed(() => [
             <QBtn
                 color="primary"
                 :label="t('service.pay')"
-                :disabled="!selectedServices.size"
+                :disabled="!selected.length"
                 @click.stop="createRefund()"
             />
         </template>

From a4a64eebb47fe9a6b77226fc4192d528928a3e2d Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Mon, 1 Jul 2024 09:18:16 +0200
Subject: [PATCH 19/21] fix: refs #7129 fix e2e

---
 .../integration/agency/agencyWorkCenter.spec.js        | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/test/cypress/integration/agency/agencyWorkCenter.spec.js b/test/cypress/integration/agency/agencyWorkCenter.spec.js
index 8349260ee..6d33dbc39 100644
--- a/test/cypress/integration/agency/agencyWorkCenter.spec.js
+++ b/test/cypress/integration/agency/agencyWorkCenter.spec.js
@@ -2,13 +2,10 @@ describe('AgencyWorkCenter', () => {
     beforeEach(() => {
         cy.viewport(1920, 1080);
         cy.login('developer');
-        cy.visit(`/#/agency`);
+        cy.visit(`/#/agency/11/workCenter`);
     });
 
     it('assign workCenter', () => {
-        cy.visit(`/#/agency`);
-        cy.get(':nth-child(1) > :nth-child(1) > .card-list-body > .list-items').click();
-        cy.get('[href="#/agency/11/workCenter"] > .q-item__section--main').click();
         cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
         cy.get(
             '.vn-row > .q-field > .q-field__inner > .q-field__control > .q-field__control-container'
@@ -17,8 +14,6 @@ describe('AgencyWorkCenter', () => {
     });
 
     it('delete workCenter', () => {
-        cy.get(':nth-child(1) > :nth-child(1) > .card-list-body > .list-items').click();
-        cy.get('[href="#/agency/11/workCenter"] > .q-item__section--main').click();
         cy.get('.q-item__section--side > .q-btn > .q-btn__content > .q-icon').click();
         cy.get('.q-notification__message').should(
             'have.text',
@@ -27,9 +22,6 @@ describe('AgencyWorkCenter', () => {
     });
 
     it('error on duplicate workCenter', () => {
-        cy.visit(`/#/agency`);
-        cy.get(':nth-child(1) > :nth-child(1) > .card-list-body > .list-items').click();
-        cy.get('[href="#/agency/11/workCenter"] > .q-item__section--main').click();
         cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
         cy.get(
             '.vn-row > .q-field > .q-field__inner > .q-field__control > .q-field__control-container'

From 731169053c3fe78bd41a6b767023d47fbbc51224 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 1 Jul 2024 09:29:55 +0200
Subject: [PATCH 20/21] test: fix vnSearchbar adapt to vnTable

---
 test/cypress/integration/vnSearchBar.spec.js | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/test/cypress/integration/vnSearchBar.spec.js b/test/cypress/integration/vnSearchBar.spec.js
index f1f3a9e82..580199bc3 100644
--- a/test/cypress/integration/vnSearchBar.spec.js
+++ b/test/cypress/integration/vnSearchBar.spec.js
@@ -3,13 +3,10 @@ describe('VnSearchBar', () => {
     const employeeId = ' #1';
     const salesPersonId = ' #18';
     const idGap = '.q-item > .q-item__label';
-    const cardList = '.vn-card-list';
-
-    let url;
+    const vnTableRow = '.q-virtual-scroll__content';
     beforeEach(() => {
         cy.login('developer');
         cy.visit('#/customer/list');
-        cy.url().then((currentUrl) => (url = currentUrl));
     });
 
     it('should redirect to customer summary page', () => {
@@ -19,12 +16,12 @@ describe('VnSearchBar', () => {
 
     it('should stay on the list page if there are several results or none', () => {
         cy.writeSearchbar('salesA{enter}');
-        checkCardListAndUrl(2);
+        checkTableLength(2);
 
         cy.clearSearchbar();
 
         cy.writeSearchbar('0{enter}');
-        checkCardListAndUrl(0);
+        checkTableLength(0);
     });
 
     const searchAndCheck = (searchTerm, expectedText) => {
@@ -33,10 +30,7 @@ describe('VnSearchBar', () => {
         cy.get(idGap).should('have.text', expectedText);
     };
 
-    const checkCardListAndUrl = (expectedLength) => {
-        cy.get(cardList).then(($cardList) => {
-            expect($cardList.find('.q-card').length).to.equal(expectedLength);
-            cy.url().then((currentUrl) => expect(currentUrl).to.contain(url));
-        });
+    const checkTableLength = (expectedLength) => {
+        cy.get(vnTableRow).find('tr').should('have.length', expectedLength);
     };
 });

From ae713213394796e34ba0d4a5cf0007fa986eac5b Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 1 Jul 2024 14:43:39 +0200
Subject: [PATCH 21/21] fix: map selected

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

diff --git a/src/pages/Ticket/Card/TicketService.vue b/src/pages/Ticket/Card/TicketService.vue
index 1ec072dd2..4cc8207ef 100644
--- a/src/pages/Ticket/Card/TicketService.vue
+++ b/src/pages/Ticket/Card/TicketService.vue
@@ -50,7 +50,7 @@ const createRefund = async () => {
         if (!selected.value.length) return;
 
         const params = {
-            servicesIds: selected.value.map((s) => s.id),
+            servicesIds: selected.value.map((s) => +s.ticketFk),
             withWarehouse: false,
             negative: true,
         };