From 0bfb1344dc5f5d104bb5c9d6ac806c0ab8bb27b3 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 28 Feb 2025 12:03:23 +0100
Subject: [PATCH 01/12] feat: refs #8326 wip added new style

---
 src/components/ui/VnLv.vue                    |   3 +-
 src/css/app.scss                              |  23 ++
 src/pages/InvoiceIn/Card/InvoiceInSummary.vue | 205 ++++++++--------
 src/pages/Order/Card/OrderSummary.vue         | 114 ++++-----
 src/pages/Ticket/Card/TicketSummary.vue       | 224 +++++++++---------
 src/pages/Travel/Card/TravelSummary.vue       | 126 +++++-----
 src/pages/Worker/Card/WorkerSummary.vue       | 147 ++++++------
 src/pages/Zone/Card/ZoneSummary.vue           |  35 ++-
 8 files changed, 461 insertions(+), 416 deletions(-)

diff --git a/src/components/ui/VnLv.vue b/src/components/ui/VnLv.vue
index a198c9c05..93c2b9963 100644
--- a/src/components/ui/VnLv.vue
+++ b/src/components/ui/VnLv.vue
@@ -35,6 +35,7 @@ const val = computed(() => $props.value);
             :label="label"
             disable
             dense
+            size="sm"
         />
         <template v-else>
             <div v-if="label || $slots.label" class="label">
@@ -44,7 +45,7 @@ const val = computed(() => $props.value);
             </div>
             <div class="value">
                 <slot name="value">
-                    <span :title="value">
+                    <span :title="value" style="text-overflow: ellipsis">
                         {{ dash ? dashIfEmpty(value) : value }}
                     </span>
                 </slot>
diff --git a/src/css/app.scss b/src/css/app.scss
index 994ae7ff1..97097cebf 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -339,3 +339,26 @@ input::-webkit-inner-spin-button {
 .containerShrinked {
     width: 80%;
 }
+
+.vn-card-group {
+    display: flex;
+    flex-direction: column;
+}
+
+.vn-card-content {
+    display: flex;
+    flex-direction: column;
+    text-overflow: ellipsis;
+    > div {
+        max-height: 80px;
+    }
+}
+
+@media (min-width: 1010px) {
+    .vn-card-group {
+        flex-direction: row;
+    }
+    .vn-card-content {
+        flex: 1;
+    }
+}
diff --git a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
index d358601d3..3515e3bce 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
@@ -205,113 +205,106 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
             <InvoiceInDescriptorMenu :invoice="entity" />
         </template>
         <template #body="{ entity }">
-            <!--Basic Data-->
-            <QCard class="vn-one">
-                <QCardSection class="q-pa-none">
-                    <VnTitle
-                        :url="getLink('basic-data')"
-                        :text="t('globals.pageTitles.basicData')"
-                    />
-                </QCardSection>
-                <VnLv
-                    :label="t('invoiceIn.list.supplier')"
-                    :value="entity.supplier?.name"
-                >
-                    <template #value>
-                        <span class="link">
-                            {{ entity.supplier?.name }}
-                            <SupplierDescriptorProxy :id="entity.supplierFk" />
-                        </span>
-                    </template>
-                </VnLv>
-                <VnLv :label="t('invoiceIn.supplierRef')" :value="entity.supplierRef" />
-                <VnLv
-                    :label="t('invoiceIn.summary.currency')"
-                    :value="entity.currency?.code"
+            <QCard class="max-width">
+                <VnTitle
+                    :url="getLink('basic-data')"
+                    :text="t('globals.pageTitles.basicData')"
                 />
-                <VnLv :label="t('invoiceIn.serial')" :value="`${entity.serial}`" />
-                <VnLv
-                    :label="t('globals.country')"
-                    :value="entity.supplier?.country?.code"
-                />
-            </QCard>
-            <QCard class="vn-one">
-                <QCardSection class="q-pa-none">
-                    <VnTitle
-                        :url="getLink('basic-data')"
-                        :text="t('globals.pageTitles.basicData')"
-                    />
-                </QCardSection>
-                <VnLv
-                    :ellipsis-value="false"
-                    :label="t('invoiceIn.summary.issued')"
-                    :value="toDate(entity.issued)"
-                />
-                <VnLv
-                    :label="t('invoiceIn.summary.operated')"
-                    :value="toDate(entity.operated)"
-                />
-                <VnLv
-                    :label="t('invoiceIn.summary.bookEntried')"
-                    :value="toDate(entity.bookEntried)"
-                />
-                <VnLv
-                    :label="t('invoiceIn.summary.bookedDate')"
-                    :value="toDate(entity.booked)"
-                />
-                <VnLv :label="t('globals.isVies')" :value="entity.supplier?.isVies" />
-            </QCard>
-            <QCard class="vn-one">
-                <QCardSection class="q-pa-none">
-                    <VnTitle
-                        :url="getLink('basic-data')"
-                        :text="t('globals.pageTitles.basicData')"
-                    />
-                </QCardSection>
-                <VnLv
-                    :label="t('invoiceIn.summary.sage')"
-                    :value="entity.sageWithholding?.withholding"
-                />
-                <VnLv
-                    :label="t('invoiceIn.summary.vat')"
-                    :value="entity.expenseDeductible?.name"
-                />
-                <VnLv
-                    :label="t('invoiceIn.card.company')"
-                    :value="entity.company?.code"
-                />
-                <VnLv :label="t('invoiceIn.isBooked')" :value="invoiceIn?.isBooked" />
-            </QCard>
-            <QCard class="vn-one">
-                <QCardSection class="q-pa-none">
-                    <VnTitle
-                        :url="getLink('basic-data')"
-                        :text="t('globals.pageTitles.basicData')"
-                    />
-                </QCardSection>
-                <QCardSection class="q-pa-none">
-                    <VnLv
-                        :label="t('invoiceIn.summary.taxableBase')"
-                        :value="toCurrency(entity.totals.totalTaxableBase)"
-                    />
-                    <VnLv label="Total" :value="toCurrency(entity.totals.totalVat)" />
-                    <VnLv :label="t('invoiceIn.summary.dueTotal')">
-                        <template #value>
-                            <QChip
-                                dense
-                                class="q-pa-xs"
-                                :color="amountsNotMatch ? 'negative' : 'transparent'"
-                                :title="
-                                    amountsNotMatch
-                                        ? t('invoiceIn.summary.noMatch')
-                                        : t('invoiceIn.summary.dueTotal')
-                                "
-                            >
-                                {{ toCurrency(entity.totals.totalDueDay) }}
-                            </QChip>
-                        </template>
-                    </VnLv>
-                </QCardSection>
+                <div class="vn-card-group">
+                    <div class="vn-card-content">
+                        <VnLv
+                            :label="t('invoiceIn.list.supplier')"
+                            :value="entity.supplier?.name"
+                        >
+                            <template #value>
+                                <span class="link">
+                                    {{ entity.supplier?.name }}
+                                    <SupplierDescriptorProxy :id="entity.supplierFk" />
+                                </span>
+                            </template>
+                        </VnLv>
+                        <VnLv
+                            :label="t('invoiceIn.supplierRef')"
+                            :value="entity.supplierRef"
+                        />
+                        <VnLv
+                            :label="t('invoiceIn.summary.currency')"
+                            :value="entity.currency?.code"
+                        />
+                        <VnLv
+                            :label="t('invoiceIn.serial')"
+                            :value="`${entity.serial}`"
+                        />
+                        <VnLv
+                            :label="t('globals.country')"
+                            :value="entity.supplier?.country?.code"
+                        />
+                    </div>
+                    <div class="vn-card-content">
+                        <VnLv
+                            :ellipsis-value="false"
+                            :label="t('invoiceIn.summary.issued')"
+                            :value="toDate(entity.issued)"
+                        />
+                        <VnLv
+                            :label="t('invoiceIn.summary.operated')"
+                            :value="toDate(entity.operated)"
+                        />
+                        <VnLv
+                            :label="t('invoiceIn.summary.bookEntried')"
+                            :value="toDate(entity.bookEntried)"
+                        />
+                        <VnLv
+                            :label="t('invoiceIn.summary.bookedDate')"
+                            :value="toDate(entity.booked)"
+                        />
+                        <VnLv
+                            :label="t('globals.isVies')"
+                            :value="entity.supplier?.isVies"
+                        />
+                    </div>
+                    <div class="vn-card-content">
+                        <VnLv
+                            :label="t('invoiceIn.summary.sage')"
+                            :value="entity.sageWithholding?.withholding"
+                        />
+                        <VnLv
+                            :label="t('invoiceIn.summary.vat')"
+                            :value="entity.expenseDeductible?.name"
+                        />
+                        <VnLv
+                            :label="t('invoiceIn.card.company')"
+                            :value="entity.company?.code"
+                        />
+                        <VnLv
+                            :label="t('invoiceIn.isBooked')"
+                            :value="invoiceIn?.isBooked"
+                        />
+                    </div>
+                    <div class="vn-card-content">
+                        <VnLv
+                            :label="t('invoiceIn.summary.taxableBase')"
+                            :value="toCurrency(entity.totals.totalTaxableBase)"
+                        />
+                        <VnLv label="Total" :value="toCurrency(entity.totals.totalVat)" />
+                        <VnLv :label="t('invoiceIn.summary.dueTotal')">
+                            <template #value>
+                                <QChip
+                                    dense
+                                    class="q-pa-xs"
+                                    :color="amountsNotMatch ? 'negative' : 'transparent'"
+                                    :title="
+                                        amountsNotMatch
+                                            ? t('invoiceIn.summary.noMatch')
+                                            : t('invoiceIn.summary.dueTotal')
+                                    "
+                                >
+                                    {{ toCurrency(entity.totals.totalDueDay) }}
+                                </QChip>
+                            </template>
+                        </VnLv>
+                    </div>
+                </div>
             </QCard>
             <!--Vat-->
             <QCard v-if="entity.invoiceInTax.length" class="vat">
diff --git a/src/pages/Order/Card/OrderSummary.vue b/src/pages/Order/Card/OrderSummary.vue
index a4bdb2881..55c309cf5 100644
--- a/src/pages/Order/Card/OrderSummary.vue
+++ b/src/pages/Order/Card/OrderSummary.vue
@@ -96,67 +96,67 @@ async function handleConfirm() {
                 <OrderDescriptorMenu :order="entity" />
             </template>
             <template #body="{ entity }">
-                <QCard class="vn-one">
+                <QCard class="vn-two">
                     <VnTitle
                         :url="`#/order/${entity.id}/basic-data`"
                         :text="t('globals.pageTitles.basicData')"
                     />
-                    <VnLv label="ID" :value="entity.id" />
-                    <VnLv :label="t('globals.alias')" dash>
-                        <template #value>
-                            <span class="link">
-                                {{ dashIfEmpty(entity?.address?.nickname) }}
-                                <CustomerDescriptorProxy :id="entity?.clientFk" />
-                            </span>
-                        </template>
-                    </VnLv>
-                    <VnLv
-                        :label="t('globals.company')"
-                        :value="entity?.address?.companyFk"
-                    />
-                    <VnLv
-                        :label="t('globals.confirmed')"
-                        :value="Boolean(entity?.isConfirmed)"
-                    />
-                </QCard>
-                <QCard class="vn-one">
-                    <VnTitle
-                        :url="`#/order/${entity.id}/basic-data`"
-                        :text="t('globals.pageTitles.basicData')"
-                    />
-                    <VnLv
-                        :label="t('order.summary.created')"
-                        :value="toDateHourMinSec(entity?.created)"
-                    />
-                    <VnLv
-                        :label="t('globals.confirmed')"
-                        :value="toDateHourMinSec(entity?.confirmed)"
-                    />
-                    <VnLv
-                        :label="t('globals.landed')"
-                        :value="toDateHourMinSec(entity?.landed)"
-                    />
-                    <VnLv :label="t('globals.phone')">
-                        <template #value>
-                            {{ dashIfEmpty(entity?.address?.phone) }}
-                            <a
-                                v-if="entity?.address?.phone"
-                                :href="`tel:${entity?.address?.phone}`"
-                                class="text-primary"
-                            >
-                                <QIcon name="phone" />
-                            </a>
-                        </template>
-                    </VnLv>
-                    <VnLv
-                        :label="t('order.summary.createdFrom')"
-                        :value="entity?.sourceApp"
-                    />
-                    <VnLv
-                        :label="t('order.summary.address')"
-                        :value="`${entity?.address?.street} - ${entity?.address?.city} (${entity?.address?.province?.name})`"
-                        class="order-summary-address"
-                    />
+                    <div class="vn-card-group">
+                        <div class="vn-card-content">
+                            <VnLv label="ID" :value="entity.id" />
+                            <VnLv :label="t('globals.alias')" dash>
+                                <template #value>
+                                    <span class="link">
+                                        {{ dashIfEmpty(entity?.address?.nickname) }}
+                                        <CustomerDescriptorProxy :id="entity?.clientFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('globals.company')"
+                                :value="entity?.address?.companyFk"
+                            />
+                            <VnLv
+                                :label="t('globals.confirmed')"
+                                :value="Boolean(entity?.isConfirmed)"
+                            />
+                        </div>
+                        <div class="vn-card-content">
+                            <VnLv
+                                :label="t('order.summary.created')"
+                                :value="toDateHourMinSec(entity?.created)"
+                            />
+                            <VnLv
+                                :label="t('globals.confirmed')"
+                                :value="toDateHourMinSec(entity?.confirmed)"
+                            />
+                            <VnLv
+                                :label="t('globals.landed')"
+                                :value="toDateHourMinSec(entity?.landed)"
+                            />
+                            <VnLv :label="t('globals.phone')">
+                                <template #value>
+                                    {{ dashIfEmpty(entity?.address?.phone) }}
+                                    <a
+                                        v-if="entity?.address?.phone"
+                                        :href="`tel:${entity?.address?.phone}`"
+                                        class="text-primary"
+                                    >
+                                        <QIcon name="phone" />
+                                    </a>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('order.summary.createdFrom')"
+                                :value="entity?.sourceApp"
+                            />
+                            <VnLv
+                                :label="t('order.summary.address')"
+                                :value="`${entity?.address?.street} - ${entity?.address?.city} (${entity?.address?.province?.name})`"
+                                class="order-summary-address"
+                            />
+                        </div>
+                    </div>
                 </QCard>
                 <QCard class="vn-one">
                     <VnTitle :text="t('globals.pageTitles.notes')" />
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index 5838efa88..52454ccf1 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -137,118 +137,130 @@ onMounted(async () => {
             <TicketDescriptorMenu :ticket="entity" />
         </template>
         <template #body="{ entity }">
-            <QCard class="vn-one">
+            <QCard class="vn-two">
                 <VnTitle
                     :url="toTicketUrl('basic-data')"
                     :text="t('globals.summary.basicData')"
                 />
-                <VnLv v-if="entity.ticketState" :label="t('globals.state')">
-                    <template #value>
-                        <QBadge
-                            text-color="black"
-                            :color="entity.ticketState.state.classColor"
-                        >
-                            {{ entity.ticketState.state.name }}
-                        </QBadge>
-                    </template>
-                </VnLv>
-                <VnLv :label="t('globals.salesPerson')">
-                    <template #value>
-                        <VnUserLink
-                            :name="entity.client?.salesPersonUser?.name"
-                            :worker-id="entity.client?.salesPersonFk"
+                <div class="vn-card-group">
+                    <div class="vn-card-content">
+                        <VnLv v-if="entity.ticketState" :label="t('globals.state')">
+                            <template #value>
+                                <QBadge
+                                    text-color="black"
+                                    :color="entity.ticketState.state.classColor"
+                                >
+                                    {{ entity.ticketState.state.name }}
+                                </QBadge>
+                            </template>
+                        </VnLv>
+                        <VnLv :label="t('globals.salesPerson')">
+                            <template #value>
+                                <VnUserLink
+                                    :name="entity.client?.salesPersonUser?.name"
+                                    :worker-id="entity.client?.salesPersonFk"
+                                />
+                            </template>
+                        </VnLv>
+                        <VnLv
+                            :label="t('globals.agency')"
+                            :value="entity.agencyMode?.name"
                         />
-                    </template>
-                </VnLv>
-                <VnLv :label="t('globals.agency')" :value="entity.agencyMode?.name" />
-                <VnLv :label="t('ticket.summary.zone')">
-                    <template #value>
-                        <span class="link" @click.stop>
-                            {{ entity?.zone?.name }}
-                            <ZoneDescriptorProxy :id="entity.zoneFk" />
-                        </span>
-                    </template>
-                </VnLv>
-                <VnLv :label="t('globals.warehouse')" :value="entity.warehouse?.name" />
-                <VnLv
-                    v-if="ticket?.ticketCollections?.length > 0"
-                    :label="t('ticket.summary.collection')"
-                    :value="ticket?.ticketCollections[0]?.collectionFk"
-                >
-                    <template #value>
-                        <a
-                            :href="`${grafanaUrl}/d/d552ab74-85b4-4e7f-a279-fab7cd9c6124/control-de-expediciones?orgId=1&var-collectionFk=${entity.ticketCollections[0]?.collectionFk}`"
-                            target="_blank"
-                            class="grafana"
+                        <VnLv :label="t('ticket.summary.zone')">
+                            <template #value>
+                                <span class="link" @click.stop>
+                                    {{ entity?.zone?.name }}
+                                    <ZoneDescriptorProxy :id="entity.zoneFk" />
+                                </span>
+                            </template>
+                        </VnLv>
+                        <VnLv
+                            :label="t('globals.warehouse')"
+                            :value="entity.warehouse?.name"
+                        />
+                        <VnLv
+                            v-if="ticket?.ticketCollections?.length > 0"
+                            :label="t('ticket.summary.collection')"
+                            :value="ticket?.ticketCollections[0]?.collectionFk"
                         >
-                            {{ entity.ticketCollections[0]?.collectionFk }}
-                        </a>
-                    </template>
-                </VnLv>
-                <VnLv :label="t('ticket.summary.route')">
-                    <template #value>
-                        <span class="link">
-                            {{ entity.routeFk }}
-                            <RouteDescriptorProxy :id="entity.routeFk" />
-                        </span>
-                    </template>
-                </VnLv>
-                <VnLv :label="t('ticket.summary.invoice')">
-                    <template #value>
-                        <span :class="{ link: entity.refFk }">
-                            {{ dashIfEmpty(entity.refFk) }}
-                            <InvoiceOutDescriptorProxy
-                                :id="entity.invoiceOut.id"
-                                v-if="entity.refFk"
-                            />
-                        </span>
-                    </template>
-                </VnLv>
-                <VnLv :label="t('globals.weight')" :value="dashIfEmpty(entity.weight)" />
-            </QCard>
-            <QCard class="vn-one">
-                <VnTitle
-                    :url="toTicketUrl('basic-data')"
-                    :text="t('globals.summary.basicData')"
-                />
-                <VnLv
-                    :label="t('ticket.summary.shipped')"
-                    :value="toDate(entity.shipped)"
-                />
-                <VnLv :label="t('globals.landed')" :value="toDate(entity.landed)" />
-                <VnLv :label="t('globals.packages')" :value="entity.packages" />
-                <VnLv :value="entity.address.phone">
-                    <template #label>
-                        {{ t('ticket.summary.consigneePhone') }}
-                        <VnLinkPhone :phone-number="entity.address.phone" />
-                    </template>
-                </VnLv>
-                <VnLv :value="entity.address.mobile">
-                    <template #label>
-                        {{ t('ticket.summary.consigneeMobile') }}
-                        <VnLinkPhone :phone-number="entity.address.mobile" />
-                    </template>
-                </VnLv>
-                <VnLv :value="entity.client.phone">
-                    <template #label>
-                        {{ t('ticket.summary.clientPhone') }}
-                        <VnLinkPhone :phone-number="entity.client.phone" />
-                    </template>
-                </VnLv>
-                <VnLv :value="entity.client.mobile">
-                    <template #label>
-                        {{ t('ticket.summary.clientMobile') }}
-                        <VnLinkPhone :phone-number="entity.client.mobile" />
-                    </template>
-                </VnLv>
-                <VnLv
-                    :label="t('ticket.summary.consignee')"
-                    :value="`${entity.address?.nickname} #${entity.address?.id}`"
-                />
-                <VnLv
-                    :label="t('ticket.summary.consigneeStreet')"
-                    :value="formattedAddress"
-                />
+                            <template #value>
+                                <a
+                                    :href="`${grafanaUrl}/d/d552ab74-85b4-4e7f-a279-fab7cd9c6124/control-de-expediciones?orgId=1&var-collectionFk=${entity.ticketCollections[0]?.collectionFk}`"
+                                    target="_blank"
+                                    class="grafana"
+                                >
+                                    {{ entity.ticketCollections[0]?.collectionFk }}
+                                </a>
+                            </template>
+                        </VnLv>
+                        <VnLv :label="t('ticket.summary.route')">
+                            <template #value>
+                                <span class="link">
+                                    {{ entity.routeFk }}
+                                    <RouteDescriptorProxy :id="entity.routeFk" />
+                                </span>
+                            </template>
+                        </VnLv>
+                        <VnLv :label="t('ticket.summary.invoice')">
+                            <template #value>
+                                <span :class="{ link: entity.refFk }">
+                                    {{ dashIfEmpty(entity.refFk) }}
+                                    <InvoiceOutDescriptorProxy
+                                        :id="entity.invoiceOut.id"
+                                        v-if="entity.refFk"
+                                    />
+                                </span>
+                            </template>
+                        </VnLv>
+                        <VnLv
+                            :label="t('globals.weight')"
+                            :value="dashIfEmpty(entity.weight)"
+                        />
+                    </div>
+                    <div class="vn-card-content">
+                        <VnLv
+                            :label="t('ticket.summary.shipped')"
+                            :value="toDate(entity.shipped)"
+                        />
+                        <VnLv
+                            :label="t('globals.landed')"
+                            :value="toDate(entity.landed)"
+                        />
+                        <VnLv :label="t('globals.packages')" :value="entity.packages" />
+                        <VnLv :value="entity.address.phone">
+                            <template #label>
+                                {{ t('ticket.summary.consigneePhone') }}
+                                <VnLinkPhone :phone-number="entity.address.phone" />
+                            </template>
+                        </VnLv>
+                        <VnLv :value="entity.address.mobile">
+                            <template #label>
+                                {{ t('ticket.summary.consigneeMobile') }}
+                                <VnLinkPhone :phone-number="entity.address.mobile" />
+                            </template>
+                        </VnLv>
+                        <VnLv :value="entity.client.phone">
+                            <template #label>
+                                {{ t('ticket.summary.clientPhone') }}
+                                <VnLinkPhone :phone-number="entity.client.phone" />
+                            </template>
+                        </VnLv>
+                        <VnLv :value="entity.client.mobile">
+                            <template #label>
+                                {{ t('ticket.summary.clientMobile') }}
+                                <VnLinkPhone :phone-number="entity.client.mobile" />
+                            </template>
+                        </VnLv>
+                        <VnLv
+                            :label="t('ticket.summary.consignee')"
+                            :value="`${entity.address?.nickname} #${entity.address?.id}`"
+                        />
+                        <VnLv
+                            :label="t('ticket.summary.consigneeStreet')"
+                            :value="formattedAddress"
+                        />
+                    </div>
+                </div>
             </QCard>
             <QCard class="vn-one" v-if="entity.notes.length">
                 <VnTitle
diff --git a/src/pages/Travel/Card/TravelSummary.vue b/src/pages/Travel/Card/TravelSummary.vue
index 9f9552611..68af36474 100644
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@@ -275,72 +275,68 @@ const getLink = (param) => `#/travel/${entityId.value}/${param}`;
             <TravelDescriptorMenuItems :travel="entity" />
         </template>
         <template #body>
-            <QCard class="vn-one">
-                <QCardSection class="q-pa-none">
-                    <VnTitle
-                        :url="getLink('basic-data')"
-                        :text="t('globals.pageTitles.basicData')"
-                    />
-                </QCardSection>
-                <VnLv :label="t('globals.shipped')" :value="toDate(travel.shipped)" />
-                <VnLv
-                    :label="t('globals.warehouseOut')"
-                    :value="travel.warehouseOut?.name"
-                />
-                <VnRow>
-                    <QCheckbox
-                        :label="t('travel.basicData.isRaid')"
-                        v-model="travel.isRaid"
-                        :disable="true"
-                    />
-                </VnRow>
-                <VnRow>
-                    <QCheckbox
-                        :label="t('travel.summary.delivered')"
-                        v-model="travel.isDelivered"
-                        :disable="true"
-                    />
-                </VnRow>
-            </QCard>
-            <QCard class="vn-one">
-                <QCardSection class="q-pa-none">
-                    <VnTitle
-                        :url="getLink('basic-data')"
-                        :text="t('globals.pageTitles.basicData')"
-                    />
-                </QCardSection>
-                <VnLv :label="t('globals.landed')" :value="toDate(travel.landed)" />
-                <VnLv
-                    :label="t('globals.warehouseIn')"
-                    :value="travel.warehouseIn?.name"
-                />
-                <VnLv
-                    :label="t('travel.basicData.daysInForward')"
-                    :value="travel?.daysInForward"
-                />
-                <QCheckbox
-                    :label="t('travel.summary.received')"
-                    v-model="travel.isReceived"
-                    :disable="true"
-                />
-            </QCard>
-            <QCard class="vn-one">
-                <QCardSection class="q-pa-none">
-                    <VnTitle
-                        :url="getLink('basic-data')"
-                        :text="t('globals.pageTitles.basicData')"
-                    />
-                </QCardSection>
-                <VnLv :label="t('globals.agency')" :value="travel.agency?.name" />
-                <VnLv :label="t('globals.reference')" :value="travel.ref" />
-                <VnLv label="m³" :value="travel.m3" />
-                <VnLv :label="t('globals.totalEntries')" :value="travel.totalEntries" />
-                <VnLv
-                    :label="t('travel.summary.availabled')"
-                    :value="
-                        dashIfEmpty(toDateTimeFormat(travel.availabled))
-                    "
+            <QCard class="full-width">
+                <VnTitle
+                    :url="getLink('basic-data')"
+                    :text="t('globals.pageTitles.basicData')"
                 />
+                <div class="vn-card-group">
+                    <div class="vn-card-content">
+                        <VnLv
+                            :label="t('globals.shipped')"
+                            :value="toDate(travel.shipped)"
+                        />
+                        <VnLv
+                            :label="t('globals.warehouseOut')"
+                            :value="travel.warehouseOut?.name"
+                        />
+                        <QCheckbox
+                            :label="t('travel.basicData.isRaid')"
+                            v-model="travel.isRaid"
+                            :disable="true"
+                            size="sm"
+                        />
+                        <QCheckbox
+                            :label="t('travel.summary.delivered')"
+                            v-model="travel.isDelivered"
+                            :disable="true"
+                            size="sm"
+                        />
+                    </div>
+                    <div class="vn-card-content">
+                        <VnLv
+                            :label="t('globals.landed')"
+                            :value="toDate(travel.landed)"
+                        />
+                        <VnLv
+                            :label="t('globals.warehouseIn')"
+                            :value="travel.warehouseIn?.name"
+                        />
+                        <VnLv
+                            :label="t('travel.basicData.daysInForward')"
+                            :value="travel?.daysInForward"
+                        />
+                        <QCheckbox
+                            :label="t('travel.summary.received')"
+                            v-model="travel.isReceived"
+                            :disable="true"
+                            size="sm"
+                        />
+                    </div>
+                    <div class="vn-card-content">
+                        <VnLv :label="t('globals.agency')" :value="travel.agency?.name" />
+                        <VnLv :label="t('globals.reference')" :value="travel.ref" />
+                        <VnLv label="m³" :value="travel.m3" />
+                        <VnLv
+                            :label="t('globals.totalEntries')"
+                            :value="travel.totalEntries"
+                        />
+                        <VnLv
+                            :label="t('travel.summary.availabled')"
+                            :value="dashIfEmpty(toDateTimeFormat(travel.availabled))"
+                        />
+                    </div>
+                </div>
             </QCard>
             <QCard class="full-width">
                 <VnTitle :text="t('travel.summary.entries')" />
diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
index 78c5dfd82..1f7584389 100644
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -47,77 +47,88 @@ onBeforeMount(async () => {
             <WorkerDescriptorMenu :worker="entity" :is-excluded="workerExcluded" />
         </template>
         <template #body="{ entity: worker }">
-            <QCard class="vn-one">
+            <QCard class="vn-two">
                 <VnTitle :url="basicDataUrl" :text="t('globals.summary.basicData')" />
-                <VnLv :label="t('globals.name')" :value="worker.user?.nickname" />
-                <VnLv :label="t('worker.list.department')">
-                    <template #value>
-                        <span class="link" v-text="worker.department?.department?.name" />
-                        <DepartmentDescriptorProxy
-                            :id="worker.department?.department?.id"
+                <div class="vn-card-group">
+                    <div class="vn-card-content">
+                        <VnLv :label="t('globals.name')" :value="worker.user?.nickname" />
+                        <VnLv :label="t('worker.list.department')">
+                            <template #value>
+                                <span
+                                    class="link"
+                                    v-text="worker.department?.department?.name"
+                                />
+                                <DepartmentDescriptorProxy
+                                    :id="worker.department?.department?.id"
+                                />
+                            </template>
+                        </VnLv>
+                        <VnLv :label="t('worker.summary.boss')" link>
+                            <template #value>
+                                <VnUserLink
+                                    v-if="worker.boss"
+                                    :name="dashIfEmpty(worker.boss?.name)"
+                                    :worker-id="worker.bossFk"
+                                />
+                            </template>
+                        </VnLv>
+                        <VnLv :value="worker.mobileExtension">
+                            <template #label>
+                                {{ t('worker.summary.phoneExtension') }}
+                                <VnLinkPhone :phone-number="worker.mobileExtension" />
+                            </template>
+                        </VnLv>
+                        <VnLv :value="worker.phone">
+                            <template #label>
+                                {{ t('worker.summary.entPhone') }}
+                                <VnLinkPhone :phone-number="worker.phone" />
+                            </template>
+                        </VnLv>
+                        <VnLv :value="advancedSummary?.client?.phone">
+                            <template #label>
+                                {{ t('worker.summary.personalPhone') }}
+                                <VnLinkPhone
+                                    :phone-number="advancedSummary?.client?.phone"
+                                />
+                            </template>
+                        </VnLv>
+                    </div>
+                    <div class="vn-card-content">
+                        <VnLv
+                            :label="t('worker.summary.fiDueDate')"
+                            :value="toDate(advancedSummary.fiDueDate)"
                         />
-                    </template>
-                </VnLv>
-                <VnLv :label="t('worker.summary.boss')" link>
-                    <template #value>
-                        <VnUserLink
-                            v-if="worker.boss"
-                            :name="dashIfEmpty(worker.boss?.name)"
-                            :worker-id="worker.bossFk"
+                        <VnLv :label="t('worker.summary.sex')" :value="worker.sex" />
+                        <VnLv
+                            :label="t('worker.summary.seniority')"
+                            :value="toDate(advancedSummary.seniority)"
                         />
-                    </template>
-                </VnLv>
-                <VnLv :value="worker.mobileExtension">
-                    <template #label>
-                        {{ t('worker.summary.phoneExtension') }}
-                        <VnLinkPhone :phone-number="worker.mobileExtension" />
-                    </template>
-                </VnLv>
-                <VnLv :value="worker.phone">
-                    <template #label>
-                        {{ t('worker.summary.entPhone') }}
-                        <VnLinkPhone :phone-number="worker.phone" />
-                    </template>
-                </VnLv>
-                <VnLv :value="advancedSummary?.client?.phone">
-                    <template #label>
-                        {{ t('worker.summary.personalPhone') }}
-                        <VnLinkPhone :phone-number="advancedSummary?.client?.phone" />
-                    </template>
-                </VnLv>
-            </QCard>
-            <QCard class="vn-one" v-if="advancedSummary">
-                <VnTitle :url="basicDataUrl" :text="t('globals.summary.basicData')" />
-                <VnLv
-                    :label="t('worker.summary.fiDueDate')"
-                    :value="toDate(advancedSummary.fiDueDate)"
-                />
-                <VnLv :label="t('worker.summary.sex')" :value="worker.sex" />
-                <VnLv
-                    :label="t('worker.summary.seniority')"
-                    :value="toDate(advancedSummary.seniority)"
-                />
-                <VnLv :label="t('worker.summary.fi')" :value="advancedSummary.fi" />
-                <VnLv
-                    :label="t('worker.summary.birth')"
-                    :value="toDate(advancedSummary.birth)"
-                />
-                <VnLv
-                    :label="t('worker.summary.isFreelance')"
-                    :value="advancedSummary.isFreelance"
-                />
-                <VnLv
-                    :label="t('worker.summary.isSsDiscounted')"
-                    :value="advancedSummary.isSsDiscounted"
-                />
-                <VnLv
-                    :label="t('worker.summary.hasMachineryAuthorized')"
-                    :value="advancedSummary.hasMachineryAuthorized"
-                />
-                <VnLv
-                    :label="t('worker.summary.isDisable')"
-                    :value="advancedSummary.isDisable"
-                />
+                        <VnLv
+                            :label="t('worker.summary.fi')"
+                            :value="advancedSummary.fi"
+                        />
+                        <VnLv
+                            :label="t('worker.summary.birth')"
+                            :value="toDate(advancedSummary.birth)"
+                        />
+                        <VnLv
+                            :label="t('worker.summary.isFreelance')"
+                            :value="advancedSummary.isFreelance"
+                        />
+                        <VnLv
+                            :label="t('worker.summary.isSsDiscounted')"
+                            :value="advancedSummary.isSsDiscounted"
+                        />
+                        <VnLv
+                            :label="t('worker.summary.hasMachineryAuthorized')"
+                            :value="advancedSummary.hasMachineryAuthorized"
+                        />
+                        <VnLv
+                            :label="t('worker.summary.isDisable')"
+                            :value="advancedSummary.isDisable"
+                        />
+                    </div>
+                </div>
             </QCard>
             <QCard class="vn-one">
                 <VnTitle :text="t('worker.summary.userData')" />
diff --git a/src/pages/Zone/Card/ZoneSummary.vue b/src/pages/Zone/Card/ZoneSummary.vue
index 5b29b495b..04ba14ce4 100644
--- a/src/pages/Zone/Card/ZoneSummary.vue
+++ b/src/pages/Zone/Card/ZoneSummary.vue
@@ -74,21 +74,30 @@ onMounted(async () => {
         <template #body="{ entity: zone }">
             <QCard class="vn-one">
                 <VnTitle :url="zoneUrl + `basic-data`" :text="t('summary.basicData')" />
-                <VnLv :label="t('list.agency')" :value="zone.agencyMode?.name" />
-                <VnLv :label="t('list.price')" :value="toCurrency(zone.price)" />
-                <VnLv :label="t('zone.bonus')" :value="toCurrency(zone.bonus)" />
+                <div class="vn-card-group">
+                    <div class="vn-card-content">
+                        <VnLv :label="t('list.agency')" :value="zone.agencyMode?.name" />
+                        <VnLv :label="t('list.price')" :value="toCurrency(zone.price)" />
+                        <VnLv :label="t('zone.bonus')" :value="toCurrency(zone.bonus)" />
+                    </div>
+                    <div class="vn-card-content">
+                        <VnLv
+                            :label="t('summary.closeHour')"
+                            :value="toTimeFormat(zone.hour)"
+                        />
+                        <VnLv
+                            :label="t('zone.travelingDays')"
+                            :value="zone.travelingDays"
+                        />
+                        <QCheckbox
+                            :label="t('zone.volumetric')"
+                            v-model="zone.isVolumetric"
+                            :disable="true"
+                        />
+                    </div>
+                </div>
             </QCard>
             <QCard class="vn-one">
-                <VnTitle :url="zoneUrl + `basic-data`" :text="t('summary.basicData')" />
-                <VnLv :label="t('summary.closeHour')" :value="toTimeFormat(zone.hour)" />
-                <VnLv :label="t('zone.travelingDays')" :value="zone.travelingDays" />
-                <QCheckbox
-                    :label="t('zone.volumetric')"
-                    v-model="zone.isVolumetric"
-                    :disable="true"
-                />
-            </QCard>
-            <QCard class="full-width">
                 <VnTitle :url="zoneUrl + `warehouses`" :text="t('list.warehouse')" />
                 <QTable
                     :columns="columns"

From a07afe3a94bc7e1911576a1fc6f2ce2bf7cdc4c6 Mon Sep 17 00:00:00 2001
From: benjaminedc <benjaminedc@verdnatura.es>
Date: Fri, 28 Feb 2025 13:44:14 +0100
Subject: [PATCH 02/12] refactor: refs #8683 enhance sorting logic in VnSelect
 component

---
 src/components/common/VnSelect.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index d111780bd..eb387fe61 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -152,6 +152,10 @@ const value = computed({
     },
 });
 
+const computedSortBy = computed(() => {
+    return $props.sortBy || $props.optionLabel;
+});
+
 watch(options, (newValue) => {
     setOptions(newValue);
 });
@@ -186,7 +190,7 @@ function findKeyInOptions() {
 }
 
 function setOptions(data) {
-    data = dataByOrder(data, $props.sortBy);
+    data = dataByOrder(data, computedSortBy.value);
     myOptions.value = JSON.parse(JSON.stringify(data));
     myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
     emit('update:options', data);

From d893505cd6bd660813ac867db0db61f9ac9f79a1 Mon Sep 17 00:00:00 2001
From: benjaminedc <benjaminedc@verdnatura.es>
Date: Fri, 7 Mar 2025 09:14:18 +0100
Subject: [PATCH 03/12] fix: refs #8683 update fetchFilter to use computed
 sortBy value

---
 src/components/common/VnSelect.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 37bb55ca4..9405baa4f 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -220,7 +220,8 @@ function filter(val, options) {
 async function fetchFilter(val) {
     if (!$props.url) return;
 
-    const { fields, include, sortBy, limit } = $props;
+    const { fields, include, limit } = $props;
+    const sortBy = computedSortBy.value;
     const key =
         optionFilterValue.value ??
         (new RegExp(/\d/g).test(val)

From 68af7a50fa7410cedb20b67b14e4faa21b7b5498 Mon Sep 17 00:00:00 2001
From: benjaminedc <benjaminedc@verdnatura.es>
Date: Fri, 7 Mar 2025 11:59:22 +0100
Subject: [PATCH 04/12] fix: refs #8683 update computedSortBy to append ' ASC'
 to optionLabel

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

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 9405baa4f..296a212e7 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -153,7 +153,7 @@ const value = computed({
 });
 
 const computedSortBy = computed(() => {
-    return $props.sortBy || $props.optionLabel;
+    return $props.sortBy || $props.optionLabel + ' ASC';
 });
 
 watch(options, (newValue) => {

From 37f1882530043f0ddcdb4a73ad3e9facf2ef5c03 Mon Sep 17 00:00:00 2001
From: benjaminedc <benjaminedc@verdnatura.es>
Date: Mon, 10 Mar 2025 13:55:36 +0100
Subject: [PATCH 05/12] test(UserPanel): refs #8683 update initial values and
 options in user selection

---
 test/cypress/integration/vnComponent/UserPanel.spec.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/test/cypress/integration/vnComponent/UserPanel.spec.js b/test/cypress/integration/vnComponent/UserPanel.spec.js
index 25724e873..216797dfa 100644
--- a/test/cypress/integration/vnComponent/UserPanel.spec.js
+++ b/test/cypress/integration/vnComponent/UserPanel.spec.js
@@ -15,7 +15,7 @@ describe('UserPanel', () => {
         cy.openUserPanel();
 
         // Compruebo la opcion inicial
-        cy.get(userWarehouse).should('have.value', 'VNL').click();
+        cy.get(userWarehouse).should('have.value', 'ORN').click();
 
         // Actualizo la opción
         cy.getOption(3);
@@ -36,14 +36,14 @@ describe('UserPanel', () => {
         cy.openUserPanel();
 
         // Compruebo la opcion inicial
-        cy.get(userCompany).should('have.value', 'Warehouse One').click();
+        cy.get(userCompany).should('have.value', 'Inventory').click();
 
         //Actualizo la opción
-        cy.getOption(2);
+        cy.getOption(3);
 
         //Compruebo la notificación
         cy.get('.q-notification').should('be.visible');
-        cy.get(userCompany).should('have.value', 'Warehouse Two');
+        cy.get(userCompany).should('have.value', 'TestingWarehouse');
 
         //Restauro el valor
         cy.get(userCompany).click();

From 6a48ff93269fee8d7da4f557cf2399514035aea3 Mon Sep 17 00:00:00 2001
From: benjaminedc <benjaminedc@verdnatura.es>
Date: Mon, 10 Mar 2025 14:14:22 +0100
Subject: [PATCH 06/12] test(UserPanel): refs #8683 update initial value in
 user selection

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

diff --git a/test/cypress/integration/vnComponent/UserPanel.spec.js b/test/cypress/integration/vnComponent/UserPanel.spec.js
index 216797dfa..ec6774f58 100644
--- a/test/cypress/integration/vnComponent/UserPanel.spec.js
+++ b/test/cypress/integration/vnComponent/UserPanel.spec.js
@@ -36,7 +36,7 @@ describe('UserPanel', () => {
         cy.openUserPanel();
 
         // Compruebo la opcion inicial
-        cy.get(userCompany).should('have.value', 'Inventory').click();
+        cy.get(userCompany).should('have.value', 'Algemesi').click();
 
         //Actualizo la opción
         cy.getOption(3);

From 781c8050a88d7a757db7492e7419d1739e98baa6 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Tue, 11 Mar 2025 11:56:50 +0100
Subject: [PATCH 07/12] refactor: refs #8326 modified sumaryDialog width

---
 src/pages/InvoiceIn/InvoiceInList.vue   |   2 +-
 src/pages/Order/Card/OrderSummary.vue   | 338 ++++++++++++------------
 src/pages/Order/OrderList.vue           |   2 +-
 src/pages/Ticket/TicketList.vue         |   2 +-
 src/pages/Travel/Card/TravelSummary.vue |  18 +-
 src/pages/Travel/TravelList.vue         |   2 +-
 src/pages/Worker/WorkerList.vue         |   2 +-
 7 files changed, 179 insertions(+), 187 deletions(-)

diff --git a/src/pages/InvoiceIn/InvoiceInList.vue b/src/pages/InvoiceIn/InvoiceInList.vue
index 0960d0d6c..9b62fdf6a 100644
--- a/src/pages/InvoiceIn/InvoiceInList.vue
+++ b/src/pages/InvoiceIn/InvoiceInList.vue
@@ -119,7 +119,7 @@ const cols = computed(() => [
                 icon: 'preview',
                 type: 'submit',
                 isPrimary: true,
-                action: (row) => viewSummary(row.id, InvoiceInSummary),
+                action: (row) => viewSummary(row.id, InvoiceInSummary, 'lg-width'),
             },
             {
                 title: t('globals.download'),
diff --git a/src/pages/Order/Card/OrderSummary.vue b/src/pages/Order/Card/OrderSummary.vue
index 55c309cf5..10a458bfb 100644
--- a/src/pages/Order/Card/OrderSummary.vue
+++ b/src/pages/Order/Card/OrderSummary.vue
@@ -71,180 +71,174 @@ async function handleConfirm() {
 </script>
 
 <template>
-    <div class="q-pa-md">
-        <CardSummary
-            ref="summary"
-            :url="`Orders/${entityId}/summary`"
-            data-key="OrderSummary"
-        >
-            <template #header="{ entity }">
-                {{ t('order.summary.basket') }} #{{ entity?.id }} -
-                {{ entity?.client?.name }} ({{ entity?.clientFk }})
-            </template>
-            <template #header-right>
-                <QBtn
-                    flat
-                    text-color="white"
-                    :disabled="isConfirmed"
-                    :label="t('order.summary.confirm')"
-                    @click="handleConfirm()"
-                >
-                    <QTooltip>{{ t('order.summary.confirmLines') }}</QTooltip>
-                </QBtn>
-            </template>
-            <template #menu="{ entity }">
-                <OrderDescriptorMenu :order="entity" />
-            </template>
-            <template #body="{ entity }">
-                <QCard class="vn-two">
-                    <VnTitle
-                        :url="`#/order/${entity.id}/basic-data`"
-                        :text="t('globals.pageTitles.basicData')"
-                    />
-                    <div class="vn-card-group">
-                        <div class="vn-card-content">
-                            <VnLv label="ID" :value="entity.id" />
-                            <VnLv :label="t('globals.alias')" dash>
-                                <template #value>
-                                    <span class="link">
-                                        {{ dashIfEmpty(entity?.address?.nickname) }}
-                                        <CustomerDescriptorProxy :id="entity?.clientFk" />
-                                    </span>
-                                </template>
-                            </VnLv>
-                            <VnLv
-                                :label="t('globals.company')"
-                                :value="entity?.address?.companyFk"
-                            />
-                            <VnLv
-                                :label="t('globals.confirmed')"
-                                :value="Boolean(entity?.isConfirmed)"
-                            />
-                        </div>
-                        <div class="vn-card-content">
-                            <VnLv
-                                :label="t('order.summary.created')"
-                                :value="toDateHourMinSec(entity?.created)"
-                            />
-                            <VnLv
-                                :label="t('globals.confirmed')"
-                                :value="toDateHourMinSec(entity?.confirmed)"
-                            />
-                            <VnLv
-                                :label="t('globals.landed')"
-                                :value="toDateHourMinSec(entity?.landed)"
-                            />
-                            <VnLv :label="t('globals.phone')">
-                                <template #value>
-                                    {{ dashIfEmpty(entity?.address?.phone) }}
-                                    <a
-                                        v-if="entity?.address?.phone"
-                                        :href="`tel:${entity?.address?.phone}`"
-                                        class="text-primary"
-                                    >
-                                        <QIcon name="phone" />
-                                    </a>
-                                </template>
-                            </VnLv>
-                            <VnLv
-                                :label="t('order.summary.createdFrom')"
-                                :value="entity?.sourceApp"
-                            />
-                            <VnLv
-                                :label="t('order.summary.address')"
-                                :value="`${entity?.address?.street} - ${entity?.address?.city} (${entity?.address?.province?.name})`"
-                                class="order-summary-address"
-                            />
-                        </div>
+    <CardSummary
+        ref="summary"
+        :url="`Orders/${entityId}/summary`"
+        data-key="OrderSummary"
+    >
+        <template #header="{ entity }">
+            {{ t('order.summary.basket') }} #{{ entity?.id }} -
+            {{ entity?.client?.name }} ({{ entity?.clientFk }})
+        </template>
+        <template #header-right>
+            <QBtn
+                flat
+                text-color="white"
+                :disabled="isConfirmed"
+                :label="t('order.summary.confirm')"
+                @click="handleConfirm()"
+            >
+                <QTooltip>{{ t('order.summary.confirmLines') }}</QTooltip>
+            </QBtn>
+        </template>
+        <template #menu="{ entity }">
+            <OrderDescriptorMenu :order="entity" />
+        </template>
+        <template #body="{ entity }">
+            <QCard class="vn-two">
+                <VnTitle
+                    :url="`#/order/${entity.id}/basic-data`"
+                    :text="t('globals.pageTitles.basicData')"
+                />
+                <div class="vn-card-group">
+                    <div class="vn-card-content">
+                        <VnLv label="ID" :value="entity.id" />
+                        <VnLv :label="t('globals.alias')" dash>
+                            <template #value>
+                                <span class="link">
+                                    {{ dashIfEmpty(entity?.address?.nickname) }}
+                                    <CustomerDescriptorProxy :id="entity?.clientFk" />
+                                </span>
+                            </template>
+                        </VnLv>
+                        <VnLv
+                            :label="t('globals.company')"
+                            :value="entity?.address?.companyFk"
+                        />
+                        <VnLv
+                            :label="t('globals.confirmed')"
+                            :value="Boolean(entity?.isConfirmed)"
+                        />
                     </div>
-                </QCard>
-                <QCard class="vn-one">
-                    <VnTitle :text="t('globals.pageTitles.notes')" />
-                    <p v-if="entity?.note" class="no-margin">
-                        {{ entity?.note }}
-                    </p>
-                </QCard>
-                <QCard class="vn-one">
-                    <VnTitle :text="t('order.summary.total')" />
-                    <VnLv>
-                        <template #label>
-                            <span class="text-h6">{{ t('globals.subtotal') }}</span>
-                        </template>
-                        <template #value>
-                            <span class="text-h6">{{
-                                toCurrency(entity?.subTotal)
-                            }}</span>
-                        </template>
-                    </VnLv>
-                    <VnLv>
-                        <template #label>
-                            <span class="text-h6">{{ t('globals.vat') }}</span>
-                        </template>
-                        <template #value>
-                            <span class="text-h6">{{ toCurrency(entity?.VAT) }}</span>
-                        </template>
-                    </VnLv>
-                    <VnLv>
-                        <template #label>
-                            <span class="text-h6">{{ t('order.summary.total') }}</span>
-                        </template>
-                        <template #value>
-                            <span class="text-h6">{{ toCurrency(entity?.total) }}</span>
-                        </template>
-                    </VnLv>
-                </QCard>
-                <QCard>
-                    <VnTitle :text="t('globals.details')" />
-                    <QTable :columns="detailsColumns" :rows="entity?.rows" flat>
-                        <template #header="props">
-                            <QTr :props="props">
-                                <QTh auto-width>{{ t('globals.item') }}</QTh>
-                                <QTh>{{ t('globals.description') }}</QTh>
-                                <QTh auto-width>{{ t('globals.quantity') }}</QTh>
-                                <QTh auto-width>{{ t('globals.price') }}</QTh>
-                                <QTh auto-width>{{ t('order.summary.amount') }}</QTh>
-                            </QTr>
-                        </template>
-                        <template #body="props">
-                            <QTr :props="props">
-                                <QTd key="item" :props="props" class="item">
-                                    <span class="link">
-                                        {{ props.row.item?.id }}
-                                        <ItemDescriptorProxy :id="props.row.item?.id" />
-                                    </span>
-                                </QTd>
-                                <QTd key="description" :props="props">
-                                    <div class="description">
-                                        <div class="name">
-                                            {{ props.row.item.name }}
-                                            <span
-                                                v-if="props.row.item.subName"
-                                                class="subName"
-                                            >
-                                                {{ props.row.item.subName }}
-                                            </span>
-                                        </div>
+                    <div class="vn-card-content">
+                        <VnLv
+                            :label="t('order.summary.created')"
+                            :value="toDateHourMinSec(entity?.created)"
+                        />
+                        <VnLv
+                            :label="t('globals.confirmed')"
+                            :value="toDateHourMinSec(entity?.confirmed)"
+                        />
+                        <VnLv
+                            :label="t('globals.landed')"
+                            :value="toDateHourMinSec(entity?.landed)"
+                        />
+                        <VnLv :label="t('globals.phone')">
+                            <template #value>
+                                {{ dashIfEmpty(entity?.address?.phone) }}
+                                <a
+                                    v-if="entity?.address?.phone"
+                                    :href="`tel:${entity?.address?.phone}`"
+                                    class="text-primary"
+                                >
+                                    <QIcon name="phone" />
+                                </a>
+                            </template>
+                        </VnLv>
+                        <VnLv
+                            :label="t('order.summary.createdFrom')"
+                            :value="entity?.sourceApp"
+                        />
+                        <VnLv
+                            :label="t('order.summary.address')"
+                            :value="`${entity?.address?.street} - ${entity?.address?.city} (${entity?.address?.province?.name})`"
+                            class="order-summary-address"
+                        />
+                    </div>
+                </div>
+            </QCard>
+            <QCard class="vn-one">
+                <VnTitle :text="t('globals.pageTitles.notes')" />
+                <p v-if="entity?.note" class="no-margin">
+                    {{ entity?.note }}
+                </p>
+            </QCard>
+            <QCard class="vn-one">
+                <VnTitle :text="t('order.summary.total')" />
+                <VnLv>
+                    <template #label>
+                        <span class="text-h6">{{ t('globals.subtotal') }}</span>
+                    </template>
+                    <template #value>
+                        <span class="text-h6">{{ toCurrency(entity?.subTotal) }}</span>
+                    </template>
+                </VnLv>
+                <VnLv>
+                    <template #label>
+                        <span class="text-h6">{{ t('globals.vat') }}</span>
+                    </template>
+                    <template #value>
+                        <span class="text-h6">{{ toCurrency(entity?.VAT) }}</span>
+                    </template>
+                </VnLv>
+                <VnLv>
+                    <template #label>
+                        <span class="text-h6">{{ t('order.summary.total') }}</span>
+                    </template>
+                    <template #value>
+                        <span class="text-h6">{{ toCurrency(entity?.total) }}</span>
+                    </template>
+                </VnLv>
+            </QCard>
+            <QCard>
+                <VnTitle :text="t('globals.details')" />
+                <QTable :columns="detailsColumns" :rows="entity?.rows" flat>
+                    <template #header="props">
+                        <QTr :props="props">
+                            <QTh auto-width>{{ t('globals.item') }}</QTh>
+                            <QTh>{{ t('globals.description') }}</QTh>
+                            <QTh auto-width>{{ t('globals.quantity') }}</QTh>
+                            <QTh auto-width>{{ t('globals.price') }}</QTh>
+                            <QTh auto-width>{{ t('order.summary.amount') }}</QTh>
+                        </QTr>
+                    </template>
+                    <template #body="props">
+                        <QTr :props="props">
+                            <QTd key="item" :props="props" class="item">
+                                <span class="link">
+                                    {{ props.row.item?.id }}
+                                    <ItemDescriptorProxy :id="props.row.item?.id" />
+                                </span>
+                            </QTd>
+                            <QTd key="description" :props="props">
+                                <div class="description">
+                                    <div class="name">
+                                        {{ props.row.item.name }}
+                                        <span
+                                            v-if="props.row.item.subName"
+                                            class="subName"
+                                        >
+                                            {{ props.row.item.subName }}
+                                        </span>
                                     </div>
-                                    <FetchedTags :item="props.row.item" :columns="3" />
-                                </QTd>
-                                <QTd key="quantity" :props="props">
-                                    {{ props.row.quantity }}
-                                </QTd>
-                                <QTd key="price" :props="props">
-                                    {{ toCurrency(props.row.price) }}
-                                </QTd>
-                                <QTd key="amount" :props="props">
-                                    {{
-                                        toCurrency(props.row?.quantity * props.row?.price)
-                                    }}
-                                </QTd>
-                            </QTr>
-                        </template>
-                    </QTable>
-                </QCard>
-            </template>
-        </CardSummary>
-    </div>
+                                </div>
+                                <FetchedTags :item="props.row.item" :columns="3" />
+                            </QTd>
+                            <QTd key="quantity" :props="props">
+                                {{ props.row.quantity }}
+                            </QTd>
+                            <QTd key="price" :props="props">
+                                {{ toCurrency(props.row.price) }}
+                            </QTd>
+                            <QTd key="amount" :props="props">
+                                {{ toCurrency(props.row?.quantity * props.row?.price) }}
+                            </QTd>
+                        </QTr>
+                    </template>
+                </QTable>
+            </QCard>
+        </template>
+    </CardSummary>
 </template>
 <style lang="scss">
 .cardSummary .summaryBody .vn-label-value.order-summary-address {
diff --git a/src/pages/Order/OrderList.vue b/src/pages/Order/OrderList.vue
index 2a1997f21..42f90c33a 100644
--- a/src/pages/Order/OrderList.vue
+++ b/src/pages/Order/OrderList.vue
@@ -147,7 +147,7 @@ const columns = computed(() => [
             {
                 title: t('globals.pageTitles.summary'),
                 icon: 'preview',
-                action: (row) => viewSummary(row.id, OrderSummary),
+                action: (row) => viewSummary(row.id, OrderSummary, 'lg-width'),
                 isPrimary: true,
             },
         ],
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index dfaabc848..fa4e3c89f 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -253,7 +253,7 @@ const columns = computed(() => [
                             name: 'TicketCard',
                         }).href;
                         window.open(url, '_blank');
-                    } else viewSummary(row.id, TicketSummary);
+                    } else viewSummary(row.id, TicketSummary, 'lg-width');
                 },
             },
         ],
diff --git a/src/pages/Travel/Card/TravelSummary.vue b/src/pages/Travel/Card/TravelSummary.vue
index 68af36474..af6db6304 100644
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -7,8 +7,6 @@ import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
-import FetchData from 'src/components/FetchData.vue';
-import VnRow from 'components/ui/VnRow.vue';
 import { toDate, toCurrency, toCelsius } from 'src/filters';
 import { toDateTimeFormat } from 'src/filters/date.js';
 import { dashIfEmpty } from 'src/filters';
@@ -252,16 +250,16 @@ async function setTravelData(travelData) {
 }
 
 const getLink = (param) => `#/travel/${entityId.value}/${param}`;
+
+onMounted(async () => {
+    const { data } = await axios.get('Warehouses', {
+        params: { fields: ['id', 'name'] },
+    });
+    warehouses.value = data;
+});
 </script>
 
 <template>
-    <FetchData
-        url="Warehouses"
-        :filter="{ fields: ['id', 'name'] }"
-        order="name"
-        @on-fetch="(data) => (warehouses = data)"
-        auto-load
-    />
     <CardSummary
         ref="summaryRef"
         :url="`Travels/${entityId}/getTravel`"
diff --git a/src/pages/Travel/TravelList.vue b/src/pages/Travel/TravelList.vue
index b227afcb2..32ddc639a 100644
--- a/src/pages/Travel/TravelList.vue
+++ b/src/pages/Travel/TravelList.vue
@@ -201,7 +201,7 @@ const columns = computed(() => [
             {
                 title: t('components.smartCard.viewSummary'),
                 icon: 'preview',
-                action: (row) => viewSummary(row.id, TravelSummary),
+                action: (row) => viewSummary(row.id, TravelSummary, 'lg-width'),
                 isPrimary: true,
             },
         ],
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index b76790075..cb722a139 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -105,7 +105,7 @@ const columns = computed(() => [
             {
                 title: t('components.smartCard.viewSummary'),
                 icon: 'preview',
-                action: (row) => viewSummary(row.id, WorkerSummary),
+                action: (row) => viewSummary(row.id, WorkerSummary, 'lg-width'),
                 isPrimary: true,
             },
         ],

From d82369a62cd726d2d9b54254fb48cada64e28c8a Mon Sep 17 00:00:00 2001
From: benjaminedc <benjaminedc@verdnatura.es>
Date: Tue, 11 Mar 2025 13:10:13 +0100
Subject: [PATCH 08/12] fix(UserPanel): refs #8683 update initial values for
 user warehouse and company selections

---
 test/cypress/integration/vnComponent/UserPanel.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/cypress/integration/vnComponent/UserPanel.spec.js b/test/cypress/integration/vnComponent/UserPanel.spec.js
index ec6774f58..8722fe37e 100644
--- a/test/cypress/integration/vnComponent/UserPanel.spec.js
+++ b/test/cypress/integration/vnComponent/UserPanel.spec.js
@@ -15,7 +15,7 @@ describe('UserPanel', () => {
         cy.openUserPanel();
 
         // Compruebo la opcion inicial
-        cy.get(userWarehouse).should('have.value', 'ORN').click();
+        cy.get(userWarehouse).should('have.value', 'VNL').click();
 
         // Actualizo la opción
         cy.getOption(3);
@@ -36,7 +36,7 @@ describe('UserPanel', () => {
         cy.openUserPanel();
 
         // Compruebo la opcion inicial
-        cy.get(userCompany).should('have.value', 'Algemesi').click();
+        cy.get(userCompany).should('have.value', 'Warehouse One').click();
 
         //Actualizo la opción
         cy.getOption(3);

From 13cf7c6031bd093cc5962b8507201b020bc7489f Mon Sep 17 00:00:00 2001
From: benjaminedc <benjaminedc@verdnatura.es>
Date: Tue, 11 Mar 2025 13:17:36 +0100
Subject: [PATCH 09/12] fix(VnLog): refs #8683 update validation content for
 entity filter test

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

diff --git a/test/cypress/integration/vnComponent/VnLog.spec.js b/test/cypress/integration/vnComponent/VnLog.spec.js
index 80b9d07df..782fb9fbe 100644
--- a/test/cypress/integration/vnComponent/VnLog.spec.js
+++ b/test/cypress/integration/vnComponent/VnLog.spec.js
@@ -20,6 +20,6 @@ describe('VnLog', () => {
     it('should filter by entity', () => {
         cy.selectOption('.q-drawer--right .q-item > .q-select', 'Claim');
         cy.get('.q-page').click();
-        cy.validateContent(chips[0], 'Claim');
+        cy.validateContent(chips[0], 'Beginning');
     });
 });

From 489fcda41057d4546ea3be5e06e1ddc5e5e09913 Mon Sep 17 00:00:00 2001
From: benjaminedc <benjaminedc@verdnatura.es>
Date: Thu, 20 Mar 2025 12:59:33 +0100
Subject: [PATCH 10/12] fix: refs #8683 update Cypress parallel test execution
 to run with a single instance

---
 Jenkinsfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Jenkinsfile b/Jenkinsfile
index 7f4144a54..05ef34791 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -126,7 +126,7 @@ pipeline {
                             sh "docker-compose ${env.COMPOSE_PARAMS} up -d"
 
                             image.inside("--network ${env.COMPOSE_PROJECT}_default -e CI -e TZ --init") {
-                                sh 'sh test/cypress/cypressParallel.sh 2'
+                                sh 'sh test/cypress/cypressParallel.sh 1'
                             }
                         }
                     }

From 767511cec080356dceeef617a423c39a2fdbab22 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 21 Mar 2025 09:13:34 +0100
Subject: [PATCH 11/12] fix: refs #8326 e2e

---
 .../integration/invoiceIn/invoiceInList.spec.js  |  6 +++---
 .../integration/ticket/ticketDescriptor.spec.js  |  4 ++--
 .../integration/worker/workerSummary.spec.js     | 16 +++++++---------
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/test/cypress/integration/invoiceIn/invoiceInList.spec.js b/test/cypress/integration/invoiceIn/invoiceInList.spec.js
index 44a61609e..6b5d28c70 100644
--- a/test/cypress/integration/invoiceIn/invoiceInList.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInList.spec.js
@@ -4,7 +4,7 @@ describe('InvoiceInList', () => {
     const firstRow = 'tbody.q-virtual-scroll__content tr:nth-child(1)';
     const firstId = `${firstRow} > td:nth-child(2) span`;
     const firstDetailBtn = `${firstRow} .q-btn:nth-child(1)`;
-    const summaryHeaders = '.summaryBody .header-link';
+    const summaryHeaders = (opt) => `.summaryBody > .${opt} > .q-pb-lg > .header-link`;
     const mockInvoiceRef = `createMockInvoice${Math.floor(Math.random() * 100)}`;
     const mock = {
         vnSupplierSelect: { val: 'farmer king', type: 'select' },
@@ -32,8 +32,8 @@ describe('InvoiceInList', () => {
 
     it('should open the details', () => {
         cy.get(firstDetailBtn).click();
-        cy.get(summaryHeaders).eq(1).contains('Basic data');
-        cy.get(summaryHeaders).eq(4).contains('Vat');
+        cy.get(summaryHeaders('max-width')).contains('Basic data');
+        cy.get(summaryHeaders('vat')).contains('Vat');
     });
 
     it('should create a new Invoice', () => {
diff --git a/test/cypress/integration/ticket/ticketDescriptor.spec.js b/test/cypress/integration/ticket/ticketDescriptor.spec.js
index 0ba2723a2..b5c95c463 100644
--- a/test/cypress/integration/ticket/ticketDescriptor.spec.js
+++ b/test/cypress/integration/ticket/ticketDescriptor.spec.js
@@ -3,10 +3,10 @@ describe('Ticket descriptor', () => {
     const listItem = '[role="menu"] .q-list .q-item';
     const toCloneOpt = 'To clone ticket';
     const setWeightOpt = 'Set weight';
-    const warehouseValue = ':nth-child(1) > :nth-child(6) > .value > span';
+    const warehouseValue = ':nth-child(1) > [data-cy="vnLvWarehouse"]';
     const summaryHeader = '.summaryHeader > div';
     const weight = 25;
-    const weightValue = '.summaryBody.row :nth-child(1) > :nth-child(9) > .value > span';
+    const weightValue = '[data-cy="vnLvWeight"]';
     beforeEach(() => {
         cy.login('developer');
         cy.viewport(1920, 1080);
diff --git a/test/cypress/integration/worker/workerSummary.spec.js b/test/cypress/integration/worker/workerSummary.spec.js
index c50b2c943..6071c4cdf 100644
--- a/test/cypress/integration/worker/workerSummary.spec.js
+++ b/test/cypress/integration/worker/workerSummary.spec.js
@@ -1,27 +1,25 @@
 describe('WorkerSummary', () => {
-    const departmentDescriptor = ':nth-child(1) > :nth-child(3) > .value > .link';
-    const roleDescriptor = ':nth-child(3) > :nth-child(4) > .value > .link';
+    const department = ':nth-child(1) > [data-cy="vnLvDepartment"] > .value';
+    const role = '[data-cy="vnLvRole"] > .value';
     beforeEach(() => {
         cy.viewport(1280, 720);
         cy.login('developer');
         cy.visit('/#/worker/19/summary');
     });
 
-    it('should load worker summary', () => {
+    it('should load worker summary and show the department', () => {
         cy.waitForElement('.summaryHeader');
         cy.get('.summaryHeader > div').should('have.text', '19 - salesboss salesboss');
-        cy.get(':nth-child(1) > :nth-child(2) > .value > span').should(
-            'have.text',
-            'salesBossNick',
-        );
+        cy.get(department).should('have.text', 'VENTAS');
     });
 
     it('should try descriptors', () => {
         cy.waitForElement('.summaryHeader');
-        cy.get(departmentDescriptor).click();
+        cy.get(department).click();
         cy.get('.descriptor').should('be.visible');
         cy.get('.q-item > .q-item__label').should('include.text', '43');
-        cy.get(roleDescriptor).click();
+        cy.get('.summaryBody').click();
+        cy.get(role).click();
         cy.get('.descriptor').should('be.visible');
         cy.get('.q-item > .q-item__label').should('include.text', '19');
     });

From 53f6f5278f154e6e7ccb55492be84230efcbf6ad Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Mon, 24 Mar 2025 12:08:24 +0100
Subject: [PATCH 12/12] refactor: refs #8326 requested changes

---
 src/components/ui/CardSummary.vue     |  23 +++++
 src/css/app.scss                      |  23 -----
 src/pages/Route/Card/RouteSummary.vue | 141 +++++++++++++-------------
 src/pages/Zone/Card/ZoneSummary.vue   |  18 +++-
 4 files changed, 111 insertions(+), 94 deletions(-)

diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index 05bfed998..2ec6bea78 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -201,6 +201,29 @@ async function fetch() {
         }
     }
 }
+
+.vn-card-group {
+    display: flex;
+    flex-direction: column;
+}
+
+.vn-card-content {
+    display: flex;
+    flex-direction: column;
+    text-overflow: ellipsis;
+    > div {
+        max-height: 70px;
+    }
+}
+
+@media (min-width: 1010px) {
+    .vn-card-group {
+        flex-direction: row;
+    }
+    .vn-card-content {
+        flex: 1;
+    }
+}
 </style>
 <style lang="scss" scoped>
 .summaryHeader .vn-label-value {
diff --git a/src/css/app.scss b/src/css/app.scss
index 6a0ce8fb0..5befd150b 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -341,26 +341,3 @@ input::-webkit-inner-spin-button {
 .containerShrinked {
     width: 70%;
 }
-
-.vn-card-group {
-    display: flex;
-    flex-direction: column;
-}
-
-.vn-card-content {
-    display: flex;
-    flex-direction: column;
-    text-overflow: ellipsis;
-    > div {
-        max-height: 80px;
-    }
-}
-
-@media (min-width: 1010px) {
-    .vn-card-group {
-        flex-direction: row;
-    }
-    .vn-card-content {
-        flex: 1;
-    }
-}
diff --git a/src/pages/Route/Card/RouteSummary.vue b/src/pages/Route/Card/RouteSummary.vue
index f68628095..86bdbb5c5 100644
--- a/src/pages/Route/Card/RouteSummary.vue
+++ b/src/pages/Route/Card/RouteSummary.vue
@@ -138,74 +138,79 @@ const ticketColumns = ref([
                         :url="`#/${route.meta.moduleName.toLowerCase()}/${entityId}/basic-data`"
                         :text="t('globals.pageTitles.basicData')"
                     />
-                </QCard>
-
-                <QCard class="vn-one">
-                    <VnLv
-                        :label="t('route.summary.date')"
-                        :value="toDate(entity?.route.dated)"
-                    />
-                    <VnLv
-                        :label="t('route.summary.agency')"
-                        :value="entity?.route?.agencyMode?.name"
-                    />
-                    <VnLv
-                        :label="t('route.summary.vehicle')"
-                        :value="entity.route?.vehicle?.numberPlate"
-                    />
-                    <VnLv :label="t('route.summary.driver')">
-                        <template #value>
-                            <span class="link">
-                                {{ dashIfEmpty(entity?.route?.worker?.user?.name) }}
-                                <WorkerDescriptorProxy :id="entity.route?.workerFk" />
-                            </span>
-                        </template>
-                    </VnLv>
-                    <VnLv
-                        :label="t('route.summary.cost')"
-                        :value="toCurrency(entity.route?.cost)"
-                    />
-                    <VnLv
-                        :label="t('route.summary.volume')"
-                        :value="`${dashIfEmpty(entity?.route?.m3)} / ${dashIfEmpty(
-                            entity?.route?.vehicle?.m3,
-                        )} m³`"
-                    />
-                    <VnLv
-                        :label="t('route.summary.packages')"
-                        :value="getTotalPackages(entity.tickets)"
-                    />
-                    <QCheckbox
-                        :label="
-                            entity.route.isOk
-                                ? t('route.summary.closed')
-                                : t('route.summary.open')
-                        "
-                        v-model="entity.route.isOk"
-                        :disable="true"
-                    />
-                </QCard>
-                <QCard class="vn-one">
-                    <VnLv
-                        :label="t('route.summary.started')"
-                        :value="toHour(entity?.route.started)"
-                    />
-                    <VnLv
-                        :label="t('route.summary.finished')"
-                        :value="toHour(entity?.route.finished)"
-                    />
-                    <VnLv
-                        :label="t('route.summary.kmStart')"
-                        :value="dashIfEmpty(entity?.route?.kmStart)"
-                    />
-                    <VnLv
-                        :label="t('route.summary.kmEnd')"
-                        :value="dashIfEmpty(entity?.route?.kmEnd)"
-                    />
-                    <VnLv
-                        :label="t('globals.description')"
-                        :value="dashIfEmpty(entity?.route?.description)"
-                    />
+                    <div class="vn-card-group">
+                        <div class="vn-card-content">
+                            <VnLv
+                                :label="t('route.summary.date')"
+                                :value="toDate(entity?.route.dated)"
+                            />
+                            <VnLv
+                                :label="t('route.summary.agency')"
+                                :value="entity?.route?.agencyMode?.name"
+                            />
+                            <VnLv
+                                :label="t('route.summary.vehicle')"
+                                :value="entity.route?.vehicle?.numberPlate"
+                            />
+                            <VnLv :label="t('route.summary.driver')">
+                                <template #value>
+                                    <span class="link">
+                                        {{
+                                            dashIfEmpty(entity?.route?.worker?.user?.name)
+                                        }}
+                                        <WorkerDescriptorProxy
+                                            :id="entity.route?.workerFk"
+                                        />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('route.summary.cost')"
+                                :value="toCurrency(entity.route?.cost)"
+                            />
+                            <VnLv
+                                :label="t('route.summary.volume')"
+                                :value="`${dashIfEmpty(entity?.route?.m3)} / ${dashIfEmpty(
+                                    entity?.route?.vehicle?.m3,
+                                )} m³`"
+                            />
+                            <VnLv
+                                :label="t('route.summary.packages')"
+                                :value="getTotalPackages(entity.tickets)"
+                            />
+                            <QCheckbox
+                                :label="
+                                    entity.route.isOk
+                                        ? t('route.summary.closed')
+                                        : t('route.summary.open')
+                                "
+                                v-model="entity.route.isOk"
+                                :disable="true"
+                            />
+                        </div>
+                        <div class="vn-card-content">
+                            <VnLv
+                                :label="t('route.summary.started')"
+                                :value="toHour(entity?.route.started)"
+                            />
+                            <VnLv
+                                :label="t('route.summary.finished')"
+                                :value="toHour(entity?.route.finished)"
+                            />
+                            <VnLv
+                                :label="t('route.summary.kmStart')"
+                                :value="dashIfEmpty(entity?.route?.kmStart)"
+                            />
+                            <VnLv
+                                :label="t('route.summary.kmEnd')"
+                                :value="dashIfEmpty(entity?.route?.kmEnd)"
+                            />
+                            <VnLv
+                                :label="t('globals.description')"
+                                :value="dashIfEmpty(entity?.route?.description)"
+                            />
+                        </div>
+                    </div>
                 </QCard>
                 <QCard class="vn-max">
                     <VnTitle
diff --git a/src/pages/Zone/Card/ZoneSummary.vue b/src/pages/Zone/Card/ZoneSummary.vue
index cd5a80ba2..61475b1f6 100644
--- a/src/pages/Zone/Card/ZoneSummary.vue
+++ b/src/pages/Zone/Card/ZoneSummary.vue
@@ -75,13 +75,13 @@ onMounted(async () => {
         <template #body="{ entity: zone }">
             <QCard class="vn-one">
                 <VnTitle :url="zoneUrl + `basic-data`" :text="t('summary.basicData')" />
-                <div class="vn-card-group">
-                    <div class="vn-card-content">
+                <div class="card-group">
+                    <div class="card-content">
                         <VnLv :label="t('list.agency')" :value="zone.agencyMode?.name" />
                         <VnLv :label="t('list.price')" :value="toCurrency(zone.price)" />
                         <VnLv :label="t('zone.bonus')" :value="toCurrency(zone.bonus)" />
                     </div>
-                    <div class="vn-card-content">
+                    <div class="card-content">
                         <VnLv
                             :label="t('summary.closeHour')"
                             :value="toTimeFormat(zone.hour)"
@@ -109,3 +109,15 @@ onMounted(async () => {
         </template>
     </CardSummary>
 </template>
+
+<style lang="scss" scoped>
+.card-group {
+    display: flex;
+    flex-direction: column;
+}
+
+.card-content {
+    display: flex;
+    flex-direction: column;
+}
+</style>