From 4fa311120dc4d9e799deacc6a8a9b6a72a5d45a1 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 8 Apr 2024 10:11:50 +0200
Subject: [PATCH 01/42] feat: refs #6480 hide if no content

---
 src/components/CrudModel.vue       | 75 ++++++++++++++++--------------
 src/components/common/VnCard.vue   | 20 ++++++++
 src/components/ui/VnSubToolbar.vue |  5 +-
 3 files changed, 62 insertions(+), 38 deletions(-)
 create mode 100644 src/components/common/VnCard.vue

diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index c8fa5809c..cb4011c4f 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -9,6 +9,7 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import SkeletonTable from 'components/ui/SkeletonTable.vue';
 import { tMobile } from 'src/composables/tMobile';
+import VnSubToolbar from './ui/VnSubToolbar.vue';
 
 const quasar = useQuasar();
 const stateStore = useStateStore();
@@ -258,6 +259,44 @@ watch(formUrl, async () => {
 });
 </script>
 <template>
+    <VnSubToolbar class="q-mb-md">
+        <template #st-actions>
+            <QBtnGroup push style="column-gap: 10px">
+                <slot name="moreBeforeActions" />
+                <QBtn
+                    :label="tMobile('globals.remove')"
+                    color="primary"
+                    icon="delete"
+                    flat
+                    @click="remove(selected)"
+                    :disable="!selected?.length"
+                    :title="t('globals.remove')"
+                    v-if="$props.defaultRemove"
+                />
+                <QBtn
+                    :label="tMobile('globals.reset')"
+                    color="primary"
+                    icon="restart_alt"
+                    flat
+                    @click="reset"
+                    :disable="!hasChanges"
+                    :title="t('globals.reset')"
+                    v-if="$props.defaultReset"
+                />
+                <QBtn
+                    :label="tMobile('globals.save')"
+                    ref="saveButtonRef"
+                    color="primary"
+                    icon="save"
+                    @click="onSubmit"
+                    :disable="!hasChanges"
+                    :title="t('globals.save')"
+                    v-if="$props.defaultSave"
+                />
+                <slot name="moreAfterActions" />
+            </QBtnGroup>
+        </template>
+    </VnSubToolbar>
     <VnPaginate
         :url="url"
         v-bind="$attrs"
@@ -275,42 +314,6 @@ watch(formUrl, async () => {
         </template>
     </VnPaginate>
     <SkeletonTable v-if="!formData" />
-    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
-        <QBtnGroup push style="column-gap: 10px">
-            <slot name="moreBeforeActions" />
-            <QBtn
-                :label="tMobile('globals.remove')"
-                color="primary"
-                icon="delete"
-                flat
-                @click="remove(selected)"
-                :disable="!selected?.length"
-                :title="t('globals.remove')"
-                v-if="$props.defaultRemove"
-            />
-            <QBtn
-                :label="tMobile('globals.reset')"
-                color="primary"
-                icon="restart_alt"
-                flat
-                @click="reset"
-                :disable="!hasChanges"
-                :title="t('globals.reset')"
-                v-if="$props.defaultReset"
-            />
-            <QBtn
-                :label="tMobile('globals.save')"
-                ref="saveButtonRef"
-                color="primary"
-                icon="save"
-                @click="onSubmit"
-                :disable="!hasChanges"
-                :title="t('globals.save')"
-                v-if="$props.defaultSave"
-            />
-            <slot name="moreAfterActions" />
-        </QBtnGroup>
-    </Teleport>
     <QInnerLoading
         :showing="isLoading"
         :label="t && t('globals.pleaseWait')"
diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
new file mode 100644
index 000000000..7c57fa18a
--- /dev/null
+++ b/src/components/common/VnCard.vue
@@ -0,0 +1,20 @@
+<script setup>
+import useCardSize from 'src/composables/useCardSize';
+import VnSubToolbar from 'src/components/common/VnSubToolbar.vue';
+defineProps({
+    component: {
+        type: String,
+        required: true,
+    },
+});
+</script>
+<template>
+    <QPageContainer>
+        <QPage>
+            <VnSubToolbar />
+            <div :class="useCardSize()">
+                <RouterView :name="component"> </RouterView>
+            </div>
+        </QPage>
+    </QPageContainer>
+</template>
diff --git a/src/components/ui/VnSubToolbar.vue b/src/components/ui/VnSubToolbar.vue
index 22eebdf36..617c3a9d6 100644
--- a/src/components/ui/VnSubToolbar.vue
+++ b/src/components/ui/VnSubToolbar.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { onMounted, onUnmounted } from 'vue';
 import { useStateStore } from 'stores/useStateStore';
-
+// Falta si los divs tienen contenido o remplazar los teleport y usar siempre slots
 const stateStore = useStateStore();
 
 onMounted(() => {
@@ -14,7 +14,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <QToolbar class="bg-vn-section-color justify-end sticky">
+    <QToolbar class="justify-end sticky" v-if="$slots['st-data'] || $slots['st-actions']">
         <slot name="st-data">
             <div id="st-data"></div>
         </slot>
@@ -27,6 +27,7 @@ onUnmounted(() => {
 <style lang="scss">
 .q-toolbar {
     background: var(--vn-section-color);
+    border-radius: 2px;
 }
 </style>
 <style lang="scss" scoped>

From dfac40adb3d85877889afb5451ab2ff601d81f32 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 8 Apr 2024 10:27:37 +0200
Subject: [PATCH 02/42] feat: refs #6480 vnCard

---
 src/components/common/VnCard.vue           | 10 ++--------
 src/pages/InvoiceIn/Card/InvoiceInCard.vue | 15 +++------------
 2 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index 7c57fa18a..e583bec20 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -1,19 +1,13 @@
 <script setup>
 import useCardSize from 'src/composables/useCardSize';
-import VnSubToolbar from 'src/components/common/VnSubToolbar.vue';
-defineProps({
-    component: {
-        type: String,
-        required: true,
-    },
-});
+import VnSubToolbar from '../ui/VnSubToolbar.vue';
 </script>
 <template>
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
             <div :class="useCardSize()">
-                <RouterView :name="component"> </RouterView>
+                <RouterView />
             </div>
         </QPage>
     </QPageContainer>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInCard.vue b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
index 0de31c183..0f7815c0f 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInCard.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
@@ -4,11 +4,10 @@ import { useStateStore } from 'stores/useStateStore';
 import InvoiceInDescriptor from './InvoiceInDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { onMounted, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import useCardSize from 'src/composables/useCardSize';
+import VnCard from 'components/common/VnCard.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -72,18 +71,10 @@ watch(
             <LeftMenu source="card" />
         </QScrollArea>
     </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard />
 </template>
-
 <i18n>
     es:
         Search invoice: Buscar factura recibida
         You can search by invoice reference: Puedes buscar por referencia de la factura
-    </i18n>
+</i18n>

From 5f502c2aad88b8e82e107295c857727d01c2bf94 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 10 Apr 2024 20:52:45 +0200
Subject: [PATCH 03/42] #6480: POC Claims

---
 src/components/common/VnCardContainer.vue | 14 +++++++++
 src/components/common/VnRightMenu.vue     | 26 ++++++++++++++++
 src/components/common/VnTeleport.vue      | 17 ++++++++++
 src/layouts/ViewLayout.vue                | 16 ++++++++++
 src/pages/Claim/Card/ClaimAction.vue      | 26 +++-------------
 src/pages/Claim/Card/ClaimCard.vue        | 12 ++-----
 src/pages/Claim/Card/ClaimLines.vue       | 38 +++++++++++------------
 src/pages/Claim/ClaimMain.vue             | 14 ++-------
 src/stores/useStateStore.js               |  1 +
 9 files changed, 101 insertions(+), 63 deletions(-)
 create mode 100644 src/components/common/VnCardContainer.vue
 create mode 100644 src/components/common/VnRightMenu.vue
 create mode 100644 src/components/common/VnTeleport.vue
 create mode 100644 src/layouts/ViewLayout.vue

diff --git a/src/components/common/VnCardContainer.vue b/src/components/common/VnCardContainer.vue
new file mode 100644
index 000000000..1fbc5595c
--- /dev/null
+++ b/src/components/common/VnCardContainer.vue
@@ -0,0 +1,14 @@
+<script setup>
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';
+</script>
+<template>
+    <QPageContainer>
+        <QPage>
+            <VnSubToolbar />
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
+        </QPage>
+    </QPageContainer>
+</template>
diff --git a/src/components/common/VnRightMenu.vue b/src/components/common/VnRightMenu.vue
new file mode 100644
index 000000000..f5065478f
--- /dev/null
+++ b/src/components/common/VnRightMenu.vue
@@ -0,0 +1,26 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+
+const stateStore = useStateStore();
+</script>
+<template>
+    <template v-if="stateStore.$state.isMounted">
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
+</template>
diff --git a/src/components/common/VnTeleport.vue b/src/components/common/VnTeleport.vue
new file mode 100644
index 000000000..4f773e8bf
--- /dev/null
+++ b/src/components/common/VnTeleport.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+defineProps({
+    to: {
+        type: String,
+        required: true,
+    },
+});
+const stateStore = useStateStore();
+</script>
+<template>
+    <template v-if="stateStore.$state.isMounted">
+        <Teleport :to="to">
+            <slot name="body"></slot>
+        </Teleport>
+    </template>
+</template>
diff --git a/src/layouts/ViewLayout.vue b/src/layouts/ViewLayout.vue
new file mode 100644
index 000000000..4812e7a83
--- /dev/null
+++ b/src/layouts/ViewLayout.vue
@@ -0,0 +1,16 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+import LeftMenu from 'components/LeftMenu.vue';
+
+const stateStore = useStateStore();
+</script>
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
+            <LeftMenu />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
+</template>
diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index fa16e6af4..56f746f97 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -2,7 +2,7 @@
 import { ref, computed, onMounted } from 'vue';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 import axios from 'axios';
 import { useStateStore } from 'src/stores/useStateStore';
 import { toDate, toPercentage, toCurrency } from 'filters/index';
@@ -10,14 +10,12 @@ import { tMobile } from 'src/composables/tMobile';
 import CrudModel from 'src/components/CrudModel.vue';
 import FetchData from 'src/components/FetchData.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import VnRightMenu from 'src/components/common/VnRightMenu.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import { useArrayData } from 'composables/useArrayData';
-
 const { t } = useI18n();
 const quasar = useQuasar();
 const route = useRoute();
-const router = useRouter();
 const stateStore = computed(() => useStateStore());
 const claim = ref(null);
 const claimRef = ref();
@@ -193,23 +191,7 @@ async function importToNewRefundTicket() {
         auto-load
         @on-fetch="(data) => (destinationTypes = data)"
     />
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
+    <VnRightMenu />
     <QDrawer
         v-model="stateStore.rightDrawer"
         side="right"
@@ -267,7 +249,7 @@ async function importToNewRefundTicket() {
             />
         </QCard>
     </QDrawer>
-    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport>
+    <!-- <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport> -->
     <CrudModel
         v-if="claim"
         data-key="ClaimEnds"
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index 78eec9e8d..a007609ba 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -4,8 +4,7 @@ import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
 import ClaimDescriptor from './ClaimDescriptor.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
+import VnCardContainer from 'src/components/common/VnCardContainer.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -26,14 +25,7 @@ const { t } = useI18n();
             <LeftMenu source="card" />
         </QScrollArea>
     </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCardContainer />
 </template>
 
 <i18n>
diff --git a/src/pages/Claim/Card/ClaimLines.vue b/src/pages/Claim/Card/ClaimLines.vue
index 89703c64b..06918f6ca 100644
--- a/src/pages/Claim/Card/ClaimLines.vue
+++ b/src/pages/Claim/Card/ClaimLines.vue
@@ -4,12 +4,12 @@ import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
-import { useStateStore } from 'stores/useStateStore';
 import { useArrayData } from 'composables/useArrayData';
 import { toDate, toCurrency, toPercentage } from 'filters/index';
 import CrudModel from 'components/CrudModel.vue';
 import FetchData from 'components/FetchData.vue';
 import VnDiscount from 'components/common/vnDiscount.vue';
+import VnTeleport from 'components/common/VnTeleport.vue';
 import ClaimLinesImport from './ClaimLinesImport.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
@@ -17,7 +17,6 @@ const quasar = useQuasar();
 const route = useRoute();
 const { t } = useI18n();
 
-const stateStore = useStateStore();
 const arrayData = useArrayData('ClaimLines');
 const store = arrayData.store;
 
@@ -157,24 +156,25 @@ function showImportDialog() {
 }
 </script>
 <template>
-    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
-        <div class="row q-gutter-md">
-            <div>
-                {{ t('Amount') }}
-                <QChip :dense="$q.screen.lt.sm" text-color="white">
-                    {{ toCurrency(amount) }}
-                </QChip>
+    <VnTeleport to="#st-data">
+        <template #body>
+            <div class="row q-gutter-md">
+                <div>
+                    {{ t('Amount') }}
+                    <QChip :dense="$q.screen.lt.sm" text-color="white">
+                        {{ toCurrency(amount) }}
+                    </QChip>
+                </div>
+                <QSeparator dark vertical />
+                <div>
+                    {{ t('Amount Claimed') }}
+                    <QChip color="positive" :dense="$q.screen.lt.sm">
+                        {{ toCurrency(amountClaimed) }}
+                    </QChip>
+                </div>
             </div>
-            <QSeparator dark vertical />
-            <div>
-                {{ t('Amount Claimed') }}
-                <QChip color="positive" :dense="$q.screen.lt.sm">
-                    {{ toCurrency(amountClaimed) }}
-                </QChip>
-            </div>
-        </div>
-    </Teleport>
-
+        </template>
+    </VnTeleport>
     <FetchData
         :url="`Claims/${route.params.id}`"
         :filter="claimFilter"
diff --git a/src/pages/Claim/ClaimMain.vue b/src/pages/Claim/ClaimMain.vue
index f0dc2e500..6a294fe88 100644
--- a/src/pages/Claim/ClaimMain.vue
+++ b/src/pages/Claim/ClaimMain.vue
@@ -1,17 +1,7 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'components/LeftMenu.vue';
-
-const stateStore = useStateStore();
+import ViewLayout from 'src/layouts/ViewLayout.vue';
 </script>
 
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
+    <ViewLayout></ViewLayout>
 </template>
diff --git a/src/stores/useStateStore.js b/src/stores/useStateStore.js
index 328df9978..0367c125a 100644
--- a/src/stores/useStateStore.js
+++ b/src/stores/useStateStore.js
@@ -40,6 +40,7 @@ export const useStateStore = defineStore('stateStore', () => {
     }
 
     return {
+        isMounted,
         leftDrawer,
         rightDrawer,
         setMounted,

From 96d3073f679ccc3127db522de305bf99db48ddb7 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 11 Apr 2024 09:01:44 +0200
Subject: [PATCH 04/42] Revert "Merge branch '6480-improveCard' of
 https://gitea.verdnatura.es/verdnatura/salix-front into 6480-improveCard"

This reverts commit 984539b70fecbdbb2cc1042c51c846c59d5ed65c, reversing
changes made to d7ab6e8a02e8e7e36b325bb93712bca29ddebd40.
---
 src/components/common/VnCardContainer.vue | 14 ---------
 src/components/common/VnRightMenu.vue     | 26 ----------------
 src/components/common/VnTeleport.vue      | 17 ----------
 src/layouts/ViewLayout.vue                | 16 ----------
 src/pages/Claim/Card/ClaimAction.vue      | 26 +++++++++++++---
 src/pages/Claim/Card/ClaimCard.vue        | 12 +++++--
 src/pages/Claim/Card/ClaimLines.vue       | 38 +++++++++++------------
 src/pages/Claim/ClaimMain.vue             | 14 +++++++--
 src/stores/useStateStore.js               |  1 -
 9 files changed, 63 insertions(+), 101 deletions(-)
 delete mode 100644 src/components/common/VnCardContainer.vue
 delete mode 100644 src/components/common/VnRightMenu.vue
 delete mode 100644 src/components/common/VnTeleport.vue
 delete mode 100644 src/layouts/ViewLayout.vue

diff --git a/src/components/common/VnCardContainer.vue b/src/components/common/VnCardContainer.vue
deleted file mode 100644
index 1fbc5595c..000000000
--- a/src/components/common/VnCardContainer.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup>
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
-</script>
-<template>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
-</template>
diff --git a/src/components/common/VnRightMenu.vue b/src/components/common/VnRightMenu.vue
deleted file mode 100644
index f5065478f..000000000
--- a/src/components/common/VnRightMenu.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import { useI18n } from 'vue-i18n';
-const { t } = useI18n();
-
-const stateStore = useStateStore();
-</script>
-<template>
-    <template v-if="stateStore.$state.isMounted">
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
-</template>
diff --git a/src/components/common/VnTeleport.vue b/src/components/common/VnTeleport.vue
deleted file mode 100644
index 4f773e8bf..000000000
--- a/src/components/common/VnTeleport.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-defineProps({
-    to: {
-        type: String,
-        required: true,
-    },
-});
-const stateStore = useStateStore();
-</script>
-<template>
-    <template v-if="stateStore.$state.isMounted">
-        <Teleport :to="to">
-            <slot name="body"></slot>
-        </Teleport>
-    </template>
-</template>
diff --git a/src/layouts/ViewLayout.vue b/src/layouts/ViewLayout.vue
deleted file mode 100644
index 4812e7a83..000000000
--- a/src/layouts/ViewLayout.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index 56f746f97..fa16e6af4 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -2,7 +2,7 @@
 import { ref, computed, onMounted } from 'vue';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { useStateStore } from 'src/stores/useStateStore';
 import { toDate, toPercentage, toCurrency } from 'filters/index';
@@ -10,12 +10,14 @@ import { tMobile } from 'src/composables/tMobile';
 import CrudModel from 'src/components/CrudModel.vue';
 import FetchData from 'src/components/FetchData.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import VnRightMenu from 'src/components/common/VnRightMenu.vue';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import { useArrayData } from 'composables/useArrayData';
+
 const { t } = useI18n();
 const quasar = useQuasar();
 const route = useRoute();
+const router = useRouter();
 const stateStore = computed(() => useStateStore());
 const claim = ref(null);
 const claimRef = ref();
@@ -191,7 +193,23 @@ async function importToNewRefundTicket() {
         auto-load
         @on-fetch="(data) => (destinationTypes = data)"
     />
-    <VnRightMenu />
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
     <QDrawer
         v-model="stateStore.rightDrawer"
         side="right"
@@ -249,7 +267,7 @@ async function importToNewRefundTicket() {
             />
         </QCard>
     </QDrawer>
-    <!-- <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport> -->
+    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport>
     <CrudModel
         v-if="claim"
         data-key="ClaimEnds"
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index a007609ba..78eec9e8d 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -4,7 +4,8 @@ import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
 import ClaimDescriptor from './ClaimDescriptor.vue';
-import VnCardContainer from 'src/components/common/VnCardContainer.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -25,7 +26,14 @@ const { t } = useI18n();
             <LeftMenu source="card" />
         </QScrollArea>
     </QDrawer>
-    <VnCardContainer />
+    <QPageContainer>
+        <QPage>
+            <VnSubToolbar />
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
+        </QPage>
+    </QPageContainer>
 </template>
 
 <i18n>
diff --git a/src/pages/Claim/Card/ClaimLines.vue b/src/pages/Claim/Card/ClaimLines.vue
index 06918f6ca..89703c64b 100644
--- a/src/pages/Claim/Card/ClaimLines.vue
+++ b/src/pages/Claim/Card/ClaimLines.vue
@@ -4,12 +4,12 @@ import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
+import { useStateStore } from 'stores/useStateStore';
 import { useArrayData } from 'composables/useArrayData';
 import { toDate, toCurrency, toPercentage } from 'filters/index';
 import CrudModel from 'components/CrudModel.vue';
 import FetchData from 'components/FetchData.vue';
 import VnDiscount from 'components/common/vnDiscount.vue';
-import VnTeleport from 'components/common/VnTeleport.vue';
 import ClaimLinesImport from './ClaimLinesImport.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
@@ -17,6 +17,7 @@ const quasar = useQuasar();
 const route = useRoute();
 const { t } = useI18n();
 
+const stateStore = useStateStore();
 const arrayData = useArrayData('ClaimLines');
 const store = arrayData.store;
 
@@ -156,25 +157,24 @@ function showImportDialog() {
 }
 </script>
 <template>
-    <VnTeleport to="#st-data">
-        <template #body>
-            <div class="row q-gutter-md">
-                <div>
-                    {{ t('Amount') }}
-                    <QChip :dense="$q.screen.lt.sm" text-color="white">
-                        {{ toCurrency(amount) }}
-                    </QChip>
-                </div>
-                <QSeparator dark vertical />
-                <div>
-                    {{ t('Amount Claimed') }}
-                    <QChip color="positive" :dense="$q.screen.lt.sm">
-                        {{ toCurrency(amountClaimed) }}
-                    </QChip>
-                </div>
+    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
+        <div class="row q-gutter-md">
+            <div>
+                {{ t('Amount') }}
+                <QChip :dense="$q.screen.lt.sm" text-color="white">
+                    {{ toCurrency(amount) }}
+                </QChip>
             </div>
-        </template>
-    </VnTeleport>
+            <QSeparator dark vertical />
+            <div>
+                {{ t('Amount Claimed') }}
+                <QChip color="positive" :dense="$q.screen.lt.sm">
+                    {{ toCurrency(amountClaimed) }}
+                </QChip>
+            </div>
+        </div>
+    </Teleport>
+
     <FetchData
         :url="`Claims/${route.params.id}`"
         :filter="claimFilter"
diff --git a/src/pages/Claim/ClaimMain.vue b/src/pages/Claim/ClaimMain.vue
index 6a294fe88..f0dc2e500 100644
--- a/src/pages/Claim/ClaimMain.vue
+++ b/src/pages/Claim/ClaimMain.vue
@@ -1,7 +1,17 @@
 <script setup>
-import ViewLayout from 'src/layouts/ViewLayout.vue';
+import { useStateStore } from 'stores/useStateStore';
+import LeftMenu from 'components/LeftMenu.vue';
+
+const stateStore = useStateStore();
 </script>
 
 <template>
-    <ViewLayout></ViewLayout>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
+            <LeftMenu />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
 </template>
diff --git a/src/stores/useStateStore.js b/src/stores/useStateStore.js
index 0367c125a..328df9978 100644
--- a/src/stores/useStateStore.js
+++ b/src/stores/useStateStore.js
@@ -40,7 +40,6 @@ export const useStateStore = defineStore('stateStore', () => {
     }
 
     return {
-        isMounted,
         leftDrawer,
         rightDrawer,
         setMounted,

From edf75c8cdde2b61f18d70c5384ee204eedc9d5be Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 11 Apr 2024 09:22:15 +0200
Subject: [PATCH 05/42] feat: refs #6480 check if hasContent or slots

---
 src/components/CrudModel.vue            | 75 ++++++++++++------------
 src/components/common/VnCard.vue        |  2 +-
 src/components/ui/VnSubToolbar.vue      | 23 +++++++-
 src/pages/InvoiceIn/InvoiceInFilter.vue | 77 ++++++++++++-------------
 4 files changed, 93 insertions(+), 84 deletions(-)

diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index cb4011c4f..c8fa5809c 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -9,7 +9,6 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import SkeletonTable from 'components/ui/SkeletonTable.vue';
 import { tMobile } from 'src/composables/tMobile';
-import VnSubToolbar from './ui/VnSubToolbar.vue';
 
 const quasar = useQuasar();
 const stateStore = useStateStore();
@@ -259,44 +258,6 @@ watch(formUrl, async () => {
 });
 </script>
 <template>
-    <VnSubToolbar class="q-mb-md">
-        <template #st-actions>
-            <QBtnGroup push style="column-gap: 10px">
-                <slot name="moreBeforeActions" />
-                <QBtn
-                    :label="tMobile('globals.remove')"
-                    color="primary"
-                    icon="delete"
-                    flat
-                    @click="remove(selected)"
-                    :disable="!selected?.length"
-                    :title="t('globals.remove')"
-                    v-if="$props.defaultRemove"
-                />
-                <QBtn
-                    :label="tMobile('globals.reset')"
-                    color="primary"
-                    icon="restart_alt"
-                    flat
-                    @click="reset"
-                    :disable="!hasChanges"
-                    :title="t('globals.reset')"
-                    v-if="$props.defaultReset"
-                />
-                <QBtn
-                    :label="tMobile('globals.save')"
-                    ref="saveButtonRef"
-                    color="primary"
-                    icon="save"
-                    @click="onSubmit"
-                    :disable="!hasChanges"
-                    :title="t('globals.save')"
-                    v-if="$props.defaultSave"
-                />
-                <slot name="moreAfterActions" />
-            </QBtnGroup>
-        </template>
-    </VnSubToolbar>
     <VnPaginate
         :url="url"
         v-bind="$attrs"
@@ -314,6 +275,42 @@ watch(formUrl, async () => {
         </template>
     </VnPaginate>
     <SkeletonTable v-if="!formData" />
+    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+        <QBtnGroup push style="column-gap: 10px">
+            <slot name="moreBeforeActions" />
+            <QBtn
+                :label="tMobile('globals.remove')"
+                color="primary"
+                icon="delete"
+                flat
+                @click="remove(selected)"
+                :disable="!selected?.length"
+                :title="t('globals.remove')"
+                v-if="$props.defaultRemove"
+            />
+            <QBtn
+                :label="tMobile('globals.reset')"
+                color="primary"
+                icon="restart_alt"
+                flat
+                @click="reset"
+                :disable="!hasChanges"
+                :title="t('globals.reset')"
+                v-if="$props.defaultReset"
+            />
+            <QBtn
+                :label="tMobile('globals.save')"
+                ref="saveButtonRef"
+                color="primary"
+                icon="save"
+                @click="onSubmit"
+                :disable="!hasChanges"
+                :title="t('globals.save')"
+                v-if="$props.defaultSave"
+            />
+            <slot name="moreAfterActions" />
+        </QBtnGroup>
+    </Teleport>
     <QInnerLoading
         :showing="isLoading"
         :label="t && t('globals.pleaseWait')"
diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index e583bec20..05757322d 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -3,9 +3,9 @@ import useCardSize from 'src/composables/useCardSize';
 import VnSubToolbar from '../ui/VnSubToolbar.vue';
 </script>
 <template>
+    <VnSubToolbar />
     <QPageContainer>
         <QPage>
-            <VnSubToolbar />
             <div :class="useCardSize()">
                 <RouterView />
             </div>
diff --git a/src/components/ui/VnSubToolbar.vue b/src/components/ui/VnSubToolbar.vue
index 617c3a9d6..f980bbd65 100644
--- a/src/components/ui/VnSubToolbar.vue
+++ b/src/components/ui/VnSubToolbar.vue
@@ -1,11 +1,25 @@
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { useStateStore } from 'stores/useStateStore';
-// Falta si los divs tienen contenido o remplazar los teleport y usar siempre slots
 const stateStore = useStateStore();
+const actions = ref(null);
+const data = ref(null);
+const opts = { subtree: true, childList: true, attributes: true };
+const hasContent = ref(false);
 
 onMounted(() => {
     stateStore.toggleSubToolbar();
+    actions.value = document.querySelector('#st-actions');
+    data.value = document.querySelector('#st-data');
+
+    // Check if there's content to display
+    const observer = new MutationObserver(
+        () =>
+            (hasContent.value =
+                actions.value.childNodes.length + data.value.childNodes.length)
+    );
+    observer.observe(actions.value, opts);
+    observer.observe(data.value, opts);
 });
 
 onUnmounted(() => {
@@ -14,7 +28,10 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <QToolbar class="justify-end sticky" v-if="$slots['st-data'] || $slots['st-actions']">
+    <QToolbar
+        class="justify-end sticky"
+        v-show="hasContent || $slots['st-actions'] || $slots['st-data']"
+    >
         <slot name="st-data">
             <div id="st-data"></div>
         </slot>
diff --git a/src/pages/InvoiceIn/InvoiceInFilter.vue b/src/pages/InvoiceIn/InvoiceInFilter.vue
index 0e53fbed7..9b7c77f9d 100644
--- a/src/pages/InvoiceIn/InvoiceInFilter.vue
+++ b/src/pages/InvoiceIn/InvoiceInFilter.vue
@@ -7,7 +7,6 @@ import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
-import { useCapitalize } from 'src/composables/useCapitalize';
 import VnCurrency from 'src/components/common/VnCurrency.vue';
 
 const { t } = useI18n();
@@ -70,19 +69,15 @@ const suppliersRef = ref();
                 </QItemSection>
             </QItem>
             <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            :label="t('From')"
-                            v-model="params.from"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate :label="t('To')" v-model="params.to" is-outlined />
-                    </QItemSection>
-                </QItem>
+                <QItemSection>
+                    <VnInputDate :label="t('From')" v-model="params.from" is-outlined />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate :label="t('To')" v-model="params.to" is-outlined />
+                </QItemSection>
+            </QItem>
             <QItem>
                 <QItemSection>
                     <VnInput
@@ -114,33 +109,33 @@ const suppliersRef = ref();
             </QItem>
             <QExpansionItem :label="t('More options')" expand-separator>
                 <QItem>
-                <QItemSection>
-                    <VnInput
-                        :label="t('params.fi')"
-                        v-model="params.fi"
-                        is-outlined
-                        lazy-rules
-                    >
-                        <template #prepend>
-                            <QIcon name="badge" size="sm"></QIcon>
-                        </template>
-                    </VnInput>
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInput
-                        :label="t('params.serialNumber')"
-                        v-model="params.serialNumber"
-                        is-outlined
-                        lazy-rules
-                    >
-                        <template #prepend>
-                            <QIcon name="badge" size="sm"></QIcon>
-                        </template>
-                    </VnInput>
-                </QItemSection>
-            </QItem>
+                    <QItemSection>
+                        <VnInput
+                            :label="t('params.fi')"
+                            v-model="params.fi"
+                            is-outlined
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <QIcon name="badge" size="sm"></QIcon>
+                            </template>
+                        </VnInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInput
+                            :label="t('params.serialNumber')"
+                            v-model="params.serialNumber"
+                            is-outlined
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <QIcon name="badge" size="sm"></QIcon>
+                            </template>
+                        </VnInput>
+                    </QItemSection>
+                </QItem>
                 <QItem>
                     <QItemSection>
                         <VnInput

From bfa9dc9634b49a3daeb189b2fc90c903da75dd71 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 11 Apr 2024 12:23:00 +0200
Subject: [PATCH 06/42] feat: refs #6480 include drawer

---
 src/components/common/VnCard.vue           | 17 ++++++++++++++++-
 src/components/ui/VnSubToolbar.vue         |  6 ++++--
 src/pages/InvoiceIn/Card/InvoiceInCard.vue | 12 ++----------
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index 05757322d..38daadede 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -1,11 +1,26 @@
 <script setup>
 import useCardSize from 'src/composables/useCardSize';
 import VnSubToolbar from '../ui/VnSubToolbar.vue';
+import LeftMenu from 'components/LeftMenu.vue';
+import { useStateStore } from 'stores/useStateStore';
+
+defineProps({
+    descriptor: { type: Object, required: true },
+});
+
+const stateStore = useStateStore();
 </script>
 <template>
-    <VnSubToolbar />
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
+            <component :is="descriptor" />
+            <QSeparator />
+            <LeftMenu source="card" />
+        </QScrollArea>
+    </QDrawer>
     <QPageContainer>
         <QPage>
+            <VnSubToolbar />
             <div :class="useCardSize()">
                 <RouterView />
             </div>
diff --git a/src/components/ui/VnSubToolbar.vue b/src/components/ui/VnSubToolbar.vue
index f980bbd65..52fe8834a 100644
--- a/src/components/ui/VnSubToolbar.vue
+++ b/src/components/ui/VnSubToolbar.vue
@@ -12,14 +12,16 @@ onMounted(() => {
     actions.value = document.querySelector('#st-actions');
     data.value = document.querySelector('#st-data');
 
+    if (!actions.value && !data.value) return;
+
     // Check if there's content to display
     const observer = new MutationObserver(
         () =>
             (hasContent.value =
                 actions.value.childNodes.length + data.value.childNodes.length)
     );
-    observer.observe(actions.value, opts);
-    observer.observe(data.value, opts);
+    if (actions.value) observer.observe(actions.value, opts);
+    if (data.value) observer.observe(data.value, opts);
 });
 
 onUnmounted(() => {
diff --git a/src/pages/InvoiceIn/Card/InvoiceInCard.vue b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
index 0f7815c0f..062e7a81a 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInCard.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
@@ -2,7 +2,6 @@
 import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import InvoiceInDescriptor from './InvoiceInDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { onMounted, watch } from 'vue';
@@ -47,7 +46,7 @@ const arrayData = useArrayData('InvoiceIn', {
 onMounted(async () => await arrayData.fetch({ append: false }));
 watch(
     () => route.params.id,
-    async (newId, oldId) => {
+    async (newId) => {
         if (newId) {
             arrayData.store.url = `InvoiceIns/${newId}`;
             await arrayData.fetch({ append: false });
@@ -64,14 +63,7 @@ watch(
             :info="t('You can search by invoice reference')"
         />
     </Teleport>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <InvoiceInDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <VnCard />
+    <VnCard :descriptor="InvoiceInDescriptor" />
 </template>
 <i18n>
     es:

From 170747371ae3571a51f574d8454180f91cbb8bcf Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 11 Apr 2024 12:27:58 +0200
Subject: [PATCH 07/42] fix: refs #6480 css

---
 src/components/ui/VnSubToolbar.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ui/VnSubToolbar.vue b/src/components/ui/VnSubToolbar.vue
index 52fe8834a..c0d129613 100644
--- a/src/components/ui/VnSubToolbar.vue
+++ b/src/components/ui/VnSubToolbar.vue
@@ -46,7 +46,6 @@ onUnmounted(() => {
 <style lang="scss">
 .q-toolbar {
     background: var(--vn-section-color);
-    border-radius: 2px;
 }
 </style>
 <style lang="scss" scoped>

From 00dfa171b02f014611c3bacc16149a966284277b Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 15 Apr 2024 15:37:41 -0300
Subject: [PATCH 08/42] WIP

---
 src/i18n/locale/en.yml            |    4 +
 src/i18n/locale/es.yml            | 2294 +++++++++++++++--------------
 src/pages/Item/ItemFixedPrice.vue |  492 +++++++
 src/router/modules/item.js        |   11 +-
 4 files changed, 1655 insertions(+), 1146 deletions(-)
 create mode 100644 src/pages/Item/ItemFixedPrice.vue

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index ef9c2c4cd..051b9033a 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -1097,6 +1097,7 @@ item:
         diary: Diary
         tags: Tags
         create: Create
+        fixedPrice: Fixed prices
     descriptor:
         item: Item
         buyer: Buyer
@@ -1124,6 +1125,9 @@ item:
         stemMultiplier: Multiplier
         producer: Producer
         landed: Landed
+    fixedPrice:
+        itemId: Item ID
+        groupingPrice: Grouping price
 components:
     topbar: {}
     userPanel:
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index d0de39ebc..dce4eea05 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -1,1149 +1,1153 @@
 globals:
-  lang:
-    es: Español
-    en: Inglés
-  language: Idioma
-  entity: Entidad
-  user: Usuario
-  details: Detalles
-  collapseMenu: Contraer menú lateral
-  backToDashboard: Volver al tablón
-  notifications: Notificaciones
-  userPanel: Panel de usuario
-  modules: Módulos
-  pinnedModules: Módulos fijados
-  darkMode: Modo oscuro
-  logOut: Cerrar sesión
-  date: Fecha
-  dataSaved: Datos guardados
-  dataDeleted: Datos eliminados
-  search: Buscar
-  changes: Cambios
-  dataCreated: Datos creados
-  add: Añadir
-  create: Crear
-  edit: Modificar
-  save: Guardar
-  remove: Eliminar
-  reset: Restaurar
-  close: Cerrar
-  cancel: Cancelar
-  confirm: Confirmar
-  assign: Asignar
-  back: Volver
-  yes: Si
-  no: No
-  noChanges: Sin cambios que guardar
-  changesToSave: Tienes cambios pendientes de guardar
-  confirmRemove: Vas a eliminar este registro. ¿Continuar?
-  rowAdded: Fila añadida
-  rowRemoved: Fila eliminada
-  pleaseWait: Por favor espera...
-  noPinnedModules: No has fijado ningún módulo
-  summary:
-    basicData: Datos básicos
-  today: Hoy
-  yesterday: Ayer
-  dateFormat: es-ES
-  noSelectedRows: No tienes ninguna línea seleccionada
-  microsip: Abrir en MicroSIP
-  downloadCSVSuccess: Descarga de CSV exitosa
-  reference: Referencia
-  agency: Agencia
-  wareHouseOut: Alm. salida
-  wareHouseIn: Alm. entrada
-  landed: F. entrega
-  shipped: F. envío
-  totalEntries: Ent. totales
-  amount: Importe
-  packages: Bultos
-  download: Descargar
-  selectRows: 'Seleccionar las { numberRows } filas(s)'
-  allRows: 'Todo { numberRows } filas(s)'
-  markAll: Marcar todo
-  requiredField: Campo obligatorio
-  class: clase
-  type: Tipo
-  reason: motivo
-  noResults: Sin resultados
-  system: Sistema
-  warehouse: Almacén
-  company: Empresa
-  fieldRequired: Campo requerido
-  allowedFilesText: 'Tipos de archivo permitidos: { allowedContentTypes }'
-  smsSent: SMS enviado
-  confirmDeletion: Confirmar eliminación
-  confirmDeletionMessage: ¿Seguro que quieres eliminar?
-  description: Descripción
-  id: Id
-  order: Orden
-  original: Original
-  file: Fichero
-  selectFile: Seleccione un fichero
-  copyClipboard: Copiar en portapapeles
-  salesPerson: Comercial
-  code: Código
-  pageTitles:
-    summary: Resumen
-    basicData: Datos básicos
-    log: Historial
-    parkingList: Listado de parkings
-  created: Fecha creación
-  worker: Trabajador
-errors:
-  statusUnauthorized: Acceso denegado
-  statusInternalServerError: Ha ocurrido un error interno del servidor
-  statusBadGateway: Parece ser que el servidor ha caído
-  statusGatewayTimeout: No se ha podido contactar con el servidor
-  userConfig: Error al obtener configuración de usuario
-  writeRequest: No se pudo completar la operación solicitada
-login:
-  title: Inicio de sesión
-  username: Nombre de usuario
-  password: Contraseña
-  submit: Iniciar sesión
-  keepLogin: Mantener sesión iniciada
-  loginSuccess: Inicio de sesión correcto
-  loginError: Nombre de usuario o contraseña incorrectos
-  fieldRequired: Este campo es obligatorio
-  twoFactorRequired: Verificación de doble factor requerida
-  pageTitles:
-    logIn: Inicio de sesión
-twoFactor:
-  code: Código
-  validate: Validar
-  insert: Introduce el código de verificación
-  explanation: Por favor introduce el código de verificación que te hemos enviado a tu email en los próximos 5 minutos
-  pageTitles:
-    twoFactor: Doble factor
-verifyEmail:
-  pageTitles:
-    verifyEmail: Verificación de correo
-dashboard:
-  pageTitles:
-    dashboard: Tablón
-customer:
-  pageTitles:
-    customers: Clientes
-    create: Crear
-    list: Listado
-    webPayments: Pagos Web
-    extendedList: Listado extendido
-    notifications: Notificaciones
-    defaulter: Morosos
-    createCustomer: Crear cliente
-    summary: Resumen
-    basicData: Datos básicos
-    fiscalData: Datos fiscales
-    billingData: Forma de pago
-    consignees: Consignatarios
-    notes: Notas
-    credits: Créditos
-    greuges: Greuges
-    balance: Balance
-    recoveries: Recobros
-    webAccess: Acceso web
-    log: Historial
-    sms: Sms
-    creditManagement: Gestión de crédito
-    creditContracts: Contratos de crédito
-    creditOpinion: Opinión de crédito
-    others: Otros
-  list:
-    phone: Teléfono
-    email: Email
-    customerOrders: Mostrar órdenes del cliente
-    moreOptions: Más opciones
-  card:
-    customerId: ID cliente
-    salesPerson: Comercial
-    credit: Crédito
-    securedCredit: Crédito asegurado
-    payMethod: Método de pago
-    debt: Riesgo
-    isDisabled: El cliente está desactivado
-    isFrozen: El cliente está congelado
-    hasDebt: El cliente tiene riesgo
-    notChecked: El cliente no está comprobado
-    noWebAccess: El acceso web está desactivado
-    businessTypeFk: Tipo de negocio
-  summary:
-    basicData: Datos básicos
-    fiscalAddress: Dirección fiscal
-    fiscalData: Datos fiscales
-    billingData: Datos de facturación
-    consignee: Consignatario pred.
-    businessData: Datos comerciales
-    financialData: Datos financieros
-    customerId: ID cliente
-    name: Nombre
-    contact: Contacto
-    phone: Teléfono
-    mobile: Móvil
-    email: Email
-    salesPerson: Comercial
-    contactChannel: Canal de contacto
-    socialName: Razón social
-    fiscalId: NIF/CIF
-    postcode: Código postal
-    province: Provincia
-    country: País
-    street: Calle
-    isEqualizated: Recargo de equivalencia
-    isActive: Activo
-    invoiceByAddress: Facturar por consignatario
-    verifiedData: Datos verificados
-    hasToInvoice: Facturar
-    notifyByEmail: Notificar por email
-    vies: VIES
-    payMethod: Método de pago
-    bankAccount: Cuenta bancaria
-    dueDay: Día de pago
-    hasLcr: Recibido LCR
-    hasCoreVnl: Recibido core VNL
-    hasB2BVnl: Recibido B2B VNL
-    addressName: Nombre de la dirección
-    addressCity: Ciudad
-    addressStreet: Calle
-    username: Usuario
-    webAccess: Acceso web
-    totalGreuge: Greuge total
-    mana: Maná
-    priceIncreasingRate: Ratio de incremento de precio
-    averageInvoiced: Facturación media
-    claimRate: Ratio de reclamaciones
-    risk: Riesgo
-    riskInfo: Facturas menos recibos mas pedidos sin facturar
-    credit: Crédito
-    creditInfo: Riesgo máximo asumido por la empresa
-    securedCredit: Crédito asegurado
-    securedCreditInfo: Riesgo máximo asumido por Solunion
-    balance: Balance
-    balanceInfo: Facturas menos recibos
-    balanceDue: Saldo vencido
-    balanceDueInfo: Facturas fuera de plazo menos recibos
-    recoverySince: Recobro desde
-    businessType: Tipo de negocio
-    city: Población
-    rating: Clasificación
-    recommendCredit: Crédito recomendado
-  basicData:
-    socialName: Nombre fiscal
-    businessType: Tipo de negocio
-    contact: Contacto
-    email: Email
-    phone: Teléfono
-    mobile: Móvil
-    salesPerson: Comercial
-    contactChannel: Canal de contacto
-  extendedList:
-    tableVisibleColumns:
-      id: Identificador
-      name: Nombre
-      fi: NIF / CIF
-      salesPersonFk: Comercial
-      credit: Crédito
-      creditInsurance: Crédito asegurado
-      phone: Teléfono
-      mobile: Móvil
-      street: Dirección fiscal
-      countryFk: País
-      provinceFk: Provincia
-      city: Población
-      postcode: Código postal
-      email: Email
-      created: Fecha creación
-      businessTypeFk: Tipo de negocio
-      payMethodFk: Forma de pago
-      sageTaxTypeFk: Tipo de impuesto Sage
-      sageTransactionTypeFk: Tipo tr. sage
-      isActive: Activo
-      isVies: Vies
-      isTaxDataChecked: Datos comprobados
-      isEqualizated: Recargo de equivalencias
-      isFreezed: Congelado
-      hasToInvoice: Factura
-      hasToInvoiceByAddress: Factura por consigna
-      isToBeMailed: Env. emails
-      hasLcr: Recibido LCR
-      hasCoreVnl: Recibido core VNL
-      hasSepaVnl: Recibido B2B VNL
-entry:
-  pageTitles:
-    entries: Entradas
-    list: Listado
-    summary: Resumen
-    basicData: Datos básicos
-    buys: Compras
-    notes: Notas
-    dms: Gestión documental
-    log: Historial
-    create: Crear
-    latestBuys: Últimas compras
-  list:
-    newEntry: Nueva entrada
-    landed: F. entrega
-    invoiceNumber: Núm. factura
-    supplier: Proveedor
-    booked: Asentado
-    confirmed: Confirmado
-    ordered: Pedida
-  summary:
-    commission: Comisión
-    currency: Moneda
-    company: Empresa
-    reference: Referencia
-    invoiceNumber: Núm. factura
-    ordered: Pedida
-    confirmed: Confirmada
-    booked: Contabilizada
-    raid: Redada
-    excludedFromAvailable: Inventario
-    travelReference: Referencia
-    travelAgency: Agencia
-    travelShipped: F. envio
-    travelWarehouseOut: Alm. salida
-    travelDelivered: Enviada
-    travelLanded: F. entrega
-    travelWarehouseIn: Alm. entrada
-    travelReceived: Recibida
-    buys: Compras
-    quantity: Cantidad
-    stickers: Etiquetas
-    package: Embalaje
-    weight: Peso
-    packing: Packing
-    grouping: Grouping
-    buyingValue: Coste
-    import: Importe
-    pvp: PVP
-    item: Artículo
-  basicData:
-    supplier: Proveedor
-    travel: Envío
-    reference: Referencia
-    invoiceNumber: Núm. factura
-    company: Empresa
-    currency: Moneda
-    observation: Observación
-    commission: Comisión
-    ordered: Pedida
-    confirmed: Confirmado
-    booked: Asentado
-    raid: Redada
-    excludedFromAvailable: Inventario
-    agency: Agencia
-    warehouseOut: Alm. salida
-    warehouseIn: Alm. entrada
-    shipped: F. envío
-    landed: F. entrega
-    id: ID
-  buys:
-    groupingPrice: Precio grouping
-    packingPrice: Precio packing
-    reference: Referencia
-    observations: Observaciónes
-    item: Artículo
-    size: Medida
-    packing: Packing
-    grouping: Grouping
-    buyingValue: Coste
-    packagingFk: Embalaje
-    file: Fichero
-    name: Nombre
-    producer: Productor
-    type: Tipo
-    color: Color
-    id: ID
-  notes:
-    observationType: Tipo de observación
-  descriptor:
-    agency: Agencia
-    landed: F. entrega
-    warehouseOut: Alm. salida
-  latestBuys:
-    picture: Foto
-    itemFk: ID Artículo
-    packing: Packing
-    grouping: Grouping
-    quantity: Cantidad
-    size: Medida
-    tags: Etiquetas
-    type: Tipo
-    intrastat: Intrastat
-    origin: Origen
-    weightByPiece: Peso (gramos)/tallo
-    isActive: Activo
-    family: Familia
-    entryFk: Entrada
-    buyingValue: Coste
-    freightValue: Porte
-    comissionValue: Comisión
-    packageValue: Embalaje
-    isIgnored: Ignorado
-    price2: Grouping
-    price3: Packing
-    minPrice: Min
-    ektFk: Ekt
-    weight: Peso
-    packagingFk: Embalaje
-    packingOut: Embalaje envíos
-    landing: Llegada
-ticket:
-  pageTitles:
-    tickets: Tickets
-    list: Listado
-    createTicket: Crear ticket
-    summary: Resumen
-    basicData: Datos básicos
-    boxing: Encajado
-    sms: Sms
-    notes: Notas
-  list:
-    nickname: Alias
-    state: Estado
-    shipped: Enviado
-    landed: Entregado
-    salesPerson: Comercial
-    total: Total
-  card:
-    ticketId: ID ticket
-    state: Estado
-    customerId: ID cliente
-    salesPerson: Comercial
-    agency: Agencia
-    shipped: Enviado
-    warehouse: Almacén
-    customerCard: Ficha del cliente
-    alias: Alias
-  boxing:
-    expedition: Expedición
-    item: Artículo
-    created: Creado
-    worker: Trabajador
-    selectTime: 'Seleccionar hora:'
-    selectVideo: 'Seleccionar vídeo:'
-    notFound: No hay vídeos disponibles
-  summary:
-    state: Estado
-    salesPerson: Comercial
-    agency: Agencia
-    zone: Zona
-    warehouse: Almacén
-    route: Ruta
-    invoice: Factura
-    shipped: Enviado
-    landed: Entregado
-    consigneePhone: Tel. consignatario
-    consigneeMobile: Móv. consignatario
-    clientPhone: Tel. cliente
-    clientMobile: Móv. cliente
-    consignee: Consignatario
-    subtotal: Subtotal
-    vat: IVA
-    total: Total
-    saleLines: Líneas del pedido
-    item: Artículo
-    visible: Visible
-    available: Disponible
-    quantity: Cantidad
-    price: Precio
-    discount: Descuento
-    packing: Encajado
-    hasComponentLack: Faltan componentes
-    itemShortage: No visible
-    claim: Reclamación
-    reserved: Reservado
-    created: Fecha creación
-    package: Embalaje
-    taxClass: Tipo IVA
-    services: Servicios
-    changeState: Cambiar estado
-    requester: Solicitante
-    atender: Comprador
-    request: Petición de compra
-    weight: Peso
-    goTo: Ir a
-    summaryAmount: Resumen
-claim:
-  pageTitles:
-    claims: Reclamaciones
-    list: Listado
-    createClaim: Crear reclamación
-    summary: Resumen
-    basicData: Datos básicos
-    lines: Líneas
-    development: Trazabilidad
-    photos: Fotos
-    log: Historial
-    notes: Notas
-    action: Acción
-  list:
-    customer: Cliente
-    assignedTo: Asignada a
-    created: Creada
-    state: Estado
-  rmaList:
-    code: Código
-    records: registros
-  card:
-    claimId: ID reclamación
-    assignedTo: Asignada a
-    created: Creada
-    state: Estado
-    ticketId: ID ticket
-    customerSummary: Resumen del cliente
-    claimedTicket: Ticket reclamado
-    saleTracking: Líneas preparadas
-    ticketTracking: Estados del ticket
-    commercial: Comercial
-    province: Provincia
-    zone: Zona
-    customerId: ID del cliente
-  summary:
-    customer: Cliente
-    assignedTo: Asignada a
-    attendedBy: Atendida por
-    created: Creada
-    state: Estado
+    lang:
+        es: Español
+        en: Inglés
+    language: Idioma
+    entity: Entidad
+    user: Usuario
     details: Detalles
-    item: Artículo
-    landed: Entregado
-    quantity: Cantidad
-    claimed: Reclamado
-    price: Precio
-    discount: Descuento
-    total: Total
-    actions: Acciones
-    responsibility: Responsabilidad
-    company: Empresa
-    person: Comercial/Cliente
-    notes: Observaciones
-    photos: Fotos
-    development: Trazabilidad
-    reason: Motivo
-    result: Consecuencias
-    responsible: Responsable
-    worker: Trabajador
-    redelivery: Devolución
-  basicData:
-    customer: Cliente
-    assignedTo: Asignada a
-    created: Creada
-    state: Estado
-    pickup: Recogida
-    null: No
-    agency: Agencia
-    delivery: Reparto
-  photo:
-    fileDescription: 'Reclamacion ID {claimId} del cliente {clientName} id {clientId}'
-    noData: No hay imágenes/videos haz click aquí o arrastra y suelta el archivo
-    dragDrop: Arrástralo y sueltalo aquí
-invoiceOut:
-  pageTitles:
-    invoiceOuts: Fact. emitidas
-    list: Listado
-    negativeBases: Bases Negativas
-    globalInvoicing: Facturación global
-    createInvoiceOut: Crear fact. emitida
-    summary: Resumen
-    basicData: Datos básicos
-  list:
-    ref: Referencia
-    issued: Fecha emisión
-    shortIssued: F. emisión
-    client: Cliente
-    created: Fecha creación
-    shortCreated: F. creación
-    company: Empresa
-    dued: Fecha vencimineto
-    shortDued: F. vencimiento
-    amount: Importe
-  card:
-    issued: Fecha emisión
-    client: Cliente
-    company: Empresa
-    customerCard: Ficha del cliente
-    ticketList: Listado de tickets
-  summary:
-    issued: Fecha
-    created: Fecha creación
-    dued: Vencimiento
-    booked: Contabilizada
-    company: Empresa
-    taxBreakdown: Desglose impositivo
-    type: Tipo
-    taxableBase: Base imp.
-    rate: Tarifa
-    fee: Cuota
-    tickets: Tickets
-    ticketId: Id ticket
-    nickname: Alias
-    shipped: F. envío
-    totalWithVat: Importe
-  globalInvoices:
-    errors:
-      chooseValidClient: Selecciona un cliente válido
-      chooseValidCompany: Selecciona una empresa válida
-      chooseValidPrinter: Selecciona una impresora válida
-      fillDates: La fecha de la factura y la fecha máxima deben estar completas
-      invoiceDateLessThanMaxDate: La fecha de la factura no puede ser menor que la fecha máxima
-      invoiceWithFutureDate: Existe una factura con una fecha futura
-      noTicketsToInvoice: No existen tickets para facturar
-      criticalInvoiceError: Error crítico en la facturación proceso detenido
-    table:
-      client: Cliente
-      addressId: Id dirección
-      streetAddress: Dirección fiscal
-    statusCard:
-      percentageText: '{getPercentage}% {getAddressNumber} de {getNAddresses}'
-      pdfsNumberText: '{nPdfs} de {totalPdfs} PDFs'
-  negativeBases:
-    from: Desde
-    to: Hasta
-    company: Empresa
-    country: País
-    clientId: Id cliente
-    client: Cliente
-    amount: Importe
-    base: Base
-    ticketId: Id ticket
-    active: Activo
-    hasToInvoice: Facturar
-    verifiedData: Datos comprobados
-    comercial: Comercial
-    errors:
-      downloadCsvFailed: Error al descargar CSV
-order:
-  pageTitles:
-    order: Cesta
-    orderList: Listado
-    create: Crear
-    summary: Resumen
-    basicData: Datos básicos
-    catalog: Catálogo
-    volume: Volumen
-    lines: Líneas
-  field:
-    salesPersonFk: Comercial
-    clientFk: Cliente
-    isConfirmed: Confirmada
-    created: Creado
-    landed: F. entrega
-    hour: Hora
-    agency: Agencia
-    total: Total
-  form:
-    clientFk: Cliente
-    addressFk: Dirección
-    landed: F. entrega
-    agencyModeFk: Agencia
-  list:
-    newOrder: Nuevo Pedido
-  summary:
-    basket: Cesta
-    nickname: Alias
-    company: Empresa
-    confirmed: Confirmada
-    notConfirmed: No confirmada
-    created: Creado
-    landed: F. entrega
-    phone: Teléfono
-    createdFrom: Creado desde
-    address: Dirección
-    notes: Notas
-    subtotal: Subtotal
-    total: Total
-    vat: IVA
-    state: Estado
-    alias: Alias
-    items: Items
-    orderTicketList: Tickets del pedido
-    details: Detalles
-    item: Item
-    quantity: Cantidad
-    price: Precio
-    amount: Monto
-shelving:
-  pageTitles:
-    shelving: Carros
-    shelvingList: Listado de carros
-    create: Crear
-    summary: Resumen
-    basicData: Datos básicos
-    log: Historial
-  list:
-    parking: Parking
-    priority: Prioridad
-    newShelving: Nuevo Carro
-  summary:
-    code: Código
-    parking: Parking
-    priority: Prioridad
-    worker: Trabajador
-    recyclable: Reciclable
-  basicData:
-    code: Código
-    parking: Parking
-    priority: Prioridad
-    recyclable: Reciclable
-parking:
-  pickingOrder: Orden de recogida
-  row: Fila
-  column: Columna
-  pageTitles:
-    parking: Parking
-  searchBar:
-    info: Puedes buscar por código de parking
-    label: Buscar parking...
-invoiceIn:
-  pageTitles:
-    invoiceIns: Fact. recibidas
-    list: Listado
-    createInvoiceIn: Crear fact. recibida
-    summary: Resumen
-    basicData: Datos básicos
-    vat: IVA
-    dueDay: Vencimiento
-    intrastat: Intrastat
-    corrective: Rectificativa
-    log: Historial
-  list:
-    ref: Referencia
-    supplier: Proveedor
-    supplierRef: Ref. proveedor
-    serialNumber: Num. serie
-    shortIssued: F. emisión
-    serial: Serie
-    file: Fichero
-    issued: Fecha emisión
-    isBooked: Conciliada
-    awb: AWB
-    amount: Importe
-  card:
-    issued: Fecha emisión
-    amount: Importe
-    client: Cliente
-    company: Empresa
-    customerCard: Ficha del cliente
-    ticketList: Listado de tickets
-    vat: Iva
-    dueDay: Fecha de vencimiento
-  summary:
-    supplier: Proveedor
-    supplierRef: Ref. proveedor
-    currency: Divisa
-    docNumber: Número documento
-    issued: Fecha de expedición
-    operated: Fecha operación
-    bookEntried: Fecha asiento
-    bookedDate: Fecha contable
-    sage: Retención sage
-    vat: Iva no deducible
-    company: Empresa
-    booked: Contabilizada
-    expense: Gasto
-    taxableBase: Base imp.
-    rate: Tasa
-    sageTransaction: Sage transación
-    dueDay: Fecha
-    bank: Caja
-    amount: Importe
-    foreignValue: Divisa
-    dueTotal: Vencimiento
-    code: Código
-    net: Neto
-    stems: Tallos
-    country: País
-department:
-  pageTitles:
-    basicData: Basic data
-    department: Departamentos
-    summary: Resumen
-  name: Nombre
-  code: Código
-  chat: Chat
-  bossDepartment: Jefe de departamento
-  email: Email
-  selfConsumptionCustomer: Cliente autoconsumo
-  telework: Teletrabaja
-  notifyOnErrors: Notificar errores
-  worksInProduction: Pertenece a producción
-  hasToRefill: Completar días sin registros físicos
-  hasToSendMail: Enviar fichadas por mail
-  departmentRemoved: Departamento eliminado
-worker:
-  pageTitles:
-    workers: Trabajadores
-    list: Listado
-    basicData: Datos básicos
-    summary: Resumen
+    collapseMenu: Contraer menú lateral
+    backToDashboard: Volver al tablón
     notifications: Notificaciones
-    workerCreate: Nuevo trabajador
-    department: Departamentos
-    pda: PDA
-    notes: Notas
-    dms: Mi documentación
-    pbx: Centralita
-    log: Historial
-  list:
-    name: Nombre
-    email: Email
-    phone: Teléfono
-    mobile: Móvil
-    active: Activo
-    department: Departamento
-    schedule: Horario
-    newWorker: Nuevo trabajador
-  card:
-    workerId: ID Trabajador
-    name: Nombre
-    email: Email
-    phone: Teléfono
-    mobile: Móvil
-    active: Activo
-    warehouse: Almacén
-    agency: Empresa
-    salesPerson: Comercial
-  summary:
-    basicData: Datos básicos
-    boss: Jefe
-    phoneExtension: Extensión de teléfono
-    entPhone: Teléfono de empresa
-    personalPhone: Teléfono personal
-    noBoss: Sin jefe
-    userData: Datos de usuario
-    userId: ID del usuario
-    role: Rol
-    sipExtension: Extensión
-    locker: Taquilla
-  notificationsManager:
-    activeNotifications: Notificaciones activas
-    availableNotifications: Notificaciones disponibles
-    subscribed: Se ha suscrito a la notificación
-    unsubscribed: Se ha dado de baja de la notificación
-  pda:
-    newPDA: Nueva PDA
-    currentPDA: PDA Actual
-    model: Modelo
-    serialNumber: Número de serie
-    removePDA: Desasignar PDA
-  create:
-    name: Nombre
-    lastName: Apellido
-    birth: Fecha de nacimiento
-    fi: DNI/NIF/NIE
-    code: Código de trabajador
-    phone: Teléfono
-    postcode: Código postal
-    province: Provincia
-    city: Población
-    street: Dirección
-    webUser: Usuario Web
-    personalEmail: Correo personal
-    company: Empresa
-    boss: Jefe
-    payMethods: Método de pago
-    iban: IBAN
-    bankEntity: Swift / BIC
-  imageNotFound: No se ha encontrado la imagen
-wagon:
-  pageTitles:
-    wagons: Vagones
-    wagonsList: Listado vagones
-    wagonCreate: Crear tipo
-    wagonEdit: Editar tipo
-    typesList: Listado tipos
-    typeCreate: Crear tipo
-    typeEdit: Editar tipo
-    wagonCounter: Contador de carros
-  type:
-    name: Nombre
-    submit: Guardar
-    reset: Deshacer cambios
-    trayColor: Color de la bandeja
-    removeItem: Tipo de vagón borrado correctamente
-  list:
-    plate: Matrícula
-    volume: Volumen
-    type: Tipo
-    remove: Borrar
-    removeItem: Vagón borrado correctamente
-  create:
-    plate: Matrícula
-    volume: Volumen
-    type: Tipo
-    label: Etiqueta
-  warnings:
-    noData: Sin datos disponibles
-    nameNotEmpty: El nombre no puede estar vacío
-    labelNotEmpty: La etiqueta no puede estar vacía
-    plateNotEmpty: La matrícula no puede estar vacía
-    volumeNotEmpty: El volumen no puede estar vacío
-    typeNotEmpty: El tipo no puede estar vacío
-    maxTrays: Has alcanzado el número máximo de bandejas
-    minHeightBetweenTrays: 'La distancia mínima entre bandejas es '
-    maxWagonHeight: 'La altura máxima del vagón es '
-    uncompleteTrays: Hay bandejas sin completar
-route/roadmap:
-  pageTitles:
-    roadmap: Troncales
-    summary: Resumen
-    basicData: Datos básicos
-    stops: Paradas
-roadmap:
-  pageTitles:
-    roadmap: Troncales
-    summary: Resumen
-    basicData: Datos básicos
-    stops: Paradas
-route:
-  pageTitles:
-    routes: Rutas
-    cmrsList: Listado de CMRs externos
-    RouteList: Listado
-    create: Crear
-    basicData: Datos básicos
-    summary: Resumen
-    RouteRoadmap: Troncales
-    RouteRoadmapCreate: Crear troncal
-    tickets: Tickets
-    log: Historial
-    autonomous: Autónomos
-  cmr:
-    list:
-      results: resultados
-      cmrFk: Id CMR
-      hasCmrDms: Adjuntado en gestdoc
-      'true': Sí
-      'false': 'No'
-      ticketFk: Id ticket
-      routeFk: Id ruta
-      country: País
-      clientFk: Id cliente
-      shipped: Fecha preparación
-      viewCmr: Ver CMR
-      downloadCmrs: Descargar CMRs
-supplier:
-  pageTitles:
-    suppliers: Proveedores
-    supplier: Proveedor
-    list: Listado
-    create: Crear
-    summary: Resumen
-    basicData: Datos básicos
-    fiscalData: Datos fiscales
-    billingData: Forma de pago
-    log: Historial
-    accounts: Cuentas
-    contacts: Contactos
-    addresses: Direcciones
-    consumption: Consumo
-    agencyTerm: Acuerdo agencia
-    dms: Gestión documental
-  list:
-    payMethod: Método de pago
-    payDeadline: Plazo de pago
-    payDay: Día de pago
-    account: Cuenta
-    newSupplier: Nuevo proveedor
-  summary:
-    responsible: Responsable
-    notes: Notas
-    verified: Verificado
-    isActive: Está activo
-    billingData: Forma de pago
-    payMethod: Método de pago
-    payDeadline: Plazo de pago
-    payDay: Día de pago
-    account: Cuenta
-    fiscalData: Datos fiscales
-    sageTaxType: Tipo de impuesto Sage
-    sageTransactionType: Tipo de transacción Sage
-    sageWithholding: Retención sage
-    supplierActivity: Actividad proveedor
-    healthRegister: Pasaporte sanitario
-    fiscalAddress: Dirección fiscal
-    socialName: Razón social
-    taxNumber: NIF/CIF
-    street: Dirección
-    city: Población
-    postCode: Código postal
-    province: Provincia
-    country: País
-  create:
-    supplierName: Nombre del proveedor
-  basicData:
-    alias: Alias
-    workerFk: Responsable
-    isSerious: Verificado
-    isActive: Activo
-    isPayMethodChecked: Método de pago validado
-    note: Notas
-  fiscalData:
-    name: Razón social *
-    nif: NIF/CIF *
-    account: Cuenta
-    sageTaxTypeFk: Tipo de impuesto sage
-    sageWithholdingFk: Retención sage
-    sageTransactionTypeFk: Tipo de transacción sage
-    supplierActivityFk: Actividad proveedor
-    healthRegister: Pasaporte sanitario
-    street: Calle
-    postcode: Código postal
-    city: Población *
-    provinceFk: Provincia
-    country: País
-    isTrucker: Transportista
-    isVies: Vies
-  billingData:
-    payMethodFk: Forma de pago
-    payDemFk: Plazo de pago
-    payDay: Día de pago
-  accounts:
-    iban: Iban
-    bankEntity: Entidad bancaria
-    beneficiary: Beneficiario
-  contacts:
-    name: Nombre
-    phone: Teléfono
-    mobile: Móvil
-    email: Email
-    observation: Notas
-  addresses:
-    street: Dirección
-    postcode: Código postal
-    phone: Teléfono
-    name: Nombre
-    city: Población
-    province: Provincia
-    mobile: Móvil
-  agencyTerms:
-    agencyFk: Agencia
-    minimumM3: M3 mínimos
-    packagePrice: Precio bulto
-    kmPrice: Precio Km
-    m3Price: Precio M3
-    routePrice: Precio ruta
-    minimumKm: Km mínimos
-    addRow: Añadir fila
-  consumption:
-    entry: Entrada
-    date: Fecha
-    reference: Referencia
-travel:
-  pageTitles:
-    travel: Envíos
-    list: Listado
-    create: Crear
-    summary: Resumen
-    extraCommunity: Extra comunitarios
-    travelCreate: Nuevo envío
-    basicData: Datos básicos
-    history: Historial
-    thermographs: Termógrafos
-  summary:
-    confirmed: Confirmado
-    entryId: Id entrada
-    freight: Porte
-    package: Embalaje
-    delivered: Enviada
-    received: Recibida
-    entries: Entradas
-    cloneShipping: Clonar envío
-    CloneTravelAndEntries: Clonar travel y sus entradas
-    deleteTravel: Eliminar envío
-    AddEntry: Añadir entrada
-    thermographs: Termógrafos
-    hb: HB
-  variables:
-    search: Id/Referencia
-    agencyModeFk: Agencia
-    warehouseInFk: Alm. entrada
-    warehouseOutFk: ' Alm. salida'
-    landedFrom: Llegada desde
-    landedTo: Llegada hasta
-    continent: Cont. Salida
-    totalEntries: Ent. totales
-  basicData:
-    reference: Referencia
-    agency: Agencia
-    shipped: F. Envío
-    landed: F. entrega
-    warehouseOut: Alm. salida
-    warehouseIn: Alm. entrada
-    delivered: Enviada
-    received: Recibida
-  thermographs:
-    code: Código
-    temperature: Temperatura
-    state: Estado
-    destination: Destino
-    created: Fecha creación
-    thermograph: Termógrafo
-    reference: Referencia
-    type: Tipo
-    company: Empresa
-    warehouse: Almacén
-    travelFileDescription: 'Id envío { travelId }'
-    file: Fichero
-item:
-  pageTitles:
-    items: Artículos
-    list: Listado
-    diary: Histórico
-    tags: Etiquetas
-    create: Crear
-  descriptor:
-    item: Artículo
-    buyer: Comprador
-    color: Color
-    category: Categoría
-    stems: Tallos
-    visible: Visible
-    available: Disponible
-    warehouseText: 'Calculado sobre el almacén de { warehouseName }'
-    itemDiary: Registro de compra-venta
-  list:
-    id: Identificador
-    grouping: Grouping
-    packing: Packing
-    description: Descripción
-    stems: Tallos
-    category: Reino
-    typeName: Tipo
-    intrastat: Intrastat
-    isActive: Activo
-    size: Medida
-    origin: Origen
-    weightByPiece: Peso (gramos)/tallo
-    userName: Comprador
-    stemMultiplier: Multiplicador
-    producer: Productor
-    landed: F. entrega
-components:
-  topbar: {}
-  userPanel:
-    copyToken: Token copiado al portapapeles
-    settings: Configuración
+    userPanel: Panel de usuario
+    modules: Módulos
+    pinnedModules: Módulos fijados
+    darkMode: Modo oscuro
     logOut: Cerrar sesión
-    localWarehouse: Almacén local
-    localBank: Banco local
-    localCompany: Empresa local
-    userWarehouse: Almacén del usuario
-    userCompany: Empresa del usuario
-  smartCard:
-    downloadFile: Descargar archivo
-    clone: Clonar
-    openCard: Ficha
-    openSummary: Detalles
-  cardDescriptor:
-    mainList: Listado principal
-    summary: Resumen
-    moreOptions: 'Más opciones'
-  leftMenu:
-    addToPinned: Añadir a fijados
-    removeFromPinned: Eliminar de fijados
-  VnLv:
-    copyText: '{copyValue} se ha copiado al portapepeles'
-  iban_tooltip: 'IBAN: ES21 1234 5678 90 0123456789'
+    date: Fecha
+    dataSaved: Datos guardados
+    dataDeleted: Datos eliminados
+    search: Buscar
+    changes: Cambios
+    dataCreated: Datos creados
+    add: Añadir
+    create: Crear
+    edit: Modificar
+    save: Guardar
+    remove: Eliminar
+    reset: Restaurar
+    close: Cerrar
+    cancel: Cancelar
+    confirm: Confirmar
+    assign: Asignar
+    back: Volver
+    yes: Si
+    no: No
+    noChanges: Sin cambios que guardar
+    changesToSave: Tienes cambios pendientes de guardar
+    confirmRemove: Vas a eliminar este registro. ¿Continuar?
+    rowAdded: Fila añadida
+    rowRemoved: Fila eliminada
+    pleaseWait: Por favor espera...
+    noPinnedModules: No has fijado ningún módulo
+    summary:
+        basicData: Datos básicos
+    today: Hoy
+    yesterday: Ayer
+    dateFormat: es-ES
+    noSelectedRows: No tienes ninguna línea seleccionada
+    microsip: Abrir en MicroSIP
+    downloadCSVSuccess: Descarga de CSV exitosa
+    reference: Referencia
+    agency: Agencia
+    wareHouseOut: Alm. salida
+    wareHouseIn: Alm. entrada
+    landed: F. entrega
+    shipped: F. envío
+    totalEntries: Ent. totales
+    amount: Importe
+    packages: Bultos
+    download: Descargar
+    selectRows: 'Seleccionar las { numberRows } filas(s)'
+    allRows: 'Todo { numberRows } filas(s)'
+    markAll: Marcar todo
+    requiredField: Campo obligatorio
+    class: clase
+    type: Tipo
+    reason: motivo
+    noResults: Sin resultados
+    system: Sistema
+    warehouse: Almacén
+    company: Empresa
+    fieldRequired: Campo requerido
+    allowedFilesText: 'Tipos de archivo permitidos: { allowedContentTypes }'
+    smsSent: SMS enviado
+    confirmDeletion: Confirmar eliminación
+    confirmDeletionMessage: ¿Seguro que quieres eliminar?
+    description: Descripción
+    id: Id
+    order: Orden
+    original: Original
+    file: Fichero
+    selectFile: Seleccione un fichero
+    copyClipboard: Copiar en portapapeles
+    salesPerson: Comercial
+    code: Código
+    pageTitles:
+        summary: Resumen
+        basicData: Datos básicos
+        log: Historial
+        parkingList: Listado de parkings
+    created: Fecha creación
+    worker: Trabajador
+errors:
+    statusUnauthorized: Acceso denegado
+    statusInternalServerError: Ha ocurrido un error interno del servidor
+    statusBadGateway: Parece ser que el servidor ha caído
+    statusGatewayTimeout: No se ha podido contactar con el servidor
+    userConfig: Error al obtener configuración de usuario
+    writeRequest: No se pudo completar la operación solicitada
+login:
+    title: Inicio de sesión
+    username: Nombre de usuario
+    password: Contraseña
+    submit: Iniciar sesión
+    keepLogin: Mantener sesión iniciada
+    loginSuccess: Inicio de sesión correcto
+    loginError: Nombre de usuario o contraseña incorrectos
+    fieldRequired: Este campo es obligatorio
+    twoFactorRequired: Verificación de doble factor requerida
+    pageTitles:
+        logIn: Inicio de sesión
+twoFactor:
+    code: Código
+    validate: Validar
+    insert: Introduce el código de verificación
+    explanation: Por favor introduce el código de verificación que te hemos enviado a tu email en los próximos 5 minutos
+    pageTitles:
+        twoFactor: Doble factor
+verifyEmail:
+    pageTitles:
+        verifyEmail: Verificación de correo
+dashboard:
+    pageTitles:
+        dashboard: Tablón
+customer:
+    pageTitles:
+        customers: Clientes
+        create: Crear
+        list: Listado
+        webPayments: Pagos Web
+        extendedList: Listado extendido
+        notifications: Notificaciones
+        defaulter: Morosos
+        createCustomer: Crear cliente
+        summary: Resumen
+        basicData: Datos básicos
+        fiscalData: Datos fiscales
+        billingData: Forma de pago
+        consignees: Consignatarios
+        notes: Notas
+        credits: Créditos
+        greuges: Greuges
+        balance: Balance
+        recoveries: Recobros
+        webAccess: Acceso web
+        log: Historial
+        sms: Sms
+        creditManagement: Gestión de crédito
+        creditContracts: Contratos de crédito
+        creditOpinion: Opinión de crédito
+        others: Otros
+    list:
+        phone: Teléfono
+        email: Email
+        customerOrders: Mostrar órdenes del cliente
+        moreOptions: Más opciones
+    card:
+        customerId: ID cliente
+        salesPerson: Comercial
+        credit: Crédito
+        securedCredit: Crédito asegurado
+        payMethod: Método de pago
+        debt: Riesgo
+        isDisabled: El cliente está desactivado
+        isFrozen: El cliente está congelado
+        hasDebt: El cliente tiene riesgo
+        notChecked: El cliente no está comprobado
+        noWebAccess: El acceso web está desactivado
+        businessTypeFk: Tipo de negocio
+    summary:
+        basicData: Datos básicos
+        fiscalAddress: Dirección fiscal
+        fiscalData: Datos fiscales
+        billingData: Datos de facturación
+        consignee: Consignatario pred.
+        businessData: Datos comerciales
+        financialData: Datos financieros
+        customerId: ID cliente
+        name: Nombre
+        contact: Contacto
+        phone: Teléfono
+        mobile: Móvil
+        email: Email
+        salesPerson: Comercial
+        contactChannel: Canal de contacto
+        socialName: Razón social
+        fiscalId: NIF/CIF
+        postcode: Código postal
+        province: Provincia
+        country: País
+        street: Calle
+        isEqualizated: Recargo de equivalencia
+        isActive: Activo
+        invoiceByAddress: Facturar por consignatario
+        verifiedData: Datos verificados
+        hasToInvoice: Facturar
+        notifyByEmail: Notificar por email
+        vies: VIES
+        payMethod: Método de pago
+        bankAccount: Cuenta bancaria
+        dueDay: Día de pago
+        hasLcr: Recibido LCR
+        hasCoreVnl: Recibido core VNL
+        hasB2BVnl: Recibido B2B VNL
+        addressName: Nombre de la dirección
+        addressCity: Ciudad
+        addressStreet: Calle
+        username: Usuario
+        webAccess: Acceso web
+        totalGreuge: Greuge total
+        mana: Maná
+        priceIncreasingRate: Ratio de incremento de precio
+        averageInvoiced: Facturación media
+        claimRate: Ratio de reclamaciones
+        risk: Riesgo
+        riskInfo: Facturas menos recibos mas pedidos sin facturar
+        credit: Crédito
+        creditInfo: Riesgo máximo asumido por la empresa
+        securedCredit: Crédito asegurado
+        securedCreditInfo: Riesgo máximo asumido por Solunion
+        balance: Balance
+        balanceInfo: Facturas menos recibos
+        balanceDue: Saldo vencido
+        balanceDueInfo: Facturas fuera de plazo menos recibos
+        recoverySince: Recobro desde
+        businessType: Tipo de negocio
+        city: Población
+        rating: Clasificación
+        recommendCredit: Crédito recomendado
+    basicData:
+        socialName: Nombre fiscal
+        businessType: Tipo de negocio
+        contact: Contacto
+        email: Email
+        phone: Teléfono
+        mobile: Móvil
+        salesPerson: Comercial
+        contactChannel: Canal de contacto
+    extendedList:
+        tableVisibleColumns:
+            id: Identificador
+            name: Nombre
+            fi: NIF / CIF
+            salesPersonFk: Comercial
+            credit: Crédito
+            creditInsurance: Crédito asegurado
+            phone: Teléfono
+            mobile: Móvil
+            street: Dirección fiscal
+            countryFk: País
+            provinceFk: Provincia
+            city: Población
+            postcode: Código postal
+            email: Email
+            created: Fecha creación
+            businessTypeFk: Tipo de negocio
+            payMethodFk: Forma de pago
+            sageTaxTypeFk: Tipo de impuesto Sage
+            sageTransactionTypeFk: Tipo tr. sage
+            isActive: Activo
+            isVies: Vies
+            isTaxDataChecked: Datos comprobados
+            isEqualizated: Recargo de equivalencias
+            isFreezed: Congelado
+            hasToInvoice: Factura
+            hasToInvoiceByAddress: Factura por consigna
+            isToBeMailed: Env. emails
+            hasLcr: Recibido LCR
+            hasCoreVnl: Recibido core VNL
+            hasSepaVnl: Recibido B2B VNL
+entry:
+    pageTitles:
+        entries: Entradas
+        list: Listado
+        summary: Resumen
+        basicData: Datos básicos
+        buys: Compras
+        notes: Notas
+        dms: Gestión documental
+        log: Historial
+        create: Crear
+        latestBuys: Últimas compras
+    list:
+        newEntry: Nueva entrada
+        landed: F. entrega
+        invoiceNumber: Núm. factura
+        supplier: Proveedor
+        booked: Asentado
+        confirmed: Confirmado
+        ordered: Pedida
+    summary:
+        commission: Comisión
+        currency: Moneda
+        company: Empresa
+        reference: Referencia
+        invoiceNumber: Núm. factura
+        ordered: Pedida
+        confirmed: Confirmada
+        booked: Contabilizada
+        raid: Redada
+        excludedFromAvailable: Inventario
+        travelReference: Referencia
+        travelAgency: Agencia
+        travelShipped: F. envio
+        travelWarehouseOut: Alm. salida
+        travelDelivered: Enviada
+        travelLanded: F. entrega
+        travelWarehouseIn: Alm. entrada
+        travelReceived: Recibida
+        buys: Compras
+        quantity: Cantidad
+        stickers: Etiquetas
+        package: Embalaje
+        weight: Peso
+        packing: Packing
+        grouping: Grouping
+        buyingValue: Coste
+        import: Importe
+        pvp: PVP
+        item: Artículo
+    basicData:
+        supplier: Proveedor
+        travel: Envío
+        reference: Referencia
+        invoiceNumber: Núm. factura
+        company: Empresa
+        currency: Moneda
+        observation: Observación
+        commission: Comisión
+        ordered: Pedida
+        confirmed: Confirmado
+        booked: Asentado
+        raid: Redada
+        excludedFromAvailable: Inventario
+        agency: Agencia
+        warehouseOut: Alm. salida
+        warehouseIn: Alm. entrada
+        shipped: F. envío
+        landed: F. entrega
+        id: ID
+    buys:
+        groupingPrice: Precio grouping
+        packingPrice: Precio packing
+        reference: Referencia
+        observations: Observaciónes
+        item: Artículo
+        size: Medida
+        packing: Packing
+        grouping: Grouping
+        buyingValue: Coste
+        packagingFk: Embalaje
+        file: Fichero
+        name: Nombre
+        producer: Productor
+        type: Tipo
+        color: Color
+        id: ID
+    notes:
+        observationType: Tipo de observación
+    descriptor:
+        agency: Agencia
+        landed: F. entrega
+        warehouseOut: Alm. salida
+    latestBuys:
+        picture: Foto
+        itemFk: ID Artículo
+        packing: Packing
+        grouping: Grouping
+        quantity: Cantidad
+        size: Medida
+        tags: Etiquetas
+        type: Tipo
+        intrastat: Intrastat
+        origin: Origen
+        weightByPiece: Peso (gramos)/tallo
+        isActive: Activo
+        family: Familia
+        entryFk: Entrada
+        buyingValue: Coste
+        freightValue: Porte
+        comissionValue: Comisión
+        packageValue: Embalaje
+        isIgnored: Ignorado
+        price2: Grouping
+        price3: Packing
+        minPrice: Min
+        ektFk: Ekt
+        weight: Peso
+        packagingFk: Embalaje
+        packingOut: Embalaje envíos
+        landing: Llegada
+ticket:
+    pageTitles:
+        tickets: Tickets
+        list: Listado
+        createTicket: Crear ticket
+        summary: Resumen
+        basicData: Datos básicos
+        boxing: Encajado
+        sms: Sms
+        notes: Notas
+    list:
+        nickname: Alias
+        state: Estado
+        shipped: Enviado
+        landed: Entregado
+        salesPerson: Comercial
+        total: Total
+    card:
+        ticketId: ID ticket
+        state: Estado
+        customerId: ID cliente
+        salesPerson: Comercial
+        agency: Agencia
+        shipped: Enviado
+        warehouse: Almacén
+        customerCard: Ficha del cliente
+        alias: Alias
+    boxing:
+        expedition: Expedición
+        item: Artículo
+        created: Creado
+        worker: Trabajador
+        selectTime: 'Seleccionar hora:'
+        selectVideo: 'Seleccionar vídeo:'
+        notFound: No hay vídeos disponibles
+    summary:
+        state: Estado
+        salesPerson: Comercial
+        agency: Agencia
+        zone: Zona
+        warehouse: Almacén
+        route: Ruta
+        invoice: Factura
+        shipped: Enviado
+        landed: Entregado
+        consigneePhone: Tel. consignatario
+        consigneeMobile: Móv. consignatario
+        clientPhone: Tel. cliente
+        clientMobile: Móv. cliente
+        consignee: Consignatario
+        subtotal: Subtotal
+        vat: IVA
+        total: Total
+        saleLines: Líneas del pedido
+        item: Artículo
+        visible: Visible
+        available: Disponible
+        quantity: Cantidad
+        price: Precio
+        discount: Descuento
+        packing: Encajado
+        hasComponentLack: Faltan componentes
+        itemShortage: No visible
+        claim: Reclamación
+        reserved: Reservado
+        created: Fecha creación
+        package: Embalaje
+        taxClass: Tipo IVA
+        services: Servicios
+        changeState: Cambiar estado
+        requester: Solicitante
+        atender: Comprador
+        request: Petición de compra
+        weight: Peso
+        goTo: Ir a
+        summaryAmount: Resumen
+claim:
+    pageTitles:
+        claims: Reclamaciones
+        list: Listado
+        createClaim: Crear reclamación
+        summary: Resumen
+        basicData: Datos básicos
+        lines: Líneas
+        development: Trazabilidad
+        photos: Fotos
+        log: Historial
+        notes: Notas
+        action: Acción
+    list:
+        customer: Cliente
+        assignedTo: Asignada a
+        created: Creada
+        state: Estado
+    rmaList:
+        code: Código
+        records: registros
+    card:
+        claimId: ID reclamación
+        assignedTo: Asignada a
+        created: Creada
+        state: Estado
+        ticketId: ID ticket
+        customerSummary: Resumen del cliente
+        claimedTicket: Ticket reclamado
+        saleTracking: Líneas preparadas
+        ticketTracking: Estados del ticket
+        commercial: Comercial
+        province: Provincia
+        zone: Zona
+        customerId: ID del cliente
+    summary:
+        customer: Cliente
+        assignedTo: Asignada a
+        attendedBy: Atendida por
+        created: Creada
+        state: Estado
+        details: Detalles
+        item: Artículo
+        landed: Entregado
+        quantity: Cantidad
+        claimed: Reclamado
+        price: Precio
+        discount: Descuento
+        total: Total
+        actions: Acciones
+        responsibility: Responsabilidad
+        company: Empresa
+        person: Comercial/Cliente
+        notes: Observaciones
+        photos: Fotos
+        development: Trazabilidad
+        reason: Motivo
+        result: Consecuencias
+        responsible: Responsable
+        worker: Trabajador
+        redelivery: Devolución
+    basicData:
+        customer: Cliente
+        assignedTo: Asignada a
+        created: Creada
+        state: Estado
+        pickup: Recogida
+        null: No
+        agency: Agencia
+        delivery: Reparto
+    photo:
+        fileDescription: 'Reclamacion ID {claimId} del cliente {clientName} id {clientId}'
+        noData: No hay imágenes/videos haz click aquí o arrastra y suelta el archivo
+        dragDrop: Arrástralo y sueltalo aquí
+invoiceOut:
+    pageTitles:
+        invoiceOuts: Fact. emitidas
+        list: Listado
+        negativeBases: Bases Negativas
+        globalInvoicing: Facturación global
+        createInvoiceOut: Crear fact. emitida
+        summary: Resumen
+        basicData: Datos básicos
+    list:
+        ref: Referencia
+        issued: Fecha emisión
+        shortIssued: F. emisión
+        client: Cliente
+        created: Fecha creación
+        shortCreated: F. creación
+        company: Empresa
+        dued: Fecha vencimineto
+        shortDued: F. vencimiento
+        amount: Importe
+    card:
+        issued: Fecha emisión
+        client: Cliente
+        company: Empresa
+        customerCard: Ficha del cliente
+        ticketList: Listado de tickets
+    summary:
+        issued: Fecha
+        created: Fecha creación
+        dued: Vencimiento
+        booked: Contabilizada
+        company: Empresa
+        taxBreakdown: Desglose impositivo
+        type: Tipo
+        taxableBase: Base imp.
+        rate: Tarifa
+        fee: Cuota
+        tickets: Tickets
+        ticketId: Id ticket
+        nickname: Alias
+        shipped: F. envío
+        totalWithVat: Importe
+    globalInvoices:
+        errors:
+            chooseValidClient: Selecciona un cliente válido
+            chooseValidCompany: Selecciona una empresa válida
+            chooseValidPrinter: Selecciona una impresora válida
+            fillDates: La fecha de la factura y la fecha máxima deben estar completas
+            invoiceDateLessThanMaxDate: La fecha de la factura no puede ser menor que la fecha máxima
+            invoiceWithFutureDate: Existe una factura con una fecha futura
+            noTicketsToInvoice: No existen tickets para facturar
+            criticalInvoiceError: Error crítico en la facturación proceso detenido
+        table:
+            client: Cliente
+            addressId: Id dirección
+            streetAddress: Dirección fiscal
+        statusCard:
+            percentageText: '{getPercentage}% {getAddressNumber} de {getNAddresses}'
+            pdfsNumberText: '{nPdfs} de {totalPdfs} PDFs'
+    negativeBases:
+        from: Desde
+        to: Hasta
+        company: Empresa
+        country: País
+        clientId: Id cliente
+        client: Cliente
+        amount: Importe
+        base: Base
+        ticketId: Id ticket
+        active: Activo
+        hasToInvoice: Facturar
+        verifiedData: Datos comprobados
+        comercial: Comercial
+        errors:
+            downloadCsvFailed: Error al descargar CSV
+order:
+    pageTitles:
+        order: Cesta
+        orderList: Listado
+        create: Crear
+        summary: Resumen
+        basicData: Datos básicos
+        catalog: Catálogo
+        volume: Volumen
+        lines: Líneas
+    field:
+        salesPersonFk: Comercial
+        clientFk: Cliente
+        isConfirmed: Confirmada
+        created: Creado
+        landed: F. entrega
+        hour: Hora
+        agency: Agencia
+        total: Total
+    form:
+        clientFk: Cliente
+        addressFk: Dirección
+        landed: F. entrega
+        agencyModeFk: Agencia
+    list:
+        newOrder: Nuevo Pedido
+    summary:
+        basket: Cesta
+        nickname: Alias
+        company: Empresa
+        confirmed: Confirmada
+        notConfirmed: No confirmada
+        created: Creado
+        landed: F. entrega
+        phone: Teléfono
+        createdFrom: Creado desde
+        address: Dirección
+        notes: Notas
+        subtotal: Subtotal
+        total: Total
+        vat: IVA
+        state: Estado
+        alias: Alias
+        items: Items
+        orderTicketList: Tickets del pedido
+        details: Detalles
+        item: Item
+        quantity: Cantidad
+        price: Precio
+        amount: Monto
+shelving:
+    pageTitles:
+        shelving: Carros
+        shelvingList: Listado de carros
+        create: Crear
+        summary: Resumen
+        basicData: Datos básicos
+        log: Historial
+    list:
+        parking: Parking
+        priority: Prioridad
+        newShelving: Nuevo Carro
+    summary:
+        code: Código
+        parking: Parking
+        priority: Prioridad
+        worker: Trabajador
+        recyclable: Reciclable
+    basicData:
+        code: Código
+        parking: Parking
+        priority: Prioridad
+        recyclable: Reciclable
+parking:
+    pickingOrder: Orden de recogida
+    row: Fila
+    column: Columna
+    pageTitles:
+        parking: Parking
+    searchBar:
+        info: Puedes buscar por código de parking
+        label: Buscar parking...
+invoiceIn:
+    pageTitles:
+        invoiceIns: Fact. recibidas
+        list: Listado
+        createInvoiceIn: Crear fact. recibida
+        summary: Resumen
+        basicData: Datos básicos
+        vat: IVA
+        dueDay: Vencimiento
+        intrastat: Intrastat
+        corrective: Rectificativa
+        log: Historial
+    list:
+        ref: Referencia
+        supplier: Proveedor
+        supplierRef: Ref. proveedor
+        serialNumber: Num. serie
+        shortIssued: F. emisión
+        serial: Serie
+        file: Fichero
+        issued: Fecha emisión
+        isBooked: Conciliada
+        awb: AWB
+        amount: Importe
+    card:
+        issued: Fecha emisión
+        amount: Importe
+        client: Cliente
+        company: Empresa
+        customerCard: Ficha del cliente
+        ticketList: Listado de tickets
+        vat: Iva
+        dueDay: Fecha de vencimiento
+    summary:
+        supplier: Proveedor
+        supplierRef: Ref. proveedor
+        currency: Divisa
+        docNumber: Número documento
+        issued: Fecha de expedición
+        operated: Fecha operación
+        bookEntried: Fecha asiento
+        bookedDate: Fecha contable
+        sage: Retención sage
+        vat: Iva no deducible
+        company: Empresa
+        booked: Contabilizada
+        expense: Gasto
+        taxableBase: Base imp.
+        rate: Tasa
+        sageTransaction: Sage transación
+        dueDay: Fecha
+        bank: Caja
+        amount: Importe
+        foreignValue: Divisa
+        dueTotal: Vencimiento
+        code: Código
+        net: Neto
+        stems: Tallos
+        country: País
+department:
+    pageTitles:
+        basicData: Basic data
+        department: Departamentos
+        summary: Resumen
+    name: Nombre
+    code: Código
+    chat: Chat
+    bossDepartment: Jefe de departamento
+    email: Email
+    selfConsumptionCustomer: Cliente autoconsumo
+    telework: Teletrabaja
+    notifyOnErrors: Notificar errores
+    worksInProduction: Pertenece a producción
+    hasToRefill: Completar días sin registros físicos
+    hasToSendMail: Enviar fichadas por mail
+    departmentRemoved: Departamento eliminado
+worker:
+    pageTitles:
+        workers: Trabajadores
+        list: Listado
+        basicData: Datos básicos
+        summary: Resumen
+        notifications: Notificaciones
+        workerCreate: Nuevo trabajador
+        department: Departamentos
+        pda: PDA
+        notes: Notas
+        dms: Mi documentación
+        pbx: Centralita
+        log: Historial
+    list:
+        name: Nombre
+        email: Email
+        phone: Teléfono
+        mobile: Móvil
+        active: Activo
+        department: Departamento
+        schedule: Horario
+        newWorker: Nuevo trabajador
+    card:
+        workerId: ID Trabajador
+        name: Nombre
+        email: Email
+        phone: Teléfono
+        mobile: Móvil
+        active: Activo
+        warehouse: Almacén
+        agency: Empresa
+        salesPerson: Comercial
+    summary:
+        basicData: Datos básicos
+        boss: Jefe
+        phoneExtension: Extensión de teléfono
+        entPhone: Teléfono de empresa
+        personalPhone: Teléfono personal
+        noBoss: Sin jefe
+        userData: Datos de usuario
+        userId: ID del usuario
+        role: Rol
+        sipExtension: Extensión
+        locker: Taquilla
+    notificationsManager:
+        activeNotifications: Notificaciones activas
+        availableNotifications: Notificaciones disponibles
+        subscribed: Se ha suscrito a la notificación
+        unsubscribed: Se ha dado de baja de la notificación
+    pda:
+        newPDA: Nueva PDA
+        currentPDA: PDA Actual
+        model: Modelo
+        serialNumber: Número de serie
+        removePDA: Desasignar PDA
+    create:
+        name: Nombre
+        lastName: Apellido
+        birth: Fecha de nacimiento
+        fi: DNI/NIF/NIE
+        code: Código de trabajador
+        phone: Teléfono
+        postcode: Código postal
+        province: Provincia
+        city: Población
+        street: Dirección
+        webUser: Usuario Web
+        personalEmail: Correo personal
+        company: Empresa
+        boss: Jefe
+        payMethods: Método de pago
+        iban: IBAN
+        bankEntity: Swift / BIC
+    imageNotFound: No se ha encontrado la imagen
+wagon:
+    pageTitles:
+        wagons: Vagones
+        wagonsList: Listado vagones
+        wagonCreate: Crear tipo
+        wagonEdit: Editar tipo
+        typesList: Listado tipos
+        typeCreate: Crear tipo
+        typeEdit: Editar tipo
+        wagonCounter: Contador de carros
+    type:
+        name: Nombre
+        submit: Guardar
+        reset: Deshacer cambios
+        trayColor: Color de la bandeja
+        removeItem: Tipo de vagón borrado correctamente
+    list:
+        plate: Matrícula
+        volume: Volumen
+        type: Tipo
+        remove: Borrar
+        removeItem: Vagón borrado correctamente
+    create:
+        plate: Matrícula
+        volume: Volumen
+        type: Tipo
+        label: Etiqueta
+    warnings:
+        noData: Sin datos disponibles
+        nameNotEmpty: El nombre no puede estar vacío
+        labelNotEmpty: La etiqueta no puede estar vacía
+        plateNotEmpty: La matrícula no puede estar vacía
+        volumeNotEmpty: El volumen no puede estar vacío
+        typeNotEmpty: El tipo no puede estar vacío
+        maxTrays: Has alcanzado el número máximo de bandejas
+        minHeightBetweenTrays: 'La distancia mínima entre bandejas es '
+        maxWagonHeight: 'La altura máxima del vagón es '
+        uncompleteTrays: Hay bandejas sin completar
+route/roadmap:
+    pageTitles:
+        roadmap: Troncales
+        summary: Resumen
+        basicData: Datos básicos
+        stops: Paradas
+roadmap:
+    pageTitles:
+        roadmap: Troncales
+        summary: Resumen
+        basicData: Datos básicos
+        stops: Paradas
+route:
+    pageTitles:
+        routes: Rutas
+        cmrsList: Listado de CMRs externos
+        RouteList: Listado
+        create: Crear
+        basicData: Datos básicos
+        summary: Resumen
+        RouteRoadmap: Troncales
+        RouteRoadmapCreate: Crear troncal
+        tickets: Tickets
+        log: Historial
+        autonomous: Autónomos
+    cmr:
+        list:
+            results: resultados
+            cmrFk: Id CMR
+            hasCmrDms: Adjuntado en gestdoc
+            'true': Sí
+            'false': 'No'
+            ticketFk: Id ticket
+            routeFk: Id ruta
+            country: País
+            clientFk: Id cliente
+            shipped: Fecha preparación
+            viewCmr: Ver CMR
+            downloadCmrs: Descargar CMRs
+supplier:
+    pageTitles:
+        suppliers: Proveedores
+        supplier: Proveedor
+        list: Listado
+        create: Crear
+        summary: Resumen
+        basicData: Datos básicos
+        fiscalData: Datos fiscales
+        billingData: Forma de pago
+        log: Historial
+        accounts: Cuentas
+        contacts: Contactos
+        addresses: Direcciones
+        consumption: Consumo
+        agencyTerm: Acuerdo agencia
+        dms: Gestión documental
+    list:
+        payMethod: Método de pago
+        payDeadline: Plazo de pago
+        payDay: Día de pago
+        account: Cuenta
+        newSupplier: Nuevo proveedor
+    summary:
+        responsible: Responsable
+        notes: Notas
+        verified: Verificado
+        isActive: Está activo
+        billingData: Forma de pago
+        payMethod: Método de pago
+        payDeadline: Plazo de pago
+        payDay: Día de pago
+        account: Cuenta
+        fiscalData: Datos fiscales
+        sageTaxType: Tipo de impuesto Sage
+        sageTransactionType: Tipo de transacción Sage
+        sageWithholding: Retención sage
+        supplierActivity: Actividad proveedor
+        healthRegister: Pasaporte sanitario
+        fiscalAddress: Dirección fiscal
+        socialName: Razón social
+        taxNumber: NIF/CIF
+        street: Dirección
+        city: Población
+        postCode: Código postal
+        province: Provincia
+        country: País
+    create:
+        supplierName: Nombre del proveedor
+    basicData:
+        alias: Alias
+        workerFk: Responsable
+        isSerious: Verificado
+        isActive: Activo
+        isPayMethodChecked: Método de pago validado
+        note: Notas
+    fiscalData:
+        name: Razón social *
+        nif: NIF/CIF *
+        account: Cuenta
+        sageTaxTypeFk: Tipo de impuesto sage
+        sageWithholdingFk: Retención sage
+        sageTransactionTypeFk: Tipo de transacción sage
+        supplierActivityFk: Actividad proveedor
+        healthRegister: Pasaporte sanitario
+        street: Calle
+        postcode: Código postal
+        city: Población *
+        provinceFk: Provincia
+        country: País
+        isTrucker: Transportista
+        isVies: Vies
+    billingData:
+        payMethodFk: Forma de pago
+        payDemFk: Plazo de pago
+        payDay: Día de pago
+    accounts:
+        iban: Iban
+        bankEntity: Entidad bancaria
+        beneficiary: Beneficiario
+    contacts:
+        name: Nombre
+        phone: Teléfono
+        mobile: Móvil
+        email: Email
+        observation: Notas
+    addresses:
+        street: Dirección
+        postcode: Código postal
+        phone: Teléfono
+        name: Nombre
+        city: Población
+        province: Provincia
+        mobile: Móvil
+    agencyTerms:
+        agencyFk: Agencia
+        minimumM3: M3 mínimos
+        packagePrice: Precio bulto
+        kmPrice: Precio Km
+        m3Price: Precio M3
+        routePrice: Precio ruta
+        minimumKm: Km mínimos
+        addRow: Añadir fila
+    consumption:
+        entry: Entrada
+        date: Fecha
+        reference: Referencia
+travel:
+    pageTitles:
+        travel: Envíos
+        list: Listado
+        create: Crear
+        summary: Resumen
+        extraCommunity: Extra comunitarios
+        travelCreate: Nuevo envío
+        basicData: Datos básicos
+        history: Historial
+        thermographs: Termógrafos
+    summary:
+        confirmed: Confirmado
+        entryId: Id entrada
+        freight: Porte
+        package: Embalaje
+        delivered: Enviada
+        received: Recibida
+        entries: Entradas
+        cloneShipping: Clonar envío
+        CloneTravelAndEntries: Clonar travel y sus entradas
+        deleteTravel: Eliminar envío
+        AddEntry: Añadir entrada
+        thermographs: Termógrafos
+        hb: HB
+    variables:
+        search: Id/Referencia
+        agencyModeFk: Agencia
+        warehouseInFk: Alm. entrada
+        warehouseOutFk: ' Alm. salida'
+        landedFrom: Llegada desde
+        landedTo: Llegada hasta
+        continent: Cont. Salida
+        totalEntries: Ent. totales
+    basicData:
+        reference: Referencia
+        agency: Agencia
+        shipped: F. Envío
+        landed: F. entrega
+        warehouseOut: Alm. salida
+        warehouseIn: Alm. entrada
+        delivered: Enviada
+        received: Recibida
+    thermographs:
+        code: Código
+        temperature: Temperatura
+        state: Estado
+        destination: Destino
+        created: Fecha creación
+        thermograph: Termógrafo
+        reference: Referencia
+        type: Tipo
+        company: Empresa
+        warehouse: Almacén
+        travelFileDescription: 'Id envío { travelId }'
+        file: Fichero
+item:
+    pageTitles:
+        items: Artículos
+        list: Listado
+        diary: Histórico
+        tags: Etiquetas
+        create: Crear
+        fixedPrice: Precios fijados
+    descriptor:
+        item: Artículo
+        buyer: Comprador
+        color: Color
+        category: Categoría
+        stems: Tallos
+        visible: Visible
+        available: Disponible
+        warehouseText: 'Calculado sobre el almacén de { warehouseName }'
+        itemDiary: Registro de compra-venta
+    list:
+        id: Identificador
+        grouping: Grouping
+        packing: Packing
+        description: Descripción
+        stems: Tallos
+        category: Reino
+        typeName: Tipo
+        intrastat: Intrastat
+        isActive: Activo
+        size: Medida
+        origin: Origen
+        weightByPiece: Peso (gramos)/tallo
+        userName: Comprador
+        stemMultiplier: Multiplicador
+        producer: Productor
+        landed: F. entrega
+    fixedPrice:
+        itemId: ID Artículo
+        groupingPrice: Precio grouping
+components:
+    topbar: {}
+    userPanel:
+        copyToken: Token copiado al portapapeles
+        settings: Configuración
+        logOut: Cerrar sesión
+        localWarehouse: Almacén local
+        localBank: Banco local
+        localCompany: Empresa local
+        userWarehouse: Almacén del usuario
+        userCompany: Empresa del usuario
+    smartCard:
+        downloadFile: Descargar archivo
+        clone: Clonar
+        openCard: Ficha
+        openSummary: Detalles
+    cardDescriptor:
+        mainList: Listado principal
+        summary: Resumen
+        moreOptions: 'Más opciones'
+    leftMenu:
+        addToPinned: Añadir a fijados
+        removeFromPinned: Eliminar de fijados
+    VnLv:
+        copyText: '{copyValue} se ha copiado al portapepeles'
+    iban_tooltip: 'IBAN: ES21 1234 5678 90 0123456789'
diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
new file mode 100644
index 000000000..fb5702387
--- /dev/null
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -0,0 +1,492 @@
+<script setup>
+import { onMounted, ref, computed, reactive, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { toDateFormat } from 'src/filters/date.js';
+import { useSession } from 'composables/useSession';
+import { dashIfEmpty } from 'src/filters';
+import { useVnConfirm } from 'composables/useVnConfirm';
+import { useState } from 'src/composables/useState';
+import { toCurrency } from 'filters/index';
+import axios from 'axios';
+
+const router = useRouter();
+const { getTokenMultimedia } = useSession();
+const token = getTokenMultimedia();
+const stateStore = useStateStore();
+const { t } = useI18n();
+const { openConfirmationModal } = useVnConfirm();
+const state = useState();
+
+const paginateRef = ref(null);
+const user = state.getUser();
+const fixedPrices = ref([]);
+const warehousesOptions = ref([]);
+const itemsWithNameOptions = ref([]);
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'category':
+            return { 'ic.name': value };
+        case 'buyerFk':
+            return { 'it.workerFk': value };
+        case 'grouping':
+            return { 'b.grouping': value };
+        case 'packing':
+            return { 'b.packing': value };
+        case 'origin':
+            return { 'ori.code': value };
+        case 'typeFk':
+            return { 'i.typeFk': value };
+        case 'intrastat':
+            return { 'intr.description': value };
+        case 'name':
+            return { 'i.name': { like: `%${value}%` } };
+        case 'producer':
+            return { 'pr.name': { like: `%${value}%` } };
+        case 'id':
+        case 'size':
+        case 'subname':
+        case 'isActive':
+        case 'weightByPiece':
+        case 'stemMultiplier':
+        case 'stems':
+            return { [`i.${param}`]: value };
+    }
+};
+
+const params = reactive({});
+
+const applyColumnFilter = async (col) => {
+    try {
+        const paramKey = col.columnFilter?.filterParamKey || col.field;
+        params[paramKey] = col.columnFilter.filterValue;
+        await paginateRef.value.addFilter(null, params);
+    } catch (err) {
+        console.error('Error applying column filter', err);
+    }
+};
+
+const getInputEvents = (col) => {
+    return col.columnFilter.type === 'select'
+        ? { 'update:modelValue': () => applyColumnFilter(col) }
+        : {
+              'keyup.enter': () => applyColumnFilter(col),
+          };
+};
+
+const upsertPrice = (price, resetMinPrice) => {
+    // if (resetMinPrice) delete price['minPrice'];
+    // const requiredFields = ['itemFk', 'started', 'ended', 'rate2', 'rate3'];
+    // for (const field of requiredFields) if (price[field] == undefined) return;
+    // const query = 'FixedPrices/upsertFixedPrice';
+    // this.$http.patch(query, price).then((res) => {
+    //     this.vnApp.showSuccess(this.$t('Data saved!'));
+    //     Object.assign(price, res.data);
+    // });
+};
+
+const columns = computed(() => [
+    {
+        label: t('item.fixedPrice.itemId'),
+        name: 'itemId',
+        // field: 'id',
+        align: 'left',
+        sortable: true,
+        // columnFilter: {
+        //     component: VnInput,
+        //     type: 'text',
+        //     filterValue: null,
+        //     event: getInputEvents,
+        //     attrs: {
+        //         dense: true,
+        //     },
+        // },
+    },
+    {
+        label: t('globals.description'),
+        field: 'name',
+        name: 'description',
+        align: 'left',
+        sortable: true,
+        // columnFilter: {
+        //     component: VnInput,
+        //     type: 'text',
+        //     filterValue: null,
+        //     event: getInputEvents,
+        //     attrs: {
+        //         dense: true,
+        //     },
+        // },
+    },
+    {
+        label: t('item.fixedPrice.groupingPrice'),
+        field: 'rate2',
+        name: 'groupingPrice',
+        align: 'left',
+        sortable: true,
+        // columnFilter: {
+        //     component: VnInput,
+        //     type: 'text',
+        //     filterValue: null,
+        //     event: getInputEvents,
+        //     attrs: {
+        //         dense: true,
+        //     },
+        // },
+        format: (val) => toCurrency(val),
+    },
+    {
+        label: t('item.list.packing'),
+        field: 'packing',
+        name: 'packing',
+        align: 'left',
+        sortable: true,
+        // columnFilter: {
+        //     component: VnInput,
+        //     type: 'text',
+        //     filterValue: null,
+        //     event: getInputEvents,
+        //     attrs: {
+        //         dense: true,
+        //     },
+        // },
+        format: (val) => dashIfEmpty(val),
+    },
+
+    {
+        label: t('item.list.stems'),
+        field: 'stems',
+        name: 'stems',
+        align: 'left',
+        sortable: true,
+        // columnFilter: {
+        //     component: VnInput,
+        //     type: 'text',
+        //     filterValue: null,
+        //     event: getInputEvents,
+        //     attrs: {
+        //         dense: true,
+        //     },
+        // },
+    },
+    {
+        label: t('item.list.size'),
+        field: 'size',
+        name: 'size',
+        align: 'left',
+        sortable: true,
+        // columnFilter: {
+        //     component: VnInput,
+        //     type: 'text',
+        //     filterValue: null,
+        //     event: getInputEvents,
+        //     attrs: {
+        //         dense: true,
+        //     },
+        // },
+    },
+    {
+        label: t('item.list.typeName'),
+        field: 'typeName',
+        name: 'typeName',
+        align: 'left',
+        sortable: true,
+        // columnFilter: {
+        //     component: VnSelectFilter,
+        //     filterParamKey: 'typeFk',
+        //     type: 'select',
+        //     filterValue: null,
+        //     event: getInputEvents,
+        //     attrs: {
+        //         options: itemTypesOptions.value,
+        //         'option-value': 'id',
+        //         'option-label': 'name',
+        //         dense: true,
+        //     },
+        // },
+    },
+
+    {
+        label: t('item.list.category'),
+        field: 'category',
+        name: 'category',
+        align: 'left',
+        sortable: true,
+        // columnFilter: {
+        //     component: VnSelectFilter,
+        //     type: 'select',
+        //     filterValue: null,
+        //     event: getInputEvents,
+        //     attrs: {
+        //         options: itemCategoriesOptions.value,
+        //         'option-value': 'name',
+        //         'option-label': 'name',
+        //         dense: true,
+        //     },
+        // },
+    },
+
+    {
+        label: t('item.list.intrastat'),
+        field: 'intrastat',
+        name: 'intrastat',
+        align: 'left',
+        sortable: true,
+        // columnFilter: {
+        //     component: VnSelectFilter,
+        //     type: 'select',
+        //     filterValue: null,
+        //     event: getInputEvents,
+        //     attrs: {
+        //         options: intrastatOptions.value,
+        //         'option-value': 'description',
+        //         'option-label': 'description',
+        //         dense: true,
+        //     },
+        // },
+    },
+    {
+        label: t('item.list.origin'),
+        field: 'origin',
+        name: 'origin',
+        align: 'left',
+        sortable: true,
+        // columnFilter: {
+        //     component: VnSelectFilter,
+        //     type: 'select',
+        //     filterValue: null,
+        //     event: getInputEvents,
+        //     attrs: {
+        //         options: originsOptions.value,
+        //         'option-value': 'code',
+        //         'option-label': 'code',
+        //         dense: true,
+        //     },
+        // },
+    },
+    {
+        label: t('item.list.userName'),
+        field: 'userName',
+        name: 'userName',
+        align: 'left',
+        sortable: true,
+        // columnFilter: {
+        //     component: VnSelectFilter,
+        //     filterParamKey: 'buyerFk',
+        //     type: 'select',
+        //     filterValue: null,
+        //     event: getInputEvents,
+        //     attrs: {
+        //         options: buyersOptions.value,
+        //         'option-value': 'id',
+        //         'option-label': 'nickname',
+        //         dense: true,
+        //     },
+        // },
+    },
+    {
+        label: t('item.list.weightByPiece'),
+        field: 'weightByPiece',
+        name: 'weightByPiece',
+        align: 'left',
+        sortable: true,
+        // columnFilter: {
+        //     component: VnInput,
+        //     type: 'text',
+        //     filterValue: null,
+        //     event: getInputEvents,
+        //     attrs: {
+        //         dense: true,
+        //     },
+        // },
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('item.list.stemMultiplier'),
+        field: 'stemMultiplier',
+        name: 'stemMultiplier',
+        align: 'left',
+        sortable: true,
+        // columnFilter: {
+        //     component: VnInput,
+        //     type: 'text',
+        //     filterValue: null,
+        //     event: getInputEvents,
+        //     attrs: {
+        //         dense: true,
+        //     },
+        // },
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('item.list.isActive'),
+        field: 'isActive',
+        name: 'isActive',
+        align: 'left',
+        sortable: true,
+        // columnFilter: null,
+    },
+    {
+        label: t('item.list.producer'),
+        field: 'producer',
+        name: 'producer',
+        align: 'left',
+        sortable: true,
+        // columnFilter: {
+        //     component: VnInput,
+        //     type: 'text',
+        //     filterValue: null,
+        //     event: getInputEvents,
+        //     attrs: {
+        //         dense: true,
+        //     },
+        // },
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('item.list.landed'),
+        field: 'landed',
+        name: 'landed',
+        align: 'left',
+        sortable: true,
+        format: (val) => dashIfEmpty(toDateFormat(val)),
+        // columnFilter: null,
+    },
+    {
+        label: '',
+        name: 'actions',
+        align: 'left',
+        // columnFilter: null,
+    },
+]);
+
+const redirectToItemCreate = () => {
+    router.push({ name: 'ItemCreate' });
+};
+
+const redirectToItemSummary = (id) => {
+    router.push({ name: 'ItemSummary', params: { id } });
+};
+
+const cloneItem = async (itemFk) => {
+    // try {
+    //     const { data } = await axios.post(`Items/${itemFk}/clone`);
+    //     if (!data) return;
+    //     router.push({ name: 'ItemTags', params: { id: data.id } });
+    // } catch (err) {
+    //     console.error('Error cloning item', err);
+    // }
+};
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+});
+
+onUnmounted(() => (stateStore.rightDrawer = false));
+</script>
+
+<template>
+    <FetchData
+        url="FixedPrices/filter"
+        :filter="{ order: ['itemFk'] }"
+        :params="{ warehouseFk: user.warehouseFk }"
+        auto-load
+        @on-fetch="(data) => (fixedPrices = data)"
+    />
+    <FetchData
+        url="Warehouses"
+        :filter="{ order: ['name'] }"
+        auto-load
+        @on-fetch="(data) => (warehousesOptions = data)"
+    />
+    <FetchData
+        url="Items/withName"
+        :filter="{ fields: ['id', 'name'], order: 'id DESC' }"
+        auto-load
+        @on-fetch="(data) => (itemsWithNameOptions = data)"
+    />
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :rows="fixedPrices"
+            :columns="columns"
+            row-key="id"
+            :pagination="{ rowsPerPage: 0 }"
+            class="full-width q-mt-md"
+            :no-data-label="t('globals.noResults')"
+            @row-click="(_, row) => redirectToItemSummary(row.id)"
+        >
+            <!-- <template #top-row="{ cols }">
+                        <QTr>
+                            <QTd
+                                v-for="(col, index) in cols"
+                                :key="index"
+                                style="max-width: 100px"
+                            >
+                                <component
+                                    :is="col.columnFilter.component"
+                                    v-if="col.columnFilter"
+                                    v-model="col.columnFilter.filterValue"
+                                    v-bind="col.columnFilter.attrs"
+                                    v-on="col.columnFilter.event(col)"
+                                    dense
+                                />
+                            </QTd>
+                        </QTr>
+                    </template> -->
+
+            <template #body-cell-itemId="{ row }">
+                <QTd>
+                    <VnSelectFilter
+                        :options="itemsWithNameOptions"
+                        hide-selected
+                        option-label="id"
+                        option-value="id"
+                        v-model="row.itemFk"
+                        @update:model-value="upsertPrice(row, true)"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel> #{{ scope.opt?.id }} </QItemLabel>
+                                    <QItemLabel caption>{{ scope.opt?.name }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </QTd>
+            </template>
+            <template #body-cell-description="{ row }">
+                <QTd class="col">
+                    <span>{{ row.name }} {{ row.subName }}</span>
+                    <fetched-tags :item="row" :max-length="6" />
+                </QTd>
+            </template>
+        </QTable>
+        <QPageSticky :offset="[20, 20]">
+            <QBtn @click="redirectToItemCreate()" color="primary" fab icon="add" />
+            <QTooltip class="text-no-wrap">
+                {{ t('New item') }}
+            </QTooltip>
+        </QPageSticky>
+    </QPage>
+</template>
+
+<i18n>
+es:
+    New item: Nuevo artículo
+    All it's properties will be copied: Todas sus propiedades serán copiadas
+    Do you want to clone this item?: ¿Desea clonar este artículo?
+    Clone: Clonar
+    Preview: Vista previa
+</i18n>
diff --git a/src/router/modules/item.js b/src/router/modules/item.js
index d16022f79..8853b444f 100644
--- a/src/router/modules/item.js
+++ b/src/router/modules/item.js
@@ -10,7 +10,7 @@ export default {
     component: RouterView,
     redirect: { name: 'ItemMain' },
     menus: {
-        main: ['ItemList'],
+        main: ['ItemList', 'ItemFixedPrice'],
         card: [],
     },
     children: [
@@ -29,6 +29,15 @@ export default {
                     },
                     component: () => import('src/pages/Item/ItemList.vue'),
                 },
+                {
+                    path: 'fixed-price',
+                    name: 'ItemFixedPrice',
+                    meta: {
+                        title: 'fixedPrice',
+                        icon: 'vn:fixedPrice',
+                    },
+                    component: () => import('src/pages/Item/ItemFixedPrice.vue'),
+                },
                 {
                     path: 'create',
                     name: 'ItemCreate',

From 5664ec1313089d272600a98d2c84082314dcc210 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 16 Apr 2024 08:21:44 -0300
Subject: [PATCH 09/42] WIP

---
 src/i18n/locale/en.yml            |   5 +
 src/i18n/locale/es.yml            |   5 +
 src/pages/Item/ItemFixedPrice.vue | 325 +++++++++++++-----------------
 3 files changed, 153 insertions(+), 182 deletions(-)

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 051b9033a..58cc3e3c9 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -1128,6 +1128,11 @@ item:
     fixedPrice:
         itemId: Item ID
         groupingPrice: Grouping price
+        packingPrice: Packing price
+        minPrice: Min price
+        started: Started
+        ended: Ended
+        warehouse: Warehouse
 components:
     topbar: {}
     userPanel:
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index dce4eea05..bd39e861b 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -1125,6 +1125,11 @@ item:
     fixedPrice:
         itemId: ID Artículo
         groupingPrice: Precio grouping
+        packingPrice: Precio packing
+        minPrice: Precio min
+        started: Inicio
+        ended: Fin
+        warehouse: Almacén
 components:
     topbar: {}
     userPanel:
diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index fb5702387..aa7a080a0 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -5,11 +5,11 @@ import { useRouter } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
-import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { toDateFormat } from 'src/filters/date.js';
@@ -18,6 +18,7 @@ import { dashIfEmpty } from 'src/filters';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import { useState } from 'src/composables/useState';
 import { toCurrency } from 'filters/index';
+import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 
 const router = useRouter();
@@ -27,10 +28,12 @@ const stateStore = useStateStore();
 const { t } = useI18n();
 const { openConfirmationModal } = useVnConfirm();
 const state = useState();
+const { notify } = useNotify();
 
 const paginateRef = ref(null);
 const user = state.getUser();
 const fixedPrices = ref([]);
+const fixedPricesOriginalData = ref([]);
 const warehousesOptions = ref([]);
 const itemsWithNameOptions = ref([]);
 
@@ -77,37 +80,18 @@ const applyColumnFilter = async (col) => {
     }
 };
 
-const getInputEvents = (col) => {
-    return col.columnFilter.type === 'select'
-        ? { 'update:modelValue': () => applyColumnFilter(col) }
-        : {
-              'keyup.enter': () => applyColumnFilter(col),
-          };
-};
-
-const upsertPrice = (price, resetMinPrice) => {
-    // if (resetMinPrice) delete price['minPrice'];
-    // const requiredFields = ['itemFk', 'started', 'ended', 'rate2', 'rate3'];
-    // for (const field of requiredFields) if (price[field] == undefined) return;
-    // const query = 'FixedPrices/upsertFixedPrice';
-    // this.$http.patch(query, price).then((res) => {
-    //     this.vnApp.showSuccess(this.$t('Data saved!'));
-    //     Object.assign(price, res.data);
-    // });
-};
-
 const columns = computed(() => [
     {
         label: t('item.fixedPrice.itemId'),
         name: 'itemId',
-        // field: 'id',
+        field: 'itemFk',
         align: 'left',
         sortable: true,
         // columnFilter: {
         //     component: VnInput,
         //     type: 'text',
         //     filterValue: null,
-        //     event: getInputEvents,
+        //     event: getColumnInputEvents,
         //     attrs: {
         //         dense: true,
         //     },
@@ -123,7 +107,7 @@ const columns = computed(() => [
         //     component: VnInput,
         //     type: 'text',
         //     filterValue: null,
-        //     event: getInputEvents,
+        //     event: getColumnInputEvents,
         //     attrs: {
         //         dense: true,
         //     },
@@ -139,7 +123,7 @@ const columns = computed(() => [
         //     component: VnInput,
         //     type: 'text',
         //     filterValue: null,
-        //     event: getInputEvents,
+        //     event: getColumnInputEvents,
         //     attrs: {
         //         dense: true,
         //     },
@@ -147,16 +131,16 @@ const columns = computed(() => [
         format: (val) => toCurrency(val),
     },
     {
-        label: t('item.list.packing'),
-        field: 'packing',
-        name: 'packing',
+        label: t('item.fixedPrice.packingPrice'),
+        field: 'rate3',
+        name: 'packingPrice',
         align: 'left',
         sortable: true,
         // columnFilter: {
         //     component: VnInput,
         //     type: 'text',
         //     filterValue: null,
-        //     event: getInputEvents,
+        //     event: getColumnInputEvents,
         //     attrs: {
         //         dense: true,
         //     },
@@ -165,41 +149,41 @@ const columns = computed(() => [
     },
 
     {
-        label: t('item.list.stems'),
-        field: 'stems',
-        name: 'stems',
+        label: t('item.fixedPrice.minPrice'),
+        field: 'minPrice',
+        name: 'minPrice',
         align: 'left',
         sortable: true,
         // columnFilter: {
         //     component: VnInput,
         //     type: 'text',
         //     filterValue: null,
-        //     event: getInputEvents,
+        //     event: getColumnInputEvents,
         //     attrs: {
         //         dense: true,
         //     },
         // },
     },
     {
-        label: t('item.list.size'),
-        field: 'size',
-        name: 'size',
+        label: t('item.fixedPrice.started'),
+        field: 'started',
+        name: 'started',
         align: 'left',
         sortable: true,
         // columnFilter: {
         //     component: VnInput,
         //     type: 'text',
         //     filterValue: null,
-        //     event: getInputEvents,
+        //     event: getColumnInputEvents,
         //     attrs: {
         //         dense: true,
         //     },
         // },
     },
     {
-        label: t('item.list.typeName'),
-        field: 'typeName',
-        name: 'typeName',
+        label: t('item.fixedPrice.ended'),
+        field: 'ended',
+        name: 'ended',
         align: 'left',
         sortable: true,
         // columnFilter: {
@@ -207,7 +191,7 @@ const columns = computed(() => [
         //     filterParamKey: 'typeFk',
         //     type: 'select',
         //     filterValue: null,
-        //     event: getInputEvents,
+        //     event: getColumnInputEvents,
         //     attrs: {
         //         options: itemTypesOptions.value,
         //         'option-value': 'id',
@@ -218,16 +202,16 @@ const columns = computed(() => [
     },
 
     {
-        label: t('item.list.category'),
-        field: 'category',
-        name: 'category',
+        label: t('item.fixedPrice.warehouse'),
+        field: 'warehouse',
+        name: 'warehouse',
         align: 'left',
         sortable: true,
         // columnFilter: {
         //     component: VnSelectFilter,
         //     type: 'select',
         //     filterValue: null,
-        //     event: getInputEvents,
+        //     event: getColumnInputEvents,
         //     attrs: {
         //         options: itemCategoriesOptions.value,
         //         'option-value': 'name',
@@ -236,141 +220,14 @@ const columns = computed(() => [
         //     },
         // },
     },
-
-    {
-        label: t('item.list.intrastat'),
-        field: 'intrastat',
-        name: 'intrastat',
-        align: 'left',
-        sortable: true,
-        // columnFilter: {
-        //     component: VnSelectFilter,
-        //     type: 'select',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         options: intrastatOptions.value,
-        //         'option-value': 'description',
-        //         'option-label': 'description',
-        //         dense: true,
-        //     },
-        // },
-    },
-    {
-        label: t('item.list.origin'),
-        field: 'origin',
-        name: 'origin',
-        align: 'left',
-        sortable: true,
-        // columnFilter: {
-        //     component: VnSelectFilter,
-        //     type: 'select',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         options: originsOptions.value,
-        //         'option-value': 'code',
-        //         'option-label': 'code',
-        //         dense: true,
-        //     },
-        // },
-    },
-    {
-        label: t('item.list.userName'),
-        field: 'userName',
-        name: 'userName',
-        align: 'left',
-        sortable: true,
-        // columnFilter: {
-        //     component: VnSelectFilter,
-        //     filterParamKey: 'buyerFk',
-        //     type: 'select',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         options: buyersOptions.value,
-        //         'option-value': 'id',
-        //         'option-label': 'nickname',
-        //         dense: true,
-        //     },
-        // },
-    },
-    {
-        label: t('item.list.weightByPiece'),
-        field: 'weightByPiece',
-        name: 'weightByPiece',
-        align: 'left',
-        sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
-        format: (val) => dashIfEmpty(val),
-    },
-    {
-        label: t('item.list.stemMultiplier'),
-        field: 'stemMultiplier',
-        name: 'stemMultiplier',
-        align: 'left',
-        sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
-        format: (val) => dashIfEmpty(val),
-    },
-    {
-        label: t('item.list.isActive'),
-        field: 'isActive',
-        name: 'isActive',
-        align: 'left',
-        sortable: true,
-        // columnFilter: null,
-    },
-    {
-        label: t('item.list.producer'),
-        field: 'producer',
-        name: 'producer',
-        align: 'left',
-        sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
-        format: (val) => dashIfEmpty(val),
-    },
-    {
-        label: t('item.list.landed'),
-        field: 'landed',
-        name: 'landed',
-        align: 'left',
-        sortable: true,
-        format: (val) => dashIfEmpty(toDateFormat(val)),
-        // columnFilter: null,
-    },
-    {
-        label: '',
-        name: 'actions',
-        align: 'left',
-        // columnFilter: null,
-    },
 ]);
 
+const onFixedPricesFetched = (data) => {
+    fixedPrices.value = data;
+    // el objetivo de esto es guardar los valores iniciales de todas las rows para evitar guardar cambios si la data no cambió al disparar los eventos
+    fixedPricesOriginalData.value = JSON.parse(JSON.stringify(data));
+};
+
 const redirectToItemCreate = () => {
     router.push({ name: 'ItemCreate' });
 };
@@ -389,6 +246,43 @@ const cloneItem = async (itemFk) => {
     // }
 };
 
+const getRowUpdateInputEvents = (props, resetMinPrice, inputType = 'text') => {
+    return inputType === 'text'
+        ? {
+              'keyup.enter': () => upsertPrice(props, resetMinPrice),
+              blur: () => upsertPrice(props, resetMinPrice),
+          }
+        : { 'update:modelValue': () => upsertPrice(props, resetMinPrice) };
+};
+const getColumnInputEvents = (col) => {
+    return col.columnFilter.type === 'select'
+        ? { 'update:modelValue': () => applyColumnFilter(col) }
+        : {
+              'keyup.enter': () => applyColumnFilter(col),
+          };
+};
+
+const upsertPrice = async ({ row, col, rowIndex }, resetMinPrice) => {
+    console.log('row', row);
+    console.log('col', col);
+    console.log('rowIndex', rowIndex);
+    console.log('field', col.field);
+    console.log('originalData: ', fixedPricesOriginalData.value[rowIndex][col.field]);
+    console.log('actual value: ', row[col.field]);
+    if (fixedPricesOriginalData.value[rowIndex][col.field] == row[col.field]) return;
+
+    try {
+        if (resetMinPrice) row.hasMinPrice = 0;
+        const requiredFields = ['itemFk', 'started', 'ended', 'rate2', 'rate3'];
+        for (const field of requiredFields) if (!row[field]) return;
+        const { data } = await axios.patch('FixedPrices/upsertFixedPrice', row);
+        row = data;
+        fixedPricesOriginalData.value[rowIndex][col.field] = row[col.field];
+    } catch (err) {
+        console.error('Error upserting price', err);
+    }
+};
+
 onMounted(async () => {
     stateStore.rightDrawer = true;
 });
@@ -402,7 +296,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         :filter="{ order: ['itemFk'] }"
         :params="{ warehouseFk: user.warehouseFk }"
         auto-load
-        @on-fetch="(data) => (fixedPrices = data)"
+        @on-fetch="(data) => onFixedPricesFetched(data)"
     />
     <FetchData
         url="Warehouses"
@@ -424,7 +318,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             :pagination="{ rowsPerPage: 0 }"
             class="full-width q-mt-md"
             :no-data-label="t('globals.noResults')"
-            @row-click="(_, row) => redirectToItemSummary(row.id)"
         >
             <!-- <template #top-row="{ cols }">
                         <QTr>
@@ -445,15 +338,15 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         </QTr>
                     </template> -->
 
-            <template #body-cell-itemId="{ row }">
+            <template #body-cell-itemId="props">
                 <QTd>
                     <VnSelectFilter
                         :options="itemsWithNameOptions"
                         hide-selected
                         option-label="id"
                         option-value="id"
-                        v-model="row.itemFk"
-                        @update:model-value="upsertPrice(row, true)"
+                        v-model="props.row.itemFk"
+                        v-on="getRowUpdateInputEvents(props, true, 'select')"
                     >
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">
@@ -472,6 +365,74 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     <fetched-tags :item="row" :max-length="6" />
                 </QTd>
             </template>
+            <template #body-cell-groupingPrice="props">
+                <QTd class="col">
+                    <VnInput
+                        v-model.number="props.row.rate2"
+                        v-on="getRowUpdateInputEvents(props)"
+                    >
+                        <template #append>€</template>
+                    </VnInput>
+                </QTd>
+            </template>
+            <template #body-cell-packingPrice="props">
+                <QTd class="col">
+                    <VnInput
+                        v-model.number="props.row.rate3"
+                        v-on="getRowUpdateInputEvents(props)"
+                    >
+                        <template #append>€</template>
+                    </VnInput>
+                </QTd>
+            </template>
+            <template #body-cell-minPrice="props">
+                <QTd class="col">
+                    <div class="row">
+                        <QCheckbox
+                            class="col"
+                            v-model="props.row.hasMinPrice"
+                            :false-value="0"
+                            :true-value="1"
+                            v-on="getRowUpdateInputEvents(props)"
+                        />
+                        <VnInput
+                            class="col"
+                            :disable="!props.row.hasMinPrice"
+                            v-model.number="props.row.minPrice"
+                            v-on="getRowUpdateInputEvents(props)"
+                            type="number"
+                        />
+                    </div>
+                </QTd>
+            </template>
+            <template #body-cell-started="props">
+                <QTd class="col" style="min-width: 150px">
+                    <VnInputDate
+                        v-model="props.row.started"
+                        v-on="getRowUpdateInputEvents(props)"
+                    />
+                </QTd>
+            </template>
+            <template #body-cell-ended="props">
+                <QTd class="col" style="min-width: 150px">
+                    <VnInputDate
+                        v-model="props.row.ended"
+                        v-on="getRowUpdateInputEvents(props)"
+                    />
+                </QTd>
+            </template>
+            <template #body-cell-warehouse="props">
+                <QTd class="col">
+                    <VnSelectFilter
+                        :options="warehousesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="props.row.warehouseFk"
+                        v-on="getRowUpdateInputEvents(props)"
+                    />
+                </QTd>
+            </template>
         </QTable>
         <QPageSticky :offset="[20, 20]">
             <QBtn @click="redirectToItemCreate()" color="primary" fab icon="add" />

From da06e7bc87623d2abd8ca24ac9f2d8953998e53c Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 17 Apr 2024 08:13:34 -0300
Subject: [PATCH 10/42] WIP

---
 src/css/app.scss                  |   7 +-
 src/i18n/locale/en.yml            |   1 +
 src/i18n/locale/es.yml            |   1 +
 src/pages/Item/ItemFixedPrice.vue | 224 ++++++++++++++++++------------
 4 files changed, 146 insertions(+), 87 deletions(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index b36036df4..da42ab893 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -110,6 +110,11 @@ select:-webkit-autofill {
     font-variation-settings: 'FILL' 1;
 }
 
+.fill-icon-on-hover:hover {
+    font-variation-settings: 'FILL' 1;
+    cursor: pointer;
+}
+
 .vn-table-separation-row {
     height: 16px !important;
     background-color: var(--vn-section-color) !important;
@@ -159,4 +164,4 @@ input::-webkit-inner-spin-button {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 58cc3e3c9..cb56c82bb 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -1129,6 +1129,7 @@ item:
         itemId: Item ID
         groupingPrice: Grouping price
         packingPrice: Packing price
+        hasMinPrice: Has min price
         minPrice: Min price
         started: Started
         ended: Ended
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index bd39e861b..dc132a0af 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -1126,6 +1126,7 @@ item:
         itemId: ID Artículo
         groupingPrice: Precio grouping
         packingPrice: Precio packing
+        hasMinPrice: Tiene precio mínimo
         minPrice: Precio min
         started: Inicio
         ended: Fin
diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index aa7a080a0..1f943d2ad 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -10,10 +10,9 @@ import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
+import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
 
 import { useStateStore } from 'stores/useStateStore';
-import { toDateFormat } from 'src/filters/date.js';
-import { useSession } from 'composables/useSession';
 import { dashIfEmpty } from 'src/filters';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import { useState } from 'src/composables/useState';
@@ -22,63 +21,64 @@ import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 
 const router = useRouter();
-const { getTokenMultimedia } = useSession();
-const token = getTokenMultimedia();
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { openConfirmationModal } = useVnConfirm();
 const state = useState();
 const { notify } = useNotify();
 
-const paginateRef = ref(null);
+const fixedPricesFetchRef = ref(null);
+// const paginateRef = ref(null);
+const editTableCellDialogRef = ref(null);
 const user = state.getUser();
 const fixedPrices = ref([]);
 const fixedPricesOriginalData = ref([]);
 const warehousesOptions = ref([]);
 const itemsWithNameOptions = ref([]);
+const rowsSelected = ref([]);
 
-const exprBuilder = (param, value) => {
-    switch (param) {
-        case 'category':
-            return { 'ic.name': value };
-        case 'buyerFk':
-            return { 'it.workerFk': value };
-        case 'grouping':
-            return { 'b.grouping': value };
-        case 'packing':
-            return { 'b.packing': value };
-        case 'origin':
-            return { 'ori.code': value };
-        case 'typeFk':
-            return { 'i.typeFk': value };
-        case 'intrastat':
-            return { 'intr.description': value };
-        case 'name':
-            return { 'i.name': { like: `%${value}%` } };
-        case 'producer':
-            return { 'pr.name': { like: `%${value}%` } };
-        case 'id':
-        case 'size':
-        case 'subname':
-        case 'isActive':
-        case 'weightByPiece':
-        case 'stemMultiplier':
-        case 'stems':
-            return { [`i.${param}`]: value };
-    }
-};
+// const exprBuilder = (param, value) => {
+//     switch (param) {
+//         case 'category':
+//             return { 'ic.name': value };
+//         case 'buyerFk':
+//             return { 'it.workerFk': value };
+//         case 'grouping':
+//             return { 'b.grouping': value };
+//         case 'packing':
+//             return { 'b.packing': value };
+//         case 'origin':
+//             return { 'ori.code': value };
+//         case 'typeFk':
+//             return { 'i.typeFk': value };
+//         case 'intrastat':
+//             return { 'intr.description': value };
+//         case 'name':
+//             return { 'i.name': { like: `%${value}%` } };
+//         case 'producer':
+//             return { 'pr.name': { like: `%${value}%` } };
+//         case 'id':
+//         case 'size':
+//         case 'subname':
+//         case 'isActive':
+//         case 'weightByPiece':
+//         case 'stemMultiplier':
+//         case 'stems':
+//             return { [`i.${param}`]: value };
+//     }
+// };
 
-const params = reactive({});
+// const params = reactive({});
 
-const applyColumnFilter = async (col) => {
-    try {
-        const paramKey = col.columnFilter?.filterParamKey || col.field;
-        params[paramKey] = col.columnFilter.filterValue;
-        await paginateRef.value.addFilter(null, params);
-    } catch (err) {
-        console.error('Error applying column filter', err);
-    }
-};
+// const applyColumnFilter = async (col) => {
+//     try {
+//         const paramKey = col.columnFilter?.filterParamKey || col.field;
+//         params[paramKey] = col.columnFilter.filterValue;
+//         await paginateRef.value.addFilter(null, params);
+//     } catch (err) {
+//         console.error('Error applying column filter', err);
+//     }
+// };
 
 const columns = computed(() => [
     {
@@ -222,30 +222,22 @@ const columns = computed(() => [
     },
 ]);
 
+const editTableFieldsOptions = [
+    { field: 'rate2', label: t('item.fixedPrice.groupingPrice') },
+    { field: 'rate3', label: t('item.fixedPrice.packingPrice') },
+    { field: 'hasMinPrice', label: t('item.fixedPrice.hasMinPrice') },
+    { field: 'minPrice', label: t('item.fixedPrice.minPrice') },
+    { field: 'started', label: t('item.fixedPrice.started') },
+    { field: 'ended', label: t('item.fixedPrice.ended') },
+    { field: 'warehouseFk', label: t('item.fixedPrice.warehouse') },
+];
+
 const onFixedPricesFetched = (data) => {
     fixedPrices.value = data;
     // el objetivo de esto es guardar los valores iniciales de todas las rows para evitar guardar cambios si la data no cambió al disparar los eventos
     fixedPricesOriginalData.value = JSON.parse(JSON.stringify(data));
 };
 
-const redirectToItemCreate = () => {
-    router.push({ name: 'ItemCreate' });
-};
-
-const redirectToItemSummary = (id) => {
-    router.push({ name: 'ItemSummary', params: { id } });
-};
-
-const cloneItem = async (itemFk) => {
-    // try {
-    //     const { data } = await axios.post(`Items/${itemFk}/clone`);
-    //     if (!data) return;
-    //     router.push({ name: 'ItemTags', params: { id: data.id } });
-    // } catch (err) {
-    //     console.error('Error cloning item', err);
-    // }
-};
-
 const getRowUpdateInputEvents = (props, resetMinPrice, inputType = 'text') => {
     return inputType === 'text'
         ? {
@@ -254,27 +246,27 @@ const getRowUpdateInputEvents = (props, resetMinPrice, inputType = 'text') => {
           }
         : { 'update:modelValue': () => upsertPrice(props, resetMinPrice) };
 };
-const getColumnInputEvents = (col) => {
-    return col.columnFilter.type === 'select'
-        ? { 'update:modelValue': () => applyColumnFilter(col) }
-        : {
-              'keyup.enter': () => applyColumnFilter(col),
-          };
-};
+
+// const getColumnInputEvents = (col) => {
+//     return col.columnFilter.type === 'select'
+//         ? { 'update:modelValue': () => applyColumnFilter(col) }
+//         : {
+//               'keyup.enter': () => applyColumnFilter(col),
+//           };
+// };
 
 const upsertPrice = async ({ row, col, rowIndex }, resetMinPrice) => {
-    console.log('row', row);
-    console.log('col', col);
-    console.log('rowIndex', rowIndex);
-    console.log('field', col.field);
-    console.log('originalData: ', fixedPricesOriginalData.value[rowIndex][col.field]);
-    console.log('actual value: ', row[col.field]);
-    if (fixedPricesOriginalData.value[rowIndex][col.field] == row[col.field]) return;
+    // Si la row no tiene id significa que fue agregada con addRow y no se ha guardado en la base de datos
+    const isNew = !row.id;
+    // Si isNew es falso no se checkea si el valor es igual a la original
+    if (!isNew)
+        if (fixedPricesOriginalData.value[rowIndex][col.field] == row[col.field]) return;
 
     try {
         if (resetMinPrice) row.hasMinPrice = 0;
         const requiredFields = ['itemFk', 'started', 'ended', 'rate2', 'rate3'];
         for (const field of requiredFields) if (!row[field]) return;
+
         const { data } = await axios.patch('FixedPrices/upsertFixedPrice', row);
         row = data;
         fixedPricesOriginalData.value[rowIndex][col.field] = row[col.field];
@@ -283,6 +275,43 @@ const upsertPrice = async ({ row, col, rowIndex }, resetMinPrice) => {
     }
 };
 
+const addRow = () => {
+    if (!fixedPrices.value || fixedPrices.value.length === 0) {
+        fixedPrices.value = [];
+
+        const today = Date.vnNew();
+
+        const millisecsInDay = 86400000;
+        const daysInWeek = 7;
+        const nextWeek = new Date(today.getTime() + daysInWeek * millisecsInDay);
+
+        fixedPricesOriginalData.value.push({
+            started: today,
+            ended: nextWeek,
+        });
+        fixedPrices.value.push({
+            started: today,
+            ended: nextWeek,
+        });
+        return;
+    }
+
+    const lastIndex = fixedPrices.value.length - 1;
+    const lastItemCopy = JSON.parse(JSON.stringify(fixedPrices.value[lastIndex]));
+    const { id, ...restOfData } = lastItemCopy;
+    fixedPricesOriginalData.value.push(restOfData);
+    fixedPrices.value.push(restOfData);
+};
+
+const openEditTableCellDialog = () => {
+    editTableCellDialogRef.value.show();
+};
+
+const onEditCellDataSaved = async () => {
+    rowsSelected.value = [];
+    await fixedPricesFetchRef.value.fetch();
+};
+
 onMounted(async () => {
     stateStore.rightDrawer = true;
 });
@@ -292,6 +321,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 
 <template>
     <FetchData
+        ref="fixedPricesFetchRef"
         url="FixedPrices/filter"
         :filter="{ order: ['itemFk'] }"
         :params="{ warehouseFk: user.warehouseFk }"
@@ -315,6 +345,8 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             :rows="fixedPrices"
             :columns="columns"
             row-key="id"
+            selection="multiple"
+            v-model:selected="rowsSelected"
             :pagination="{ rowsPerPage: 0 }"
             class="full-width q-mt-md"
             :no-data-label="t('globals.noResults')"
@@ -433,21 +465,41 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     />
                 </QTd>
             </template>
+            <template #bottom-row>
+                <QTd align="center">
+                    <QIcon
+                        @click.stop="addRow()"
+                        class="fill-icon-on-hover"
+                        color="primary"
+                        name="add_circle"
+                        size="sm"
+                    >
+                        <QTooltip>
+                            {{ t('Add fixed price') }}
+                        </QTooltip>
+                    </QIcon>
+                </QTd>
+            </template>
         </QTable>
-        <QPageSticky :offset="[20, 20]">
-            <QBtn @click="redirectToItemCreate()" color="primary" fab icon="add" />
-            <QTooltip class="text-no-wrap">
-                {{ t('New item') }}
+        <QPageSticky v-if="rowsSelected.length > 0" :offset="[20, 20]">
+            <QBtn @click="openEditTableCellDialog()" color="primary" fab icon="edit" />
+            <QTooltip>
+                {{ t('Edit fixed price(s)') }}
             </QTooltip>
         </QPageSticky>
+        <QDialog ref="editTableCellDialogRef">
+            <EditTableCellValueForm
+                edit-url="FixedPrices/editFixedPrice"
+                :rows="rowsSelected"
+                :fields-options="editTableFieldsOptions"
+                @on-data-saved="onEditCellDataSaved()"
+            />
+        </QDialog>
     </QPage>
 </template>
 
 <i18n>
 es:
-    New item: Nuevo artículo
-    All it's properties will be copied: Todas sus propiedades serán copiadas
-    Do you want to clone this item?: ¿Desea clonar este artículo?
-    Clone: Clonar
-    Preview: Vista previa
+    Add fixed price: Añadir precio fijado
+    Edit fixed price(s): Editar precio(s) fijado(s)
 </i18n>

From 2903c6a2bf42489f307bc7373871a0c258bc7515 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 17 Apr 2024 14:55:17 -0300
Subject: [PATCH 11/42] table adjustments

---
 src/components/EditTableCellValueForm.vue |  49 ++++---
 src/pages/Item/ItemFixedPrice.vue         | 148 +++++++++++++++++++---
 2 files changed, 159 insertions(+), 38 deletions(-)

diff --git a/src/components/EditTableCellValueForm.vue b/src/components/EditTableCellValueForm.vue
index 9e48889a0..f79fda444 100644
--- a/src/components/EditTableCellValueForm.vue
+++ b/src/components/EditTableCellValueForm.vue
@@ -1,9 +1,12 @@
 <script setup>
-import { ref, reactive } from 'vue';
+import { ref, markRaw } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import { QCheckbox } from 'quasar';
 
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
@@ -28,11 +31,16 @@ const $props = defineProps({
 const { t } = useI18n();
 const { notify } = useNotify();
 
-const formData = reactive({
-    field: null,
-    newValue: null,
-});
+const inputs = {
+    input: markRaw(VnInput),
+    number: markRaw(VnInput),
+    date: markRaw(VnInputDate),
+    checkbox: markRaw(QCheckbox),
+    select: markRaw(VnSelectFilter),
+};
 
+const newValue = ref(null);
+const selectedField = ref(null);
 const closeButton = ref(null);
 const isLoading = ref(false);
 
@@ -47,8 +55,8 @@ const submitData = async () => {
         isLoading.value = true;
         const rowsToEdit = $props.rows.map((row) => ({ id: row.id, itemFk: row.itemFk }));
         const payload = {
-            field: formData.field,
-            newValue: formData.newValue,
+            field: selectedField.value.field,
+            newValue: newValue.value,
             lines: rowsToEdit,
         };
 
@@ -75,19 +83,20 @@ const closeForm = () => {
             <span class="countLines">{{ ` ${rows.length} ` }}</span>
             <span class="title">{{ t('buy(s)') }}</span>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Field to edit')"
-                        :options="fieldsOptions"
-                        hide-selected
-                        option-label="label"
-                        option-value="field"
-                        v-model="formData.field"
-                    />
-                </div>
-                <div class="col">
-                    <VnInput :label="t('Value')" v-model="formData.newValue" />
-                </div>
+                <VnSelectFilter
+                    :label="t('Field to edit')"
+                    :options="fieldsOptions"
+                    hide-selected
+                    option-label="label"
+                    v-model="selectedField"
+                />
+                <component
+                    :is="inputs[selectedField?.component || 'input']"
+                    v-bind="selectedField?.attrs || {}"
+                    v-model="newValue"
+                    :label="t('Value')"
+                    style="width: 200px"
+                />
             </VnRow>
             <div class="q-mt-lg row justify-end">
                 <QBtn
diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 1f943d2ad..01189db3d 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, computed, reactive, onUnmounted } from 'vue';
+import { onMounted, ref, computed, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -220,16 +220,63 @@ const columns = computed(() => [
         //     },
         // },
     },
+    { name: 'deleteAction', align: 'center' },
 ]);
 
 const editTableFieldsOptions = [
-    { field: 'rate2', label: t('item.fixedPrice.groupingPrice') },
-    { field: 'rate3', label: t('item.fixedPrice.packingPrice') },
-    { field: 'hasMinPrice', label: t('item.fixedPrice.hasMinPrice') },
-    { field: 'minPrice', label: t('item.fixedPrice.minPrice') },
-    { field: 'started', label: t('item.fixedPrice.started') },
-    { field: 'ended', label: t('item.fixedPrice.ended') },
-    { field: 'warehouseFk', label: t('item.fixedPrice.warehouse') },
+    {
+        field: 'rate2',
+        label: t('item.fixedPrice.groupingPrice'),
+        component: 'input',
+        attrs: {
+            type: 'number',
+        },
+    },
+    {
+        field: 'rate3',
+        label: t('item.fixedPrice.packingPrice'),
+        component: 'input',
+        attrs: {
+            type: 'number',
+        },
+    },
+    {
+        field: 'minPrice',
+        label: t('item.fixedPrice.minPrice'),
+        component: 'input',
+        attrs: {
+            type: 'number',
+        },
+    },
+    {
+        field: 'hasMinPrice',
+        label: t('item.fixedPrice.hasMinPrice'),
+        component: 'checkbox',
+        attrs: {
+            'false-value': 0,
+            'true-value': 1,
+        },
+    },
+    {
+        field: 'started',
+        label: t('item.fixedPrice.started'),
+        component: 'date',
+    },
+    {
+        field: 'ended',
+        label: t('item.fixedPrice.ended'),
+        component: 'date',
+    },
+    {
+        field: 'warehouseFk',
+        label: t('item.fixedPrice.warehouse'),
+        component: 'select',
+        attrs: {
+            options: [],
+            'option-label': 'name',
+            'option-value': 'id',
+        },
+    },
 ];
 
 const onFixedPricesFetched = (data) => {
@@ -255,17 +302,25 @@ const getRowUpdateInputEvents = (props, resetMinPrice, inputType = 'text') => {
 //           };
 // };
 
-const upsertPrice = async ({ row, col, rowIndex }, resetMinPrice) => {
-    // Si la row no tiene id significa que fue agregada con addRow y no se ha guardado en la base de datos
+const validations = (row, rowIndex, col) => {
     const isNew = !row.id;
+    // Si la row no tiene id significa que fue agregada con addRow y no se ha guardado en la base de datos
     // Si isNew es falso no se checkea si el valor es igual a la original
     if (!isNew)
-        if (fixedPricesOriginalData.value[rowIndex][col.field] == row[col.field]) return;
+        if (fixedPricesOriginalData.value[rowIndex][col.field] == row[col.field])
+            return false;
+
+    const requiredFields = ['itemFk', 'started', 'ended', 'rate2', 'rate3'];
+    return requiredFields.every(
+        (field) => row[field] !== null && row[field] !== undefined
+    );
+};
+
+const upsertPrice = async ({ row, col, rowIndex }, resetMinPrice = false) => {
+    if (!validations(row, rowIndex, col)) return;
 
     try {
         if (resetMinPrice) row.hasMinPrice = 0;
-        const requiredFields = ['itemFk', 'started', 'ended', 'rate2', 'rate3'];
-        for (const field of requiredFields) if (!row[field]) return;
 
         const { data } = await axios.patch('FixedPrices/upsertFixedPrice', row);
         row = data;
@@ -296,8 +351,9 @@ const addRow = () => {
         return;
     }
 
-    const lastIndex = fixedPrices.value.length - 1;
-    const lastItemCopy = JSON.parse(JSON.stringify(fixedPrices.value[lastIndex]));
+    const lastItemCopy = JSON.parse(
+        JSON.stringify(fixedPrices.value[fixedPrices.value.length - 1])
+    );
     const { id, ...restOfData } = lastItemCopy;
     fixedPricesOriginalData.value.push(restOfData);
     fixedPrices.value.push(restOfData);
@@ -312,6 +368,37 @@ const onEditCellDataSaved = async () => {
     await fixedPricesFetchRef.value.fetch();
 };
 
+const onWarehousesFetched = (data) => {
+    warehousesOptions.value = data;
+    // Actualiza las 'options' del elemento con field 'warehouseFk' en 'editTableFieldsOptions'.
+    const warehouseField = editTableFieldsOptions.find(
+        (field) => field.field === 'warehouseFk'
+    );
+    warehouseField.attrs.options = data;
+};
+
+const removePrice = async (id, rowIndex) => {
+    try {
+        await axios.delete(`FixedPrices/${id}`);
+        fixedPrices.value.splice(rowIndex, 1);
+        fixedPricesOriginalData.value.splice(rowIndex, 1);
+        notify(t('globals.dataSaved'), 'positive');
+    } catch (err) {
+        console.error('Error removing price', err);
+    }
+};
+
+const updateMinPrice = async (value, props) => {
+    // El checkbox hasMinPrice se encuentra en la misma columna que el input hasMinPrice
+    // Por lo tanto le mandamos otro objeto con las mismas propiedades pero con el campo 'field' cambiado
+    props.row.hasMinPrice = value;
+    await upsertPrice({
+        row: props.row,
+        col: { field: 'hasMinPrice' },
+        rowIndex: props.rowIndex,
+    });
+};
+
 onMounted(async () => {
     stateStore.rightDrawer = true;
 });
@@ -332,7 +419,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         url="Warehouses"
         :filter="{ order: ['name'] }"
         auto-load
-        @on-fetch="(data) => (warehousesOptions = data)"
+        @on-fetch="(data) => onWarehousesFetched(data)"
     />
     <FetchData
         url="Items/withName"
@@ -422,10 +509,11 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     <div class="row">
                         <QCheckbox
                             class="col"
-                            v-model="props.row.hasMinPrice"
+                            :model-value="props.row.hasMinPrice"
+                            @update:model-value="updateMinPrice($event, props)"
                             :false-value="0"
                             :true-value="1"
-                            v-on="getRowUpdateInputEvents(props)"
+                            :toggle-indeterminate="false"
                         />
                         <VnInput
                             class="col"
@@ -465,6 +553,27 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     />
                 </QTd>
             </template>
+            <template #body-cell-deleteAction="{ row, rowIndex }">
+                <QTd class="col">
+                    <QIcon
+                        name="delete"
+                        size="sm"
+                        class="cursor-pointer fill-icon-on-hover"
+                        color="primary"
+                        @click.stop="
+                            openConfirmationModal(
+                                t('This row will be removed'),
+                                t('Do you want to clone this item?'),
+                                () => removePrice(row.id, rowIndex)
+                            )
+                        "
+                    >
+                        <QTooltip class="text-no-wrap">
+                            {{ t('Delete') }}
+                        </QTooltip>
+                    </QIcon>
+                </QTd>
+            </template>
             <template #bottom-row>
                 <QTd align="center">
                     <QIcon
@@ -502,4 +611,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 es:
     Add fixed price: Añadir precio fijado
     Edit fixed price(s): Editar precio(s) fijado(s)
+    This row will be removed: Esta linea se eliminará
+    Are you sure you want to continue?: ¿Seguro que quieres continuar?
+    Delete: Eliminar
 </i18n>

From 5addd0056d05b45f4cfc5939c52bec97b8906f58 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 17 Apr 2024 17:18:38 -0300
Subject: [PATCH 12/42] Add filter panel

---
 src/components/ItemsFilterPanel.vue     | 357 ++++++++++++++++++++++++
 src/i18n/locale/en.yml                  |  11 +
 src/i18n/locale/es.yml                  |  11 +
 src/pages/Item/ItemFixedPrice.vue       |  96 ++++---
 src/pages/Item/ItemFixedPriceFilter.vue | 108 +++++++
 5 files changed, 548 insertions(+), 35 deletions(-)
 create mode 100644 src/components/ItemsFilterPanel.vue
 create mode 100644 src/pages/Item/ItemFixedPriceFilter.vue

diff --git a/src/components/ItemsFilterPanel.vue b/src/components/ItemsFilterPanel.vue
new file mode 100644
index 000000000..c6df0c1e0
--- /dev/null
+++ b/src/components/ItemsFilterPanel.vue
@@ -0,0 +1,357 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnInput from 'components/common/VnInput.vue';
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
+
+import axios from 'axios';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+    customTags: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+const itemCategories = ref([]);
+const selectedCategoryFk = ref(null);
+const selectedTypeFk = ref(null);
+const itemTypesOptions = ref([]);
+const suppliersOptions = ref([]);
+const tagOptions = ref([]);
+const tagValues = ref([]);
+
+const categoryList = computed(() => {
+    return (itemCategories.value || [])
+        .filter((category) => category.display)
+        .map((category) => ({
+            ...category,
+            icon: `vn:${(category.icon || '').split('-')[1]}`,
+        }));
+});
+
+const selectedCategory = computed(() =>
+    (itemCategories.value || []).find(
+        (category) => category?.id === selectedCategoryFk.value
+    )
+);
+
+const selectedType = computed(() => {
+    return (itemTypesOptions.value || []).find(
+        (type) => type?.id === selectedTypeFk.value
+    );
+});
+
+const selectCategory = async (params, categoryId, search) => {
+    if (params.categoryFk === categoryId) {
+        resetCategory(params);
+        search();
+        return;
+    }
+    selectedCategoryFk.value = categoryId;
+    params.categoryFk = categoryId;
+    await fetchItemTypes(categoryId);
+    search();
+};
+
+const resetCategory = (params) => {
+    selectedCategoryFk.value = null;
+    itemTypesOptions.value = null;
+    if (params) {
+        params.categoryFk = null;
+        params.typeFk = null;
+    }
+};
+
+const applyTags = (params, search) => {
+    params.tags = tagValues.value
+        .filter((tag) => tag.selectedTag && tag.value)
+        .map((tag) => ({
+            tagFk: tag.selectedTag.id,
+            tagName: tag.selectedTag.name,
+            value: tag.value,
+        }));
+    search();
+};
+
+const fetchItemTypes = async (id) => {
+    try {
+        const filter = {
+            fields: ['id', 'name', 'categoryFk'],
+            where: { categoryFk: id },
+            include: 'category',
+            order: 'name ASC',
+        };
+        const { data } = await axios.get('ItemTypes', {
+            params: { filter: JSON.stringify(filter) },
+        });
+        itemTypesOptions.value = data;
+    } catch (err) {
+        console.error('Error fetching item types', err);
+    }
+};
+
+const getCategoryClass = (category, params) => {
+    if (category.id === params?.categoryFk) {
+        return 'active';
+    }
+};
+
+const getSelectedTagValues = async (tag) => {
+    try {
+        tag.value = null;
+        const filter = {
+            fields: ['value'],
+            order: 'value ASC',
+            limit: 30,
+        };
+
+        const params = { filter: JSON.stringify(filter) };
+        const { data } = await axios.get(`Tags/${tag.selectedTag.id}/filterValue`, {
+            params,
+        });
+        tag.valueOptions = data;
+    } catch (err) {
+        console.error('Error getting selected tag values');
+    }
+};
+
+const removeTag = (index, params, search) => {
+    (tagValues.value || []).splice(index, 1);
+    applyTags(params, search);
+};
+</script>
+
+<template>
+    <FetchData
+        url="ItemCategories"
+        limit="30"
+        auto-load
+        @on-fetch="(data) => (itemCategories = data)"
+    />
+    <FetchData
+        url="Suppliers"
+        limit="30"
+        auto-load
+        :filter="{ fields: ['id', 'name', 'nickname'], order: 'name ASC', limit: 30 }"
+        @on-fetch="(data) => (suppliersOptions = data)"
+    />
+    <FetchData
+        url="Tags"
+        :filter="{ fields: ['id', 'name', 'isFree'] }"
+        auto-load
+        limit="30"
+        @on-fetch="(data) => (tagOptions = data)"
+    />
+    <VnFilterPanel
+        :data-key="props.dataKey"
+        :expr-builder="exprBuilder"
+        :custom-tags="customTags"
+        @init="onFilterInit"
+        @remove="clearFilter"
+    >
+        <template #tags="{ tag, formatFn }">
+            <strong v-if="tag.label === 'categoryFk'">
+                {{ t(selectedCategory?.name || '') }}
+            </strong>
+            <strong v-else-if="tag.label === 'typeFk'">
+                {{ t(selectedType?.name || '') }}
+            </strong>
+            <div v-else class="q-gutter-x-xs">
+                <strong>{{ t(`components.itemsFilterPanel.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #customTags="{ tags, params }">
+            <template v-for="tag in tags" :key="tag.label">
+                <VnFilterPanelChip
+                    v-for="chip in tag.value"
+                    :key="chip"
+                    removable
+                    @remove="removeTagChip(chip, params, searchFn)"
+                >
+                    <div class="q-gutter-x-xs">
+                        <strong>{{ chip.tagName }}: </strong>
+                        <span>"{{ chip.value }}"</span>
+                    </div>
+                </VnFilterPanelChip>
+            </template>
+        </template>
+        <template #body="{ params, searchFn }">
+            <QItem class="category-filter q-mt-md">
+                <QBtn
+                    dense
+                    flat
+                    round
+                    v-for="category in categoryList"
+                    :key="category.name"
+                    :class="['category', getCategoryClass(category, params)]"
+                    :icon="category.icon"
+                    @click="selectCategory(params, category.id, searchFn)"
+                >
+                    <QTooltip>
+                        {{ t(category.name) }}
+                    </QTooltip>
+                </QBtn>
+            </QItem>
+            <QItem class="q-my-md">
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('components.itemsFilterPanel.typeFk')"
+                        v-model="params.typeFk"
+                        :options="itemTypesOptions"
+                        option-value="id"
+                        option-label="name"
+                        dense
+                        outlined
+                        rounded
+                        use-input
+                        :disable="!selectedCategoryFk"
+                        @update:model-value="
+                            (value) => {
+                                selectedTypeFk = value;
+                                searchFn();
+                            }
+                        "
+                    >
+                        <template #option="{ itemProps, opt }">
+                            <QItem v-bind="itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ opt.name }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        {{ opt.categoryName }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </QItemSection>
+            </QItem>
+            <QSeparator />
+            <slot name="body" :params="params" :search-fn="searchFn" />
+            <QItem
+                v-for="(value, index) in tagValues"
+                :key="value"
+                class="q-mt-md filter-value"
+            >
+                <QItemSection class="col">
+                    <VnSelectFilter
+                        :label="t('components.itemsFilterPanel.tag')"
+                        v-model="value.selectedTag"
+                        :options="tagOptions"
+                        option-label="name"
+                        dense
+                        outlined
+                        rounded
+                        :emit-value="false"
+                        use-input
+                        :is-clearable="false"
+                        @update:model-value="getSelectedTagValues(value)"
+                    />
+                </QItemSection>
+                <QItemSection class="col">
+                    <VnSelectFilter
+                        v-if="!value?.selectedTag?.isFree && value.valueOptions"
+                        :label="t('components.itemsFilterPanel.value')"
+                        v-model="value.value"
+                        :options="value.valueOptions || []"
+                        option-value="value"
+                        option-label="value"
+                        dense
+                        outlined
+                        rounded
+                        emit-value
+                        use-input
+                        :disable="!value"
+                        :is-clearable="false"
+                        @update:model-value="applyTags(params, searchFn)"
+                    />
+                    <VnInput
+                        v-else
+                        v-model="value.value"
+                        :label="t('components.itemsFilterPanel.value')"
+                        :disable="!value"
+                        is-outlined
+                        :is-clearable="false"
+                        @keyup.enter="applyTags(params, searchFn)"
+                    />
+                </QItemSection>
+                <QIcon
+                    name="delete"
+                    class="fill-icon-on-hover q-px-xs"
+                    color="primary"
+                    size="sm"
+                    @click="removeTag(index, params, searchFn)"
+                />
+            </QItem>
+            <QItem class="q-mt-lg">
+                <QIcon
+                    name="add_circle"
+                    class="fill-icon-on-hover q-px-xs"
+                    color="primary"
+                    size="sm"
+                    @click="tagValues.push({})"
+                />
+            </QItem>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<style lang="scss" scoped>
+.category-filter {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 12px;
+
+    .category {
+        padding: 8px;
+        width: 60px;
+        height: 60px;
+        font-size: 1.4rem;
+        background-color: var(--vn-accent-color);
+
+        &.active {
+            background-color: $primary;
+        }
+    }
+}
+
+.filter-value {
+    display: flex;
+    align-items: center;
+}
+</style>
+
+<i18n>
+en:
+    params:
+        supplier: Supplier
+        from: From
+        to: To
+        active: Is active
+        visible: Is visible
+        floramondo: Is floramondo
+        salesPersonFk: Buyer
+        categoryFk: Category
+
+es:
+    params:
+        supplier: Proveedor
+        from: Desde
+        to: Hasta
+        active: Activo
+        visible: Visible
+        floramondo: Floramondo
+        salesPersonFk: Comprador
+        categoryFk: Categoría
+</i18n>
diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index cb56c82bb..837602b4b 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -1136,6 +1136,17 @@ item:
         warehouse: Warehouse
 components:
     topbar: {}
+    itemsFilterPanel:
+        typeFk: Type
+        tag: Tag
+        value: Value
+
+        buyerFk: Buyer
+        warehouseFk: Almacén
+        started: Desde
+        ended: Hasta
+        mine: Para mi
+        hasMinPrice: Precio mínimo
     userPanel:
         copyToken: Token copied to clipboard
         settings: Settings
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index dc132a0af..85925b22f 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -1133,6 +1133,17 @@ item:
         warehouse: Almacén
 components:
     topbar: {}
+    itemsFilterPanel:
+        typeFk: Tipo
+        tag: Etiqueta
+        value: Valor
+
+        buyerFk: Comprador
+        warehouseFk: Warehouse
+        started: From
+        ended: To
+        mine: For me
+        hasMinPrice: Minimum price
     userPanel:
         copyToken: Token copiado al portapapeles
         settings: Configuración
diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 01189db3d..c9811fcd5 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, computed, onUnmounted } from 'vue';
+import { onMounted, ref, computed, onUnmounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -7,10 +7,9 @@ import FetchData from 'components/FetchData.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
+import ItemFixedPriceFilter from './ItemFixedPriceFilter.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { dashIfEmpty } from 'src/filters';
@@ -19,8 +18,8 @@ import { useState } from 'src/composables/useState';
 import { toCurrency } from 'filters/index';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
+import { useArrayData } from 'composables/useArrayData';
 
-const router = useRouter();
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { openConfirmationModal } = useVnConfirm();
@@ -28,7 +27,6 @@ const state = useState();
 const { notify } = useNotify();
 
 const fixedPricesFetchRef = ref(null);
-// const paginateRef = ref(null);
 const editTableCellDialogRef = ref(null);
 const user = state.getUser();
 const fixedPrices = ref([]);
@@ -37,36 +35,36 @@ const warehousesOptions = ref([]);
 const itemsWithNameOptions = ref([]);
 const rowsSelected = ref([]);
 
-// const exprBuilder = (param, value) => {
-//     switch (param) {
-//         case 'category':
-//             return { 'ic.name': value };
-//         case 'buyerFk':
-//             return { 'it.workerFk': value };
-//         case 'grouping':
-//             return { 'b.grouping': value };
-//         case 'packing':
-//             return { 'b.packing': value };
-//         case 'origin':
-//             return { 'ori.code': value };
-//         case 'typeFk':
-//             return { 'i.typeFk': value };
-//         case 'intrastat':
-//             return { 'intr.description': value };
-//         case 'name':
-//             return { 'i.name': { like: `%${value}%` } };
-//         case 'producer':
-//             return { 'pr.name': { like: `%${value}%` } };
-//         case 'id':
-//         case 'size':
-//         case 'subname':
-//         case 'isActive':
-//         case 'weightByPiece':
-//         case 'stemMultiplier':
-//         case 'stems':
-//             return { [`i.${param}`]: value };
-//     }
-// };
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'name':
+            return { 'i.name': { like: `%${value}%` } };
+        case 'itemFk':
+        case 'warehouseFk':
+        case 'rate2':
+        case 'rate3':
+            param = `fp.${param}`;
+            return { [param]: value };
+        case 'minPrice':
+            param = `i.${param}`;
+            return { [param]: value };
+    }
+};
+
+const filterParams = ref({});
+
+const arrayData = useArrayData('ItemFixedPrices', {
+    url: 'FixedPrices/filter',
+    userParams: filterParams,
+    order: ['itemFk'],
+    exprBuilder: exprBuilder,
+});
+const store = arrayData.store;
+
+watch(
+    () => store.data,
+    (value) => (fixedPrices.value = value)
+);
 
 // const params = reactive({});
 
@@ -401,6 +399,9 @@ const updateMinPrice = async (value, props) => {
 
 onMounted(async () => {
     stateStore.rightDrawer = true;
+    filterParams.value = { warehouseFk: user.value.warehouseFk };
+    const { data } = await arrayData.fetch({ append: false });
+    onFixedPricesFetched(data);
 });
 
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -427,6 +428,31 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         auto-load
         @on-fetch="(data) => (itemsWithNameOptions = data)"
     />
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <ItemFixedPriceFilter
+                data-key="ItemFixedPrices"
+                :warehouses-options="warehousesOptions"
+            />
+        </QScrollArea>
+    </QDrawer>
     <QPage class="column items-center q-pa-md">
         <QTable
             :rows="fixedPrices"
diff --git a/src/pages/Item/ItemFixedPriceFilter.vue b/src/pages/Item/ItemFixedPriceFilter.vue
new file mode 100644
index 000000000..cd86b5f71
--- /dev/null
+++ b/src/pages/Item/ItemFixedPriceFilter.vue
@@ -0,0 +1,108 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import ItemsFilterPanel from 'src/components/ItemsFilterPanel.vue';
+
+const { t } = useI18n();
+
+defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+    warehousesOptions: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+const itemTypeWorkersOptions = ref([]);
+</script>
+
+<template>
+    <FetchData
+        url="TicketRequests/getItemTypeWorker"
+        limit="30"
+        auto-load
+        :filter="{ fields: ['id', 'nickname'], order: 'nickname ASC', limit: 30 }"
+        @on-fetch="(data) => (itemTypeWorkersOptions = data)"
+    />
+    <ItemsFilterPanel :data-key="dataKey" :custom-tags="['tags']">
+        <template #body="{ params, searchFn }">
+            <QItem class="q-my-md">
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('components.itemsFilterPanel.buyerFk')"
+                        v-model="params.buyerFk"
+                        :options="itemTypeWorkersOptions"
+                        option-value="id"
+                        option-label="nickname"
+                        dense
+                        outlined
+                        rounded
+                        use-input
+                        @update:model-value="searchFn()"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-my-md">
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('components.itemsFilterPanel.warehouseFk')"
+                        v-model="params.warehouseFk"
+                        :options="warehousesOptions"
+                        option-label="name"
+                        option-value="id"
+                        dense
+                        outlined
+                        rounded
+                        use-input
+                        @update:model-value="searchFn()"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-my-md">
+                <QItemSection>
+                    <VnInputDate
+                        :label="t('components.itemsFilterPanel.started')"
+                        v-model="params.started"
+                        is-outlined
+                        @update:model-value="searchFn()"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-my-md">
+                <QItemSection>
+                    <VnInputDate
+                        :label="t('components.itemsFilterPanel.ended')"
+                        v-model="params.ended"
+                        is-outlined
+                        @update:model-value="searchFn()"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('components.itemsFilterPanel.mine')"
+                        v-model="params.mine"
+                        toggle-indeterminate
+                        @update:model-value="searchFn()"
+                    />
+                </QItemSection>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('components.itemsFilterPanel.hasMinPrice')"
+                        v-model="params.hasMinPrice"
+                        toggle-indeterminate
+                        @update:model-value="searchFn()"
+                    />
+                </QItemSection>
+            </QItem>
+        </template>
+    </ItemsFilterPanel>
+</template>

From ace55c554f5ba51bfc269df81985a4171315f0f7 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Thu, 18 Apr 2024 08:03:57 +0200
Subject: [PATCH 13/42] refactor: refs #6899 corrected Lilium styles and
 functionalities

---
 src/css/app.scss                              |  9 +++++++++
 .../InvoiceOut/Card/InvoiceOutSummary.vue     | 20 +++++++++++++++++--
 .../InvoiceOut/InvoiceOutNegativeBases.vue    |  5 ++++-
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index b36036df4..aaa071cde 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -127,6 +127,15 @@ select:-webkit-autofill {
     background-color: var(--vn-section-color);
 }
 
+.q-checkbox {
+    & .q-checkbox__label {
+        color: var(--vn-text-color);
+    }
+    & .q-checkbox__inner {
+        color: var(--vn-label-color);
+    }
+}
+
 .q-chip,
 .q-notification__message,
 .q-notification__icon {
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue b/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
index a6a28bdde..688bbf2aa 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
@@ -138,7 +138,7 @@ const ticketsColumns = ref([
                 <VnTitle :text="t('invoiceOut.summary.taxBreakdown')" />
                 <QTable :columns="taxColumns" :rows="invoiceOut.taxesBreakdown" flat>
                     <template #header="props">
-                        <QTr :props="props">
+                        <QTr class="tr-header" :props="props">
                             <QTh v-for="col in props.cols" :key="col.name" :props="props">
                                 {{ t(col.label) }}
                             </QTh>
@@ -149,6 +149,13 @@ const ticketsColumns = ref([
             <QCard class="vn-three">
                 <VnTitle :text="t('invoiceOut.summary.tickets')" />
                 <QTable v-if="tickets" :columns="ticketsColumns" :rows="tickets" flat>
+                    <template #header="props">
+                        <QTr :props="props">
+                            <QTh class="tr-header" v-for="col in props.cols" :key="col.name" :props="props">
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
+                    </template>
                     <template #body-cell-item="{ value }">
                         <QTd>
                             <QBtn flat color="primary">
@@ -159,7 +166,7 @@ const ticketsColumns = ref([
                     </template>
                     <template #body-cell-quantity="{ value, row }">
                         <QTd>
-                            <QBtn flat color="primary" dense>
+                            <QBtn class="no-uppercase" flat color="primary" dense>
                                 {{ value }}
                                 <CustomerDescriptorProxy :id="row.id" />
                             </QBtn>
@@ -170,3 +177,12 @@ const ticketsColumns = ref([
         </template>
     </CardSummary>
 </template>
+
+<style lang="scss" scoped>
+.tr-header{
+    color: #a8a8a8;
+}
+.no-uppercase{
+    text-transform: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
index fb434124c..e0b17a4b3 100644
--- a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
+++ b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
@@ -183,7 +183,7 @@ const downloadCSV = async () => {
             </template>
             <template #body-cell-comercial="{ row }">
                 <QTd>
-                    <QBtn flat dense color="blue">{{ row.comercialName }}</QBtn>
+                    <QBtn class="no-uppercase" flat dense color="blue">{{ row.comercialName }}</QBtn>
                     <WorkerDescriptorProxy :id="row.comercialId" />
                 </QTd>
             </template>
@@ -211,6 +211,9 @@ const downloadCSV = async () => {
     border-radius: 4px;
     padding: 6px;
 }
+.no-uppercase{
+    text-transform: none;
+}
 </style>
 
 <i18n>

From 90ed6ad09a20edf8016b29133b0b850a2f906b47 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 18 Apr 2024 10:49:17 +0200
Subject: [PATCH 14/42] fix: refs #6480 drop secondary acroos

---
 src/components/ui/VnSearchbar.vue | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index ddf520d0f..fc8475ace 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -131,13 +131,6 @@ async function search() {
                 />
             </template>
             <template #append>
-                <QIcon
-                    v-if="searchText !== ''"
-                    name="close"
-                    @click="searchText = ''"
-                    class="cursor-pointer"
-                />
-
                 <QIcon
                     v-if="props.info && $q.screen.gt.xs"
                     name="info"

From 75975b631e6644ef3d6580024f451df6b973e13a Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 18 Apr 2024 11:32:03 +0200
Subject: [PATCH 15/42] feat: refs #6480 include SearchBar into VnCard

---
 src/components/common/VnCard.vue             | 14 ++++++-
 src/pages/InvoiceOut/Card/InvoiceOutCard.vue | 39 ++++----------------
 2 files changed, 21 insertions(+), 32 deletions(-)

diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index 38daadede..a8c2d563f 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -1,16 +1,28 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
 import useCardSize from 'src/composables/useCardSize';
 import VnSubToolbar from '../ui/VnSubToolbar.vue';
 import LeftMenu from 'components/LeftMenu.vue';
-import { useStateStore } from 'stores/useStateStore';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
 
 defineProps({
     descriptor: { type: Object, required: true },
+    searchbarProps: { type: Object, required: true },
 });
 
+const { t } = useI18n();
 const stateStore = useStateStore();
 </script>
 <template>
+    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
+        <VnSearchbar
+            :data-key="searchbarProps.dataKey"
+            :url="searchbarProps.url"
+            :label="t(searchbarProps.label)"
+            :info="t(searchbarProps.info)"
+        />
+    </Teleport>
     <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <QScrollArea class="fit">
             <component :is="descriptor" />
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
index 6844df2dd..9214b1b04 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
@@ -1,39 +1,16 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
 import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
+import VnCard from 'components/common/VnCard.vue';
 
-const stateStore = useStateStore();
-const { t } = useI18n();
+const searchbar = {
+    dataKey: 'InvoiceOutList',
+    url: 'InvoiceOuts/filter',
+    label: 'Search invoice',
+    info: 'You can search by invoice reference',
+};
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <VnSearchbar
-            data-key="InvoiceOutList"
-            url="InvoiceOuts/filter"
-            :label="t('Search invoice')"
-            :info="t('You can search by invoice reference')"
-        />
-    </Teleport>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <InvoiceOutDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard :descriptor="InvoiceOutDescriptor" :searchbar-props="searchbar" />
 </template>
 
 <i18n>

From 3f8cafd2015dd4fa10ad709bf6019bbc98c917e9 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Thu, 18 Apr 2024 13:14:59 +0200
Subject: [PATCH 16/42] style: refs #6899 fixed style

---
 src/pages/InvoiceOut/Card/InvoiceOutSummary.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue b/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
index 688bbf2aa..2d6d17ae2 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
@@ -151,7 +151,12 @@ const ticketsColumns = ref([
                 <QTable v-if="tickets" :columns="ticketsColumns" :rows="tickets" flat>
                     <template #header="props">
                         <QTr :props="props">
-                            <QTh class="tr-header" v-for="col in props.cols" :key="col.name" :props="props">
+                            <QTh
+                                class="tr-header"
+                                v-for="col in props.cols"
+                                :key="col.name"
+                                :props="props"
+                            >
                                 {{ t(col.label) }}
                             </QTh>
                         </QTr>
@@ -179,10 +184,10 @@ const ticketsColumns = ref([
 </template>
 
 <style lang="scss" scoped>
-.tr-header{
-    color: #a8a8a8;
+.tr-header {
+    color: var(--vn-label-color);
 }
-.no-uppercase{
+.no-uppercase {
     text-transform: none;
 }
-</style>
\ No newline at end of file
+</style>

From 75dc81eba777b528e1ce320bcb4b95dddd66eb12 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 18 Apr 2024 08:16:37 -0300
Subject: [PATCH 17/42] add column filters

---
 src/pages/Item/ItemFixedPrice.vue | 228 +++++++++++++-----------------
 1 file changed, 99 insertions(+), 129 deletions(-)

diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index c9811fcd5..5bccc55f0 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -1,7 +1,6 @@
 <script setup>
-import { onMounted, ref, computed, onUnmounted, watch } from 'vue';
+import { onMounted, ref, reactive, computed, onUnmounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
@@ -51,11 +50,11 @@ const exprBuilder = (param, value) => {
     }
 };
 
-const filterParams = ref({});
+const params = reactive({});
 
 const arrayData = useArrayData('ItemFixedPrices', {
     url: 'FixedPrices/filter',
-    userParams: filterParams,
+    userParams: params,
     order: ['itemFk'],
     exprBuilder: exprBuilder,
 });
@@ -66,17 +65,23 @@ watch(
     (value) => (fixedPrices.value = value)
 );
 
-// const params = reactive({});
+const applyColumnFilter = async (col) => {
+    try {
+        const paramKey = col.columnFilter?.filterParamKey || col.field;
+        params[paramKey] = col.columnFilter.filterValue;
+        await arrayData.addFilter({ params });
+    } catch (err) {
+        console.error('Error applying column filter', err);
+    }
+};
 
-// const applyColumnFilter = async (col) => {
-//     try {
-//         const paramKey = col.columnFilter?.filterParamKey || col.field;
-//         params[paramKey] = col.columnFilter.filterValue;
-//         await paginateRef.value.addFilter(null, params);
-//     } catch (err) {
-//         console.error('Error applying column filter', err);
-//     }
-// };
+const getColumnInputEvents = (col) => {
+    return col.columnFilter.type === 'select'
+        ? { 'update:modelValue': () => applyColumnFilter(col) }
+        : {
+              'keyup.enter': () => applyColumnFilter(col),
+          };
+};
 
 const columns = computed(() => [
     {
@@ -85,15 +90,15 @@ const columns = computed(() => [
         field: 'itemFk',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getColumnInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getColumnInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('globals.description'),
@@ -101,15 +106,15 @@ const columns = computed(() => [
         name: 'description',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getColumnInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getColumnInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('item.fixedPrice.groupingPrice'),
@@ -117,15 +122,15 @@ const columns = computed(() => [
         name: 'groupingPrice',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getColumnInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getColumnInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => toCurrency(val),
     },
     {
@@ -134,15 +139,15 @@ const columns = computed(() => [
         name: 'packingPrice',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getColumnInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getColumnInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => dashIfEmpty(val),
     },
 
@@ -152,15 +157,15 @@ const columns = computed(() => [
         name: 'minPrice',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getColumnInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getColumnInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('item.fixedPrice.started'),
@@ -168,15 +173,7 @@ const columns = computed(() => [
         name: 'started',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getColumnInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: null,
     },
     {
         label: t('item.fixedPrice.ended'),
@@ -184,39 +181,27 @@ const columns = computed(() => [
         name: 'ended',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnSelectFilter,
-        //     filterParamKey: 'typeFk',
-        //     type: 'select',
-        //     filterValue: null,
-        //     event: getColumnInputEvents,
-        //     attrs: {
-        //         options: itemTypesOptions.value,
-        //         'option-value': 'id',
-        //         'option-label': 'name',
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: null,
     },
 
     {
         label: t('item.fixedPrice.warehouse'),
-        field: 'warehouse',
+        field: 'warehouseFk',
         name: 'warehouse',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnSelectFilter,
-        //     type: 'select',
-        //     filterValue: null,
-        //     event: getColumnInputEvents,
-        //     attrs: {
-        //         options: itemCategoriesOptions.value,
-        //         'option-value': 'name',
-        //         'option-label': 'name',
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnSelectFilter,
+            type: 'select',
+            filterValue: null,
+            event: getColumnInputEvents,
+            attrs: {
+                options: warehousesOptions.value,
+                'option-value': 'id',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
     },
     { name: 'deleteAction', align: 'center' },
 ]);
@@ -292,14 +277,6 @@ const getRowUpdateInputEvents = (props, resetMinPrice, inputType = 'text') => {
         : { 'update:modelValue': () => upsertPrice(props, resetMinPrice) };
 };
 
-// const getColumnInputEvents = (col) => {
-//     return col.columnFilter.type === 'select'
-//         ? { 'update:modelValue': () => applyColumnFilter(col) }
-//         : {
-//               'keyup.enter': () => applyColumnFilter(col),
-//           };
-// };
-
 const validations = (row, rowIndex, col) => {
     const isNew = !row.id;
     // Si la row no tiene id significa que fue agregada con addRow y no se ha guardado en la base de datos
@@ -399,7 +376,7 @@ const updateMinPrice = async (value, props) => {
 
 onMounted(async () => {
     stateStore.rightDrawer = true;
-    filterParams.value = { warehouseFk: user.value.warehouseFk };
+    params.warehouseFk = user.value.warehouseFk;
     const { data } = await arrayData.fetch({ append: false });
     onFixedPricesFetched(data);
 });
@@ -408,14 +385,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 </script>
 
 <template>
-    <FetchData
-        ref="fixedPricesFetchRef"
-        url="FixedPrices/filter"
-        :filter="{ order: ['itemFk'] }"
-        :params="{ warehouseFk: user.warehouseFk }"
-        auto-load
-        @on-fetch="(data) => onFixedPricesFetched(data)"
-    />
     <FetchData
         url="Warehouses"
         :filter="{ order: ['name'] }"
@@ -464,24 +433,25 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             class="full-width q-mt-md"
             :no-data-label="t('globals.noResults')"
         >
-            <!-- <template #top-row="{ cols }">
-                        <QTr>
-                            <QTd
-                                v-for="(col, index) in cols"
-                                :key="index"
-                                style="max-width: 100px"
-                            >
-                                <component
-                                    :is="col.columnFilter.component"
-                                    v-if="col.columnFilter"
-                                    v-model="col.columnFilter.filterValue"
-                                    v-bind="col.columnFilter.attrs"
-                                    v-on="col.columnFilter.event(col)"
-                                    dense
-                                />
-                            </QTd>
-                        </QTr>
-                    </template> -->
+            <template #top-row="{ cols }">
+                <QTr>
+                    <QTd />
+                    <QTd
+                        v-for="(col, index) in cols"
+                        :key="index"
+                        style="max-width: 100px"
+                    >
+                        <component
+                            :is="col.columnFilter.component"
+                            v-if="col.columnFilter"
+                            v-model="col.columnFilter.filterValue"
+                            v-bind="col.columnFilter.attrs"
+                            v-on="col.columnFilter.event(col)"
+                            dense
+                        />
+                    </QTd>
+                </QTr>
+            </template>
 
             <template #body-cell-itemId="props">
                 <QTd>

From f8da680e9881d2b35212ea955f439cf505bf1ff0 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 18 Apr 2024 13:33:21 +0200
Subject: [PATCH 18/42] feat: refs #6480 setArrayData

---
 src/components/common/VnCard.vue             | 40 +++++++++---
 src/pages/InvoiceIn/Card/InvoiceInCard.vue   | 64 +++++---------------
 src/pages/InvoiceOut/Card/InvoiceOutCard.vue | 18 +++---
 3 files changed, 56 insertions(+), 66 deletions(-)

diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index a8c2d563f..ff3c8804e 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -1,26 +1,52 @@
 <script setup>
+import { computed, onBeforeMount } from 'vue';
+import { useRoute, onBeforeRouteUpdate } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import { useArrayData } from 'src/composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
 import useCardSize from 'src/composables/useCardSize';
 import VnSubToolbar from '../ui/VnSubToolbar.vue';
-import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import LeftMenu from 'components/LeftMenu.vue';
 
-defineProps({
+const props = defineProps({
+    dataKey: { type: String, default: null },
+    baseUrl: { type: String, default: null },
+    model: { type: String, default: null },
+    filter: { type: Object, default: null },
     descriptor: { type: Object, required: true },
-    searchbarProps: { type: Object, required: true },
+    searchbarDataKey: { type: String, required: true },
+    searchbarUrl: { type: String, required: true },
+    searchbarLabel: { type: String, required: true },
+    searchbarInfo: { type: String, required: true },
 });
 
 const { t } = useI18n();
 const stateStore = useStateStore();
+const route = useRoute();
+const url = computed(() => `${props.baseUrl}/${route.params.id}`);
+let arrayData;
+
+if (props.dataKey) {
+    arrayData = useArrayData(props.dataKey, { url, filter: props.filter });
+
+    onBeforeMount(async () => await arrayData.fetch({ append: false }));
+
+    onBeforeRouteUpdate(async (to, from) => {
+        if (!to.params.id !== from.params.id) {
+            arrayData.store.url = url;
+            await arrayData.fetch({ append: false });
+        }
+    });
+}
 </script>
 <template>
     <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
         <VnSearchbar
-            :data-key="searchbarProps.dataKey"
-            :url="searchbarProps.url"
-            :label="t(searchbarProps.label)"
-            :info="t(searchbarProps.info)"
+            :data-key="props.searchbarDataKey"
+            :url="props.searchbarUrl"
+            :label="t(`${props.model}.searchbar.${props.searchbarLabel}`)"
+            :info="t(props.searchbarInfo)"
         />
     </Teleport>
     <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
diff --git a/src/pages/InvoiceIn/Card/InvoiceInCard.vue b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
index 062e7a81a..afaa7ca1b 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInCard.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
@@ -1,16 +1,6 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
-import InvoiceInDescriptor from './InvoiceInDescriptor.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import { useArrayData } from 'src/composables/useArrayData';
-import { onMounted, watch } from 'vue';
-import { useRoute } from 'vue-router';
 import VnCard from 'components/common/VnCard.vue';
-
-const stateStore = useStateStore();
-const { t } = useI18n();
-const route = useRoute();
+import InvoiceInDescriptor from './InvoiceInDescriptor.vue';
 
 const filter = {
     include: [
@@ -19,51 +9,27 @@ const filter = {
             scope: {
                 include: {
                     relation: 'contacts',
-                    scope: {
-                        where: {
-                            email: { neq: null },
-                        },
-                    },
+                    scope: { where: { email: { neq: null } } },
                 },
             },
         },
-        {
-            relation: 'invoiceInDueDay',
-        },
-        {
-            relation: 'company',
-        },
-        {
-            relation: 'currency',
-        },
+        { relation: 'invoiceInDueDay' },
+        { relation: 'company' },
+        { relation: 'currency' },
     ],
 };
-const arrayData = useArrayData('InvoiceIn', {
-    url: `InvoiceIns/${route.params.id}`,
-    filter,
-});
-
-onMounted(async () => await arrayData.fetch({ append: false }));
-watch(
-    () => route.params.id,
-    async (newId) => {
-        if (newId) {
-            arrayData.store.url = `InvoiceIns/${newId}`;
-            await arrayData.fetch({ append: false });
-        }
-    }
-);
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <VnSearchbar
-            data-key="InvoiceInList"
-            url="InvoiceIns/filter"
-            :label="t('Search invoice')"
-            :info="t('You can search by invoice reference')"
-        />
-    </Teleport>
-    <VnCard :descriptor="InvoiceInDescriptor" />
+    <VnCard
+        data-key="InvoiceIn"
+        base-url="InvoiceIns"
+        :filter="filter"
+        :descriptor="InvoiceInDescriptor"
+        searchbar-data-key="InvoiceInList"
+        searchbar-url="InvoiceIns/filter"
+        searchbar-label="Search invoice"
+        searchbar-info="You can search by invoice reference"
+    />
 </template>
 <i18n>
     es:
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
index 9214b1b04..a1be6f022 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
@@ -1,20 +1,18 @@
 <script setup>
 import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
 import VnCard from 'components/common/VnCard.vue';
-
-const searchbar = {
-    dataKey: 'InvoiceOutList',
-    url: 'InvoiceOuts/filter',
-    label: 'Search invoice',
-    info: 'You can search by invoice reference',
-};
 </script>
 <template>
-    <VnCard :descriptor="InvoiceOutDescriptor" :searchbar-props="searchbar" />
+    <VnCard
+        :descriptor="InvoiceOutDescriptor"
+        searchbar-data-key="InvoiceOutList"
+        searchbar-url="InvoiceOuts/filter"
+        searchbar-label="Search invoice"
+        searchbar-info="You can search by invoice reference"
+    />
 </template>
-
 <i18n>
     es:
         Search invoice: Buscar factura emitida
         You can search by invoice reference: Puedes buscar por referencia de la factura
-    </i18n>
+</i18n>

From dfdfb6ec93827dabd0e71997b7753f5fbc4f5061 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 18 Apr 2024 15:25:32 +0200
Subject: [PATCH 19/42] feat: refs #6480 locale

---
 src/components/common/VnCard.vue             | 34 +++++++++-----------
 src/pages/InvoiceIn/Card/InvoiceInCard.vue   |  5 ---
 src/pages/InvoiceIn/locale/es.yml            |  2 ++
 src/pages/InvoiceOut/Card/InvoiceOutCard.vue |  7 ++--
 src/pages/InvoiceOut/locale/es.yml           |  2 ++
 5 files changed, 22 insertions(+), 28 deletions(-)
 create mode 100644 src/pages/InvoiceIn/locale/es.yml
 create mode 100644 src/pages/InvoiceOut/locale/es.yml

diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index ff3c8804e..6bfc7bc6c 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onBeforeMount } from 'vue';
+import { onBeforeMount } from 'vue';
 import { useRoute, onBeforeRouteUpdate } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'src/composables/useArrayData';
@@ -10,10 +10,9 @@ import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 
 const props = defineProps({
-    dataKey: { type: String, default: null },
-    baseUrl: { type: String, default: null },
-    model: { type: String, default: null },
-    filter: { type: Object, default: null },
+    dataKey: { type: String, required: true },
+    baseUrl: { type: String, required: true },
+    filter: { type: Object, default: undefined },
     descriptor: { type: Object, required: true },
     searchbarDataKey: { type: String, required: true },
     searchbarUrl: { type: String, required: true },
@@ -24,28 +23,27 @@ const props = defineProps({
 const { t } = useI18n();
 const stateStore = useStateStore();
 const route = useRoute();
-const url = computed(() => `${props.baseUrl}/${route.params.id}`);
-let arrayData;
 
-if (props.dataKey) {
-    arrayData = useArrayData(props.dataKey, { url, filter: props.filter });
+const arrayData = useArrayData(props.dataKey, {
+    url: `${props.baseUrl}/${route.params.id}`,
+    filter: props.filter,
+});
 
-    onBeforeMount(async () => await arrayData.fetch({ append: false }));
+onBeforeMount(async () => await arrayData.fetch({ append: false }));
 
-    onBeforeRouteUpdate(async (to, from) => {
-        if (!to.params.id !== from.params.id) {
-            arrayData.store.url = url;
-            await arrayData.fetch({ append: false });
-        }
-    });
-}
+onBeforeRouteUpdate(async (to, from) => {
+    if (to.params.id !== from.params.id) {
+        arrayData.store.url = `${props.baseUrl}/${route.params.id}`;
+        await arrayData.fetch({ append: false });
+    }
+});
 </script>
 <template>
     <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
         <VnSearchbar
             :data-key="props.searchbarDataKey"
             :url="props.searchbarUrl"
-            :label="t(`${props.model}.searchbar.${props.searchbarLabel}`)"
+            :label="t(props.searchbarLabel)"
             :info="t(props.searchbarInfo)"
         />
     </Teleport>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInCard.vue b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
index afaa7ca1b..ceec5042d 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInCard.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
@@ -31,8 +31,3 @@ const filter = {
         searchbar-info="You can search by invoice reference"
     />
 </template>
-<i18n>
-    es:
-        Search invoice: Buscar factura recibida
-        You can search by invoice reference: Puedes buscar por referencia de la factura
-</i18n>
diff --git a/src/pages/InvoiceIn/locale/es.yml b/src/pages/InvoiceIn/locale/es.yml
new file mode 100644
index 000000000..d7e38d7fa
--- /dev/null
+++ b/src/pages/InvoiceIn/locale/es.yml
@@ -0,0 +1,2 @@
+Search invoice: Buscar factura recibida
+You can search by invoice reference: Puedes buscar por referencia de la factura
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
index a1be6f022..218e01d83 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
@@ -4,6 +4,8 @@ import VnCard from 'components/common/VnCard.vue';
 </script>
 <template>
     <VnCard
+        data-key="InvoiceOut"
+        base-url="InvoiceOuts"
         :descriptor="InvoiceOutDescriptor"
         searchbar-data-key="InvoiceOutList"
         searchbar-url="InvoiceOuts/filter"
@@ -11,8 +13,3 @@ import VnCard from 'components/common/VnCard.vue';
         searchbar-info="You can search by invoice reference"
     />
 </template>
-<i18n>
-    es:
-        Search invoice: Buscar factura emitida
-        You can search by invoice reference: Puedes buscar por referencia de la factura
-</i18n>
diff --git a/src/pages/InvoiceOut/locale/es.yml b/src/pages/InvoiceOut/locale/es.yml
new file mode 100644
index 000000000..b936c7b7e
--- /dev/null
+++ b/src/pages/InvoiceOut/locale/es.yml
@@ -0,0 +1,2 @@
+Search invoice: Buscar factura emitida
+You can search by invoice reference: Puedes buscar por referencia de la factura

From 6c4901076fa5188f026a953fba16564dfa26550c Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 18 Apr 2024 13:14:23 -0300
Subject: [PATCH 20/42] Apply ItemsFilterPanel to EntryLatestBuys

---
 src/components/ItemsFilterPanel.vue       |   6 +-
 src/composables/useArrayData.js           |   7 +-
 src/i18n/locale/en.yml                    |  10 +-
 src/i18n/locale/es.yml                    |  10 +-
 src/pages/Entry/EntryLatestBuys.vue       |   2 +-
 src/pages/Entry/EntryLatestBuysFilter.vue | 367 +---------------------
 src/pages/Item/ItemFixedPrice.vue         |   1 -
 7 files changed, 40 insertions(+), 363 deletions(-)

diff --git a/src/components/ItemsFilterPanel.vue b/src/components/ItemsFilterPanel.vue
index c6df0c1e0..f7f07a5b0 100644
--- a/src/components/ItemsFilterPanel.vue
+++ b/src/components/ItemsFilterPanel.vue
@@ -20,6 +20,10 @@ const props = defineProps({
         type: Array,
         default: () => [],
     },
+    exprBuilder: {
+        type: Function,
+        default: null,
+    },
 });
 
 const itemCategories = ref([]);
@@ -156,8 +160,6 @@ const removeTag = (index, params, search) => {
         :data-key="props.dataKey"
         :expr-builder="exprBuilder"
         :custom-tags="customTags"
-        @init="onFilterInit"
-        @remove="clearFilter"
     >
         <template #tags="{ tag, formatFn }">
             <strong v-if="tag.label === 'categoryFk'">
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 093806567..6b4373183 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -156,9 +156,10 @@ export function useArrayData(key, userOptions) {
                 delete store.userParams[param];
                 delete params[param];
                 if (store.filter?.where) {
-                    delete store.filter.where[
-                        Object.keys(exprBuilder ? exprBuilder(param) : param)[0]
-                    ];
+                    const key = Object.keys(
+                        exprBuilder && exprBuilder(param) ? exprBuilder(param) : param
+                    );
+                    if (key[0]) delete store.filter.where[key[0]];
                     if (Object.keys(store.filter.where).length === 0) {
                         delete store.filter.where;
                     }
diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 837602b4b..0a475000b 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -1140,13 +1140,21 @@ components:
         typeFk: Type
         tag: Tag
         value: Value
-
+        # ItemFixedPriceFilter
         buyerFk: Buyer
         warehouseFk: Almacén
         started: Desde
         ended: Hasta
         mine: Para mi
         hasMinPrice: Precio mínimo
+        # LatestBuysFilter
+        salesPersonFk: Buyer
+        supplierFk: Supplier
+        from: From
+        to: To
+        active: Is active
+        visible: Is visible
+        floramondo: Is floramondo
     userPanel:
         copyToken: Token copied to clipboard
         settings: Settings
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 85925b22f..a34700045 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -1137,13 +1137,21 @@ components:
         typeFk: Tipo
         tag: Etiqueta
         value: Valor
-
+        # ItemFixedPriceFilter
         buyerFk: Comprador
         warehouseFk: Warehouse
         started: From
         ended: To
         mine: For me
         hasMinPrice: Minimum price
+        # LatestBuysFilter
+        salesPersonFk: Comprador
+        supplierFk: Proveedor
+        from: Desde
+        to: Hasta
+        active: Activo
+        visible: Visible
+        floramondo: Floramondo
     userPanel:
         copyToken: Token copiado al portapapeles
         settings: Configuración
diff --git a/src/pages/Entry/EntryLatestBuys.vue b/src/pages/Entry/EntryLatestBuys.vue
index dbfb03f8f..78f578686 100644
--- a/src/pages/Entry/EntryLatestBuys.vue
+++ b/src/pages/Entry/EntryLatestBuys.vue
@@ -650,7 +650,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
     </QToolbar>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
-            <EntryLatestBuysFilter data-key="EntryLatestBuys" :tags="tags" />
+            <EntryLatestBuysFilter data-key="EntryLatestBuys" />
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
diff --git a/src/pages/Entry/EntryLatestBuysFilter.vue b/src/pages/Entry/EntryLatestBuysFilter.vue
index 5eaf001d8..9b2b5ae28 100644
--- a/src/pages/Entry/EntryLatestBuysFilter.vue
+++ b/src/pages/Entry/EntryLatestBuysFilter.vue
@@ -1,141 +1,26 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import VnInput from 'components/common/VnInput.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
-import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
-import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
-
-import axios from 'axios';
+import ItemsFilterPanel from 'src/components/ItemsFilterPanel.vue';
 
 const { t } = useI18n();
-const props = defineProps({
+
+defineProps({
     dataKey: {
         type: String,
         required: true,
     },
 });
 
-const itemCategories = ref([]);
-const selectedCategoryFk = ref(null);
-const selectedTypeFk = ref(null);
-const itemTypesOptions = ref([]);
 const itemTypeWorkersOptions = ref([]);
 const suppliersOptions = ref([]);
-const tagOptions = ref([]);
-const tagValues = ref([]);
-
-const categoryList = computed(() => {
-    return (itemCategories.value || [])
-        .filter((category) => category.display)
-        .map((category) => ({
-            ...category,
-            icon: `vn:${(category.icon || '').split('-')[1]}`,
-        }));
-});
-
-const selectedCategory = computed(() =>
-    (itemCategories.value || []).find(
-        (category) => category?.id === selectedCategoryFk.value
-    )
-);
-
-const selectedType = computed(() => {
-    return (itemTypesOptions.value || []).find(
-        (type) => type?.id === selectedTypeFk.value
-    );
-});
-
-const selectCategory = async (params, categoryId, search) => {
-    if (params.categoryFk === categoryId) {
-        resetCategory(params);
-        search();
-        return;
-    }
-    selectedCategoryFk.value = categoryId;
-    params.categoryFk = categoryId;
-    await fetchItemTypes(categoryId);
-    search();
-};
-
-const resetCategory = (params) => {
-    selectedCategoryFk.value = null;
-    itemTypesOptions.value = null;
-    if (params) {
-        params.categoryFk = null;
-        params.typeFk = null;
-    }
-};
-
-const applyTags = (params, search) => {
-    params.tags = tagValues.value
-        .filter((tag) => tag.selectedTag && tag.value)
-        .map((tag) => ({
-            tagFk: tag.selectedTag.id,
-            tagName: tag.selectedTag.name,
-            value: tag.value,
-        }));
-    search();
-};
-
-const fetchItemTypes = async (id) => {
-    try {
-        const filter = {
-            fields: ['id', 'name', 'categoryFk'],
-            where: { categoryFk: id },
-            include: 'category',
-            order: 'name ASC',
-        };
-        const { data } = await axios.get('ItemTypes', {
-            params: { filter: JSON.stringify(filter) },
-        });
-        itemTypesOptions.value = data;
-    } catch (err) {
-        console.error('Error fetching item types', err);
-    }
-};
-
-const getCategoryClass = (category, params) => {
-    if (category.id === params?.categoryFk) {
-        return 'active';
-    }
-};
-
-const getSelectedTagValues = async (tag) => {
-    try {
-        tag.value = null;
-        const filter = {
-            fields: ['value'],
-            order: 'value ASC',
-            limit: 30,
-        };
-
-        const params = { filter: JSON.stringify(filter) };
-        const { data } = await axios.get(`Tags/${tag.selectedTag.id}/filterValue`, {
-            params,
-        });
-        tag.valueOptions = data;
-    } catch (err) {
-        console.error('Error getting selected tag values');
-    }
-};
-
-const removeTag = (index, params, search) => {
-    (tagValues.value || []).splice(index, 1);
-    applyTags(params, search);
-};
 </script>
 
 <template>
-    <FetchData
-        url="ItemCategories"
-        limit="30"
-        auto-load
-        @on-fetch="(data) => (itemCategories = data)"
-    />
     <FetchData
         url="TicketRequests/getItemTypeWorker"
         limit="30"
@@ -150,102 +35,12 @@ const removeTag = (index, params, search) => {
         :filter="{ fields: ['id', 'name', 'nickname'], order: 'name ASC', limit: 30 }"
         @on-fetch="(data) => (suppliersOptions = data)"
     />
-    <FetchData
-        url="Tags"
-        :filter="{ fields: ['id', 'name', 'isFree'] }"
-        auto-load
-        limit="30"
-        @on-fetch="(data) => (tagOptions = data)"
-    />
-    <VnFilterPanel
-        :data-key="props.dataKey"
-        :expr-builder="exprBuilder"
-        :custom-tags="['tags']"
-        @init="onFilterInit"
-        @remove="clearFilter"
-    >
-        <template #tags="{ tag, formatFn }">
-            <strong v-if="tag.label === 'categoryFk'">
-                {{ t(selectedCategory?.name || '') }}
-            </strong>
-            <strong v-else-if="tag.label === 'typeFk'">
-                {{ t(selectedType?.name || '') }}
-            </strong>
-            <div v-else class="q-gutter-x-xs">
-                <strong>{{ t(`params.${tag.label}`) }}: </strong>
-                <span>{{ formatFn(tag.value) }}</span>
-            </div>
-        </template>
-        <template #customTags="{ tags: customTags, params }">
-            <template v-for="tag in customTags" :key="tag.label">
-                <VnFilterPanelChip
-                    v-for="chip in tag.value"
-                    :key="chip"
-                    removable
-                    @remove="removeTagChip(chip, params, searchFn)"
-                >
-                    <div class="q-gutter-x-xs">
-                        <strong>{{ chip.tagName }}: </strong>
-                        <span>"{{ chip.value }}"</span>
-                    </div>
-                </VnFilterPanelChip>
-            </template>
-        </template>
+    <ItemsFilterPanel :data-key="dataKey" :custom-tags="['tags']">
         <template #body="{ params, searchFn }">
-            <QItem class="category-filter q-mt-md">
-                <QBtn
-                    dense
-                    flat
-                    round
-                    v-for="category in categoryList"
-                    :key="category.name"
-                    :class="['category', getCategoryClass(category, params)]"
-                    :icon="category.icon"
-                    @click="selectCategory(params, category.id, searchFn)"
-                >
-                    <QTooltip>
-                        {{ t(category.name) }}
-                    </QTooltip>
-                </QBtn>
-            </QItem>
             <QItem class="q-my-md">
                 <QItemSection>
                     <VnSelectFilter
-                        :label="t('params.typeFk')"
-                        v-model="params.typeFk"
-                        :options="itemTypesOptions"
-                        option-value="id"
-                        option-label="name"
-                        dense
-                        outlined
-                        rounded
-                        use-input
-                        :disable="!selectedCategoryFk"
-                        @update:model-value="
-                            (value) => {
-                                selectedTypeFk = value;
-                                searchFn();
-                            }
-                        "
-                    >
-                        <template #option="{ itemProps, opt }">
-                            <QItem v-bind="itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ opt.name }}</QItemLabel>
-                                    <QItemLabel caption>
-                                        {{ opt.categoryName }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
-                </QItemSection>
-            </QItem>
-            <QSeparator />
-            <QItem class="q-my-md">
-                <QItemSection>
-                    <VnSelectFilter
-                        :label="t('params.salesPersonFk')"
+                        :label="t('components.itemsFilterPanel.salesPersonFk')"
                         v-model="params.salesPersonFk"
                         :options="itemTypeWorkersOptions"
                         option-value="id"
@@ -261,7 +56,7 @@ const removeTag = (index, params, search) => {
             <QItem class="q-my-md">
                 <QItemSection>
                     <VnSelectFilter
-                        :label="t('params.supplier')"
+                        :label="t('components.itemsFilterPanel.supplierFk')"
                         v-model="params.supplierFk"
                         :options="suppliersOptions"
                         option-value="id"
@@ -288,7 +83,7 @@ const removeTag = (index, params, search) => {
             <QItem class="q-my-md">
                 <QItemSection>
                     <VnInputDate
-                        :label="t('params.from')"
+                        :label="t('components.itemsFilterPanel.from')"
                         v-model="params.from"
                         is-outlined
                         @update:model-value="searchFn()"
@@ -298,7 +93,7 @@ const removeTag = (index, params, search) => {
             <QItem class="q-my-md">
                 <QItemSection>
                     <VnInputDate
-                        :label="t('params.to')"
+                        :label="t('components.itemsFilterPanel.to')"
                         v-model="params.to"
                         is-outlined
                         @update:model-value="searchFn()"
@@ -308,7 +103,7 @@ const removeTag = (index, params, search) => {
             <QItem>
                 <QItemSection>
                     <QCheckbox
-                        :label="t('params.active')"
+                        :label="t('components.itemsFilterPanel.active')"
                         v-model="params.active"
                         toggle-indeterminate
                         @update:model-value="searchFn()"
@@ -316,7 +111,7 @@ const removeTag = (index, params, search) => {
                 </QItemSection>
                 <QItemSection>
                     <QCheckbox
-                        :label="t('params.visible')"
+                        :label="t('components.itemsFilterPanel.visible')"
                         v-model="params.visible"
                         toggle-indeterminate
                         @update:model-value="searchFn()"
@@ -326,149 +121,13 @@ const removeTag = (index, params, search) => {
             <QItem>
                 <QItemSection>
                     <QCheckbox
-                        :label="t('params.floramondo')"
+                        :label="t('components.itemsFilterPanel.floramondo')"
                         v-model="params.floramondo"
                         toggle-indeterminate
                         @update:model-value="searchFn()"
                     />
                 </QItemSection>
             </QItem>
-
-            <QItem
-                v-for="(value, index) in tagValues"
-                :key="value"
-                class="q-mt-md filter-value"
-            >
-                <QItemSection class="col">
-                    <VnSelectFilter
-                        :label="t('params.tag')"
-                        v-model="value.selectedTag"
-                        :options="tagOptions"
-                        option-label="name"
-                        dense
-                        outlined
-                        rounded
-                        :emit-value="false"
-                        use-input
-                        :is-clearable="false"
-                        @update:model-value="getSelectedTagValues(value)"
-                    />
-                </QItemSection>
-                <QItemSection class="col">
-                    <VnSelectFilter
-                        v-if="!value?.selectedTag?.isFree && value.valueOptions"
-                        :label="t('params.value')"
-                        v-model="value.value"
-                        :options="value.valueOptions || []"
-                        option-value="value"
-                        option-label="value"
-                        dense
-                        outlined
-                        rounded
-                        emit-value
-                        use-input
-                        :disable="!value"
-                        :is-clearable="false"
-                        class="filter-input"
-                        @update:model-value="applyTags(params, searchFn)"
-                    />
-                    <VnInput
-                        v-else
-                        v-model="value.value"
-                        :label="t('params.value')"
-                        :disable="!value"
-                        is-outlined
-                        class="filter-input"
-                        :is-clearable="false"
-                        @keyup.enter="applyTags(params, searchFn)"
-                    />
-                </QItemSection>
-                <QIcon
-                    name="delete"
-                    class="filter-icon"
-                    @click="removeTag(index, params, searchFn)"
-                />
-            </QItem>
-            <QItem class="q-mt-lg">
-                <QIcon
-                    name="add_circle"
-                    class="filter-icon"
-                    @click="tagValues.push({})"
-                />
-            </QItem>
         </template>
-    </VnFilterPanel>
+    </ItemsFilterPanel>
 </template>
-
-<style lang="scss" scoped>
-.category-filter {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 12px;
-
-    .category {
-        padding: 8px;
-        width: 60px;
-        height: 60px;
-        font-size: 1.4rem;
-        background-color: var(--vn-accent-color);
-
-        &.active {
-            background-color: $primary;
-        }
-    }
-}
-
-.filter-icon {
-    font-size: 24px;
-    color: $primary;
-    padding: 0 4px;
-    cursor: pointer;
-}
-
-.filter-input {
-    flex-shrink: 1;
-    min-width: 0;
-}
-
-.filter-value {
-    display: flex;
-    align-items: center;
-}
-</style>
-
-<i18n>
-en:
-    params:
-        supplier: Supplier
-        from: From
-        to: To
-        active: Is active
-        visible: Is visible
-        floramondo: Is floramondo
-        salesPersonFk: Buyer
-        categoryFk: Category
-        typeFk: Type
-        tag: Tag
-        value: Value
-es:
-    params:
-        supplier: Proveedor
-        from: Desde
-        to: Hasta
-        active: Activo
-        visible: Visible
-        floramondo: Floramondo
-        salesPersonFk: Comprador
-        categoryFk: Categoría
-        typeFk: Tipo
-        tag: Etiqueta
-        value: Valor
-    Plant: Planta
-    Flower: Flor
-    Handmade: Confección
-    Green: Verde
-    Accessories: Complemento
-    Fruit: Fruta
-</i18n>
diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 5bccc55f0..d0b942526 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -51,7 +51,6 @@ const exprBuilder = (param, value) => {
 };
 
 const params = reactive({});
-
 const arrayData = useArrayData('ItemFixedPrices', {
     url: 'FixedPrices/filter',
     userParams: params,

From 6021e1e4ce68aa7c13fc6a93b8ef4dfbf13f6c73 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 19 Apr 2024 07:37:33 +0200
Subject: [PATCH 21/42] refactor: refs #6899 changed comercial value in
 negativeBases table

---
 src/pages/InvoiceOut/InvoiceOutNegativeBases.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
index e0b17a4b3..36180a2e7 100644
--- a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
+++ b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
@@ -183,7 +183,9 @@ const downloadCSV = async () => {
             </template>
             <template #body-cell-comercial="{ row }">
                 <QTd>
-                    <QBtn class="no-uppercase" flat dense color="blue">{{ row.comercialName }}</QBtn>
+                    <QBtn class="no-uppercase" flat dense color="blue">{{
+                        row.workerSocial
+                    }}</QBtn>
                     <WorkerDescriptorProxy :id="row.comercialId" />
                 </QTd>
             </template>
@@ -211,7 +213,7 @@ const downloadCSV = async () => {
     border-radius: 4px;
     padding: 6px;
 }
-.no-uppercase{
+.no-uppercase {
     text-transform: none;
 }
 </style>

From ff36f82333f214b68d50accc9f1bd8000d0fe638 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 19 Apr 2024 09:39:17 +0200
Subject: [PATCH 22/42] fix: refs #6480 disable popup on no observe changes

---
 src/components/FormModel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index a7af0044b..2dc14160f 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -101,7 +101,7 @@ onMounted(async () => {
 });
 
 onBeforeRouteLeave((to, from, next) => {
-    if (hasChanges.value)
+    if (hasChanges.value && $props.observeFormChanges)
         quasar.dialog({
             component: VnConfirm,
             componentProps: {

From b352dcde216cf23cf2f0dd7dc581de4559deae88 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 19 Apr 2024 09:42:42 +0200
Subject: [PATCH 23/42] fix: refs #6480 summary data-key

---
 src/pages/Department/Card/DepartmentSummary.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/Department/Card/DepartmentSummary.vue b/src/pages/Department/Card/DepartmentSummary.vue
index 1d42183c3..6377ac779 100644
--- a/src/pages/Department/Card/DepartmentSummary.vue
+++ b/src/pages/Department/Card/DepartmentSummary.vue
@@ -27,6 +27,7 @@ onMounted(async () => {
 
 <template>
     <CardSummary
+        data-key="DepartmentSummary"
         ref="summary"
         :url="`Departments/${entityId}`"
         class="full-width"

From de0468bb9953ade3927e3573e4fd8a3bb3323c20 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 19 Apr 2024 10:32:52 +0200
Subject: [PATCH 24/42] fix: refs #6480 summary reactivity

---
 src/pages/Parking/Card/ParkingSummary.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Parking/Card/ParkingSummary.vue b/src/pages/Parking/Card/ParkingSummary.vue
index a30705068..9a79f428b 100644
--- a/src/pages/Parking/Card/ParkingSummary.vue
+++ b/src/pages/Parking/Card/ParkingSummary.vue
@@ -11,9 +11,9 @@ const $props = defineProps({
         default: 0,
     },
 });
-const { params } = useRoute();
+const router = useRoute();
 const { t } = useI18n();
-const entityId = computed(() => $props.id || params.id);
+const entityId = computed(() => $props.id || router.params.id);
 
 const filter = {
     fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],

From 2450d5bf7ad5dccb93180b38a45c2c4ea563bd03 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 19 Apr 2024 11:40:52 +0200
Subject: [PATCH 25/42] reafacto: refs #6480 slots

---
 src/components/ui/CardDescriptor.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index f30ea8937..10975c938 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onBeforeMount, useSlots, watch, computed, ref } from 'vue';
+import { onBeforeMount, watch, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
@@ -38,7 +38,6 @@ const $props = defineProps({
 });
 
 const state = useState();
-const slots = useSlots();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 const arrayData = useArrayData($props.dataKey || $props.module, {
@@ -47,7 +46,7 @@ const arrayData = useArrayData($props.dataKey || $props.module, {
     skip: 0,
 });
 const { store } = arrayData;
-const entity = computed(() =>Array.isArray( store.data) ? store.data[0] : store.data);
+const entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
 const isLoading = ref(false);
 
 defineExpose({
@@ -117,7 +116,7 @@ const emit = defineEmits(['onFetch']);
                     icon="more_vert"
                     round
                     size="md"
-                    :class="{ invisible: !slots.menu }"
+                    :class="{ invisible: !$slots.menu }"
                 >
                     <QTooltip>
                         {{ t('components.cardDescriptor.moreOptions') }}

From 3fb155e6976b6d949ed38196fba49f0ad378ea7b Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 19 Apr 2024 11:57:04 +0200
Subject: [PATCH 26/42] fix: refs #6480 reactivity

---
 src/components/ui/CardDescriptor.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 10975c938..8453c0d73 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { onBeforeMount, watch, computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
@@ -39,6 +40,7 @@ const $props = defineProps({
 
 const state = useState();
 const { t } = useI18n();
+const route = useRoute();
 const { viewSummary } = useSummaryDialog();
 const arrayData = useArrayData($props.dataKey || $props.module, {
     url: $props.url,
@@ -55,7 +57,7 @@ defineExpose({
 onBeforeMount(async () => {
     await getData();
     watch(
-        () => $props.url,
+        () => route.params.id,
         async () => await getData()
     );
 });

From e38b53ca25fe51184f3d1a27ec4c3884d8e00026 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 19 Apr 2024 13:12:14 +0200
Subject: [PATCH 27/42] fix: refs #6480 reactive descriptor

---
 src/components/ui/CardDescriptor.vue       | 8 ++------
 src/pages/Worker/Card/WorkerDescriptor.vue | 4 +++-
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 8453c0d73..d2ba21888 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { onBeforeMount, watch, computed, ref } from 'vue';
-import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
@@ -40,7 +39,6 @@ const $props = defineProps({
 
 const state = useState();
 const { t } = useI18n();
-const route = useRoute();
 const { viewSummary } = useSummaryDialog();
 const arrayData = useArrayData($props.dataKey || $props.module, {
     url: $props.url,
@@ -56,14 +54,12 @@ defineExpose({
 });
 onBeforeMount(async () => {
     await getData();
-    watch(
-        () => route.params.id,
-        async () => await getData()
-    );
+    watch($props, async () => await getData());
 });
 
 async function getData() {
     store.url = $props.url;
+    store.filter = $props.filter ?? {};
     isLoading.value = true;
     try {
         const { data } = await arrayData.fetch({ append: false, updateRouter: false });
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index bb4acec69..083e9d143 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -31,7 +31,9 @@ const entityId = computed(() => {
 });
 
 const worker = ref();
-const filter = { where: { id: route.params.id}};
+const filter = computed(() => {
+    return { where: { id: entityId.value } };
+});
 
 const sip = ref(null);
 

From b22d54f4902fe86aa4e25e67a5f07c0afd15e8cc Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 19 Apr 2024 08:23:23 -0300
Subject: [PATCH 28/42] WIP

---
 src/components/common/VnInputDate.vue |  2 +-
 src/pages/Item/ItemFixedPrice.vue     | 60 ++++++++++++++++++++-------
 2 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index 66da9b7bf..268d843d7 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue';
 import VnInput from 'components/common/VnInput.vue';
-import isValidDate from "filters/isValidDate";
+import isValidDate from 'filters/isValidDate';
 
 const props = defineProps({
     modelValue: {
diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index d0b942526..402010f06 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -9,6 +9,8 @@ import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
 import ItemFixedPriceFilter from './ItemFixedPriceFilter.vue';
+// TODO: mostrar item descriptor en fetchedtags
+import ItemDescriptorProxy from './Card/ItemDescriptorProxy.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { dashIfEmpty } from 'src/filters';
@@ -25,7 +27,7 @@ const { openConfirmationModal } = useVnConfirm();
 const state = useState();
 const { notify } = useNotify();
 
-const fixedPricesFetchRef = ref(null);
+// const fixedPricesFetchRef = ref(null);
 const editTableCellDialogRef = ref(null);
 const user = state.getUser();
 const fixedPrices = ref([]);
@@ -59,9 +61,19 @@ const arrayData = useArrayData('ItemFixedPrices', {
 });
 const store = arrayData.store;
 
+const fetchFixedPrices = async () => {
+    await arrayData.fetch({ append: false });
+};
+
+const onFixedPricesFetched = (data) => {
+    fixedPrices.value = data;
+    // el objetivo de guardar una copia de las rows es evitar guardar cambios si la data no cambió al disparar los eventos
+    fixedPricesOriginalData.value = JSON.parse(JSON.stringify(data));
+};
+
 watch(
     () => store.data,
-    (value) => (fixedPrices.value = value)
+    (data) => onFixedPricesFetched(data)
 );
 
 const applyColumnFilter = async (col) => {
@@ -261,12 +273,6 @@ const editTableFieldsOptions = [
     },
 ];
 
-const onFixedPricesFetched = (data) => {
-    fixedPrices.value = data;
-    // el objetivo de esto es guardar los valores iniciales de todas las rows para evitar guardar cambios si la data no cambió al disparar los eventos
-    fixedPricesOriginalData.value = JSON.parse(JSON.stringify(data));
-};
-
 const getRowUpdateInputEvents = (props, resetMinPrice, inputType = 'text') => {
     return inputType === 'text'
         ? {
@@ -309,7 +315,6 @@ const addRow = () => {
         fixedPrices.value = [];
 
         const today = Date.vnNew();
-
         const millisecsInDay = 86400000;
         const daysInWeek = 7;
         const nextWeek = new Date(today.getTime() + daysInWeek * millisecsInDay);
@@ -317,10 +322,12 @@ const addRow = () => {
         fixedPricesOriginalData.value.push({
             started: today,
             ended: nextWeek,
+            hasMinPrice: 0,
         });
         fixedPrices.value.push({
             started: today,
             ended: nextWeek,
+            hasMinPrice: 0,
         });
         return;
     }
@@ -339,7 +346,7 @@ const openEditTableCellDialog = () => {
 
 const onEditCellDataSaved = async () => {
     rowsSelected.value = [];
-    await fixedPricesFetchRef.value.fetch();
+    await fetchFixedPrices();
 };
 
 const onWarehousesFetched = (data) => {
@@ -373,11 +380,34 @@ const updateMinPrice = async (value, props) => {
     });
 };
 
+const isLower = (date) => {
+    // TODO: APLICAR ESTO A CHIPS A LAS FECHAS DE ENDED DATE
+    let today = Date.vnNew();
+    today.setHours(0, 0, 0, 0);
+
+    date = new Date(date);
+    date.setHours(0, 0, 0, 0);
+
+    const timeDifference = today - date;
+    if (timeDifference > 0) return 'warning';
+};
+
+const isBigger = (date) => {
+    // TODO: APLICAR ESTO A CHIPS A LAS FECHAS DE STARTED DATE
+    let today = Date.vnNew();
+    today.setHours(0, 0, 0, 0);
+
+    date = new Date(date);
+    date.setHours(0, 0, 0, 0);
+
+    const timeDifference = today - date;
+    if (timeDifference < 0) return 'warning';
+};
+
 onMounted(async () => {
     stateStore.rightDrawer = true;
     params.warehouseFk = user.value.warehouseFk;
-    const { data } = await arrayData.fetch({ append: false });
-    onFixedPricesFetched(data);
+    await fetchFixedPrices();
 });
 
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -524,7 +554,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 <QTd class="col" style="min-width: 150px">
                     <VnInputDate
                         v-model="props.row.started"
-                        v-on="getRowUpdateInputEvents(props)"
+                        v-on="getRowUpdateInputEvents(props, false, 'date')"
                     />
                 </QTd>
             </template>
@@ -532,7 +562,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 <QTd class="col" style="min-width: 150px">
                     <VnInputDate
                         v-model="props.row.ended"
-                        v-on="getRowUpdateInputEvents(props)"
+                        v-on="getRowUpdateInputEvents(props, false, 'date')"
                     />
                 </QTd>
             </template>
@@ -544,7 +574,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         option-label="name"
                         option-value="id"
                         v-model="props.row.warehouseFk"
-                        v-on="getRowUpdateInputEvents(props)"
+                        v-on="getRowUpdateInputEvents(props, false, 'select')"
                     />
                 </QTd>
             </template>

From c3db9e17a889e1a917727d270b001444d162aa12 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 19 Apr 2024 13:30:07 +0200
Subject: [PATCH 29/42] fix: refs #6480 reactive summary

---
 src/components/ui/CardSummary.vue       |  5 +++--
 src/pages/Worker/Card/WorkerSummary.vue | 17 ++++++++++++-----
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index a06837cf4..bac72334c 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -32,7 +32,7 @@ const arrayData = useArrayData(props.dataKey || route.meta.moduleName, {
     skip: 0,
 });
 const { store } = arrayData;
-const entity = computed(() => Array.isArray(store.data) ? store.data[0] : store.data);
+const entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
 const isLoading = ref(false);
 
 defineExpose({
@@ -48,9 +48,10 @@ onBeforeMount(async () => {
 
 async function fetch() {
     store.url = props.url;
+    store.filter = props.filter ?? {};
     isLoading.value = true;
     const { data } = await arrayData.fetch({ append: false, updateRouter: false });
-    emit('onFetch', data);
+    emit('onFetch', Array.isArray(data) ? data[0] : data);
     isLoading.value = false;
 }
 </script>
diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
index 43c493565..3a79d12bb 100644
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -10,7 +10,7 @@ import CardSummary from 'components/ui/CardSummary.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 
-const { params } = useRoute();
+const route = useRoute();
 const { t } = useI18n();
 
 const $props = defineProps({
@@ -20,18 +20,25 @@ const $props = defineProps({
     },
 });
 
-const entityId = computed(() => $props.id || params.id);
+const entityId = computed(() => $props.id || route.params.id);
 const workerUrl = ref();
 
 onMounted(async () => {
     workerUrl.value = (await getUrl('')) + `worker/${entityId.value}/`;
 });
 
-const filter = { where: { id: entityId.value } };
+const filter = computed(() => {
+    return { where: { id: entityId.value } };
+});
 </script>
 
 <template>
-    <CardSummary ref="summary" :url="`Workers/summary`" :filter="filter">
+    <CardSummary
+        data-key="workerData"
+        ref="summary"
+        :url="`Workers/summary`"
+        :filter="filter"
+    >
         <template #header="{ entity }">
             <div>{{ entity.id }} - {{ entity.firstName }} {{ entity.lastName }}</div>
         </template>
@@ -41,7 +48,7 @@ const filter = { where: { id: entityId.value } };
                     :url="workerUrl + `basic-data`"
                     :text="t('worker.summary.basicData')"
                 />
-                <VnLv :label="t('worker.card.name')" :value="worker.user.nickname" />
+                <VnLv :label="t('worker.card.name')" :value="worker.user?.nickname" />
                 <VnLv
                     :label="t('worker.list.department')"
                     :value="worker.department?.department?.name"

From da6e1211370dffc7910b8fd8b44a0ce18d03230f Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 19 Apr 2024 13:33:29 +0200
Subject: [PATCH 30/42] refactor: refs #6480 use VnCard

---
 src/components/common/VnCard.vue             | 15 ++--
 src/css/app.scss                             |  4 +
 src/pages/Claim/Card/ClaimCard.vue           | 51 +++----------
 src/pages/Claim/locale/es.yml                |  2 +
 src/pages/Customer/Card/CustomerCard.vue     | 50 +++----------
 src/pages/Customer/locale/es.yml             |  2 +
 src/pages/Department/Card/DepartmentCard.vue | 29 ++------
 src/pages/Entry/Card/EntryCard.vue           | 53 +++----------
 src/pages/Entry/locale/es.yml                |  2 +
 src/pages/Item/Card/ItemCard.vue             | 25 +------
 src/pages/Order/Card/OrderCard.vue           | 20 +----
 src/pages/Parking/Card/ParkingCard.vue       | 58 +++------------
 src/pages/Route/Card/RouteCard.vue           | 19 +----
 src/pages/Shelving/Card/ShelvingCard.vue     | 18 +----
 src/pages/Supplier/Card/SupplierCard.vue     | 77 +++----------------
 src/pages/Supplier/locale/es.yml             |  1 +
 src/pages/Ticket/Card/TicketCard.vue         | 78 +++-----------------
 src/pages/Ticket/locale/es.yml               |  2 +
 src/pages/Travel/Card/TravelCard.vue         | 52 +------------
 src/pages/Wagon/Card/WagonCard.vue           | 30 +-------
 src/pages/Worker/Card/WorkerCard.vue         | 49 +++---------
 src/pages/Worker/locale/es.yml               |  2 +
 22 files changed, 114 insertions(+), 525 deletions(-)
 create mode 100644 src/pages/Claim/locale/es.yml
 create mode 100644 src/pages/Supplier/locale/es.yml
 create mode 100644 src/pages/Ticket/locale/es.yml
 create mode 100644 src/pages/Worker/locale/es.yml

diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index 6bfc7bc6c..a89350e49 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -14,10 +14,10 @@ const props = defineProps({
     baseUrl: { type: String, required: true },
     filter: { type: Object, default: undefined },
     descriptor: { type: Object, required: true },
-    searchbarDataKey: { type: String, required: true },
-    searchbarUrl: { type: String, required: true },
-    searchbarLabel: { type: String, required: true },
-    searchbarInfo: { type: String, required: true },
+    searchbarDataKey: { type: String, default: undefined },
+    searchbarUrl: { type: String, default: undefined },
+    searchbarLabel: { type: String, default: '' },
+    searchbarInfo: { type: String, default: '' },
 });
 
 const { t } = useI18n();
@@ -39,7 +39,10 @@ onBeforeRouteUpdate(async (to, from) => {
 });
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
+    <Teleport
+        to="#searchbar"
+        v-if="stateStore.isHeaderMounted() && props.searchbarDataKey"
+    >
         <VnSearchbar
             :data-key="props.searchbarDataKey"
             :url="props.searchbarUrl"
@@ -57,7 +60,7 @@ onBeforeRouteUpdate(async (to, from) => {
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div :class="useCardSize()">
+            <div :class="[useCardSize(), $attrs.class]">
                 <RouterView />
             </div>
         </QPage>
diff --git a/src/css/app.scss b/src/css/app.scss
index c6848ff63..bd2b1b06d 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -172,3 +172,7 @@ input::-webkit-inner-spin-button {
     background-color: $primary !important;
     color: white !important;
 }
+
+.q-scrollarea__content {
+    max-width: 100%;
+}
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index 78eec9e8d..b2f9c4d2e 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -1,46 +1,15 @@
 <script setup>
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import { useStateStore } from 'stores/useStateStore';
-import { useI18n } from 'vue-i18n';
+import VnCard from 'components/common/VnCard.vue';
 import ClaimDescriptor from './ClaimDescriptor.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const { t } = useI18n();
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <VnSearchbar
-            data-key="ClaimList"
-            url="Claims/filter"
-            :label="t('Search claim')"
-            :info="t('You can search by claim id or customer name')"
-        />
-    </Teleport>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <ClaimDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        data-key="Claim"
+        base-url="Claims"
+        :descriptor="ClaimDescriptor"
+        searchbar-data-key="ClaimList"
+        searchbar-url="Claims/filter"
+        searchbar-label="Search claim"
+        searchbar-info="You can search by claim id or customer name"
+    />
 </template>
-
-<i18n>
-es:
-    Search claim: Buscar reclamación
-    You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
-    Details: Detalles
-    Notes: Notas
-    Action: Acción
-</i18n>
diff --git a/src/pages/Claim/locale/es.yml b/src/pages/Claim/locale/es.yml
new file mode 100644
index 000000000..710d3485d
--- /dev/null
+++ b/src/pages/Claim/locale/es.yml
@@ -0,0 +1,2 @@
+Search claim: Buscar reclamación
+You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 9da9eb21d..872bd7da7 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -1,45 +1,15 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
-import { useRoute } from 'vue-router';
+import VnCard from 'components/common/VnCard.vue';
 import CustomerDescriptor from './CustomerDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const route = useRoute();
-const { t } = useI18n();
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <VnSearchbar
-            data-key="CustomerList"
-            url="Clients/filter"
-            :label="t('Search customer')"
-            :info="t('You can search by customer id or name')"
-        />
-    </Teleport>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <CustomerDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        data-key="Client"
+        base-url="Clients"
+        :descriptor="CustomerDescriptor"
+        searchbar-data-key="CustomerList"
+        searchbar-url="Clients/filter"
+        searchbar-label="Search customer"
+        searchbar-info="You can search by customer id or name"
+    />
 </template>
-
-<i18n>
-es:
-    Search customer: Buscar cliente
-    You can search by customer id or name: Puedes buscar por id o nombre del cliente
-</i18n>
diff --git a/src/pages/Customer/locale/es.yml b/src/pages/Customer/locale/es.yml
index 8fed37092..111696f21 100644
--- a/src/pages/Customer/locale/es.yml
+++ b/src/pages/Customer/locale/es.yml
@@ -1,3 +1,5 @@
+Search customer: Buscar cliente
+You can search by customer id or name: Puedes buscar por id o nombre del cliente
 customerFilter:
     filter:
         name: Nombre
diff --git a/src/pages/Department/Card/DepartmentCard.vue b/src/pages/Department/Card/DepartmentCard.vue
index da9accee1..21247ca5a 100644
--- a/src/pages/Department/Card/DepartmentCard.vue
+++ b/src/pages/Department/Card/DepartmentCard.vue
@@ -1,26 +1,13 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
+import VnCard from 'components/common/VnCard.vue';
 import DepartmentDescriptor from 'pages/Department/Card/DepartmentDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-
-const stateStore = useStateStore();
 </script>
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <DepartmentDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-
-            <div class="q-pa-md column items-center">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        class="q-pa-md column items-center"
+        v-bind="{ ...$attrs }"
+        data-key="Department"
+        base-url="Departments"
+        :descriptor="DepartmentDescriptor"
+    />
 </template>
diff --git a/src/pages/Entry/Card/EntryCard.vue b/src/pages/Entry/Card/EntryCard.vue
index 5a2bef186..3eb4bd776 100644
--- a/src/pages/Entry/Card/EntryCard.vue
+++ b/src/pages/Entry/Card/EntryCard.vue
@@ -1,48 +1,15 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnCard from 'components/common/VnCard.vue';
 import EntryDescriptor from './EntryDescriptor.vue';
-
-import { useStateStore } from 'stores/useStateStore';
-import useCardSize from 'src/composables/useCardSize';
-
-const { t } = useI18n();
-const stateStore = useStateStore();
 </script>
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="EntryList"
-                url="Entries/filter"
-                :label="t('Search entries')"
-                :info="t('You can search by entry reference')"
-            />
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <EntryDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        data-key="Entry"
+        base-url="Entries"
+        :descriptor="EntryDescriptor"
+        searchbar-data-key="EntryList"
+        searchbar-url="Entries/filter"
+        searchbar-label="Search entries"
+        searchbar-info="You can search by entry reference"
+    />
 </template>
-
-<i18n>
-es:
-    Search entries: Buscar entradas
-    You can search by entry reference: Puedes buscar por referencia de la entrada
-</i18n>
diff --git a/src/pages/Entry/locale/es.yml b/src/pages/Entry/locale/es.yml
index 192d03542..5d317a24a 100644
--- a/src/pages/Entry/locale/es.yml
+++ b/src/pages/Entry/locale/es.yml
@@ -1,3 +1,5 @@
+Search entries: Buscar entradas
+You can search by entry reference: Puedes buscar por referencia de la entrada
 entryList:
     list:
         inventoryEntry: Es inventario
diff --git a/src/pages/Item/Card/ItemCard.vue b/src/pages/Item/Card/ItemCard.vue
index 3b3750b2a..4eca6137c 100644
--- a/src/pages/Item/Card/ItemCard.vue
+++ b/src/pages/Item/Card/ItemCard.vue
@@ -1,28 +1,7 @@
 <script setup>
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnCard from 'components/common/VnCard.vue';
 import ItemDescriptor from './ItemDescriptor.vue';
-
-import { useStateStore } from 'stores/useStateStore';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
 </script>
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <ItemDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard data-key="Item" base-url="Items" :descriptor="ItemDescriptor" />
 </template>
diff --git a/src/pages/Order/Card/OrderCard.vue b/src/pages/Order/Card/OrderCard.vue
index 7ac083c37..ef7b30d86 100644
--- a/src/pages/Order/Card/OrderCard.vue
+++ b/src/pages/Order/Card/OrderCard.vue
@@ -1,23 +1,7 @@
 <script setup>
-import LeftMenu from 'components/LeftMenu.vue';
-import { useStateStore } from 'stores/useStateStore';
+import VnCard from 'components/common/VnCard.vue';
 import OrderDescriptor from 'pages/Order/Card/OrderDescriptor.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-
-const stateStore = useStateStore();
 </script>
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <OrderDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <RouterView></RouterView>
-        </QPage>
-    </QPageContainer>
+    <VnCard data-key="Order" base-url="Orders" :descriptor="OrderDescriptor" />
 </template>
diff --git a/src/pages/Parking/Card/ParkingCard.vue b/src/pages/Parking/Card/ParkingCard.vue
index 621680985..5a0b552d6 100644
--- a/src/pages/Parking/Card/ParkingCard.vue
+++ b/src/pages/Parking/Card/ParkingCard.vue
@@ -1,57 +1,21 @@
 <script setup>
-import { onMounted, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
-import { useArrayData } from 'src/composables/useArrayData';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnCard from 'components/common/VnCard.vue';
 import ParkingDescriptor from 'pages/Parking/Card/ParkingDescriptor.vue';
 
-const { t } = useI18n();
-const route = useRoute();
-const stateStore = useStateStore();
-
 const filter = {
     fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],
     include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }],
 };
-
-const arrayData = useArrayData('Parking', {
-    url: `Parkings/${route.params.id}`,
-    filter,
-});
-const { store } = arrayData;
-onMounted(async () => await arrayData.fetch({ append: false }));
-watch(
-    () => route.params.id,
-    async (newId) => {
-        if (newId) {
-            store.url = `Parkings/${newId}`;
-            store.filter = filter;
-            await arrayData.fetch({ append: false });
-        }
-    }
-);
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <VnSearchbar
-            :info="t('parking.searchBar.info')"
-            :label="t('parking.searchBar.label')"
-            data-key="Parking"
-        />
-    </Teleport>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <ParkingDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <RouterView></RouterView>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        data-key="Parking"
+        base-url="Parkings"
+        :filter="filter"
+        :descriptor="ParkingDescriptor"
+        searchbar-data-key="ParkingList"
+        searchbar-url="Parkings"
+        searchbar-label="parking.searchBar.label"
+        searchbar-info="parking.searchBar.info"
+    />
 </template>
diff --git a/src/pages/Route/Card/RouteCard.vue b/src/pages/Route/Card/RouteCard.vue
index 46b997b65..fd0a8a507 100644
--- a/src/pages/Route/Card/RouteCard.vue
+++ b/src/pages/Route/Card/RouteCard.vue
@@ -1,22 +1,7 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'components/LeftMenu.vue';
+import VnCard from 'components/common/VnCard.vue';
 import RouteDescriptor from 'pages/Route/Card/RouteDescriptor.vue';
-// import ShelvingDescriptor from 'pages/Shelving/Card/ShelvingDescriptor.vue';
-
-const stateStore = useStateStore();
 </script>
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <RouteDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <RouterView></RouterView>
-        </QPage>
-    </QPageContainer>
+    <VnCard data-key="Route" base-url="Routes" :descriptor="RouteDescriptor" />
 </template>
diff --git a/src/pages/Shelving/Card/ShelvingCard.vue b/src/pages/Shelving/Card/ShelvingCard.vue
index 221740486..f4a2fcf60 100644
--- a/src/pages/Shelving/Card/ShelvingCard.vue
+++ b/src/pages/Shelving/Card/ShelvingCard.vue
@@ -1,21 +1,7 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'components/LeftMenu.vue';
+import VnCard from 'components/common/VnCard.vue';
 import ShelvingDescriptor from 'pages/Shelving/Card/ShelvingDescriptor.vue';
-
-const stateStore = useStateStore();
 </script>
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <ShelvingDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <RouterView></RouterView>
-        </QPage>
-    </QPageContainer>
+    <VnCard data-key="Shelving" base-url="Shelvings" :descriptor="ShelvingDescriptor" />
 </template>
diff --git a/src/pages/Supplier/Card/SupplierCard.vue b/src/pages/Supplier/Card/SupplierCard.vue
index fdf1d785a..c8c503056 100644
--- a/src/pages/Supplier/Card/SupplierCard.vue
+++ b/src/pages/Supplier/Card/SupplierCard.vue
@@ -1,73 +1,14 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import LeftMenu from 'components/LeftMenu.vue';
+import VnCard from 'components/common/VnCard.vue';
 import SupplierDescriptor from './SupplierDescriptor.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const { t } = useI18n();
 </script>
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="SuppliersList"
-                url="Suppliers/filter"
-                :limit="20"
-                :label="t('Search suppliers')"
-            />
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <SupplierDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        data-key="Supplier"
+        base-url="Suppliers"
+        :descriptor="SupplierDescriptor"
+        searchbar-data-key="SupplierList"
+        searchbar-url="Suppliers/filter"
+        searchbar-label="Search suppliers"
+    />
 </template>
-
-<style lang="scss">
-.q-scrollarea__content {
-    max-width: 100%;
-}
-</style>
-
-<style lang="scss" scoped>
-.descriptor {
-    max-width: 256px;
-
-    h5 {
-        margin: 0 15px;
-    }
-
-    .header {
-        display: flex;
-        justify-content: space-between;
-    }
-
-    .q-card__actions {
-        justify-content: center;
-    }
-
-    #descriptor-skeleton .q-card__actions {
-        justify-content: space-between;
-    }
-}
-</style>
-
-<i18n>
-    es:
-        Search suppliers: Buscar proveedores
-</i18n>
diff --git a/src/pages/Supplier/locale/es.yml b/src/pages/Supplier/locale/es.yml
new file mode 100644
index 000000000..e7e484f6a
--- /dev/null
+++ b/src/pages/Supplier/locale/es.yml
@@ -0,0 +1 @@
+Search suppliers: Buscar proveedores
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 0d5d3803e..471bfe490 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -1,73 +1,15 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
+import VnCard from 'components/common/VnCard.vue';
 import TicketDescriptor from './TicketDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const { t } = useI18n();
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <VnSearchbar
-            data-key="TicketList"
-            url="Tickets/filter"
-            :label="t('Search ticket')"
-            :info="t('You can search by ticket id or alias')"
-        />
-    </Teleport>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <TicketDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        data-key="Ticket"
+        base-url="Tickets"
+        :descriptor="TicketDescriptor"
+        searchbar-data-key="TicketList"
+        searchbar-url="Tickets/filter"
+        searchbar-label="Search ticket"
+        searchbar-info="You can search by ticket id or alias"
+    />
 </template>
-
-<style lang="scss">
-.q-scrollarea__content {
-    max-width: 100%;
-}
-</style>
-
-<style lang="scss" scoped>
-.descriptor {
-    max-width: 256px;
-
-    h5 {
-        margin: 0 15px;
-    }
-
-    .header {
-        display: flex;
-        justify-content: space-between;
-    }
-
-    .q-card__actions {
-        justify-content: center;
-    }
-
-    #descriptor-skeleton .q-card__actions {
-        justify-content: space-between;
-    }
-}
-</style>
-
-<i18n>
-es:
-    Search ticket: Buscar ticket
-    You can search by ticket id or alias: Puedes buscar por id o alias del ticket
-</i18n>
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
new file mode 100644
index 000000000..5348b29b9
--- /dev/null
+++ b/src/pages/Ticket/locale/es.yml
@@ -0,0 +1,2 @@
+Search ticket: Buscar ticket
+You can search by ticket id or alias: Puedes buscar por id o alias del ticket
diff --git a/src/pages/Travel/Card/TravelCard.vue b/src/pages/Travel/Card/TravelCard.vue
index e6c7b7e28..1d591f064 100644
--- a/src/pages/Travel/Card/TravelCard.vue
+++ b/src/pages/Travel/Card/TravelCard.vue
@@ -1,55 +1,7 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
+import VnCard from 'components/common/VnCard.vue';
 import TravelDescriptor from './TravelDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
 </script>
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <TravelDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard data-key="Travel" base-url="Travels" :descriptor="TravelDescriptor" />
 </template>
-
-<style lang="scss">
-.q-scrollarea__content {
-    max-width: 100%;
-}
-</style>
-
-<style lang="scss" scoped>
-.descriptor {
-    max-width: 256px;
-
-    h5 {
-        margin: 0 15px;
-    }
-
-    .header {
-        display: flex;
-        justify-content: space-between;
-    }
-
-    .q-card__actions {
-        justify-content: center;
-    }
-
-    #descriptor-skeleton .q-card__actions {
-        justify-content: space-between;
-    }
-}
-</style>
diff --git a/src/pages/Wagon/Card/WagonCard.vue b/src/pages/Wagon/Card/WagonCard.vue
index 5ac18fb47..ed6c83778 100644
--- a/src/pages/Wagon/Card/WagonCard.vue
+++ b/src/pages/Wagon/Card/WagonCard.vue
@@ -1,32 +1,6 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
-import { useRoute } from 'vue-router';
-import LeftMenu from 'components/LeftMenu.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const route = useRoute();
-const { t } = useI18n();
+import VnCard from 'components/common/VnCard.vue';
 </script>
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard data-key="Wagon" base-url="Wagons" />
 </template>
-
-<i18n>
-es:
-    Search customer: Buscar cliente
-    You can search by customer id or name: Puedes buscar por id o nombre del cliente
-</i18n>
diff --git a/src/pages/Worker/Card/WorkerCard.vue b/src/pages/Worker/Card/WorkerCard.vue
index 0d62dcfc1..d76ef6f59 100644
--- a/src/pages/Worker/Card/WorkerCard.vue
+++ b/src/pages/Worker/Card/WorkerCard.vue
@@ -1,44 +1,15 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
+import VnCard from 'components/common/VnCard.vue';
 import WorkerDescriptor from './WorkerDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const { t } = useI18n();
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <VnSearchbar
-            data-key="WorkerList"
-            url="Workers/filter"
-            :label="t('Search worker')"
-            :info="t('You can search by worker id or name')"
-        />
-    </Teleport>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <WorkerDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        data-key="Worker"
+        base-url="Workers"
+        :descriptor="WorkerDescriptor"
+        searchbar-data-key="WorkerList"
+        searchbar-url="Workers/filter"
+        searchbar-label="Search worker"
+        searchbar-info="You can search by worker id or name"
+    />
 </template>
-
-<i18n>
-es:
-    Search worker: Buscar trabajador
-    You can search by worker id or name: Puedes buscar por id o nombre del trabajador
-</i18n>
diff --git a/src/pages/Worker/locale/es.yml b/src/pages/Worker/locale/es.yml
new file mode 100644
index 000000000..86dd9d0d9
--- /dev/null
+++ b/src/pages/Worker/locale/es.yml
@@ -0,0 +1,2 @@
+Search worker: Buscar trabajador
+You can search by worker id or name: Puedes buscar por id o nombre del trabajador

From 7a4f975cc9845a6f10c6e83b28cc0d86bbb025e7 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 19 Apr 2024 13:52:19 +0200
Subject: [PATCH 31/42] fix: refs #6480 fix warning

---
 src/components/ui/CardSummary.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index bac72334c..1a4514ef5 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -15,7 +15,7 @@ const props = defineProps({
         default: null,
     },
     entityId: {
-        type: Number,
+        type: [Number, String],
         default: null,
     },
     dataKey: {

From 3f5c711fa1de7a2099d576768632a4f0d4f68601 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 19 Apr 2024 12:26:49 -0300
Subject: [PATCH 32/42] Improvements

---
 src/components/ui/FetchedTags.vue |  2 +-
 src/pages/Item/ItemFixedPrice.vue | 23 ++++++++++++++++-------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/ui/FetchedTags.vue b/src/components/ui/FetchedTags.vue
index 12bce9d4b..d26c21a4c 100644
--- a/src/components/ui/FetchedTags.vue
+++ b/src/components/ui/FetchedTags.vue
@@ -18,7 +18,7 @@ defineProps({
                 :class="{ empty: !$props.item.value5 }"
                 :title="$props.item.tag5 + ': ' + $props.item.value5"
             >
-                {{ $props.item.value5 }}
+                {{ $props.item.value5 }}s
             </div>
             <div
                 class="inline-tag"
diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 402010f06..1af73b393 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -9,7 +9,6 @@ import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
 import ItemFixedPriceFilter from './ItemFixedPriceFilter.vue';
-// TODO: mostrar item descriptor en fetchedtags
 import ItemDescriptorProxy from './Card/ItemDescriptorProxy.vue';
 
 import { useStateStore } from 'stores/useStateStore';
@@ -27,7 +26,6 @@ const { openConfirmationModal } = useVnConfirm();
 const state = useState();
 const { notify } = useNotify();
 
-// const fixedPricesFetchRef = ref(null);
 const editTableCellDialogRef = ref(null);
 const user = state.getUser();
 const fixedPrices = ref([]);
@@ -306,7 +304,7 @@ const upsertPrice = async ({ row, col, rowIndex }, resetMinPrice = false) => {
         row = data;
         fixedPricesOriginalData.value[rowIndex][col.field] = row[col.field];
     } catch (err) {
-        console.error('Error upserting price', err);
+        console.error('Error editing price', err);
     }
 };
 
@@ -381,7 +379,6 @@ const updateMinPrice = async (value, props) => {
 };
 
 const isLower = (date) => {
-    // TODO: APLICAR ESTO A CHIPS A LAS FECHAS DE ENDED DATE
     let today = Date.vnNew();
     today.setHours(0, 0, 0, 0);
 
@@ -393,7 +390,6 @@ const isLower = (date) => {
 };
 
 const isBigger = (date) => {
-    // TODO: APLICAR ESTO A CHIPS A LAS FECHAS DE STARTED DATE
     let today = Date.vnNew();
     today.setHours(0, 0, 0, 0);
 
@@ -505,7 +501,10 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             </template>
             <template #body-cell-description="{ row }">
                 <QTd class="col">
-                    <span>{{ row.name }} {{ row.subName }}</span>
+                    <span class="link">
+                        {{ row.name }}
+                    </span>
+                    <ItemDescriptorProxy :id="row.itemFk" />
                     <fetched-tags :item="row" :max-length="6" />
                 </QTd>
             </template>
@@ -551,10 +550,15 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 </QTd>
             </template>
             <template #body-cell-started="props">
-                <QTd class="col" style="min-width: 150px">
+                <QTd class="col" style="min-width: 160px">
                     <VnInputDate
                         v-model="props.row.started"
                         v-on="getRowUpdateInputEvents(props, false, 'date')"
+                        v-bind="
+                            isBigger(props.row.started)
+                                ? { 'bg-color': 'warning', 'is-outlined': true }
+                                : {}
+                        "
                     />
                 </QTd>
             </template>
@@ -563,6 +567,11 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     <VnInputDate
                         v-model="props.row.ended"
                         v-on="getRowUpdateInputEvents(props, false, 'date')"
+                        v-bind="
+                            isLower(props.row.ended)
+                                ? { 'bg-color': 'warning', 'is-outlined': true }
+                                : {}
+                        "
                     />
                 </QTd>
             </template>

From d5832eaf41ca1fc7471b51c966d2571a4fc867d2 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 19 Apr 2024 12:52:45 -0300
Subject: [PATCH 33/42] improvement

---
 src/components/common/VnInputDate.vue | 5 ++---
 src/components/ui/FetchedTags.vue     | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index dc4c5b7d2..2053eceb1 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { computed, ref } from 'vue';
-import VnInput from 'components/common/VnInput.vue';
 import isValidDate from 'filters/isValidDate';
 
 const props = defineProps({
@@ -80,7 +79,7 @@ const styleAttrs = computed(() => {
 
 <template>
     <div @mouseover="hover = true" @mouseleave="hover = false">
-        <VnInput
+        <QInput
             class="vn-input-date"
             readonly
             :model-value="displayDate(value)"
@@ -110,7 +109,7 @@ const styleAttrs = computed(() => {
                     </QPopupProxy>
                 </QIcon>
             </template>
-        </VnInput>
+        </QInput>
     </div>
 </template>
 
diff --git a/src/components/ui/FetchedTags.vue b/src/components/ui/FetchedTags.vue
index d26c21a4c..12bce9d4b 100644
--- a/src/components/ui/FetchedTags.vue
+++ b/src/components/ui/FetchedTags.vue
@@ -18,7 +18,7 @@ defineProps({
                 :class="{ empty: !$props.item.value5 }"
                 :title="$props.item.tag5 + ': ' + $props.item.value5"
             >
-                {{ $props.item.value5 }}s
+                {{ $props.item.value5 }}
             </div>
             <div
                 class="inline-tag"

From ab61a68f28466bb1be2a91d908a2660fc9cc6ea4 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Mon, 22 Apr 2024 11:20:25 +0200
Subject: [PATCH 34/42] refactor: refs #6899 moved css to app.scss

---
 src/css/app.scss                                |  9 ++++++++-
 src/pages/InvoiceOut/Card/InvoiceOutSummary.vue | 11 +----------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index aaa071cde..f596a18dd 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -136,6 +136,13 @@ select:-webkit-autofill {
     }
 }
 
+.q-btn {
+    text-transform: none;
+}
+.tr-header {
+    color: var(--vn-label-color);
+}
+
 .q-chip,
 .q-notification__message,
 .q-notification__icon {
@@ -168,4 +175,4 @@ input::-webkit-inner-spin-button {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
-}
\ No newline at end of file
+}
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue b/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
index 2d6d17ae2..4c6e1dc56 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
@@ -171,7 +171,7 @@ const ticketsColumns = ref([
                     </template>
                     <template #body-cell-quantity="{ value, row }">
                         <QTd>
-                            <QBtn class="no-uppercase" flat color="primary" dense>
+                            <QBtn flat color="primary" dense>
                                 {{ value }}
                                 <CustomerDescriptorProxy :id="row.id" />
                             </QBtn>
@@ -182,12 +182,3 @@ const ticketsColumns = ref([
         </template>
     </CardSummary>
 </template>
-
-<style lang="scss" scoped>
-.tr-header {
-    color: var(--vn-label-color);
-}
-.no-uppercase {
-    text-transform: none;
-}
-</style>

From 1398a146ffd68a979d2f8a235ca51fbe364a5a04 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 22 Apr 2024 09:07:48 -0300
Subject: [PATCH 35/42] Change restOfData to restOfItem

---
 src/pages/Item/ItemFixedPrice.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 1af73b393..933f1b0dd 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -333,9 +333,9 @@ const addRow = () => {
     const lastItemCopy = JSON.parse(
         JSON.stringify(fixedPrices.value[fixedPrices.value.length - 1])
     );
-    const { id, ...restOfData } = lastItemCopy;
-    fixedPricesOriginalData.value.push(restOfData);
-    fixedPrices.value.push(restOfData);
+    const { id, ...restOfItem } = lastItemCopy;
+    fixedPricesOriginalData.value.push(restOfItem);
+    fixedPrices.value.push(restOfItem);
 };
 
 const openEditTableCellDialog = () => {

From 2105d7870b0f5bb0d9d30511bee9ad59dc6819bc Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 22 Apr 2024 09:38:16 -0300
Subject: [PATCH 36/42] Refactor isBigger and isLower

---
 src/filters/date.js               | 18 ++++++++++++++++++
 src/pages/Item/ItemFixedPrice.vue | 23 +----------------------
 2 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/filters/date.js b/src/filters/date.js
index 2766d1381..2f1799b00 100644
--- a/src/filters/date.js
+++ b/src/filters/date.js
@@ -91,3 +91,21 @@ export function toDateTimeFormat(date, showSeconds = false) {
         second: showSeconds ? '2-digit' : undefined,
     });
 }
+
+export function getTimeDifferenceWithToday(date) {
+    let today = Date.vnNew();
+    today.setHours(0, 0, 0, 0);
+
+    date = new Date(date);
+    date.setHours(0, 0, 0, 0);
+
+    return today - date;
+}
+
+export function isLower(date) {
+    return getTimeDifferenceWithToday(date) > 0;
+}
+
+export function isBigger(date) {
+    return getTimeDifferenceWithToday(date) < 0;
+}
diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 933f1b0dd..d19119720 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -19,6 +19,7 @@ import { toCurrency } from 'filters/index';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 import { useArrayData } from 'composables/useArrayData';
+import { isLower, isBigger } from 'src/filters/date.js';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -378,28 +379,6 @@ const updateMinPrice = async (value, props) => {
     });
 };
 
-const isLower = (date) => {
-    let today = Date.vnNew();
-    today.setHours(0, 0, 0, 0);
-
-    date = new Date(date);
-    date.setHours(0, 0, 0, 0);
-
-    const timeDifference = today - date;
-    if (timeDifference > 0) return 'warning';
-};
-
-const isBigger = (date) => {
-    let today = Date.vnNew();
-    today.setHours(0, 0, 0, 0);
-
-    date = new Date(date);
-    date.setHours(0, 0, 0, 0);
-
-    const timeDifference = today - date;
-    if (timeDifference < 0) return 'warning';
-};
-
 onMounted(async () => {
     stateStore.rightDrawer = true;
     params.warehouseFk = user.value.warehouseFk;

From dce48b536d536ab01a401422662ce14533085f42 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 22 Apr 2024 09:42:28 -0300
Subject: [PATCH 37/42] Change in newPrice assign

---
 src/pages/Item/ItemFixedPrice.vue | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index d19119720..c93c326a6 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -318,16 +318,14 @@ const addRow = () => {
         const daysInWeek = 7;
         const nextWeek = new Date(today.getTime() + daysInWeek * millisecsInDay);
 
-        fixedPricesOriginalData.value.push({
+        const newPrice = {
             started: today,
             ended: nextWeek,
             hasMinPrice: 0,
-        });
-        fixedPrices.value.push({
-            started: today,
-            ended: nextWeek,
-            hasMinPrice: 0,
-        });
+        };
+
+        fixedPricesOriginalData.value.push({ ...newPrice });
+        fixedPrices.value.push({ ...newPrice });
         return;
     }
 

From e11625e05f70cffadedc7b02c96c974725225886 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 22 Apr 2024 11:30:16 -0300
Subject: [PATCH 38/42] set columns default attrs to avoid repeating code

---
 src/pages/Item/ItemFixedPrice.vue | 79 +++++++++++--------------------
 1 file changed, 28 insertions(+), 51 deletions(-)

diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index c93c326a6..0dd7ca07d 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -93,53 +93,47 @@ const getColumnInputEvents = (col) => {
           };
 };
 
+const defaultColumnFilter = {
+    component: VnInput,
+    type: 'text',
+    filterValue: null,
+    event: getColumnInputEvents,
+    attrs: {
+        dense: true,
+    },
+};
+
+const defaultColumnAttrs = {
+    align: 'left',
+    sortable: true,
+};
+
 const columns = computed(() => [
     {
         label: t('item.fixedPrice.itemId'),
         name: 'itemId',
         field: 'itemFk',
-        align: 'left',
-        sortable: true,
+        ...defaultColumnAttrs,
         columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getColumnInputEvents,
-            attrs: {
-                dense: true,
-            },
+            ...defaultColumnFilter,
         },
     },
     {
         label: t('globals.description'),
         field: 'name',
         name: 'description',
-        align: 'left',
-        sortable: true,
+        ...defaultColumnAttrs,
         columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getColumnInputEvents,
-            attrs: {
-                dense: true,
-            },
+            ...defaultColumnFilter,
         },
     },
     {
         label: t('item.fixedPrice.groupingPrice'),
         field: 'rate2',
         name: 'groupingPrice',
-        align: 'left',
-        sortable: true,
+        ...defaultColumnAttrs,
         columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getColumnInputEvents,
-            attrs: {
-                dense: true,
-            },
+            ...defaultColumnFilter,
         },
         format: (val) => toCurrency(val),
     },
@@ -147,16 +141,9 @@ const columns = computed(() => [
         label: t('item.fixedPrice.packingPrice'),
         field: 'rate3',
         name: 'packingPrice',
-        align: 'left',
-        sortable: true,
+        ...defaultColumnAttrs,
         columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getColumnInputEvents,
-            attrs: {
-                dense: true,
-            },
+            ...defaultColumnFilter,
         },
         format: (val) => dashIfEmpty(val),
     },
@@ -165,32 +152,23 @@ const columns = computed(() => [
         label: t('item.fixedPrice.minPrice'),
         field: 'minPrice',
         name: 'minPrice',
-        align: 'left',
-        sortable: true,
+        ...defaultColumnAttrs,
         columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getColumnInputEvents,
-            attrs: {
-                dense: true,
-            },
+            ...defaultColumnFilter,
         },
     },
     {
         label: t('item.fixedPrice.started'),
         field: 'started',
         name: 'started',
-        align: 'left',
-        sortable: true,
+        ...defaultColumnAttrs,
         columnFilter: null,
     },
     {
         label: t('item.fixedPrice.ended'),
         field: 'ended',
         name: 'ended',
-        align: 'left',
-        sortable: true,
+        ...defaultColumnAttrs,
         columnFilter: null,
     },
 
@@ -198,8 +176,7 @@ const columns = computed(() => [
         label: t('item.fixedPrice.warehouse'),
         field: 'warehouseFk',
         name: 'warehouse',
-        align: 'left',
-        sortable: true,
+        ...defaultColumnAttrs,
         columnFilter: {
             component: VnSelectFilter,
             type: 'select',

From f9a88ea8c20772cba884bc6c85a3a4c3a357545f Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 23 Apr 2024 12:00:29 +0200
Subject: [PATCH 39/42] fix: refs #6480 fix workerCard

---
 src/components/common/VnCard.vue            | 32 ++++++++++++++-------
 src/pages/Parking/Card/ParkingBasicData.vue |  2 --
 src/pages/Ticket/Card/TicketSummary.vue     |  4 +--
 src/pages/Worker/Card/WorkerCard.vue        |  5 +++-
 4 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index a89350e49..c9f043702 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onBeforeMount } from 'vue';
+import { onBeforeMount, computed } from 'vue';
 import { useRoute, onBeforeRouteUpdate } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'src/composables/useArrayData';
@@ -11,8 +11,9 @@ import LeftMenu from 'components/LeftMenu.vue';
 
 const props = defineProps({
     dataKey: { type: String, required: true },
-    baseUrl: { type: String, required: true },
-    filter: { type: Object, default: undefined },
+    baseUrl: { type: String, default: undefined },
+    customUrl: { type: String, default: undefined },
+    filter: { type: Object, default: () => {} },
     descriptor: { type: Object, required: true },
     searchbarDataKey: { type: String, default: undefined },
     searchbarUrl: { type: String, default: undefined },
@@ -23,20 +24,29 @@ const props = defineProps({
 const { t } = useI18n();
 const stateStore = useStateStore();
 const route = useRoute();
+const url = computed(() => {
+    if (props.baseUrl) return `${props.baseUrl}/${route.params.id}`;
+    return props.customUrl;
+});
 
 const arrayData = useArrayData(props.dataKey, {
-    url: `${props.baseUrl}/${route.params.id}`,
+    url: url.value,
     filter: props.filter,
 });
 
-onBeforeMount(async () => await arrayData.fetch({ append: false }));
-
-onBeforeRouteUpdate(async (to, from) => {
-    if (to.params.id !== from.params.id) {
-        arrayData.store.url = `${props.baseUrl}/${route.params.id}`;
-        await arrayData.fetch({ append: false });
-    }
+onBeforeMount(async () => {
+    await arrayData.fetch({ append: false });
+    arrayData.store.filter.where = { id: route.params.id };
 });
+
+if (props.baseUrl) {
+    onBeforeRouteUpdate(async (to, from) => {
+        if (to.params.id !== from.params.id) {
+            arrayData.store.url = `${props.baseUrl}/${route.params.id}`;
+            await arrayData.fetch({ append: false });
+        }
+    });
+}
 </script>
 <template>
     <Teleport
diff --git a/src/pages/Parking/Card/ParkingBasicData.vue b/src/pages/Parking/Card/ParkingBasicData.vue
index 26a1ed8be..b03b7be7c 100644
--- a/src/pages/Parking/Card/ParkingBasicData.vue
+++ b/src/pages/Parking/Card/ParkingBasicData.vue
@@ -4,7 +4,6 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'src/components/FetchData.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModel from 'components/FormModel.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
@@ -28,7 +27,6 @@ const filter = {
         @on-fetch="(data) => (sectors = data)"
         auto-load
     />
-    <VnSubToolbar />
     <FormModel :url="`Parkings/${parkingId}`" model="parking" :filter="filter" auto-load>
         <template #form="{ data }">
             <VnRow>
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index d648433b0..364ae04a6 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -91,8 +91,8 @@ async function changeState(value) {
     >
         <template #header="{ entity }">
             <div>
-                Ticket #{{ entity.id }} - {{ entity.client.name }} ({{
-                    entity.client.id
+                Ticket #{{ entity.id }} - {{ entity.client?.name }} ({{
+                    entity.client?.id
                 }}) -
                 {{ entity.nickname }}
             </div>
diff --git a/src/pages/Worker/Card/WorkerCard.vue b/src/pages/Worker/Card/WorkerCard.vue
index d76ef6f59..e0047bf9e 100644
--- a/src/pages/Worker/Card/WorkerCard.vue
+++ b/src/pages/Worker/Card/WorkerCard.vue
@@ -1,12 +1,15 @@
 <script setup>
 import VnCard from 'components/common/VnCard.vue';
 import WorkerDescriptor from './WorkerDescriptor.vue';
+
+const filter = { where: {} };
 </script>
 <template>
     <VnCard
         data-key="Worker"
-        base-url="Workers"
+        custom-url="Workers/Summary"
         :descriptor="WorkerDescriptor"
+        :filter="filter"
         searchbar-data-key="WorkerList"
         searchbar-url="Workers/filter"
         searchbar-label="Search worker"

From f8c238f4439097f98a1deeede85cb3706e32cc54 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 23 Apr 2024 12:04:24 +0200
Subject: [PATCH 40/42] fix: refs #6480 fix workerCard

---
 src/components/common/VnCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index c9f043702..3a3361657 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -35,8 +35,8 @@ const arrayData = useArrayData(props.dataKey, {
 });
 
 onBeforeMount(async () => {
-    await arrayData.fetch({ append: false });
     arrayData.store.filter.where = { id: route.params.id };
+    await arrayData.fetch({ append: false });
 });
 
 if (props.baseUrl) {

From c8b08b9e2df8eca9780ec875cac063eb6380f7a4 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 23 Apr 2024 12:34:38 +0200
Subject: [PATCH 41/42] fix: refs #6480 fix workerCard

---
 src/components/common/VnCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index 3a3361657..6d0badffb 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -35,7 +35,7 @@ const arrayData = useArrayData(props.dataKey, {
 });
 
 onBeforeMount(async () => {
-    arrayData.store.filter.where = { id: route.params.id };
+    if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
     await arrayData.fetch({ append: false });
 });
 

From 39685c222f5e83354568b005b16d813c512a5dfb Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Wed, 24 Apr 2024 09:14:35 +0200
Subject: [PATCH 42/42] refactor: refs #6899 fixed css and minor changes

---
 src/css/app.scss                                 | 3 ---
 src/pages/InvoiceOut/Card/InvoiceOutSummary.vue  | 7 ++++++-
 src/pages/InvoiceOut/InvoiceOutNegativeBases.vue | 8 ++++----
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index 4bc4ded9a..9edf19d06 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -145,9 +145,6 @@ select:-webkit-autofill {
     }
 }
 
-.q-btn {
-    text-transform: none;
-}
 .tr-header {
     color: var(--vn-label-color);
 }
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue b/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
index 4c6e1dc56..e98de6b30 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
@@ -171,7 +171,7 @@ const ticketsColumns = ref([
                     </template>
                     <template #body-cell-quantity="{ value, row }">
                         <QTd>
-                            <QBtn flat color="primary" dense>
+                            <QBtn class="no-uppercase" flat color="primary" dense>
                                 {{ value }}
                                 <CustomerDescriptorProxy :id="row.id" />
                             </QBtn>
@@ -182,3 +182,8 @@ const ticketsColumns = ref([
         </template>
     </CardSummary>
 </template>
+<style lang="scss" scoped>
+.no-uppercase {
+    text-transform: none;
+}
+</style>
diff --git a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
index 36180a2e7..182de2c83 100644
--- a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
+++ b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
@@ -119,8 +119,8 @@ const columns = computed(() => [
     },
     {
         label: t('invoiceOut.negativeBases.comercial'),
-        field: 'workerSocialName',
-        name: 'comercial',
+        field: 'workerName',
+        name: 'worker',
         align: 'left',
     },
 ]);
@@ -181,10 +181,10 @@ const downloadCSV = async () => {
                     <TicketDescriptorProxy :id="row.ticketFk" />
                 </QTd>
             </template>
-            <template #body-cell-comercial="{ row }">
+            <template #body-cell-worker="{ row }">
                 <QTd>
                     <QBtn class="no-uppercase" flat dense color="blue">{{
-                        row.workerSocial
+                        row.workerName
                     }}</QBtn>
                     <WorkerDescriptorProxy :id="row.comercialId" />
                 </QTd>