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/23] 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/23] 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/23] #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/23] 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/23] 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/23] 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/23] 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 90ed6ad09a20edf8016b29133b0b850a2f906b47 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 18 Apr 2024 10:49:17 +0200
Subject: [PATCH 08/23] 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 09/23] 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 f8da680e9881d2b35212ea955f439cf505bf1ff0 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 18 Apr 2024 13:33:21 +0200
Subject: [PATCH 10/23] 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 11/23] 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 ff36f82333f214b68d50accc9f1bd8000d0fe638 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 19 Apr 2024 09:39:17 +0200
Subject: [PATCH 12/23] 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 13/23] 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 14/23] 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 15/23] 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 16/23] 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 17/23] 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 c3db9e17a889e1a917727d270b001444d162aa12 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 19 Apr 2024 13:30:07 +0200
Subject: [PATCH 18/23] 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 19/23] 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 20/23] 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 f9a88ea8c20772cba884bc6c85a3a4c3a357545f Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 23 Apr 2024 12:00:29 +0200
Subject: [PATCH 21/23] 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 22/23] 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 23/23] 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 });
 });