From 6839b5aac2e1916cbc8488185930146f85a702f7 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Wed, 17 Apr 2024 13:26:08 +0200
Subject: [PATCH 01/61] refactor: refs #6767 deleted <div class="col">

---
 src/components/CreateBankEntityForm.vue       |  52 +-
 src/components/CreateDepartmentChild.vue      |   4 +-
 src/components/CreateManualInvoiceForm.vue    | 106 ++--
 src/components/CreateNewCityForm.vue          |  32 +-
 src/components/CreateNewPostcodeForm.vue      | 103 ++--
 src/components/CreateNewProvinceForm.vue      |  32 +-
 src/components/CreateThermographForm.vue      |  77 ++-
 src/components/EditPictureForm.vue            |  96 ++--
 src/components/EditTableCellValueForm.vue     |  22 +-
 src/components/FilterItemForm.vue             |  74 ++-
 src/components/FilterTravelForm.vue           |  74 ++-
 src/components/RegularizeStockForm.vue        |  28 +-
 src/components/TransferInvoiceForm.vue        | 124 +++--
 src/components/ui/SkeletonForm.vue            |  24 +-
 src/components/ui/SkeletonSummary.vue         |  70 ++-
 src/components/ui/SkeletonTable.vue           |  53 +-
 src/pages/Claim/Card/ClaimBasicData.vue       | 140 +++---
 src/pages/Customer/Card/CustomerBasicData.vue | 168 +++----
 .../Customer/Card/CustomerBillingData.vue     | 114 ++---
 .../Customer/Card/CustomerFiscalData.vue      | 153 +++---
 src/pages/Customer/Card/CustomerWebAccess.vue |  38 +-
 src/pages/Customer/CustomerCreate.vue         |  98 ++--
 .../CustomerDefaulterAddObservation.vue       |  12 +-
 .../components/CustomerConsigneeCreate.vue    |  99 ++--
 .../components/CustomerConsigneeEdit.vue      | 141 +++---
 .../components/CustomerCreditCreate.vue       |  12 +-
 .../components/CustomerGreugeCreate.vue       |  30 +-
 .../components/CustomerNewCustomsAgent.vue    |  24 +-
 .../components/CustomerNewPayment.vue         | 110 ++---
 .../components/CustomerNoteCreate.vue         |   4 +-
 .../components/CustomerRecoverieCreate.vue    |  16 +-
 .../Department/Card/DepartmentBasicData.vue   | 156 +++---
 src/pages/Entry/Card/EntryBasicData.vue       | 244 +++++-----
 src/pages/Entry/Card/EntryBuysImport.vue      |  60 ++-
 src/pages/Entry/EntryCreate.vue               | 130 +++--
 .../InvoiceIn/Card/InvoiceInBasicData.vue     | 451 +++++++++---------
 src/pages/Order/Card/OrderForm.vue            | 134 +++---
 src/pages/Route/Card/RouteForm.vue            | 154 +++---
 src/pages/Route/Roadmap/RoadmapBasicData.vue  | 130 +++--
 src/pages/Route/Roadmap/RoadmapCreate.vue     |  20 +-
 src/pages/Shelving/Card/ShelvingForm.vue      |  70 ++-
 src/pages/Supplier/Card/SupplierAccounts.vue  | 108 ++---
 .../Supplier/Card/SupplierAddressesCreate.vue |  61 +--
 .../Supplier/Card/SupplierAgencyTerm.vue      |  88 ++--
 .../Card/SupplierAgencyTermCreate.vue         |  92 ++--
 src/pages/Supplier/Card/SupplierBasicData.vue | 116 ++---
 .../Supplier/Card/SupplierBillingData.vue     |  52 +-
 src/pages/Supplier/Card/SupplierContacts.vue  |  58 +--
 .../Supplier/Card/SupplierFiscalData.vue      | 148 +++---
 src/pages/Supplier/SupplierCreate.vue         |  16 +-
 src/pages/Travel/Card/TravelBasicData.vue     | 110 ++---
 .../Travel/Card/TravelThermographsForm.vue    | 164 +++----
 src/pages/Travel/TravelCreate.vue             |  72 ++-
 src/pages/Wagon/WagonCreate.vue               | 118 +++--
 src/pages/Worker/Card/WorkerPBX.vue           |  12 +-
 src/pages/Worker/WorkerCreate.vue             | 185 +++----
 56 files changed, 2221 insertions(+), 2858 deletions(-)

diff --git a/src/components/CreateBankEntityForm.vue b/src/components/CreateBankEntityForm.vue
index 2d098beb0..429b5f334 100644
--- a/src/components/CreateBankEntityForm.vue
+++ b/src/components/CreateBankEntityForm.vue
@@ -58,37 +58,31 @@ onMounted(async () => {
     >
         <template #form-inputs="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        :label="t('name')"
-                        v-model="data.name"
-                        :required="true"
-                        :rules="validate('bankEntity.name')"
-                    />
-                </div>
-                <div class="col">
-                    <VnInput
-                        ref="bicInputRef"
-                        :label="t('swift')"
-                        v-model="data.bic"
-                        :required="true"
-                        :rules="validate('bankEntity.bic')"
-                    />
-                </div>
+                <VnInput
+                    :label="t('name')"
+                    v-model="data.name"
+                    :required="true"
+                    :rules="validate('bankEntity.name')"
+                />
+                <VnInput
+                    ref="bicInputRef"
+                    :label="t('swift')"
+                    v-model="data.bic"
+                    :required="true"
+                    :rules="validate('bankEntity.bic')"
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('country')"
-                        v-model="data.countryFk"
-                        :options="countriesOptions"
-                        option-value="id"
-                        option-label="country"
-                        hide-selected
-                        :required="true"
-                        :rules="validate('bankEntity.countryFk')"
-                    />
-                </div>
+                <VnSelectFilter
+                    :label="t('country')"
+                    v-model="data.countryFk"
+                    :options="countriesOptions"
+                    option-value="id"
+                    option-label="country"
+                    hide-selected
+                    :required="true"
+                    :rules="validate('bankEntity.countryFk')"
+                />
                 <div v-if="showEntityField" class="col">
                     <VnInput
                         :label="t('id')"
diff --git a/src/components/CreateDepartmentChild.vue b/src/components/CreateDepartmentChild.vue
index 8f5b4b874..1f1b1335b 100644
--- a/src/components/CreateDepartmentChild.vue
+++ b/src/components/CreateDepartmentChild.vue
@@ -52,9 +52,7 @@ onMounted(() => {
             </span>
             <h1 class="title">{{ t('New department') }}</h1>
             <VnRow class="row q-gutter-md q-mb-md" style="min-width: 250px">
-                <div class="col">
-                    <VnInput :label="t('Name')" v-model="data.name" />
-                </div>
+                <VnInput :label="t('Name')" v-model="data.name" />
             </VnRow>
             <div class="q-mt-lg row justify-end">
                 <QBtn
diff --git a/src/components/CreateManualInvoiceForm.vue b/src/components/CreateManualInvoiceForm.vue
index f03afbf35..5383d0a7f 100644
--- a/src/components/CreateManualInvoiceForm.vue
+++ b/src/components/CreateManualInvoiceForm.vue
@@ -72,69 +72,59 @@ const onDataSaved = async (formData, requestResponse) => {
                 {{ t('Invoicing in progress...') }}
             </span>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Ticket')"
-                        :options="ticketsOptions"
-                        hide-selected
-                        option-label="id"
-                        option-value="id"
-                        v-model="data.ticketFk"
-                        @update:model-value="data.clientFk = null"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel> #{{ scope.opt?.id }} </QItemLabel>
-                                    <QItemLabel caption>{{
-                                        scope.opt?.nickname
-                                    }}</QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
-                </div>
+                <VnSelectFilter
+                    :label="t('Ticket')"
+                    :options="ticketsOptions"
+                    hide-selected
+                    option-label="id"
+                    option-value="id"
+                    v-model="data.ticketFk"
+                    @update:model-value="data.clientFk = null"
+                >
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            <QItemSection>
+                                <QItemLabel> #{{ scope.opt?.id }} </QItemLabel>
+                                <QItemLabel caption>{{
+                                    scope.opt?.nickname
+                                }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelectFilter>
                 <span class="row items-center" style="max-width: max-content">{{
                     t('Or')
                 }}</span>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Client')"
-                        :options="clientsOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="data.clientFk"
-                        @update:model-value="data.ticketFk = null"
-                    />
-                </div>
-                <div class="col">
-                    <VnInputDate :label="t('Max date')" v-model="data.maxShipped" />
-                </div>
+                <VnSelectFilter
+                    :label="t('Client')"
+                    :options="clientsOptions"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    v-model="data.clientFk"
+                    @update:model-value="data.ticketFk = null"
+                />
+                <VnInputDate :label="t('Max date')" v-model="data.maxShipped" />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Serial')"
-                        :options="invoiceOutSerialsOptions"
-                        hide-selected
-                        option-label="description"
-                        option-value="code"
-                        v-model="data.serial"
-                        :required="true"
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Area')"
-                        :options="taxAreasOptions"
-                        hide-selected
-                        option-label="code"
-                        option-value="code"
-                        v-model="data.taxArea"
-                        :required="true"
-                    />
-                </div>
+                <VnSelectFilter
+                    :label="t('Serial')"
+                    :options="invoiceOutSerialsOptions"
+                    hide-selected
+                    option-label="description"
+                    option-value="code"
+                    v-model="data.serial"
+                    :required="true"
+                />
+                <VnSelectFilter
+                    :label="t('Area')"
+                    :options="taxAreasOptions"
+                    hide-selected
+                    option-label="code"
+                    option-value="code"
+                    v-model="data.taxArea"
+                    :required="true"
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <VnInput
diff --git a/src/components/CreateNewCityForm.vue b/src/components/CreateNewCityForm.vue
index 7326ea7a5..230155bbd 100644
--- a/src/components/CreateNewCityForm.vue
+++ b/src/components/CreateNewCityForm.vue
@@ -40,24 +40,20 @@ const onDataSaved = (dataSaved) => {
     >
         <template #form-inputs="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        :label="t('Name')"
-                        v-model="data.name"
-                        :rules="validate('city.name')"
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Province')"
-                        :options="provincesOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="data.provinceFk"
-                        :rules="validate('city.provinceFk')"
-                    />
-                </div>
+                <VnInput
+                    :label="t('Name')"
+                    v-model="data.name"
+                    :rules="validate('city.name')"
+                />
+                <VnSelectFilter
+                    :label="t('Province')"
+                    :options="provincesOptions"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    v-model="data.provinceFk"
+                    :rules="validate('city.provinceFk')"
+                />
             </VnRow>
         </template>
     </FormModelPopup>
diff --git a/src/components/CreateNewPostcodeForm.vue b/src/components/CreateNewPostcodeForm.vue
index 02e84849c..165e86aa8 100644
--- a/src/components/CreateNewPostcodeForm.vue
+++ b/src/components/CreateNewPostcodeForm.vue
@@ -92,63 +92,56 @@ const onProvinceCreated = async ({ name }, formData) => {
     >
         <template #form-inputs="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        :label="t('Postcode')"
-                        v-model="data.code"
-                        :rules="validate('postcode.code')"
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectDialog
-                        :label="t('City')"
-                        :options="townsLocationOptions"
-                        v-model="data.townFk"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        :rules="validate('postcode.city')"
-                        :roles-allowed-to-create="['deliveryAssistant']"
-                    >
-                        <template #form>
-                            <CreateNewCityForm
-                                @on-data-saved="onCityCreated($event, data)"
-                            />
-                        </template>
-                    </VnSelectDialog>
-                </div>
+                <VnInput
+                    :label="t('Postcode')"
+                    v-model="data.code"
+                    :rules="validate('postcode.code')"
+                />
+                <VnSelectDialog
+                    :label="t('City')"
+                    :options="townsLocationOptions"
+                    v-model="data.townFk"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    :rules="validate('postcode.city')"
+                    :roles-allowed-to-create="['deliveryAssistant']"
+                >
+                    <template #form>
+                        <CreateNewCityForm
+                            @on-data-saved="onCityCreated($event, data)"
+                        />
+                    </template>
+                </VnSelectDialog>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-xl">
-                <div class="col">
-                    <VnSelectDialog
-                        :label="t('Province')"
-                        :options="provincesOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="data.provinceFk"
-                        :rules="validate('postcode.provinceFk')"
-                        :roles-allowed-to-create="['deliveryAssistant']"
-                    >
-                        <template #form>
-                            <CreateNewProvinceForm
-                                @on-data-saved="onProvinceCreated($event, data)"
-                            />
-                        </template>
-                    </VnSelectDialog>
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Country')"
-                        :options="countriesOptions"
-                        hide-selected
-                        option-label="country"
-                        option-value="id"
-                        v-model="data.countryFk"
-                        :rules="validate('postcode.countryFk')"
-                    />
-                </div> </VnRow
-        ></template>
+                <VnSelectDialog
+                    :label="t('Province')"
+                    :options="provincesOptions"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    v-model="data.provinceFk"
+                    :rules="validate('postcode.provinceFk')"
+                    :roles-allowed-to-create="['deliveryAssistant']"
+                >
+                    <template #form>
+                        <CreateNewProvinceForm
+                            @on-data-saved="onProvinceCreated($event, data)"
+                        />
+                    </template>
+                </VnSelectDialog>
+                <VnSelectFilter
+                    :label="t('Country')"
+                    :options="countriesOptions"
+                    hide-selected
+                    option-label="country"
+                    option-value="id"
+                    v-model="data.countryFk"
+                    :rules="validate('postcode.countryFk')"
+                />
+            </VnRow>
+        </template>
     </FormModelPopup>
 </template>
 
diff --git a/src/components/CreateNewProvinceForm.vue b/src/components/CreateNewProvinceForm.vue
index b972db2c9..2902d0bac 100644
--- a/src/components/CreateNewProvinceForm.vue
+++ b/src/components/CreateNewProvinceForm.vue
@@ -40,24 +40,20 @@ const onDataSaved = (dataSaved) => {
     >
         <template #form-inputs="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        :label="t('Name')"
-                        v-model="data.name"
-                        :rules="validate('province.name')"
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Autonomy')"
-                        :options="autonomiesOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="data.autonomyFk"
-                        :rules="validate('province.autonomyFk')"
-                    />
-                </div>
+                <VnInput
+                    :label="t('Name')"
+                    v-model="data.name"
+                    :rules="validate('province.name')"
+                />
+                <VnSelectFilter
+                    :label="t('Autonomy')"
+                    :options="autonomiesOptions"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    v-model="data.autonomyFk"
+                    :rules="validate('province.autonomyFk')"
+                />
             </VnRow>
         </template>
     </FormModelPopup>
diff --git a/src/components/CreateThermographForm.vue b/src/components/CreateThermographForm.vue
index d4511a0e7..1cb48d2fe 100644
--- a/src/components/CreateThermographForm.vue
+++ b/src/components/CreateThermographForm.vue
@@ -54,51 +54,42 @@ const onDataSaved = (dataSaved) => {
     >
         <template #form-inputs="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        :label="t('Identifier')"
-                        v-model="data.thermographId"
-                        :required="true"
-                        :rules="validate('thermograph.id')"
-                    />
-                </div>
-
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Model')"
-                        :options="thermographsModels"
-                        hide-selected
-                        option-label="value"
-                        option-value="value"
-                        v-model="data.model"
-                        :required="true"
-                        :rules="validate('thermograph.model')"
-                    />
-                </div>
+                <VnInput
+                    :label="t('Identifier')"
+                    v-model="data.thermographId"
+                    :required="true"
+                    :rules="validate('thermograph.id')"
+                />
+                <VnSelectFilter
+                    :label="t('Model')"
+                    :options="thermographsModels"
+                    hide-selected
+                    option-label="value"
+                    option-value="value"
+                    v-model="data.model"
+                    :required="true"
+                    :rules="validate('thermograph.model')"
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-xl">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Warehouse')"
-                        :options="warehousesOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="data.warehouseId"
-                        :required="true"
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Temperature')"
-                        :options="temperaturesOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="code"
-                        v-model="data.temperatureFk"
-                        :required="true"
-                    />
-                </div>
+                <VnSelectFilter
+                    :label="t('Warehouse')"
+                    :options="warehousesOptions"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    v-model="data.warehouseId"
+                    :required="true"
+                />
+                <VnSelectFilter
+                    :label="t('Temperature')"
+                    :options="temperaturesOptions"
+                    hide-selected
+                    option-label="name"
+                    option-value="code"
+                    v-model="data.temperatureFk"
+                    :required="true"
+                />
             </VnRow>
         </template>
     </FormModelPopup>
diff --git a/src/components/EditPictureForm.vue b/src/components/EditPictureForm.vue
index 3d7f3615b..ff8c2f289 100644
--- a/src/components/EditPictureForm.vue
+++ b/src/components/EditPictureForm.vue
@@ -246,61 +246,55 @@ const makeRequest = async () => {
 
                 <div class="column">
                     <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QOptionGroup
-                                :options="uploadMethodsOptions"
-                                type="radio"
-                                v-model="uploadMethodSelected"
-                            />
-                        </div>
+                        <QOptionGroup
+                            :options="uploadMethodsOptions"
+                            type="radio"
+                            v-model="uploadMethodSelected"
+                        />
                     </VnRow>
                     <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QFile
-                                v-if="uploadMethodSelected === 'computer'"
-                                ref="inputFileRef"
-                                :label="t('File')"
-                                :multiple="false"
-                                v-model="newPhoto.files"
-                                @update:model-value="updatePhotoPreview($event)"
-                                :accept="allowedContentTypes"
-                                class="required cursor-pointer"
-                            >
-                                <template #append>
-                                    <QIcon
-                                        name="vn:attach"
-                                        class="cursor-pointer q-mr-sm"
-                                        @click="openInputFile()"
-                                    >
-                                        <!-- <QTooltip>{{ t('globals.selectFile') }}</QTooltip> -->
-                                    </QIcon>
-                                    <QIcon name="info" class="cursor-pointer">
-                                        <QTooltip>{{
-                                            t('globals.allowedFilesText', {
-                                                allowedContentTypes: allowedContentTypes,
-                                            })
-                                        }}</QTooltip>
-                                    </QIcon>
-                                </template>
-                            </QFile>
-                            <VnInput
-                                v-if="uploadMethodSelected === 'URL'"
-                                v-model="newPhoto.url"
-                                @update:model-value="updatePhotoPreview($event)"
-                                placeholder="https://"
-                            />
-                        </div>
+                        <QFile
+                            v-if="uploadMethodSelected === 'computer'"
+                            ref="inputFileRef"
+                            :label="t('File')"
+                            :multiple="false"
+                            v-model="newPhoto.files"
+                            @update:model-value="updatePhotoPreview($event)"
+                            :accept="allowedContentTypes"
+                            class="required cursor-pointer"
+                        >
+                            <template #append>
+                                <QIcon
+                                    name="vn:attach"
+                                    class="cursor-pointer q-mr-sm"
+                                    @click="openInputFile()"
+                                >
+                                    <!-- <QTooltip>{{ t('globals.selectFile') }}</QTooltip> -->
+                                </QIcon>
+                                <QIcon name="info" class="cursor-pointer">
+                                    <QTooltip>{{
+                                        t('globals.allowedFilesText', {
+                                            allowedContentTypes: allowedContentTypes,
+                                        })
+                                    }}</QTooltip>
+                                </QIcon>
+                            </template>
+                        </QFile>
+                        <VnInput
+                            v-if="uploadMethodSelected === 'URL'"
+                            v-model="newPhoto.url"
+                            @update:model-value="updatePhotoPreview($event)"
+                            placeholder="https://"
+                        />
                     </VnRow>
                     <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <VnSelectFilter
-                                :label="t('Orientation')"
-                                :options="viewportTypes"
-                                hide-selected
-                                option-label="description"
-                                v-model="viewportSelection"
-                            />
-                        </div>
+                        <VnSelectFilter
+                            :label="t('Orientation')"
+                            :options="viewportTypes"
+                            hide-selected
+                            option-label="description"
+                            v-model="viewportSelection"
+                        />
                     </VnRow>
                     <div class="q-mt-lg row justify-end">
                         <QBtn
diff --git a/src/components/EditTableCellValueForm.vue b/src/components/EditTableCellValueForm.vue
index 9e48889a0..147ee1001 100644
--- a/src/components/EditTableCellValueForm.vue
+++ b/src/components/EditTableCellValueForm.vue
@@ -75,19 +75,15 @@ const closeForm = () => {
             <span class="countLines">{{ ` ${rows.length} ` }}</span>
             <span class="title">{{ t('buy(s)') }}</span>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Field to edit')"
-                        :options="fieldsOptions"
-                        hide-selected
-                        option-label="label"
-                        option-value="field"
-                        v-model="formData.field"
-                    />
-                </div>
-                <div class="col">
-                    <VnInput :label="t('Value')" v-model="formData.newValue" />
-                </div>
+                <VnSelectFilter
+                    :label="t('Field to edit')"
+                    :options="fieldsOptions"
+                    hide-selected
+                    option-label="label"
+                    option-value="field"
+                    v-model="formData.field"
+                />
+                <VnInput :label="t('Value')" v-model="formData.newValue" />
             </VnRow>
             <div class="q-mt-lg row justify-end">
                 <QBtn
diff --git a/src/components/FilterItemForm.vue b/src/components/FilterItemForm.vue
index cd4fff54c..cd4ef89e7 100644
--- a/src/components/FilterItemForm.vue
+++ b/src/components/FilterItemForm.vue
@@ -147,48 +147,38 @@ const selectItem = ({ id }) => {
             </span>
             <h1 class="title">{{ t('Filter item') }}</h1>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        :label="t('entry.buys.name')"
-                        v-model="itemFilterParams.name"
-                    />
-                </div>
-                <div class="col">
-                    <VnInput
-                        :label="t('entry.buys.size')"
-                        v-model="itemFilterParams.size"
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('entry.buys.producer')"
-                        :options="producersOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="itemFilterParams.producerFk"
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('entry.buys.type')"
-                        :options="ItemTypesOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="itemFilterParams.typeFk"
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('entry.buys.color')"
-                        :options="InksOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="itemFilterParams.inkFk"
-                    />
-                </div>
+                <VnInput
+                    :label="t('entry.buys.name')"
+                    v-model="itemFilterParams.name"
+                />
+                <VnInput
+                    :label="t('entry.buys.size')"
+                    v-model="itemFilterParams.size"
+                />
+                <VnSelectFilter
+                    :label="t('entry.buys.producer')"
+                    :options="producersOptions"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    v-model="itemFilterParams.producerFk"
+                />
+                <VnSelectFilter
+                    :label="t('entry.buys.type')"
+                    :options="ItemTypesOptions"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    v-model="itemFilterParams.typeFk"
+                />
+                <VnSelectFilter
+                    :label="t('entry.buys.color')"
+                    :options="InksOptions"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    v-model="itemFilterParams.inkFk"
+                />
             </VnRow>
             <div class="q-mt-lg row justify-end">
                 <QBtn
diff --git a/src/components/FilterTravelForm.vue b/src/components/FilterTravelForm.vue
index e6060f06e..8b9aa15df 100644
--- a/src/components/FilterTravelForm.vue
+++ b/src/components/FilterTravelForm.vue
@@ -145,48 +145,38 @@ const selectTravel = ({ id }) => {
             </span>
             <h1 class="title">{{ t('Filter travels') }}</h1>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('entry.basicData.agency')"
-                        :options="agenciesOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="travelFilterParams.agencyModeFk"
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('entry.basicData.warehouseOut')"
-                        :options="warehousesOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="travelFilterParams.warehouseOutFk"
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('entry.basicData.warehouseIn')"
-                        :options="warehousesOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="travelFilterParams.warehouseInFk"
-                    />
-                </div>
-                <div class="col">
-                    <VnInputDate
-                        :label="t('entry.basicData.shipped')"
-                        v-model="travelFilterParams.shipped"
-                    />
-                </div>
-                <div class="col">
-                    <VnInputDate
-                        :label="t('entry.basicData.landed')"
-                        v-model="travelFilterParams.landed"
-                    />
-                </div>
+                <VnSelectFilter
+                    :label="t('entry.basicData.agency')"
+                    :options="agenciesOptions"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    v-model="travelFilterParams.agencyModeFk"
+                />
+                <VnSelectFilter
+                    :label="t('entry.basicData.warehouseOut')"
+                    :options="warehousesOptions"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    v-model="travelFilterParams.warehouseOutFk"
+                />
+                <VnSelectFilter
+                    :label="t('entry.basicData.warehouseIn')"
+                    :options="warehousesOptions"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    v-model="travelFilterParams.warehouseInFk"
+                />
+                <VnInputDate
+                    :label="t('entry.basicData.shipped')"
+                    v-model="travelFilterParams.shipped"
+                />
+                <VnInputDate
+                    :label="t('entry.basicData.landed')"
+                    v-model="travelFilterParams.landed"
+                />
             </VnRow>
             <div class="q-mt-lg row justify-end">
                 <QBtn
diff --git a/src/components/RegularizeStockForm.vue b/src/components/RegularizeStockForm.vue
index 28236be17..e8af244d9 100644
--- a/src/components/RegularizeStockForm.vue
+++ b/src/components/RegularizeStockForm.vue
@@ -50,24 +50,20 @@ const onDataSaved = (data) => {
     >
         <template #form-inputs="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QInput
-                        :label="t('Type the visible quantity')"
-                        v-model.number="data.quantity"
-                    />
-                </div>
+                <QInput
+                    :label="t('Type the visible quantity')"
+                    v-model.number="data.quantity"
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Warehouse')"
-                        v-model="data.warehouseFk"
-                        :options="warehousesOptions"
-                        option-value="id"
-                        option-label="name"
-                        hide-selected
-                    />
-                </div>
+                <VnSelectFilter
+                    :label="t('Warehouse')"
+                    v-model="data.warehouseFk"
+                    :options="warehousesOptions"
+                    option-value="id"
+                    option-label="name"
+                    hide-selected
+                />
             </VnRow>
         </template>
     </FormModelPopup>
diff --git a/src/components/TransferInvoiceForm.vue b/src/components/TransferInvoiceForm.vue
index b7d8f3081..96626e826 100644
--- a/src/components/TransferInvoiceForm.vue
+++ b/src/components/TransferInvoiceForm.vue
@@ -83,74 +83,66 @@ const transferInvoice = async () => {
     >
         <template #form-inputs>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Client')"
-                        :options="clientsOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="transferInvoiceParams.newClientFk"
-                        :required="true"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>
-                                        #{{ scope.opt?.id }} -
-                                        {{ scope.opt?.name }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Rectificative type')"
-                        :options="rectificativeTypeOptions"
-                        hide-selected
-                        option-label="description"
-                        option-value="id"
-                        v-model="transferInvoiceParams.cplusRectificationTypeFk"
-                        :required="true"
-                    />
-                </div>
+                <VnSelectFilter
+                    :label="t('Client')"
+                    :options="clientsOptions"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    v-model="transferInvoiceParams.newClientFk"
+                    :required="true"
+                >
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            <QItemSection>
+                                <QItemLabel>
+                                    #{{ scope.opt?.id }} -
+                                    {{ scope.opt?.name }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelectFilter>
+                <VnSelectFilter
+                    :label="t('Rectificative type')"
+                    :options="rectificativeTypeOptions"
+                    hide-selected
+                    option-label="description"
+                    option-value="id"
+                    v-model="transferInvoiceParams.cplusRectificationTypeFk"
+                    :required="true"
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Class')"
-                        :options="siiTypeInvoiceOutsOptions"
-                        hide-selected
-                        option-label="description"
-                        option-value="id"
-                        v-model="transferInvoiceParams.siiTypeInvoiceOutFk"
-                        :required="true"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>
-                                        {{ scope.opt?.code }} -
-                                        {{ scope.opt?.description }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Type')"
-                        :options="invoiceCorrectionTypesOptions"
-                        hide-selected
-                        option-label="description"
-                        option-value="id"
-                        v-model="transferInvoiceParams.invoiceCorrectionTypeFk"
-                        :required="true"
-                    />
-                </div>
+                <VnSelectFilter
+                    :label="t('Class')"
+                    :options="siiTypeInvoiceOutsOptions"
+                    hide-selected
+                    option-label="description"
+                    option-value="id"
+                    v-model="transferInvoiceParams.siiTypeInvoiceOutFk"
+                    :required="true"
+                >
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            <QItemSection>
+                                <QItemLabel>
+                                    {{ scope.opt?.code }} -
+                                    {{ scope.opt?.description }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelectFilter>
+                <VnSelectFilter
+                    :label="t('Type')"
+                    :options="invoiceCorrectionTypesOptions"
+                    hide-selected
+                    option-label="description"
+                    option-value="id"
+                    v-model="transferInvoiceParams.invoiceCorrectionTypeFk"
+                    :required="true"
+                />
             </VnRow>
         </template>
     </FormPopup>
diff --git a/src/components/ui/SkeletonForm.vue b/src/components/ui/SkeletonForm.vue
index d27934adf..4ae4fb5bb 100644
--- a/src/components/ui/SkeletonForm.vue
+++ b/src/components/ui/SkeletonForm.vue
@@ -1,28 +1,16 @@
 <template>
     <div class="q-pa-md">
         <div class="row q-gutter-md q-mb-md">
-            <div class="col">
-                <QSkeleton type="QInput" square />
-            </div>
-            <div class="col">
-                <QSkeleton type="QInput" square />
-            </div>
+            <QSkeleton type="QInput" square />
+            <QSkeleton type="QInput" square />
         </div>
         <div class="row q-gutter-md q-mb-md">
-            <div class="col">
-                <QSkeleton type="QInput" square />
-            </div>
-            <div class="col">
-                <QSkeleton type="QInput" square />
-            </div>
+            <QSkeleton type="QInput" square />
+            <QSkeleton type="QInput" square />
         </div>
         <div class="row q-gutter-md q-mb-md">
-            <div class="col">
-                <QSkeleton type="QInput" square />
-            </div>
-            <div class="col">
-                <QSkeleton type="QInput" square />
-            </div>
+            <QSkeleton type="QInput" square />
+            <QSkeleton type="QInput" square />
         </div>
         <div class="row q-gutter-md">
             <QSkeleton type="QBtn" />
diff --git a/src/components/ui/SkeletonSummary.vue b/src/components/ui/SkeletonSummary.vue
index 087dc32f9..e8407ee7b 100644
--- a/src/components/ui/SkeletonSummary.vue
+++ b/src/components/ui/SkeletonSummary.vue
@@ -3,46 +3,36 @@
         <QSkeleton type="rect" square />
     </div>
     <div class="row q-pa-md q-col-gutter-md q-mb-md">
-        <div class="col">
-            <QSkeleton type="rect" class="q-mb-md" square />
-            <QSkeleton type="text" square />
-            <QSkeleton type="text" square />
-            <QSkeleton type="text" square />
-            <QSkeleton type="text" square />
-            <QSkeleton type="text" square />
-        </div>
-        <div class="col">
-            <QSkeleton type="rect" class="q-mb-md" square />
-            <QSkeleton type="text" square />
-            <QSkeleton type="text" square />
-            <QSkeleton type="text" square />
-            <QSkeleton type="text" square />
-            <QSkeleton type="text" square />
-        </div>
-        <div class="col">
-            <QSkeleton type="rect" class="q-mb-md" square />
-            <QSkeleton type="text" square />
-            <QSkeleton type="text" square />
-            <QSkeleton type="text" square />
-            <QSkeleton type="text" square />
-            <QSkeleton type="text" square />
-        </div>
-        <div class="col">
-            <QSkeleton type="rect" class="q-mb-md" square />
-            <QSkeleton type="text" square />
-            <QSkeleton type="text" square />
-            <QSkeleton type="text" square />
-            <QSkeleton type="text" square />
-            <QSkeleton type="text" square />
-        </div>
-        <div class="col">
-            <QSkeleton type="rect" class="q-mb-md" square />
-            <QSkeleton type="text" square />
-            <QSkeleton type="text" square />
-            <QSkeleton type="text" square />
-            <QSkeleton type="text" square />
-            <QSkeleton type="text" square />
-        </div>
+        <QSkeleton type="rect" class="q-mb-md" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="rect" class="q-mb-md" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="rect" class="q-mb-md" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="rect" class="q-mb-md" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="rect" class="q-mb-md" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="text" square />
+        <QSkeleton type="text" square />
     </div>
 </template>
 
diff --git a/src/components/ui/SkeletonTable.vue b/src/components/ui/SkeletonTable.vue
index d58253f90..e35e2c9b0 100644
--- a/src/components/ui/SkeletonTable.vue
+++ b/src/components/ui/SkeletonTable.vue
@@ -1,45 +1,20 @@
 <template>
     <div class="q-pa-md w">
         <div class="row q-gutter-md q-mb-md">
-            <div class="col-1">
-                <QSkeleton type="rect" square />
-            </div>
-            <div class="col">
-                <QSkeleton type="rect" square />
-            </div>
-            <div class="col">
-                <QSkeleton type="rect" square />
-            </div>
-            <div class="col">
-                <QSkeleton type="rect" square />
-            </div>
-            <div class="col">
-                <QSkeleton type="rect" square />
-            </div>
-            <div class="col">
-                <QSkeleton type="rect" square />
-            </div>
-        </div>
-
-        <div class="row q-gutter-md q-mb-md" v-for="n in 5" :key="n">
-            <div class="col-1">
-                <QSkeleton type="QInput" square />
-            </div>
-            <div class="col">
-                <QSkeleton type="QInput" square />
-            </div>
-            <div class="col">
-                <QSkeleton type="QInput" square />
-            </div>
-            <div class="col">
-                <QSkeleton type="QInput" square />
-            </div>
-            <div class="col">
-                <QSkeleton type="QInput" square />
-            </div>
-            <div class="col">
-                <QSkeleton type="QInput" square />
-            </div>
+            <QSkeleton type="rect" square />
+            <QSkeleton type="rect" square />
+            <QSkeleton type="rect" square />
+            <QSkeleton type="rect" square />
+            <QSkeleton type="rect" square />
+            <QSkeleton type="rect" square />
+       </div>
+       <div class="row q-gutter-md q-mb-md" v-for="n in 5" :key="n">
+            <QSkeleton type="QInput" square />
+            <QSkeleton type="QInput" square />
+            <QSkeleton type="QInput" square />
+            <QSkeleton type="QInput" square />
+            <QSkeleton type="QInput" square />
+            <QSkeleton type="QInput" square />
         </div>
     </div>
 </template>
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index 56717c628..b2e2625e3 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -117,86 +117,74 @@ const statesFilter = {
     >
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.client.name"
-                        :label="t('claim.basicData.customer')"
-                        disable
-                    />
-                </div>
-                <div class="col">
-                    <VnInputDate
-                        v-model="data.created"
-                        :label="t('claim.basicData.created')"
-                    />
-                </div>
+                <VnInput
+                    v-model="data.client.name"
+                    :label="t('claim.basicData.customer')"
+                    disable
+                />
+                <VnInputDate
+                    v-model="data.created"
+                    :label="t('claim.basicData.created')"
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QSelect
-                        v-model="data.workerFk"
-                        :options="workers"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        :label="t('claim.basicData.assignedTo')"
-                        map-options
-                        use-input
-                        @filter="(value, update) => filter(value, update, workerFilter)"
-                        :rules="validate('claim.claimStateFk')"
-                        :input-debounce="0"
-                    >
-                        <template #before>
-                            <QAvatar color="orange">
-                                <QImg
-                                    v-if="data.workerFk"
-                                    :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
-                                    spinner-color="white"
-                                />
-                            </QAvatar>
-                        </template>
-                    </QSelect>
-                </div>
-                <div class="col">
-                    <QSelect
-                        v-model="data.claimStateFk"
-                        :options="claimStates"
-                        option-value="id"
-                        option-label="description"
-                        emit-value
-                        :label="t('claim.basicData.state')"
-                        map-options
-                        use-input
-                        @filter="(value, update) => filter(value, update, statesFilter)"
-                        :rules="validate('claim.claimStateFk')"
-                        :input-debounce="0"
-                    >
-                    </QSelect>
-                </div>
+                <QSelect
+                    v-model="data.workerFk"
+                    :options="workers"
+                    option-value="id"
+                    option-label="name"
+                    emit-value
+                    :label="t('claim.basicData.assignedTo')"
+                    map-options
+                    use-input
+                    @filter="(value, update) => filter(value, update, workerFilter)"
+                    :rules="validate('claim.claimStateFk')"
+                    :input-debounce="0"
+                >
+                    <template #before>
+                        <QAvatar color="orange">
+                            <QImg
+                                v-if="data.workerFk"
+                                :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
+                                spinner-color="white"
+                            />
+                        </QAvatar>
+                    </template>
+                </QSelect>
+                <QSelect
+                    v-model="data.claimStateFk"
+                    :options="claimStates"
+                    option-value="id"
+                    option-label="description"
+                    emit-value
+                    :label="t('claim.basicData.state')"
+                    map-options
+                    use-input
+                    @filter="(value, update) => filter(value, update, statesFilter)"
+                    :rules="validate('claim.claimStateFk')"
+                    :input-debounce="0"
+                >
+                </QSelect>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QInput
-                        v-model.number="data.packages"
-                        :label="t('globals.packages')"
-                        :rules="validate('claim.packages')"
-                        type="number"
-                    />
-                </div>
-                <div class="col">
-                    <QSelect
-                        v-model="data.pickup"
-                        :options="optionsList"
-                        option-value="id"
-                        option-label="description"
-                        emit-value
-                        :label="t('claim.basicData.pickup')"
-                        map-options
-                        use-input
-                        :input-debounce="0"
-                    >
-                    </QSelect>
-                </div>
+                <QInput
+                    v-model.number="data.packages"
+                    :label="t('globals.packages')"
+                    :rules="validate('claim.packages')"
+                    type="number"
+                />
+                <QSelect
+                    v-model="data.pickup"
+                    :options="optionsList"
+                    option-value="id"
+                    option-label="description"
+                    emit-value
+                    :label="t('claim.basicData.pickup')"
+                    map-options
+                    use-input
+                    :input-debounce="0"
+                >
+                </QSelect>
             </VnRow>
         </template>
     </FormModel>
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index d23b08f17..3b36123ff 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -64,104 +64,88 @@ const filterOptions = {
     <FormModel :url="`Clients/${route.params.id}`" model="customer" auto-load>
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.socialName"
-                        :label="t('customer.basicData.socialName')"
-                        :rules="validate('client.socialName')"
-                        autofocus
-                    />
-                </div>
-                <div class="col">
-                    <QSelect
-                        v-model="data.businessTypeFk"
-                        :options="businessTypes"
-                        option-value="code"
-                        option-label="description"
-                        emit-value
-                        :label="t('customer.basicData.businessType')"
-                        map-options
-                        :rules="validate('client.businessTypeFk')"
-                        :input-debounce="0"
-                    />
-                </div>
+                <VnInput
+                    v-model="data.socialName"
+                    :label="t('customer.basicData.socialName')"
+                    :rules="validate('client.socialName')"
+                    autofocus
+                />
+                <QSelect
+                    v-model="data.businessTypeFk"
+                    :options="businessTypes"
+                    option-value="code"
+                    option-label="description"
+                    emit-value
+                    :label="t('customer.basicData.businessType')"
+                    map-options
+                    :rules="validate('client.businessTypeFk')"
+                    :input-debounce="0"
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.contact"
-                        :label="t('customer.basicData.contact')"
-                        :rules="validate('client.contact')"
-                        clearable
-                    />
-                </div>
-                <div class="col">
-                    <VnInput
-                        v-model="data.email"
-                        type="email"
-                        :label="t('customer.basicData.email')"
-                        :rules="validate('client.email')"
-                        clearable
-                    />
-                </div>
+                <VnInput
+                    v-model="data.contact"
+                    :label="t('customer.basicData.contact')"
+                    :rules="validate('client.contact')"
+                    clearable
+                />
+                <VnInput
+                    v-model="data.email"
+                    type="email"
+                    :label="t('customer.basicData.email')"
+                    :rules="validate('client.email')"
+                    clearable
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.phone"
-                        :label="t('customer.basicData.phone')"
-                        :rules="validate('client.phone')"
-                        clearable
-                    />
-                </div>
-                <div class="col">
-                    <VnInput
-                        v-model="data.mobile"
-                        :label="t('customer.basicData.mobile')"
-                        :rules="validate('client.mobile')"
-                        clearable
-                    />
-                </div>
+                <VnInput
+                    v-model="data.phone"
+                    :label="t('customer.basicData.phone')"
+                    :rules="validate('client.phone')"
+                    clearable
+                />
+                <VnInput
+                    v-model="data.mobile"
+                    :label="t('customer.basicData.mobile')"
+                    :rules="validate('client.mobile')"
+                    clearable
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QSelect
-                        v-model="data.salesPersonFk"
-                        :options="workers"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        :label="t('customer.basicData.salesPerson')"
-                        map-options
-                        use-input
-                        @filter="(value, update) => filter(value, update, filterOptions)"
-                        :rules="validate('client.salesPersonFk')"
-                        :input-debounce="0"
-                    >
-                        <template #prepend>
-                            <QAvatar color="orange">
-                                <QImg
-                                    v-if="data.salesPersonFk"
-                                    :src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
-                                    spinner-color="white"
-                                />
-                            </QAvatar>
-                        </template>
-                    </QSelect>
-                </div>
-                <div class="col">
-                    <QSelect
-                        v-model="data.contactChannelFk"
-                        :options="contactChannels"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        :label="t('customer.basicData.contactChannel')"
-                        map-options
-                        :rules="validate('client.contactChannelFk')"
-                        :input-debounce="0"
-                    />
-                </div>
+                <QSelect
+                    v-model="data.salesPersonFk"
+                    :options="workers"
+                    option-value="id"
+                    option-label="name"
+                    emit-value
+                    :label="t('customer.basicData.salesPerson')"
+                    map-options
+                    use-input
+                    @filter="(value, update) => filter(value, update, filterOptions)"
+                    :rules="validate('client.salesPersonFk')"
+                    :input-debounce="0"
+                >
+                    <template #prepend>
+                        <QAvatar color="orange">
+                            <QImg
+                                v-if="data.salesPersonFk"
+                                :src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
+                                spinner-color="white"
+                            />
+                        </QAvatar>
+                    </template>
+                </QSelect>
+                <QSelect
+                    v-model="data.contactChannelFk"
+                    :options="contactChannels"
+                    option-value="id"
+                    option-label="name"
+                    emit-value
+                    :label="t('customer.basicData.contactChannel')"
+                    map-options
+                    :rules="validate('client.contactChannelFk')"
+                    :input-debounce="0"
+                />
             </VnRow>
         </template>
     </FormModel>
diff --git a/src/pages/Customer/Card/CustomerBillingData.vue b/src/pages/Customer/Card/CustomerBillingData.vue
index fa926e2ad..77ec1ad0f 100644
--- a/src/pages/Customer/Card/CustomerBillingData.vue
+++ b/src/pages/Customer/Card/CustomerBillingData.vue
@@ -49,76 +49,62 @@ const getBankEntities = () => {
     >
         <template #form="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Billing data')"
-                        :options="payMethods"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="data.payMethod"
-                    />
-                </div>
-                <div class="col">
-                    <VnInput
-                        :label="t('Due day')"
-                        :rules="validate('client.socialName')"
-                        v-model="data.dueDay"
-                    />
-                </div>
+                <VnSelectFilter
+                    :label="t('Billing data')"
+                    :options="payMethods"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    v-model="data.payMethod"
+                />
+                <VnInput
+                    :label="t('Due day')"
+                    :rules="validate('client.socialName')"
+                    v-model="data.dueDay"
+                />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput :label="t('IBAN')" v-model="data.iban">
-                        <template #append>
-                            <QIcon name="info" class="cursor-info">
-                                <QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
-                            </QIcon>
-                        </template>
-                    </VnInput>
-                </div>
-                <div class="col">
-                    <VnSelectDialog
-                        :label="t('Swift / BIC')"
-                        :options="bankEntitiesOptions"
-                        :roles-allowed-to-create="['salesAssistant', 'hr']"
-                        :rules="validate('Worker.bankEntity')"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="data.bankEntityFk"
-                    >
-                        <template #form>
-                            <CreateBankEntityForm @on-data-saved="getBankEntities()" />
-                        </template>
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection v-if="scope.opt">
-                                    <QItemLabel
-                                        >{{ scope.opt.bic }}
-                                        {{ scope.opt.name }}</QItemLabel
-                                    >
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectDialog>
-                </div>
+                <VnInput :label="t('IBAN')" v-model="data.iban">
+                    <template #append>
+                        <QIcon name="info" class="cursor-info">
+                            <QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
+                        </QIcon>
+                    </template>
+                </VnInput>
+                <VnSelectDialog
+                    :label="t('Swift / BIC')"
+                    :options="bankEntitiesOptions"
+                    :roles-allowed-to-create="['salesAssistant', 'hr']"
+                    :rules="validate('Worker.bankEntity')"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    v-model="data.bankEntityFk"
+                >
+                    <template #form>
+                        <CreateBankEntityForm @on-data-saved="getBankEntities()" />
+                    </template>
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            <QItemSection v-if="scope.opt">
+                                <QItemLabel
+                                    >{{ scope.opt.bic }}
+                                    {{ scope.opt.name }}</QItemLabel
+                                >
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelectDialog>
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QCheckbox :label="t('Received LCR')" v-model="data.hasLcr" />
-                </div>
-                <div class="col">
-                    <QCheckbox
-                        :label="t('VNL core received')"
-                        v-model="data.hasCoreVnl"
-                    />
-                </div>
-                <div class="col">
-                    <QCheckbox :label="t('VNL B2B received')" v-model="data.hasSepaVnl" />
-                </div>
+                <QCheckbox :label="t('Received LCR')" v-model="data.hasLcr" />
+                <QCheckbox
+                    :label="t('VNL core received')"
+                    v-model="data.hasCoreVnl"
+                />
+                <QCheckbox :label="t('VNL B2B received')" v-model="data.hasSepaVnl" />
             </VnRow>
         </template>
     </FormModel>
diff --git a/src/pages/Customer/Card/CustomerFiscalData.vue b/src/pages/Customer/Card/CustomerFiscalData.vue
index 76c84509e..83d695c84 100644
--- a/src/pages/Customer/Card/CustomerFiscalData.vue
+++ b/src/pages/Customer/Card/CustomerFiscalData.vue
@@ -41,122 +41,91 @@ function handleLocation(data, location) {
     >
         <template #form="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        :label="t('Social name')"
-                        :required="true"
-                        :rules="validate('client.socialName')"
-                        v-model="data.socialName"
-                    />
-                </div>
-                <div class="col">
-                    <VnInput :label="t('Tax number')" v-model="data.fi" />
-                </div>
+                <VnInput
+                    :label="t('Social name')"
+                    :required="true"
+                    :rules="validate('client.socialName')"
+                    v-model="data.socialName"
+                />
+                <VnInput :label="t('Tax number')" v-model="data.fi" />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput :label="t('Street')" v-model="data.street" />
-                </div>
+                <VnInput :label="t('Street')" v-model="data.street" />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Sage tax type')"
-                        :options="typesTaxes"
-                        hide-selected
-                        option-label="vat"
-                        option-value="id"
-                        v-model="data.sageTaxTypeFk"
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Sage transaction type')"
-                        :options="typesTransactions"
-                        hide-selected
-                        option-label="vat"
-                        option-value="id"
-                        v-model="data.sageTransactionTypeFk"
-                    />
-                </div>
+                <VnSelectFilter
+                    :label="t('Sage tax type')"
+                    :options="typesTaxes"
+                    hide-selected
+                    option-label="vat"
+                    option-value="id"
+                    v-model="data.sageTaxTypeFk"
+                />
+                <VnSelectFilter
+                    :label="t('Sage transaction type')"
+                    :options="typesTransactions"
+                    hide-selected
+                    option-label="vat"
+                    option-value="id"
+                    v-model="data.sageTransactionTypeFk"
+                />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnLocation
-                        :rules="validate('Worker.postcode')"
-                        :roles-allowed-to-create="['deliveryAssistant']"
-                        :options="postcodesOptions"
-                        v-model="data.postcode"
-                        @update:model-value="(location) => handleLocation(data, location)"
-                    >
-                    </VnLocation>
-                </div>
+                <VnLocation
+                    :rules="validate('Worker.postcode')"
+                    :roles-allowed-to-create="['deliveryAssistant']"
+                    :options="postcodesOptions"
+                    v-model="data.postcode"
+                    @update:model-value="(location) => handleLocation(data, location)"
+                >
+                </VnLocation>
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QCheckbox :label="t('Active')" v-model="data.isActive" />
-                </div>
-                <div class="col">
-                    <QCheckbox :label="t('Frozen')" v-model="data.isFreezed" />
-                </div>
+                <QCheckbox :label="t('Active')" v-model="data.isActive" />
+                <QCheckbox :label="t('Frozen')" v-model="data.isFreezed" />
+
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QCheckbox :label="t('Has to invoice')" v-model="data.hasToInvoice" />
-                </div>
-                <div class="col">
-                    <QCheckbox :label="t('Vies')" v-model="data.isVies" />
-                </div>
+                <QCheckbox :label="t('Has to invoice')" v-model="data.hasToInvoice" />
+                <QCheckbox :label="t('Vies')" v-model="data.isVies" />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QCheckbox
-                        :label="t('Notify by email')"
-                        v-model="data.isToBeMailed"
-                    />
-                </div>
-                <div class="col">
-                    <QCheckbox
-                        :label="t('Invoice by address')"
-                        v-model="data.hasToInvoiceByAddress"
-                    />
-                </div>
+                <QCheckbox
+                    :label="t('Notify by email')"
+                    v-model="data.isToBeMailed"
+                />
+                <QCheckbox
+                    :label="t('Invoice by address')"
+                    v-model="data.hasToInvoiceByAddress"
+                 />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QCheckbox
-                        :label="t('Is equalizated')"
-                        v-model="data.isEqualizated"
-                    />
-                </div>
-                <div class="col">
-                    <QCheckbox
-                        :label="t('Verified data')"
-                        v-model="data.isTaxDataChecked"
-                    />
-                </div>
+                <QCheckbox
+                    :label="t('Is equalizated')"
+                    v-model="data.isEqualizated"
+                />
+                <QCheckbox
+                    :label="t('Verified data')"
+                    v-model="data.isTaxDataChecked"
+                />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QCheckbox
-                        :label="t('Incoterms authorization')"
-                        v-model="data.hasIncoterms"
-                    />
-                </div>
-                <div class="col">
-                    <QCheckbox
-                        :label="t('Electronic invoice')"
-                        v-model="data.hasElectronicInvoice"
-                    />
-                </div>
+                <QCheckbox
+                    :label="t('Incoterms authorization')"
+                    v-model="data.hasIncoterms"
+                />
+                <QCheckbox
+                    :label="t('Electronic invoice')"
+                    v-model="data.hasElectronicInvoice"
+                />
             </VnRow>
         </template>
     </FormModel>
diff --git a/src/pages/Customer/Card/CustomerWebAccess.vue b/src/pages/Customer/Card/CustomerWebAccess.vue
index d3be7bec8..501b0929b 100644
--- a/src/pages/Customer/Card/CustomerWebAccess.vue
+++ b/src/pages/Customer/Card/CustomerWebAccess.vue
@@ -29,31 +29,25 @@ const filter = { where: { id: `${route.params.id}` } };
                 }"
             >
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QCheckbox
-                            :label="t('Enable web access')"
-                            v-model="item.active"
-                        />
-                    </div>
+                    <QCheckbox
+                        :label="t('Enable web access')"
+                        v-model="item.active"
+                    />
                 </VnRow>
 
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnInput :label="t('User')" v-model="item.name" />
-                    </div>
-                    <div class="col">
-                        <VnInput :label="t('Recovery email')" v-model="item.email">
-                            <template #append>
-                                <QIcon name="info" class="cursor-pointer">
-                                    <QTooltip>{{
-                                        t(
-                                            'This email is used for user to regain access their account'
-                                        )
-                                    }}</QTooltip>
-                                </QIcon>
-                            </template>
-                        </VnInput>
-                    </div>
+                    <VnInput :label="t('User')" v-model="item.name" />
+                    <VnInput :label="t('Recovery email')" v-model="item.email">
+                        <template #append>
+                            <QIcon name="info" class="cursor-pointer">
+                                <QTooltip>{{
+                                    t(
+                                        'This email is used for user to regain access their account'
+                                    )
+                                }}</QTooltip>
+                            </QIcon>
+                        </template>
+                    </VnInput>
                 </VnRow>
             </div>
         </template>
diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue
index 5d36c6c37..c8bc4fd3e 100644
--- a/src/pages/Customer/CustomerCreate.vue
+++ b/src/pages/Customer/CustomerCreate.vue
@@ -61,75 +61,57 @@ function handleLocation(data, location) {
         >
             <template #form="{ data, validate }">
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QInput :label="t('Comercial name')" v-model="data.name" />
-                    </div>
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('Salesperson')"
-                            :options="workersOptions"
-                            hide-selected
-                            option-label="name"
-                            option-value="id"
-                            v-model="data.salesPersonFk"
-                        />
-                    </div>
+                    <QInput :label="t('Comercial name')" v-model="data.name" />
+                    <VnSelectFilter
+                        :label="t('Salesperson')"
+                        :options="workersOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.salesPersonFk"
+                    />
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('Business type')"
-                            :options="businessTypesOptions"
-                            hide-selected
-                            option-label="description"
-                            option-value="code"
-                            v-model="data.businessTypeFk"
-                        />
-                    </div>
-                    <div class="col">
-                        <QInput v-model="data.fi" :label="t('Tax number')" />
-                    </div>
+                    <VnSelectFilter
+                        :label="t('Business type')"
+                        :options="businessTypesOptions"
+                        hide-selected
+                        option-label="description"
+                        option-value="code"
+                        v-model="data.businessTypeFk"
+                    />
+                    <QInput v-model="data.fi" :label="t('Tax number')" />
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QInput
-                            :label="t('Business name')"
-                            :rules="validate('Client.socialName')"
-                            v-model="data.socialName"
-                        />
-                    </div>
+                    <QInput
+                        :label="t('Business name')"
+                        :rules="validate('Client.socialName')"
+                        v-model="data.socialName"
+                    />
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QInput
-                            :label="t('Street')"
-                            :rules="validate('Client.street')"
-                            v-model="data.street"
-                        />
-                    </div>
+                    <QInput
+                        :label="t('Street')"
+                        :rules="validate('Client.street')"
+                        v-model="data.street"
+                    />
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnLocation
-                            :rules="validate('Worker.postcode')"
-                            :roles-allowed-to-create="['deliveryAssistant']"
-                            :options="postcodesOptions"
-                            v-model="data.location"
-                            @update:model-value="
-                                (location) => handleLocation(data, location)
-                            "
-                        >
-                        </VnLocation>
-                    </div>
+                    <VnLocation
+                        :rules="validate('Worker.postcode')"
+                        :roles-allowed-to-create="['deliveryAssistant']"
+                        :options="postcodesOptions"
+                        v-model="data.location"
+                        @update:model-value="
+                            (location) => handleLocation(data, location)
+                        "
+                    >
+                    </VnLocation>
                 </VnRow>
 
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QInput v-model="data.userName" :label="t('Web user')" />
-                    </div>
-                    <div class="col">
-                        <QInput v-model="data.email" :label="t('Email')" />
-                    </div>
+                    <QInput v-model="data.userName" :label="t('Web user')" />
+                    <QInput v-model="data.email" :label="t('Email')" />
                 </VnRow>
                 <QCheckbox
                     :label="t('Is equalizated')"
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue b/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue
index b150f4d8b..0788dba12 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue
@@ -64,13 +64,11 @@ const onSubmit = async () => {
                         }}
                     </div>
                     <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QInput
-                                :label="t('Message')"
-                                type="textarea"
-                                v-model="newObservation"
-                            />
-                        </div>
+                        <QInput
+                            :label="t('Message')"
+                            type="textarea"
+                            v-model="newObservation"
+                        />
                     </VnRow>
                     <div class="q-mt-lg row justify-end">
                         <QBtn
diff --git a/src/pages/Customer/components/CustomerConsigneeCreate.vue b/src/pages/Customer/components/CustomerConsigneeCreate.vue
index e4302ed65..a35498ec6 100644
--- a/src/pages/Customer/components/CustomerConsigneeCreate.vue
+++ b/src/pages/Customer/components/CustomerConsigneeCreate.vue
@@ -75,79 +75,62 @@ function handleLocation(data, location) {
     >
         <template #form="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QCheckbox :label="t('Default')" v-model="data.isDefaultAddress" />
-                </div>
+                <QCheckbox :label="t('Default')" v-model="data.isDefaultAddress" />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput :label="t('Consignee')" v-model="data.nickname" />
-                </div>
-                <div class="col">
-                    <VnInput :label="t('Street address')" v-model="data.street" />
-                </div>
+                <VnInput :label="t('Consignee')" v-model="data.nickname" />
+                <VnInput :label="t('Street address')" v-model="data.street" />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnLocation
-                        :rules="validate('Worker.postcode')"
-                        :roles-allowed-to-create="['deliveryAssistant']"
-                        :options="postcodesOptions"
-                        v-model="data.location"
-                        @update:model-value="(location) => handleLocation(data, location)"
-                    ></VnLocation>
-                </div>
+                <VnLocation
+                    :rules="validate('Worker.postcode')"
+                    :roles-allowed-to-create="['deliveryAssistant']"
+                    :options="postcodesOptions"
+                    v-model="data.location"
+                    @update:model-value="(location) => handleLocation(data, location)"
+                >
+                </VnLocation>
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Agency')"
-                        :options="agencyModes"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="data.agencyModeFk"
-                    />
-                </div>
+                <VnSelectFilter
+                    :label="t('Agency')"
+                    :options="agencyModes"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    v-model="data.agencyModeFk"
+                />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput :label="t('Phone')" v-model="data.phone" />
-                </div>
-                <div class="col">
-                    <VnInput :label="t('Mobile')" v-model="data.mobile" />
-                </div>
+                <VnInput :label="t('Phone')" v-model="data.phone" />
+                <VnInput :label="t('Mobile')" v-model="data.mobile" />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Incoterms')"
-                        :options="incoterms"
-                        hide-selected
-                        option-label="name"
-                        option-value="code"
-                        v-model="data.incotermsFk"
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectDialog
-                        :label="t('Customs agent')"
-                        :options="customsAgents"
-                        hide-selected
-                        option-label="fiscalName"
-                        option-value="id"
-                        v-model="data.customsAgentFk"
-                    >
-                        <template #form>
-                            <CustomerNewCustomsAgent @on-data-saved="refreshData()" />
-                        </template>
-                    </VnSelectDialog>
-                </div>
+                <VnSelectFilter
+                    :label="t('Incoterms')"
+                    :options="incoterms"
+                    hide-selected
+                    option-label="name"
+                    option-value="code"
+                    v-model="data.incotermsFk"
+                />
+                <VnSelectDialog
+                    :label="t('Customs agent')"
+                    :options="customsAgents"
+                    hide-selected
+                    option-label="fiscalName"
+                    option-value="id"
+                    v-model="data.customsAgentFk"
+                >
+                    <template #form>
+                        <CustomerNewCustomsAgent @on-data-saved="refreshData()" />
+                    </template>
+                </VnSelectDialog>
             </VnRow>
         </template>
     </FormModel>
diff --git a/src/pages/Customer/components/CustomerConsigneeEdit.vue b/src/pages/Customer/components/CustomerConsigneeEdit.vue
index afa6afa5d..803e721c0 100644
--- a/src/pages/Customer/components/CustomerConsigneeEdit.vue
+++ b/src/pages/Customer/components/CustomerConsigneeEdit.vue
@@ -117,91 +117,70 @@ function handleLocation(data, location) {
     >
         <template #form="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QCheckbox :label="t('Enabled')" v-model="data.isActive" />
-                </div>
-                <div class="col">
-                    <QCheckbox
-                        :label="t('Is equalizated')"
-                        v-model="data.isEqualizated"
-                    />
-                </div>
-                <div class="col">
-                    <QCheckbox
-                        :label="t('Is Loginflora allowed')"
-                        v-model="data.isLogifloraAllowed"
-                    />
-                </div>
+                <QCheckbox :label="t('Enabled')" v-model="data.isActive" />
+                <QCheckbox
+                    :label="t('Is equalizated')"
+                    v-model="data.isEqualizated"
+                />
+                <QCheckbox
+                    :label="t('Is Loginflora allowed')"
+                    v-model="data.isLogifloraAllowed"
+                />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput :label="t('Consignee')" v-model="data.nickname" />
-                </div>
-                <div class="col">
-                    <VnInput :label="t('Street address')" v-model="data.street" />
-                </div>
+                <VnInput :label="t('Consignee')" v-model="data.nickname" />
+                <VnInput :label="t('Street address')" v-model="data.street" />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnLocation
-                        :rules="validate('Worker.postcode')"
-                        :roles-allowed-to-create="['deliveryAssistant']"
-                        :options="postcodesOptions"
-                        v-model="data.location"
-                        @update:model-value="(location) => handleLocation(data, location)"
-                    ></VnLocation>
-                </div>
+                <VnLocation
+                    :rules="validate('Worker.postcode')"
+                    :roles-allowed-to-create="['deliveryAssistant']"
+                    :options="postcodesOptions"
+                    v-model="data.location"
+                    @update:model-value="(location) => handleLocation(data, location)"
+                >
+                </VnLocation>
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Agency')"
-                        :options="agencyModes"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="data.agencyModeFk"
-                    />
-                </div>
+                <VnSelectFilter
+                    :label="t('Agency')"
+                    :options="agencyModes"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    v-model="data.agencyModeFk"
+                />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput :label="t('Phone')" v-model="data.phone" />
-                </div>
-                <div class="col">
-                    <VnInput :label="t('Mobile')" v-model="data.mobile" />
-                </div>
+                <VnInput :label="t('Phone')" v-model="data.phone" />
+                <VnInput :label="t('Mobile')" v-model="data.mobile" />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Incoterms')"
-                        :options="incoterms"
-                        hide-selected
-                        option-label="name"
-                        option-value="code"
-                        v-model="data.incotermsFk"
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectDialog
-                        :label="t('Customs agent')"
-                        :options="customsAgents"
-                        hide-selected
-                        option-label="fiscalName"
-                        option-value="id"
-                        v-model="data.customsAgentFk"
-                    >
-                        <template #form>
-                            <CustomsNewCustomsAgent />
-                        </template>
-                    </VnSelectDialog>
-                </div>
+                <VnSelectFilter
+                    :label="t('Incoterms')"
+                    :options="incoterms"
+                    hide-selected
+                    option-label="name"
+                    option-value="code"
+                    v-model="data.incotermsFk"
+                />
+                <VnSelectDialog
+                    :label="t('Customs agent')"
+                    :options="customsAgents"
+                    hide-selected
+                    option-label="fiscalName"
+                    option-value="id"
+                    v-model="data.customsAgentFk"
+                >
+                    <template #form>
+                        <CustomsNewCustomsAgent />
+                    </template>
+                </VnSelectDialog>
             </VnRow>
 
             <h4 class="q-mb-xs">{{ t('Notes') }}</h4>
@@ -210,19 +189,15 @@ function handleLocation(data, location) {
                 class="row q-gutter-md q-mb-md"
                 v-for="(note, index) in notes"
             >
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Observation type')"
-                        :options="observationTypes"
-                        hide-selected
-                        option-label="description"
-                        option-value="id"
-                        v-model="note.observationTypeFk"
-                    />
-                </div>
-                <div class="col">
-                    <VnInput :label="t('Description')" v-model="note.description" />
-                </div>
+                <VnSelectFilter
+                    :label="t('Observation type')"
+                    :options="observationTypes"
+                    hide-selected
+                    option-label="description"
+                    option-value="id"
+                    v-model="note.observationTypeFk"
+                />
+                <VnInput :label="t('Description')" v-model="note.description" />
                 <div class="flex items-center">
                     <QIcon
                         @click.stop="deleteNote(index)"
diff --git a/src/pages/Customer/components/CustomerCreditCreate.vue b/src/pages/Customer/components/CustomerCreditCreate.vue
index 053f0d18a..4b7d8b067 100644
--- a/src/pages/Customer/components/CustomerCreditCreate.vue
+++ b/src/pages/Customer/components/CustomerCreditCreate.vue
@@ -33,13 +33,11 @@ const toCustomerCredits = () => {
     >
         <template #form="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QInput
-                        :label="t('Credit')"
-                        type="number"
-                        v-model.number="data.credit"
-                    />
-                </div>
+                <QInput
+                    :label="t('Credit')"
+                    type="number"
+                    v-model.number="data.credit"
+                />
             </VnRow>
         </template>
     </FormModel>
diff --git a/src/pages/Customer/components/CustomerGreugeCreate.vue b/src/pages/Customer/components/CustomerGreugeCreate.vue
index 1ff467d97..0fe011eff 100644
--- a/src/pages/Customer/components/CustomerGreugeCreate.vue
+++ b/src/pages/Customer/components/CustomerGreugeCreate.vue
@@ -49,28 +49,20 @@ const toCustomerGreuges = () => {
     >
         <template #form="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput :label="t('Amount')" type="number" v-model="data.amount" />
-                </div>
-                <div class="col">
-                    <VnInputDate :label="t('Date')" v-model="data.shipped" />
-                </div>
+                <VnInput :label="t('Amount')" type="number" v-model="data.amount" />
+                <VnInputDate :label="t('Date')" v-model="data.shipped" />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput :label="t('Comment')" v-model="data.description" />
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Type')"
-                        :options="greugeTypes"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="data.greugeTypeFk"
-                    />
-                </div>
+                <VnInput :label="t('Comment')" v-model="data.description" />
+                <VnSelectFilter
+                    :label="t('Type')"
+                    :options="greugeTypes"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    v-model="data.greugeTypeFk"
+                />
             </VnRow>
         </template>
     </FormModel>
diff --git a/src/pages/Customer/components/CustomerNewCustomsAgent.vue b/src/pages/Customer/components/CustomerNewCustomsAgent.vue
index b8b83e763..64dcb2e04 100644
--- a/src/pages/Customer/components/CustomerNewCustomsAgent.vue
+++ b/src/pages/Customer/components/CustomerNewCustomsAgent.vue
@@ -32,24 +32,16 @@ const onDataSaved = (dataSaved) => {
     >
         <template #form-inputs="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput :label="t('NIF')" :required="true" v-model="data.nif" />
-                </div>
-                <div class="col">
-                    <VnInput
-                        :label="t('Fiscal name')"
-                        :required="true"
-                        v-model="data.fiscalName"
-                    />
-                </div>
+                <VnInput :label="t('NIF')" :required="true" v-model="data.nif" />
+                <VnInput
+                    :label="t('Fiscal name')"
+                    :required="true"
+                    v-model="data.fiscalName"
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput :label="t('Street')" v-model="data.street" />
-                </div>
-                <div class="col">
-                    <VnInput :label="t('Phone')" v-model="data.phone" />
-                </div>
+                <VnInput :label="t('Street')" v-model="data.street" />
+                <VnInput :label="t('Phone')" v-model="data.phone" />
             </VnRow>
         </template>
     </FormModelPopup>
diff --git a/src/pages/Customer/components/CustomerNewPayment.vue b/src/pages/Customer/components/CustomerNewPayment.vue
index a141618d0..4df39e5ca 100644
--- a/src/pages/Customer/components/CustomerNewPayment.vue
+++ b/src/pages/Customer/components/CustomerNewPayment.vue
@@ -138,14 +138,11 @@ const onDataSaved = async () => {
                 </h5>
 
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
                         <VnInputDate
                             :label="t('Date')"
                             :required="true"
                             v-model="data.payed"
                         />
-                    </div>
-                    <div class="col">
                         <VnSelectFilter
                             :label="t('Company')"
                             :options="companyOptions"
@@ -155,41 +152,36 @@ const onDataSaved = async () => {
                             option-value="id"
                             v-model="data.companyFk"
                         />
-                    </div>
                 </VnRow>
 
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('Bank')"
-                            :options="bankOptions"
-                            :required="true"
-                            @update:model-value="setPaymentType($event)"
-                            hide-selected
-                            option-label="bank"
-                            option-value="id"
-                            v-model="data.bankFk"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>
-                                            {{ scope.opt.id }}:&ensp;{{ scope.opt.bank }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectFilter>
-                    </div>
-                    <div class="col">
-                        <VnInput
-                            :label="t('Amount')"
-                            :required="true"
-                            @update:model-value="calculateFromAmount($event)"
-                            type="number"
-                            v-model.number="data.amountPaid"
-                        />
-                    </div>
+                    <VnSelectFilter
+                        :label="t('Bank')"
+                        :options="bankOptions"
+                        :required="true"
+                        @update:model-value="setPaymentType($event)"
+                        hide-selected
+                        option-label="bank"
+                        option-value="id"
+                        v-model="data.bankFk"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>
+                                        {{ scope.opt.id }}:&ensp;{{ scope.opt.bank }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                    <VnInput
+                        :label="t('Amount')"
+                        :required="true"
+                        @update:model-value="calculateFromAmount($event)"
+                        type="number"
+                        v-model.number="data.amountPaid"
+                    />
                 </VnRow>
 
                 <div class="text-h6" v-if="data.bankFk === 3 || data.bankFk === 3117">
@@ -203,44 +195,34 @@ const onDataSaved = async () => {
                             v-model="data.compensationAccount"
                         />
                     </div>
-                    <div class="col">
-                        <VnInput
-                            :label="t('Reference')"
-                            :required="true"
-                            v-model="data.description"
-                        />
-                    </div>
+                    <VnInput
+                        :label="t('Reference')"
+                        :required="true"
+                        v-model="data.description"
+                    />
                 </VnRow>
 
                 <div class="q-mt-lg" v-if="data.bankFk === 2">
                     <div class="text-h6">{{ t('Cash') }}</div>
 
                     <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <VnInput
-                                :label="t('Delivered amount')"
-                                @update:model-value="calculateFromDeliveredAmount($event)"
-                                type="number"
-                                v-model="deliveredAmount"
-                            />
-                        </div>
-                        <div class="col">
-                            <VnInput
-                                :label="t('Amount to return')"
-                                disable
-                                type="number"
-                                v-model="amountToReturn"
-                            />
-                        </div>
+                        <VnInput
+                            :label="t('Delivered amount')"
+                            @update:model-value="calculateFromDeliveredAmount($event)"
+                            type="number"
+                            v-model="deliveredAmount"
+                        />
+                        <VnInput
+                            :label="t('Amount to return')"
+                            disable
+                            type="number"
+                            v-model="amountToReturn"
+                        />
                     </VnRow>
 
                     <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QCheckbox v-model="viewRecipt" />
-                        </div>
-                        <div class="col">
-                            <QCheckbox v-model="sendEmail" />
-                        </div>
+                        <QCheckbox v-model="viewRecipt" />
+                        <QCheckbox v-model="sendEmail" />
                     </VnRow>
                 </div>
 
diff --git a/src/pages/Customer/components/CustomerNoteCreate.vue b/src/pages/Customer/components/CustomerNoteCreate.vue
index 640f6f3a0..c95ab2d20 100644
--- a/src/pages/Customer/components/CustomerNoteCreate.vue
+++ b/src/pages/Customer/components/CustomerNoteCreate.vue
@@ -37,9 +37,7 @@ const toCustomerNotes = () => {
     >
         <template #form="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QInput :label="t('Note')" type="textarea" v-model="data.text" />
-                </div>
+                <QInput :label="t('Note')" type="textarea" v-model="data.text" />
             </VnRow>
         </template>
     </FormModel>
diff --git a/src/pages/Customer/components/CustomerRecoverieCreate.vue b/src/pages/Customer/components/CustomerRecoverieCreate.vue
index ed7304be0..0b7409358 100644
--- a/src/pages/Customer/components/CustomerRecoverieCreate.vue
+++ b/src/pages/Customer/components/CustomerRecoverieCreate.vue
@@ -43,21 +43,13 @@ const toCustomerRecoveries = () => {
     >
         <template #form="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInputDate :label="t('Since')" v-model="data.started" />
-                </div>
-                <div class="col">
-                    <VnInputDate :label="t('To')" v-model="data.finished" />
-                </div>
+                <VnInputDate :label="t('Since')" v-model="data.started" />
+                <VnInputDate :label="t('To')" v-model="data.finished" />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput :label="t('Amount')" type="number" v-model="data.amount" />
-                </div>
-                <div class="col">
-                    <VnInput :label="t('Period')" type="number" v-model="data.period" />
-                </div>
+                <VnInput :label="t('Amount')" type="number" v-model="data.amount" />
+                <VnInput :label="t('Period')" type="number" v-model="data.period" />
             </VnRow>
         </template>
     </FormModel>
diff --git a/src/pages/Department/Card/DepartmentBasicData.vue b/src/pages/Department/Card/DepartmentBasicData.vue
index 3b30a97e6..7c4d39c84 100644
--- a/src/pages/Department/Card/DepartmentBasicData.vue
+++ b/src/pages/Department/Card/DepartmentBasicData.vue
@@ -30,105 +30,83 @@ const clientsOptions = ref([]);
     >
         <template #form="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        :label="t('department.name')"
-                        v-model="data.name"
-                        :rules="validate('department.name')"
-                        clearable
-                        autofocus
-                    />
-                </div>
-                <div class="col">
-                    <VnInput
-                        v-model="data.code"
-                        :label="t('department.code')"
-                        :rules="validate('department.code')"
-                        clearable
-                    />
-                </div>
+                <VnInput
+                    :label="t('department.name')"
+                    v-model="data.name"
+                    :rules="validate('department.name')"
+                    clearable
+                    autofocus
+                />
+                <VnInput
+                    v-model="data.code"
+                    :label="t('department.code')"
+                    :rules="validate('department.code')"
+                    clearable
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        :label="t('department.chat')"
-                        v-model="data.chatName"
-                        :rules="validate('department.chat')"
-                        clearable
-                    />
-                </div>
-                <div class="col">
-                    <VnInput
-                        v-model="data.notificationEmail"
-                        :label="t('department.email')"
-                        :rules="validate('department.email')"
-                        clearable
-                    />
-                </div>
+                <VnInput
+                    :label="t('department.chat')"
+                    v-model="data.chatName"
+                    :rules="validate('department.chat')"
+                    clearable
+                />
+                <VnInput
+                    v-model="data.notificationEmail"
+                    :label="t('department.email')"
+                    :rules="validate('department.email')"
+                    clearable
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('department.bossDepartment')"
-                        v-model="data.workerFk"
-                        :options="workersOptions"
-                        option-value="id"
-                        option-label="name"
-                        hide-selected
-                        map-options
-                        :rules="validate('department.workerFk')"
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('department.selfConsumptionCustomer')"
-                        v-model="data.clientFk"
-                        :options="clientsOptions"
-                        option-value="id"
-                        option-label="name"
-                        hide-selected
-                        map-options
-                        :rules="validate('department.clientFk')"
-                    />
-                </div>
+                <VnSelectFilter
+                    :label="t('department.bossDepartment')"
+                    v-model="data.workerFk"
+                    :options="workersOptions"
+                    option-value="id"
+                    option-label="name"
+                    hide-selected
+                    map-options
+                    :rules="validate('department.workerFk')"
+                />
+                <VnSelectFilter
+                    :label="t('department.selfConsumptionCustomer')"
+                    v-model="data.clientFk"
+                    :options="clientsOptions"
+                    option-value="id"
+                    option-label="name"
+                    hide-selected
+                    map-options
+                    :rules="validate('department.clientFk')"
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QCheckbox
-                        :label="t('department.telework')"
-                        v-model="data.isTeleworking"
-                    />
-                </div>
-                <div class="col">
-                    <QCheckbox
-                        :label="t('department.notifyOnErrors')"
-                        v-model="data.hasToMistake"
-                        :false-value="0"
-                        :true-value="1"
-                    />
-                </div>
+                <QCheckbox
+                    :label="t('department.telework')"
+                    v-model="data.isTeleworking"
+                />
+                <QCheckbox
+                    :label="t('department.notifyOnErrors')"
+                    v-model="data.hasToMistake"
+                    :false-value="0"
+                    :true-value="1"
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QCheckbox
-                        :label="t('department.worksInProduction')"
-                        v-model="data.isProduction"
-                    />
-                </div>
-                <div class="col">
-                    <QCheckbox
-                        :label="t('department.hasToRefill')"
-                        v-model="data.hasToRefill"
-                    />
-                </div>
+                <QCheckbox
+                    :label="t('department.worksInProduction')"
+                    v-model="data.isProduction"
+                />
+                <QCheckbox
+                    :label="t('department.hasToRefill')"
+                    v-model="data.hasToRefill"
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QCheckbox
-                        :label="t('department.hasToSendMail')"
-                        v-model="data.hasToSendMail"
-                    />
-                </div>
+                <QCheckbox
+                    :label="t('department.hasToSendMail')"
+                    v-model="data.hasToSendMail"
+                />
             </VnRow>
         </template>
     </FormModel>
diff --git a/src/pages/Entry/Card/EntryBasicData.vue b/src/pages/Entry/Card/EntryBasicData.vue
index 4a8cf154a..c8832fd4c 100644
--- a/src/pages/Entry/Card/EntryBasicData.vue
+++ b/src/pages/Entry/Card/EntryBasicData.vue
@@ -65,151 +65,125 @@ const onFilterTravelSelected = (formData, id) => {
     >
         <template #form="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('entry.basicData.supplier')"
-                        v-model="data.supplierFk"
-                        :options="suppliersOptions"
-                        option-value="id"
-                        option-label="nickname"
-                        hide-selected
-                        :required="true"
-                        map-options
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
-                                    <QItemLabel caption>
-                                        {{ scope.opt?.nickname }}, {{ scope.opt?.id }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
-                </div>
-                <div class="col">
-                    <VnSelectDialog
-                        :label="t('entry.basicData.travel')"
-                        v-model="data.travelFk"
-                        :options="travelsOptions"
-                        option-value="id"
-                        option-label="warehouseInName"
-                        map-options
-                        hide-selected
-                        :required="true"
-                        action-icon="filter_alt"
-                    >
-                        <template #form>
-                            <FilterTravelForm
-                                @travel-selected="onFilterTravelSelected(data, $event)"
-                            />
-                        </template>
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel
-                                        >{{ scope.opt?.agencyModeName }} -
-                                        {{ scope.opt?.warehouseInName }} ({{
-                                            toDate(scope.opt?.shipped)
-                                        }}) &#x2192; {{ scope.opt?.warehouseOutName }} ({{
-                                            toDate(scope.opt?.landed)
-                                        }})</QItemLabel
-                                    >
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectDialog>
-                </div>
+                <VnSelectFilter
+                    :label="t('entry.basicData.supplier')"
+                    v-model="data.supplierFk"
+                    :options="suppliersOptions"
+                    option-value="id"
+                    option-label="nickname"
+                    hide-selected
+                    :required="true"
+                    map-options
+                >
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            <QItemSection>
+                                <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
+                                <QItemLabel caption>
+                                    {{ scope.opt?.nickname }}, {{ scope.opt?.id }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelectFilter>
+                <VnSelectDialog
+                    :label="t('entry.basicData.travel')"
+                    v-model="data.travelFk"
+                    :options="travelsOptions"
+                    option-value="id"
+                    option-label="warehouseInName"
+                    map-options
+                    hide-selected
+                    :required="true"
+                    action-icon="filter_alt"
+                >
+                    <template #form>
+                        <FilterTravelForm
+                            @travel-selected="onFilterTravelSelected(data, $event)"
+                        />
+                    </template>
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            <QItemSection>
+                                <QItemLabel
+                                    >{{ scope.opt?.agencyModeName }} -
+                                    {{ scope.opt?.warehouseInName }} ({{
+                                        toDate(scope.opt?.shipped)
+                                    }}) &#x2192; {{ scope.opt?.warehouseOutName }} ({{
+                                        toDate(scope.opt?.landed)
+                                    }})</QItemLabel
+                                >
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelectDialog>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.reference"
-                        :label="t('entry.basicData.reference')"
-                    />
-                </div>
+                <VnInput
+                    v-model="data.reference"
+                    :label="t('entry.basicData.reference')"
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.invoiceNumber"
-                        :label="t('entry.basicData.invoiceNumber')"
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('entry.basicData.company')"
-                        v-model="data.companyFk"
-                        :options="companiesOptions"
-                        option-value="id"
-                        option-label="code"
-                        map-options
-                        hide-selected
-                        :required="true"
-                    />
-                </div>
+                <VnInput
+                    v-model="data.invoiceNumber"
+                    :label="t('entry.basicData.invoiceNumber')"
+                />
+                <VnSelectFilter
+                    :label="t('entry.basicData.company')"
+                    v-model="data.companyFk"
+                    :options="companiesOptions"
+                    option-value="id"
+                    option-label="code"
+                    map-options
+                    hide-selected
+                    :required="true"
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('entry.basicData.currency')"
-                        v-model="data.currencyFk"
-                        :options="currenciesOptions"
-                        option-value="id"
-                        option-label="code"
-                    />
-                </div>
-                <div class="col">
-                    <QInput
-                        :label="t('entry.basicData.commission')"
-                        v-model="data.commission"
-                        type="number"
-                        autofocus
-                        min="0"
-                    />
-                </div>
+                <VnSelectFilter
+                    :label="t('entry.basicData.currency')"
+                    v-model="data.currencyFk"
+                    :options="currenciesOptions"
+                    option-value="id"
+                    option-label="code"
+                />
+                <QInput
+                    :label="t('entry.basicData.commission')"
+                    v-model="data.commission"
+                    type="number"
+                    autofocus
+                    min="0"
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QInput
-                        :label="t('entry.basicData.observation')"
-                        type="textarea"
-                        v-model="data.observation"
-                        :maxlength="45"
-                        counter
-                        fill-input
-                    />
-                </div>
+                <QInput
+                    :label="t('entry.basicData.observation')"
+                    type="textarea"
+                    v-model="data.observation"
+                    :maxlength="45"
+                    counter
+                    fill-input
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QCheckbox
-                        v-model="data.isOrdered"
-                        :label="t('entry.basicData.ordered')"
-                    />
-                </div>
-                <div class="col">
-                    <QCheckbox
-                        v-model="data.isConfirmed"
-                        :label="t('entry.basicData.confirmed')"
-                    />
-                </div>
-                <div class="col">
-                    <QCheckbox
-                        v-model="data.isExcludedFromAvailable"
-                        :label="t('entry.basicData.excludedFromAvailable')"
-                    />
-                </div>
-                <div class="col">
-                    <QCheckbox v-model="data.isRaid" :label="t('entry.basicData.raid')" />
-                </div>
-                <div class="col">
-                    <QCheckbox
-                        v-model="data.isBooked"
-                        :label="t('entry.basicData.booked')"
-                    />
-                </div>
+                <QCheckbox
+                    v-model="data.isOrdered"
+                    :label="t('entry.basicData.ordered')"
+                />
+                <QCheckbox
+                    v-model="data.isConfirmed"
+                    :label="t('entry.basicData.confirmed')"
+                />
+                <QCheckbox
+                    v-model="data.isExcludedFromAvailable"
+                    :label="t('entry.basicData.excludedFromAvailable')"
+                />
+                <QCheckbox v-model="data.isRaid" :label="t('entry.basicData.raid')" />
+                <QCheckbox
+                    v-model="data.isBooked"
+                    :label="t('entry.basicData.booked')"
+                />
             </VnRow>
         </template>
     </FormModel>
diff --git a/src/pages/Entry/Card/EntryBuysImport.vue b/src/pages/Entry/Card/EntryBuysImport.vue
index bd09eabe8..03c1e1c9c 100644
--- a/src/pages/Entry/Card/EntryBuysImport.vue
+++ b/src/pages/Entry/Card/EntryBuysImport.vue
@@ -198,44 +198,38 @@ const redirectToBuysView = () => {
         </Teleport>
         <QCard class="q-pa-lg">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QFile
-                        ref="inputFileRef"
-                        :label="t('entry.buys.file')"
-                        v-model="importData.file"
-                        :multiple="false"
-                        accept=".json"
-                        @update:model-value="onFileChange($event)"
-                        class="required"
-                    >
-                        <template #append>
-                            <QIcon
-                                name="vn:attach"
-                                class="cursor-pointer"
-                                @click="inputFileRef.pickFiles()"
-                            >
-                                <QTooltip>{{ t('globals.selectFile') }}</QTooltip>
-                            </QIcon>
-                        </template>
-                    </QFile>
-                </div>
+                <QFile
+                    ref="inputFileRef"
+                    :label="t('entry.buys.file')"
+                    v-model="importData.file"
+                    :multiple="false"
+                    accept=".json"
+                    @update:model-value="onFileChange($event)"
+                    class="required"
+                >
+                    <template #append>
+                        <QIcon
+                            name="vn:attach"
+                            class="cursor-pointer"
+                            @click="inputFileRef.pickFiles()"
+                        >
+                            <QTooltip>{{ t('globals.selectFile') }}</QTooltip>
+                        </QIcon>
+                    </template>
+                </QFile>
             </VnRow>
             <div v-if="importData.file">
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnInput
-                            :label="t('entry.buys.reference')"
-                            v-model="importData.ref"
-                        />
-                    </div>
+                    <VnInput
+                        :label="t('entry.buys.reference')"
+                       v-model="importData.ref"
+                    />
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnInput
-                            :label="t('entry.buys.observations')"
-                            v-model="importData.observation"
-                        />
-                    </div>
+                    <VnInput
+                        :label="t('entry.buys.observations')"
+                        v-model="importData.observation"
+                    />
                 </VnRow>
                 <VnRow>
                     <QTable :columns="columns" :rows="importData.buys">
diff --git a/src/pages/Entry/EntryCreate.vue b/src/pages/Entry/EntryCreate.vue
index 8c434217a..f98b21edb 100644
--- a/src/pages/Entry/EntryCreate.vue
+++ b/src/pages/Entry/EntryCreate.vue
@@ -79,78 +79,72 @@ const redirectToEntryBasicData = (_, { id }) => {
         >
             <template #form="{ data, validate }">
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('Supplier')"
-                            class="full-width"
-                            v-model="data.supplierFk"
-                            :options="suppliersOptions"
-                            option-value="id"
-                            option-label="nickname"
-                            hide-selected
-                            :required="true"
-                            :rules="validate('entry.supplierFk')"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
-                                        <QItemLabel caption>
-                                            #{{ scope.opt?.id }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectFilter>
-                    </div>
+                    <VnSelectFilter
+                        :label="t('Supplier')"
+                        class="full-width"
+                        v-model="data.supplierFk"
+                        :options="suppliersOptions"
+                        option-value="id"
+                        option-label="nickname"
+                        hide-selected
+                        :required="true"
+                        :rules="validate('entry.supplierFk')"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        #{{ scope.opt?.id }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('Travel')"
-                            class="full-width"
-                            v-model="data.travelFk"
-                            :options="travelsOptions"
-                            option-value="id"
-                            option-label="warehouseInName"
-                            map-options
-                            hide-selected
-                            :required="true"
-                            :rules="validate('entry.travelFk')"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel
-                                            >{{ scope.opt?.agencyModeName }} -
-                                            {{ scope.opt?.warehouseInName }} ({{
-                                                toDate(scope.opt?.shipped)
-                                            }}) &#x2192;
-                                            {{ scope.opt?.warehouseOutName }} ({{
-                                                toDate(scope.opt?.landed)
-                                            }})</QItemLabel
-                                        >
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectFilter>
-                    </div>
+                    <VnSelectFilter
+                        :label="t('Travel')"
+                        class="full-width"
+                        v-model="data.travelFk"
+                        :options="travelsOptions"
+                        option-value="id"
+                        option-label="warehouseInName"
+                        map-options
+                        hide-selected
+                        :required="true"
+                        :rules="validate('entry.travelFk')"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel
+                                        >{{ scope.opt?.agencyModeName }} -
+                                        {{ scope.opt?.warehouseInName }} ({{
+                                            toDate(scope.opt?.shipped)
+                                        }}) &#x2192;
+                                        {{ scope.opt?.warehouseOutName }} ({{
+                                            toDate(scope.opt?.landed)
+                                        }})</QItemLabel
+                                    >
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('Company')"
-                            class="full-width"
-                            v-model="data.companyFk"
-                            :options="companiesOptions"
-                            option-value="id"
-                            option-label="code"
-                            map-options
-                            hide-selected
-                            :required="true"
-                            :rules="validate('entry.companyFk')"
-                        />
-                    </div>
+                    <VnSelectFilter
+                        :label="t('Company')"
+                        class="full-width"
+                        v-model="data.companyFk"
+                        :options="companiesOptions"
+                        option-value="id"
+                        option-label="code"
+                        map-options
+                        hide-selected
+                        :required="true"
+                        :rules="validate('entry.companyFk')"
+                    />
                 </VnRow>
             </template>
         </FormModel>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
index f557c8ef4..f4fd59b4c 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
@@ -182,252 +182,229 @@ async function upsert() {
     >
         <template #form="{ data }">
             <div class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('supplierFk')"
-                        v-model="data.supplierFk"
-                        option-value="id"
-                        option-label="nickname"
-                        url="Suppliers"
-                        :fields="['id', 'nickname']"
-                        sort-by="nickname"
-                        :is-clearable="false"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{
-                                        `${scope.opt.id} - ${scope.opt.nickname}`
-                                    }}</QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
-                </div>
-                <div class="col">
-                    <QInput
-                        clearable
-                        clear-icon="close"
-                        :label="t('Supplier ref')"
-                        v-model="data.supplierRef"
-                    />
-                </div>
+                <VnSelectFilter
+                    :label="t('supplierFk')"
+                    v-model="data.supplierFk"
+                    option-value="id"
+                    option-label="nickname"
+                    url="Suppliers"
+                    :fields="['id', 'nickname']"
+                    sort-by="nickname"
+                    :is-clearable="false"
+                >
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            <QItemSection>
+                                <QItemLabel>{{
+                                    `${scope.opt.id} - ${scope.opt.nickname}`
+                                }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelectFilter>
+                <QInput
+                    clearable
+                    clear-icon="close"
+                    :label="t('Supplier ref')"
+                    v-model="data.supplierRef"
+                />
             </div>
             <div class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QInput
-                        :label="t('Expedition date')"
-                        v-model="data.issued"
-                        :mask="dateMask"
-                    >
-                        <template #append>
-                            <QIcon
-                                name="event"
-                                class="cursor-pointer"
-                                :fill-mask="fillMask"
+                <QInput
+                    :label="t('Expedition date')"
+                    v-model="data.issued"
+                    :mask="dateMask"
+                >
+                    <template #append>
+                        <QIcon
+                            name="event"
+                            class="cursor-pointer"
+                            :fill-mask="fillMask"
+                        >
+                            <QPopupProxy
+                                cover
+                                transition-show="scale"
+                                transition-hide="scale"
                             >
-                                <QPopupProxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <QDate v-model="data.issued">
-                                        <div class="row items-center justify-end">
-                                            <QBtn
-                                                v-close-popup
-                                                label="Close"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </QDate>
-                                </QPopupProxy>
-                            </QIcon>
-                        </template>
-                    </QInput>
-                </div>
-                <div class="col">
-                    <QInput
-                        :label="t('Operation date')"
-                        v-model="data.operated"
-                        :mask="dateMask"
-                        :fill-mask="fillMask"
-                        autofocus
-                    >
-                        <template #append>
-                            <QIcon name="event" class="cursor-pointer">
-                                <QPopupProxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <QDate v-model="data.operated" :mask="dateMask">
-                                        <div class="row items-center justify-end">
-                                            <QBtn
-                                                v-close-popup
-                                                label="Close"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </QDate>
-                                </QPopupProxy>
-                            </QIcon>
-                        </template>
-                    </QInput>
-                </div>
-            </div>
-            <div class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QInput
-                        :label="t('Undeductible VAT')"
-                        v-model="data.deductibleExpenseFk"
-                        clearable
-                        clear-icon="close"
-                    />
-                </div>
-                <div class="col">
-                    <QInput
-                        :label="t('Document')"
-                        v-model="data.dmsFk"
-                        clearable
-                        clear-icon="close"
-                        @update:model-value="checkFileExists(data.dmsFk)"
-                    >
-                        <template #prepend>
-                            <QBtn
-                                v-if="data.dmsFk"
-                                :class="{
-                                    'no-pointer-events': editDownloadDisabled,
-                                }"
-                                :disable="editDownloadDisabled"
-                                icon="cloud_download"
-                                :title="t('Download file')"
-                                padding="xs"
-                                round
-                                @click="downloadFile(data.dmsFk)"
-                            />
-                        </template>
-                        <template #append>
-                            <QBtn
-                                :class="{
-                                    'no-pointer-events': editDownloadDisabled,
-                                }"
-                                :disable="editDownloadDisabled"
-                                v-if="data.dmsFk"
-                                icon="edit"
-                                round
-                                padding="xs"
-                                @click="setEditDms(data.dmsFk)"
+                                <QDate v-model="data.issued">
+                                    <div class="row items-center justify-end">
+                                        <QBtn
+                                            v-close-popup
+                                            label="Close"
+                                            color="primary"
+                                            flat
+                                        />
+                                    </div>
+                                </QDate>
+                            </QPopupProxy>
+                        </QIcon>
+                    </template>
+                </QInput>
+                <QInput
+                    :label="t('Operation date')"
+                    v-model="data.operated"
+                    :mask="dateMask"
+                    :fill-mask="fillMask"
+                    autofocus
+                >
+                    <template #append>
+                        <QIcon name="event" class="cursor-pointer">
+                            <QPopupProxy
+                                cover
+                                transition-show="scale"
+                                transition-hide="scale"
                             >
-                                <QTooltip>{{ t('Edit document') }}</QTooltip>
-                            </QBtn>
-                            <QBtn
-                                v-else
-                                icon="add_circle"
-                                round
-                                padding="xs"
-                                @click="setCreateDms()"
+                                <QDate v-model="data.operated" :mask="dateMask">
+                                    <div class="row items-center justify-end">
+                                        <QBtn
+                                            v-close-popup
+                                            label="Close"
+                                            color="primary"
+                                            flat
+                                        />
+                                    </div>
+                                </QDate>
+                            </QPopupProxy>
+                        </QIcon>
+                    </template>
+                </QInput>
+            </div>
+            <div class="row q-gutter-md q-mb-md">
+                <QInput
+                    :label="t('Undeductible VAT')"
+                    v-model="data.deductibleExpenseFk"
+                    clearable
+                    clear-icon="close"
+                />
+                <QInput
+                    :label="t('Document')"
+                    v-model="data.dmsFk"
+                    clearable
+                    clear-icon="close"
+                    @update:model-value="checkFileExists(data.dmsFk)"
+                >
+                    <template #prepend>
+                        <QBtn
+                            v-if="data.dmsFk"
+                            :class="{
+                                'no-pointer-events': editDownloadDisabled,
+                            }"
+                            :disable="editDownloadDisabled"
+                            icon="cloud_download"
+                            :title="t('Download file')"
+                            padding="xs"
+                            round
+                            @click="downloadFile(data.dmsFk)"
+                        />
+                    </template>
+                    <template #append>
+                        <QBtn
+                            :class="{
+                                'no-pointer-events': editDownloadDisabled,
+                            }"
+                            :disable="editDownloadDisabled"
+                            v-if="data.dmsFk"
+                            icon="edit"
+                            round
+                            padding="xs"
+                            @click="setEditDms(data.dmsFk)"
+                        >
+                            <QTooltip>{{ t('Edit document') }}</QTooltip>
+                        </QBtn>
+                        <QBtn
+                            v-else
+                            icon="add_circle"
+                            round
+                            padding="xs"
+                            @click="setCreateDms()"
+                        >
+                            <QTooltip>{{ t('Create document') }}</QTooltip>
+                        </QBtn>
+                    </template>
+                </QInput>
+            </div>
+            <div class="row q-gutter-md q-mb-md">
+                <QInput
+                    :label="t('Entry date')"
+                    v-model="data.bookEntried"
+                    clearable
+                    clear-icon="close"
+                    :mask="dateMask"
+                    :fill-mask="fillMask"
+                >
+                    <template #append>
+                        <QIcon name="event" class="cursor-pointer">
+                            <QPopupProxy
+                                cover
+                                transition-show="scale"
+                                transition-hide="scale"
                             >
-                                <QTooltip>{{ t('Create document') }}</QTooltip>
-                            </QBtn>
-                        </template>
-                    </QInput>
-                </div>
+                                <QDate v-model="data.bookEntried" :mask="dateMask">
+                                    <div class="row items-center justify-end">
+                                        <QBtn
+                                            v-close-popup
+                                            label="Close"
+                                            color="primary"
+                                            flat
+                                        />
+                                    </div>
+                                </QDate>
+                            </QPopupProxy>
+                        </QIcon>
+                    </template>
+                </QInput>
+                <QInput
+                    :label="t('Accounted date')"
+                    v-model="data.booked"
+                    clearable
+                    clear-icon="close"
+                    :mask="dateMask"
+                    :fill-mask="fillMask"
+                >
+                    <template #append>
+                        <QIcon name="event" class="cursor-pointer">
+                            <QPopupProxy
+                                cover
+                                transition-show="scale"
+                                transition-hide="scale"
+                            >
+                                <QDate v-model="data.booked" :mask="maskDate">
+                                    <div class="row items-center justify-end">
+                                        <QBtn
+                                            v-close-popup
+                                            label="Close"
+                                            color="primary"
+                                            flat
+                                        />
+                                    </div>
+                                </QDate>
+                            </QPopupProxy>
+                        </QIcon>
+                    </template>
+                </QInput>
             </div>
             <div class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QInput
-                        :label="t('Entry date')"
-                        v-model="data.bookEntried"
-                        clearable
-                        clear-icon="close"
-                        :mask="dateMask"
-                        :fill-mask="fillMask"
-                    >
-                        <template #append>
-                            <QIcon name="event" class="cursor-pointer">
-                                <QPopupProxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <QDate v-model="data.bookEntried" :mask="dateMask">
-                                        <div class="row items-center justify-end">
-                                            <QBtn
-                                                v-close-popup
-                                                label="Close"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </QDate>
-                                </QPopupProxy>
-                            </QIcon>
-                        </template>
-                    </QInput>
-                </div>
-                <div class="col">
-                    <QInput
-                        :label="t('Accounted date')"
-                        v-model="data.booked"
-                        clearable
-                        clear-icon="close"
-                        :mask="dateMask"
-                        :fill-mask="fillMask"
-                    >
-                        <template #append>
-                            <QIcon name="event" class="cursor-pointer">
-                                <QPopupProxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <QDate v-model="data.booked" :mask="maskDate">
-                                        <div class="row items-center justify-end">
-                                            <QBtn
-                                                v-close-popup
-                                                label="Close"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </QDate>
-                                </QPopupProxy>
-                            </QIcon>
-                        </template>
-                    </QInput>
-                </div>
+                <VnSelectFilter
+                    :label="t('Currency')"
+                    v-model="data.currencyFk"
+                    :options="currencies"
+                    option-value="id"
+                    option-label="code"
+                />
+                <VnSelectFilter
+                    v-if="companiesRef"
+                    :label="t('Company')"
+                    v-model="data.companyFk"
+                    :options="companies"
+                    option-value="id"
+                    option-label="code"
+                />
             </div>
             <div class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Currency')"
-                        v-model="data.currencyFk"
-                        :options="currencies"
-                        option-value="id"
-                        option-label="code"
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        v-if="companiesRef"
-                        :label="t('Company')"
-                        v-model="data.companyFk"
-                        :options="companies"
-                        option-value="id"
-                        option-label="code"
-                    />
-                </div>
-            </div>
-            <div class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QCheckbox
-                        :label="t('invoiceIn.summary.booked')"
-                        v-model="data.isBooked"
-                    />
-                </div>
-                <div class="col"></div>
+                <QCheckbox
+                    :label="t('invoiceIn.summary.booked')"
+                    v-model="data.isBooked"
+                />
             </div>
         </template>
     </FormModel>
diff --git a/src/pages/Order/Card/OrderForm.vue b/src/pages/Order/Card/OrderForm.vue
index 42aee7640..a61547d27 100644
--- a/src/pages/Order/Card/OrderForm.vue
+++ b/src/pages/Order/Card/OrderForm.vue
@@ -126,81 +126,73 @@ const orderFilter = {
         >
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('order.form.clientFk')"
-                            v-model="data.clientFk"
-                            :options="clientList"
-                            option-value="id"
-                            option-label="name"
-                            hide-selected
-                            @update:model-value="
-                                (client) => fetchAddressList(client.defaultAddressFk)
-                            "
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>
-                                            {{ `${scope.opt.id}: ${scope.opt.name}` }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectFilter>
-                    </div>
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('order.form.addressFk')"
-                            v-model="data.addressFk"
-                            :options="addressList"
-                            option-value="id"
-                            option-label="nickname"
-                            hide-selected
-                            :disable="!addressList?.length"
-                            @update:model-value="
-                                () => fetchAgencyList(data.landed, data.addressFk)
-                            "
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>
-                                            {{
-                                                `${scope.opt.nickname}: ${scope.opt.street},${scope.opt.city}`
-                                            }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectFilter>
-                    </div>
+                    <VnSelectFilter
+                        :label="t('order.form.clientFk')"
+                        v-model="data.clientFk"
+                        :options="clientList"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        @update:model-value="
+                            (client) => fetchAddressList(client.defaultAddressFk)
+                        "
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>
+                                        {{ `${scope.opt.id}: ${scope.opt.name}` }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                    <VnSelectFilter
+                        :label="t('order.form.addressFk')"
+                        v-model="data.addressFk"
+                        :options="addressList"
+                        option-value="id"
+                        option-label="nickname"
+                        hide-selected
+                        :disable="!addressList?.length"
+                        @update:model-value="
+                            () => fetchAgencyList(data.landed, data.addressFk)
+                        "
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>
+                                        {{
+                                            `${scope.opt.nickname}: ${scope.opt.street},${scope.opt.city}`
+                                        }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnInputDate
-                            placeholder="dd-mm-aaa"
-                            :label="t('order.form.landed')"
-                            v-model="data.landed"
-                            @update:model-value="
-                                () => fetchAgencyList(data.landed, data.addressFk)
-                            "
-                        />
-                    </div>
+                    <VnInputDate
+                        placeholder="dd-mm-aaa"
+                        :label="t('order.form.landed')"
+                        v-model="data.landed"
+                        @update:model-value="
+                            () => fetchAgencyList(data.landed, data.addressFk)
+                        "
+                    />
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('order.form.agencyModeFk')"
-                            v-model="data.agencyModeFk"
-                            :options="agencyList"
-                            option-value="agencyModeFk"
-                            option-label="agencyMode"
-                            hide-selected
-                            :disable="!agencyList?.length"
-                        >
-                        </VnSelectFilter>
-                    </div>
+                    <VnSelectFilter
+                        :label="t('order.form.agencyModeFk')"
+                        v-model="data.agencyModeFk"
+                        :options="agencyList"
+                        option-value="agencyModeFk"
+                        option-label="agencyMode"
+                        hide-selected
+                        :disable="!agencyList?.length"
+                    >
+                    </VnSelectFilter>
                 </VnRow>
             </template>
         </FormModel>
diff --git a/src/pages/Route/Card/RouteForm.vue b/src/pages/Route/Card/RouteForm.vue
index 60693cbf1..514d68867 100644
--- a/src/pages/Route/Card/RouteForm.vue
+++ b/src/pages/Route/Card/RouteForm.vue
@@ -122,90 +122,74 @@ const onSave = (data, response) => {
     >
         <template #form="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Worker')"
-                        v-model="data.workerFk"
-                        :options="workerList"
-                        option-value="id"
-                        option-label="nickname"
-                        emit-value
-                        map-options
-                        use-input
-                        :input-debounce="0"
-                    >
-                        <template #option="{ itemProps, opt }">
-                            <QItem v-bind="itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ opt.name }}</QItemLabel>
-                                    <QItemLabel caption>
-                                        {{ opt.nickname }}, {{ opt.code }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Vehicle')"
-                        v-model="data.vehicleFk"
-                        :options="vehicleList"
-                        option-value="id"
-                        option-label="numberPlate"
-                        emit-value
-                        map-options
-                        use-input
-                        :input-debounce="0"
-                    />
-                </div>
+                <VnSelectFilter
+                    :label="t('Worker')"
+                    v-model="data.workerFk"
+                    :options="workerList"
+                    option-value="id"
+                    option-label="nickname"
+                    emit-value
+                    map-options
+                    use-input
+                    :input-debounce="0"
+                >
+                    <template #option="{ itemProps, opt }">
+                        <QItem v-bind="itemProps">
+                            <QItemSection>
+                                <QItemLabel>{{ opt.name }}</QItemLabel>
+                                <QItemLabel caption>
+                                    {{ opt.nickname }}, {{ opt.code }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelectFilter>
+                <VnSelectFilter
+                    :label="t('Vehicle')"
+                    v-model="data.vehicleFk"
+                    :options="vehicleList"
+                    option-value="id"
+                    option-label="numberPlate"
+                    emit-value
+                    map-options
+                    use-input
+                    :input-debounce="0"
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Agency')"
-                        v-model="data.agencyModeFk"
-                        :options="agencyList"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                        use-input
-                        :input-debounce="0"
-                    />
-                </div>
-                <div class="col">
-                    <VnInputDate v-model="data.created" :label="t('Created')" />
-                </div>
+                <VnSelectFilter
+                    :label="t('Agency')"
+                    v-model="data.agencyModeFk"
+                    :options="agencyList"
+                    option-value="id"
+                    option-label="name"
+                    emit-value
+                    map-options
+                    use-input
+                    :input-debounce="0"
+                />
+                <VnInputDate v-model="data.created" :label="t('Created')" />
             </VnRow>
             <template v-if="!isNew">
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnInput
-                            v-model="data.kmStart"
-                            :label="t('Km Start')"
-                            clearable
-                        />
-                    </div>
-                    <div class="col">
-                        <VnInput v-model="data.kmEnd" :label="t('Km End')" clearable />
-                    </div>
+                    <VnInput
+                        v-model="data.kmStart"
+                        :label="t('Km Start')"
+                        clearable
+                    />
+                    <VnInput v-model="data.kmEnd" :label="t('Km End')" clearable />
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnInputTime
-                            v-model="data.started"
-                            :label="t('Hour started')"
-                            clearable
-                        />
-                    </div>
-                    <div class="col">
-                        <VnInputTime
-                            v-model="data.finished"
-                            :label="t('Hour finished')"
-                            clearable
-                        />
-                    </div>
+                    <VnInputTime
+                        v-model="data.started"
+                        :label="t('Hour started')"
+                        clearable
+                    />
+                    <VnInputTime
+                        v-model="data.finished"
+                        :label="t('Hour finished')"
+                        clearable
+                    />
                     <div class="col flex items-center">
                         <QCheckbox
                             size="sm"
@@ -216,15 +200,13 @@ const onSave = (data, response) => {
                 </VnRow>
             </template>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.description"
-                        :label="t('Description')"
-                        type="textarea"
-                        :rows="3"
-                        clearable
-                    />
-                </div>
+                <VnInput
+                    v-model="data.description"
+                    :label="t('Description')"
+                    type="textarea"
+                    :rows="3"
+                    clearable
+                />
             </VnRow>
         </template>
     </FormModel>
diff --git a/src/pages/Route/Roadmap/RoadmapBasicData.vue b/src/pages/Route/Roadmap/RoadmapBasicData.vue
index 8b10f5e57..364b201c1 100644
--- a/src/pages/Route/Roadmap/RoadmapBasicData.vue
+++ b/src/pages/Route/Roadmap/RoadmapBasicData.vue
@@ -41,89 +41,69 @@ const onSave = (data, response) => {
     >
         <template #form="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput v-model="data.name" :label="t('Roadmap')" clearable />
-                </div>
-                <div class="col">
-                    <VnInputDate v-model="data.etd" :label="t('ETD date')" />
-                </div>
-                <div class="col">
-                    <VnInputTime v-model="data.etd" :label="t('ETD hour')" />
-                </div>
+                <VnInput v-model="data.name" :label="t('Roadmap')" clearable />
+                <VnInputDate v-model="data.etd" :label="t('ETD date')" />
+                <VnInputTime v-model="data.etd" :label="t('ETD hour')" />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.tractorPlate"
-                        :label="t('Tractor plate')"
-                        clearable
-                    />
-                </div>
-                <div class="col">
-                    <VnInput
-                        v-model="data.trailerPlate"
-                        :label="t('Trailer plate')"
-                        clearable
-                    />
-                </div>
+                <VnInput
+                    v-model="data.tractorPlate"
+                    :label="t('Tractor plate')"
+                    clearable
+                />
+                <VnInput
+                    v-model="data.trailerPlate"
+                    :label="t('Trailer plate')"
+                    clearable
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Carrier')"
-                        v-model="data.supplierFk"
-                        :options="supplierList"
-                        option-value="id"
-                        option-label="nickname"
-                        emit-value
-                        map-options
-                        use-input
-                        :input-debounce="0"
-                    >
-                        <template #option="{ itemProps, opt }">
-                            <QItem v-bind="itemProps">
-                                <QItemSection>
-                                    <QItemLabel
-                                        >{{ opt.id }} - {{ opt.nickname }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
-                </div>
-                <div class="col">
-                    <VnInput
-                        v-model="data.price"
-                        :label="t('Price')"
-                        type="number"
-                        clearable
-                    />
-                </div>
+                <VnSelectFilter
+                    :label="t('Carrier')"
+                    v-model="data.supplierFk"
+                    :options="supplierList"
+                    option-value="id"
+                    option-label="nickname"
+                    emit-value
+                    map-options
+                    use-input
+                    :input-debounce="0"
+                >
+                    <template #option="{ itemProps, opt }">
+                        <QItem v-bind="itemProps">
+                            <QItemSection>
+                                <QItemLabel
+                                    >{{ opt.id }} - {{ opt.nickname }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelectFilter>
+                <VnInput
+                    v-model="data.price"
+                    :label="t('Price')"
+                    type="number"
+                    clearable
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.driverName"
-                        :label="t('Driver name')"
-                        clearable
-                    />
-                </div>
-                <div class="col">
-                    <VnInput
-                        v-model="data.phone"
-                        :label="t('Phone')"
-                        clearable
-                    />
-                </div>
+                <VnInput
+                    v-model="data.driverName"
+                    :label="t('Driver name')"
+                    clearable
+                />
+                <VnInput
+                    v-model="data.phone"
+                    :label="t('Phone')"
+                    clearable
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.observations"
-                        :label="t('Observations')"
-                        clearable
-                    />
-                </div>
+                <VnInput
+                    v-model="data.observations"
+                    :label="t('Observations')"
+                    clearable
+                />
             </VnRow>
         </template>
     </FormModel>
diff --git a/src/pages/Route/Roadmap/RoadmapCreate.vue b/src/pages/Route/Roadmap/RoadmapCreate.vue
index 214983dd3..f5cc9ee66 100644
--- a/src/pages/Route/Roadmap/RoadmapCreate.vue
+++ b/src/pages/Route/Roadmap/RoadmapCreate.vue
@@ -31,19 +31,13 @@ const onSave = (data, response) => {
     >
         <template #form="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.name"
-                        :label="t('Roadmap')"
-                        clearable
-                    />
-                </div>
-                <div class="col">
-                    <VnInputDate v-model="data.etd" :label="t('ETD date')" />
-                </div>
-                <div class="col">
-                    <VnInputTime v-model="data.etd" :label="t('ETD hour')" />
-                </div>
+                <VnInput
+                    v-model="data.name"
+                    :label="t('Roadmap')"
+                    clearable
+                />
+                <VnInputDate v-model="data.etd" :label="t('ETD date')" />
+                <VnInputTime v-model="data.etd" :label="t('ETD hour')" />
             </VnRow>
         </template>
     </FormModel>
diff --git a/src/pages/Shelving/Card/ShelvingForm.vue b/src/pages/Shelving/Card/ShelvingForm.vue
index 238879bd4..d9b6ede0d 100644
--- a/src/pages/Shelving/Card/ShelvingForm.vue
+++ b/src/pages/Shelving/Card/ShelvingForm.vue
@@ -86,47 +86,39 @@ const onSave = (shelving, newShelving) => {
     >
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.code"
-                        :label="t('shelving.basicData.code')"
-                        :rules="validate('Shelving.code')"
-                    />
-                </div>
-                <div class="col">
-                    <QSelect
-                        v-model="data.parkingFk"
-                        :options="parkingList"
-                        option-value="id"
-                        option-label="code"
-                        emit-value
-                        :label="t('shelving.basicData.parking')"
-                        map-options
-                        use-input
-                        @filter="
-                            (value, update) => filter(value, update, parkingSelectFilter)
-                        "
-                        :rules="validate('Shelving.parkingFk')"
-                        :input-debounce="0"
-                    />
-                </div>
+                <VnInput
+                    v-model="data.code"
+                    :label="t('shelving.basicData.code')"
+                    :rules="validate('Shelving.code')"
+                />
+                <QSelect
+                    v-model="data.parkingFk"
+                    :options="parkingList"
+                    option-value="id"
+                    option-label="code"
+                    emit-value
+                    :label="t('shelving.basicData.parking')"
+                    map-options
+                    use-input
+                    @filter="
+                        (value, update) => filter(value, update, parkingSelectFilter)
+                    "
+                    :rules="validate('Shelving.parkingFk')"
+                    :input-debounce="0"
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.priority"
-                        type="number"
-                        :label="t('shelving.basicData.priority')"
-                        :rules="validate('Shelving.priority')"
-                    />
-                </div>
-                <div class="col">
-                    <QCheckbox
-                        v-model="data.isRecyclable"
-                        :label="t('shelving.basicData.recyclable')"
-                        :rules="validate('Shelving.isRecyclable')"
-                    />
-                </div>
+                <VnInput
+                    v-model="data.priority"
+                    type="number"
+                    :label="t('shelving.basicData.priority')"
+                    :rules="validate('Shelving.priority')"
+                />
+                <QCheckbox
+                    v-model="data.isRecyclable"
+                    :label="t('shelving.basicData.recyclable')"
+                    :rules="validate('Shelving.isRecyclable')"
+                />
             </VnRow>
         </template>
     </FormModel>
diff --git a/src/pages/Supplier/Card/SupplierAccounts.vue b/src/pages/Supplier/Card/SupplierAccounts.vue
index 41df6adb9..908ca8c53 100644
--- a/src/pages/Supplier/Card/SupplierAccounts.vue
+++ b/src/pages/Supplier/Card/SupplierAccounts.vue
@@ -102,63 +102,57 @@ onMounted(() => {
                     :key="index"
                     class="row q-gutter-md q-mb-md"
                 >
-                    <div class="col">
-                        <VnInput :label="t('supplier.accounts.iban')" v-model="row.iban">
-                            <template #append>
-                                <QIcon name="info" class="cursor-info">
-                                    <QTooltip>{{
-                                        t('components.iban_tooltip')
-                                    }}</QTooltip>
-                                </QIcon>
-                            </template>
-                        </VnInput>
-                    </div>
-                    <div class="col">
-                        <VnSelectDialog
-                            :label="t('worker.create.bankEntity')"
-                            v-model="row.bankEntityFk"
-                            :options="bankEntitiesOptions"
-                            option-label="bic"
-                            option-value="id"
-                            hide-selected
-                        >
-                            <template #form>
-                                <CreateBankEntityForm
-                                    @on-data-saved="
-                                        (_, requestResponse) =>
-                                            onBankEntityCreated(requestResponse, row)
-                                    "
-                                    :show-entity-field="false"
-                                />
-                            </template>
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection v-if="scope.opt">
-                                        <QItemLabel
-                                            >{{ scope.opt.bic }}
-                                            {{ scope.opt.name }}</QItemLabel
-                                        >
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectDialog>
-                    </div>
-                    <div class="col">
-                        <VnInput
-                            :label="t('supplier.accounts.beneficiary')"
-                            v-model="row.beneficiary"
-                        >
-                            <template #append>
-                                <QIcon name="info" class="cursor-pointer">
-                                    <QTooltip>{{
-                                        t(
-                                            'Name of the bank account holder if different from the provider'
-                                        )
-                                    }}</QTooltip>
-                                </QIcon>
-                            </template>
-                        </VnInput>
-                    </div>
+                    <VnInput :label="t('supplier.accounts.iban')" v-model="row.iban">
+                        <template #append>
+                            <QIcon name="info" class="cursor-info">
+                                <QTooltip>{{
+                                    t('components.iban_tooltip')
+                                }}</QTooltip>
+                            </QIcon>
+                        </template>
+                    </VnInput>
+                    <VnSelectDialog
+                        :label="t('worker.create.bankEntity')"
+                        v-model="row.bankEntityFk"
+                        :options="bankEntitiesOptions"
+                        option-label="bic"
+                        option-value="id"
+                        hide-selected
+                    >
+                        <template #form>
+                            <CreateBankEntityForm
+                                @on-data-saved="
+                                    (_, requestResponse) =>
+                                        onBankEntityCreated(requestResponse, row)
+                                "
+                                :show-entity-field="false"
+                            />
+                        </template>
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection v-if="scope.opt">
+                                    <QItemLabel
+                                        >{{ scope.opt.bic }}
+                                        {{ scope.opt.name }}</QItemLabel
+                                    >
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectDialog>
+                    <VnInput
+                        :label="t('supplier.accounts.beneficiary')"
+                        v-model="row.beneficiary"
+                    >
+                        <template #append>
+                            <QIcon name="info" class="cursor-pointer">
+                                <QTooltip>{{
+                                    t(
+                                        'Name of the bank account holder if different from the provider'
+                                    )
+                                }}</QTooltip>
+                            </QIcon>
+                        </template>
+                    </VnInput>
                     <div class="col-1 row justify-center items-center">
                         <QIcon
                             name="delete"
diff --git a/src/pages/Supplier/Card/SupplierAddressesCreate.vue b/src/pages/Supplier/Card/SupplierAddressesCreate.vue
index 69c180e0a..7508c14f2 100644
--- a/src/pages/Supplier/Card/SupplierAddressesCreate.vue
+++ b/src/pages/Supplier/Card/SupplierAddressesCreate.vue
@@ -79,45 +79,36 @@ function handleLocation(data, location) {
         >
             <template #form="{ data, validate }">
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnInput
-                            v-model="data.nickname"
-                            :label="t('supplier.addresses.name')"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnInput
-                            v-model="data.street"
-                            :label="t('supplier.addresses.street')"
-                        />
-                    </div>
+                    <VnInput
+                        v-model="data.nickname"
+                        :label="t('supplier.addresses.name')"
+                    />
+                    <VnInput
+                        v-model="data.street"
+                        :label="t('supplier.addresses.street')"
+                    />
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnLocation
-                            :rules="validate('Worker.postcode')"
-                            :roles-allowed-to-create="['deliveryAssistant']"
-                            :options="postcodesOptions"
-                            v-model="data.location"
-                            @update:model-value="
-                                (location) => handleLocation(data, location)
-                            "
-                        ></VnLocation>
-                    </div>
+                    <VnLocation
+                        :rules="validate('Worker.postcode')"
+                        :roles-allowed-to-create="['deliveryAssistant']"
+                        :options="postcodesOptions"
+                        v-model="data.location"
+                        @update:model-value="
+                            (location) => handleLocation(data, location)
+                        "
+                    >
+                    </VnLocation>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnInput
-                            v-model="data.phone"
-                            :label="t('supplier.addresses.phone')"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnInput
-                            v-model="data.mobile"
-                            :label="t('supplier.addresses.mobile')"
-                        />
-                    </div>
+                    <VnInput
+                        v-model="data.phone"
+                        :label="t('supplier.addresses.phone')"
+                    />
+                    <VnInput
+                        v-model="data.mobile"
+                        :label="t('supplier.addresses.mobile')"
+                    />
                 </VnRow>
             </template>
         </FormModel>
diff --git a/src/pages/Supplier/Card/SupplierAgencyTerm.vue b/src/pages/Supplier/Card/SupplierAgencyTerm.vue
index 769ff4dad..1419b1928 100644
--- a/src/pages/Supplier/Card/SupplierAgencyTerm.vue
+++ b/src/pages/Supplier/Card/SupplierAgencyTerm.vue
@@ -57,57 +57,43 @@ onMounted(() => {
                     :key="index"
                     class="row q-gutter-md q-mb-md"
                 >
-                    <div class="col">
-                        <QField :label="t('supplier.agencyTerms.agencyFk')" stack-label>
-                            <template #control>
-                                <div tabindex="0">
-                                    {{ row.agency?.name }}
-                                </div>
-                            </template>
-                        </QField>
-                    </div>
-                    <div class="col">
-                        <QInput
-                            :label="t('supplier.agencyTerms.minimumM3')"
-                            v-model.number="row.minimumM3"
-                            type="number"
-                        />
-                    </div>
-                    <div class="col">
-                        <QInput
-                            :label="t('supplier.agencyTerms.packagePrice')"
-                            v-model.number="row.packagePrice"
-                            type="number"
-                        />
-                    </div>
-                    <div class="col">
-                        <QInput
-                            :label="t('supplier.agencyTerms.kmPrice')"
-                            v-model.number="row.kmPrice"
-                            type="number"
-                        />
-                    </div>
-                    <div class="col">
-                        <QInput
-                            :label="t('supplier.agencyTerms.m3Price')"
-                            v-model.number="row.m3Price"
-                            type="number"
-                        />
-                    </div>
-                    <div class="col">
-                        <QInput
-                            :label="t('supplier.agencyTerms.routePrice')"
-                            v-model.number="row.routePrice"
-                            type="number"
-                        />
-                    </div>
-                    <div class="col">
-                        <QInput
-                            :label="t('supplier.agencyTerms.minimumKm')"
-                            v-model.number="row.minimumKm"
-                            type="number"
-                        />
-                    </div>
+                    <QField :label="t('supplier.agencyTerms.agencyFk')" stack-label>
+                        <template #control>
+                            <div tabindex="0">
+                                {{ row.agency?.name }}
+                            </div>
+                        </template>
+                    </QField>
+                    <QInput
+                        :label="t('supplier.agencyTerms.minimumM3')"
+                        v-model.number="row.minimumM3"
+                        type="number"
+                    />
+                    <QInput
+                        :label="t('supplier.agencyTerms.packagePrice')"
+                        v-model.number="row.packagePrice"
+                        type="number"
+                    />
+                    <QInput
+                        :label="t('supplier.agencyTerms.kmPrice')"
+                        v-model.number="row.kmPrice"
+                        type="number"
+                    />
+                    <QInput
+                        :label="t('supplier.agencyTerms.m3Price')"
+                        v-model.number="row.m3Price"
+                        type="number"
+                    />
+                    <QInput
+                        :label="t('supplier.agencyTerms.routePrice')"
+                        v-model.number="row.routePrice"
+                        type="number"
+                    />
+                    <QInput
+                        :label="t('supplier.agencyTerms.minimumKm')"
+                        v-model.number="row.minimumKm"
+                        type="number"
+                    />
                     <div class="col-1 row justify-center items-center">
                         <QIcon
                             name="delete"
diff --git a/src/pages/Supplier/Card/SupplierAgencyTermCreate.vue b/src/pages/Supplier/Card/SupplierAgencyTermCreate.vue
index 17786c1ea..895cde5fe 100644
--- a/src/pages/Supplier/Card/SupplierAgencyTermCreate.vue
+++ b/src/pages/Supplier/Card/SupplierAgencyTermCreate.vue
@@ -46,63 +46,49 @@ const onDataSaved = () => {
         >
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('supplier.agencyTerms.agencyFk')"
-                            v-model="data.agencyFk"
-                            :options="agenciesOptions"
-                            option-label="name"
-                            option-value="id"
-                            hide-selected
-                            rounded
-                        />
-                    </div>
-                    <div class="col">
-                        <QInput
-                            :label="t('supplier.agencyTerms.minimumM3')"
-                            v-model.number="data.minimumM3"
-                            type="number"
-                        />
-                    </div>
+                    <VnSelectFilter
+                        :label="t('supplier.agencyTerms.agencyFk')"
+                        v-model="data.agencyFk"
+                        :options="agenciesOptions"
+                        option-label="name"
+                        option-value="id"
+                        hide-selected
+                        rounded
+                    />
+                    <QInput
+                        :label="t('supplier.agencyTerms.minimumM3')"
+                        v-model.number="data.minimumM3"
+                        type="number"
+                    />
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QInput
-                            :label="t('supplier.agencyTerms.packagePrice')"
-                            v-model.number="data.packagePrice"
-                            type="number"
-                        />
-                    </div>
-                    <div class="col">
-                        <QInput
-                            :label="t('supplier.agencyTerms.kmPrice')"
-                            v-model.number="data.kmPrice"
-                            type="number"
-                        />
-                    </div>
-                    <div class="col">
-                        <QInput
-                            :label="t('supplier.agencyTerms.m3Price')"
-                            v-model.number="data.m3Price"
-                            type="number"
-                        />
-                    </div>
+                    <QInput
+                        :label="t('supplier.agencyTerms.packagePrice')"
+                        v-model.number="data.packagePrice"
+                        type="number"
+                    />
+                    <QInput
+                        :label="t('supplier.agencyTerms.kmPrice')"
+                        v-model.number="data.kmPrice"
+                        type="number"
+                    />
+                    <QInput
+                        :label="t('supplier.agencyTerms.m3Price')"
+                        v-model.number="data.m3Price"
+                        type="number"
+                    />
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QInput
-                            :label="t('supplier.agencyTerms.routePrice')"
-                            v-model.number="data.routePrice"
-                            type="number"
-                        />
-                    </div>
-                    <div class="col">
-                        <QInput
-                            :label="t('supplier.agencyTerms.minimumKm')"
-                            v-model.number="data.minimumKm"
-                            type="number"
-                        />
-                    </div>
+                    <QInput
+                        :label="t('supplier.agencyTerms.routePrice')"
+                        v-model.number="data.routePrice"
+                        type="number"
+                    />
+                    <QInput
+                        :label="t('supplier.agencyTerms.minimumKm')"
+                        v-model.number="data.minimumKm"
+                        type="number"
+                    />
                 </VnRow>
             </template>
         </FormModel>
diff --git a/src/pages/Supplier/Card/SupplierBasicData.vue b/src/pages/Supplier/Card/SupplierBasicData.vue
index 01741dd77..ac3a06cac 100644
--- a/src/pages/Supplier/Card/SupplierBasicData.vue
+++ b/src/pages/Supplier/Card/SupplierBasicData.vue
@@ -30,74 +30,62 @@ const workersOptions = ref([]);
     >
         <template #form="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.nickname"
-                        :label="t('supplier.basicData.alias')"
-                        :rules="validate('supplier.nickname')"
-                        clearable
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('supplier.basicData.workerFk')"
-                        v-model="data.workerFk"
-                        :options="workersOptions"
-                        option-value="id"
-                        option-label="name"
-                        hide-selected
-                        map-options
-                        :rules="validate('supplier.workerFk')"
-                    >
-                        <template #append>
-                            <QIcon name="info" class="cursor-pointer">
-                                <QTooltip>{{
-                                    t('Responsible for approving invoices')
-                                }}</QTooltip>
-                            </QIcon>
-                        </template>
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
-                                    <QItemLabel caption>
-                                        {{ scope.opt?.nickname }}, {{ scope.opt?.id }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
-                </div>
+                <VnInput
+                    v-model="data.nickname"
+                    :label="t('supplier.basicData.alias')"
+                    :rules="validate('supplier.nickname')"
+                    clearable
+                />
+                <VnSelectFilter
+                    :label="t('supplier.basicData.workerFk')"
+                    v-model="data.workerFk"
+                    :options="workersOptions"
+                    option-value="id"
+                    option-label="name"
+                    hide-selected
+                    map-options
+                    :rules="validate('supplier.workerFk')"
+                >
+                    <template #append>
+                        <QIcon name="info" class="cursor-pointer">
+                            <QTooltip>{{
+                                t('Responsible for approving invoices')
+                            }}</QTooltip>
+                        </QIcon>
+                    </template>
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            <QItemSection>
+                                <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
+                                <QItemLabel caption>
+                                    {{ scope.opt?.nickname }}, {{ scope.opt?.id }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelectFilter>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QCheckbox
-                        v-model="data.isSerious"
-                        :label="t('supplier.basicData.isSerious')"
-                    />
-                </div>
-                <div class="col">
-                    <QCheckbox
-                        v-model="data.isActive"
-                        :label="t('supplier.basicData.isActive')"
-                    />
-                </div>
-                <div class="col">
-                    <QCheckbox
-                        v-model="data.isPayMethodChecked"
-                        :label="t('supplier.basicData.isPayMethodChecked')"
-                    />
-                </div>
+                <QCheckbox
+                    v-model="data.isSerious"
+                    :label="t('supplier.basicData.isSerious')"
+                />
+                <QCheckbox
+                    v-model="data.isActive"
+                    :label="t('supplier.basicData.isActive')"
+                />
+                <QCheckbox
+                    v-model="data.isPayMethodChecked"
+                    :label="t('supplier.basicData.isPayMethodChecked')"
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QInput
-                        :label="t('supplier.basicData.note')"
-                        type="textarea"
-                        v-model="data.note"
-                        fill-input
-                    />
-                </div>
+                <QInput
+                    :label="t('supplier.basicData.note')"
+                    type="textarea"
+                    v-model="data.note"
+                    fill-input
+                />
             </VnRow>
         </template>
     </FormModel>
diff --git a/src/pages/Supplier/Card/SupplierBillingData.vue b/src/pages/Supplier/Card/SupplierBillingData.vue
index 26b6e5461..8f1dac2d7 100644
--- a/src/pages/Supplier/Card/SupplierBillingData.vue
+++ b/src/pages/Supplier/Card/SupplierBillingData.vue
@@ -37,37 +37,31 @@ const formatPayDems = (data) => {
     >
         <template #form="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('supplier.billingData.payMethodFk')"
-                        v-model="data.payMethodFk"
-                        :options="paymethodsOptions"
-                        option-value="id"
-                        option-label="name"
-                        hide-selected
-                        :rules="validate('supplier.payMethodFk')"
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('supplier.billingData.payDemFk')"
-                        v-model="data.payDemFk"
-                        :options="payDemsOptions"
-                        option-value="id"
-                        option-label="payDem"
-                        hide-selected
-                        :rules="validate('supplier.payDemFk')"
-                    />
-                </div>
+                <VnSelectFilter
+                    :label="t('supplier.billingData.payMethodFk')"
+                    v-model="data.payMethodFk"
+                    :options="paymethodsOptions"
+                    option-value="id"
+                    option-label="name"
+                    hide-selected
+                    :rules="validate('supplier.payMethodFk')"
+                />
+                <VnSelectFilter
+                    :label="t('supplier.billingData.payDemFk')"
+                    v-model="data.payDemFk"
+                    :options="payDemsOptions"
+                    option-value="id"
+                    option-label="payDem"
+                    hide-selected
+                    :rules="validate('supplier.payDemFk')"
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QInput
-                        :label="t('supplier.billingData.payDay')"
-                        type="number"
-                        v-model="data.payDay"
-                    />
-                </div>
+                <QInput
+                    :label="t('supplier.billingData.payDay')"
+                    type="number"
+                    v-model="data.payDay"
+                />
             </VnRow>
         </template>
     </FormModel>
diff --git a/src/pages/Supplier/Card/SupplierContacts.vue b/src/pages/Supplier/Card/SupplierContacts.vue
index a78c376a9..717488d18 100644
--- a/src/pages/Supplier/Card/SupplierContacts.vue
+++ b/src/pages/Supplier/Card/SupplierContacts.vue
@@ -45,42 +45,32 @@ onMounted(() => {
                     class="border q-pa-md q-mb-md"
                 >
                     <VnRow class="row q-gutter-md">
-                        <div class="col">
-                            <VnInput
-                                input-name-focusable
-                                :label="t('supplier.contacts.name')"
-                                v-model="row.name"
-                            />
-                        </div>
-                        <div class="col">
-                            <VnInput
-                                :label="t('supplier.contacts.phone')"
-                                v-model="row.phone"
-                            />
-                        </div>
-                        <div class="col">
-                            <VnInput
-                                :label="t('supplier.contacts.mobile')"
-                                v-model="row.mobile"
-                            />
-                        </div>
-                        <div class="col">
-                            <VnInput
-                                :label="t('supplier.contacts.email')"
-                                v-model="row.email"
-                            />
-                        </div>
+                        <VnInput
+                            input-name-focusable
+                            :label="t('supplier.contacts.name')"
+                            v-model="row.name"
+                        />
+                        <VnInput
+                            :label="t('supplier.contacts.phone')"
+                            v-model="row.phone"
+                        />
+                        <VnInput
+                            :label="t('supplier.contacts.mobile')"
+                            v-model="row.mobile"
+                        />
+                        <VnInput
+                            :label="t('supplier.contacts.email')"
+                            v-model="row.email"
+                        />
                     </VnRow>
                     <VnRow class="row q-gutter-md">
-                        <div class="col">
-                            <QInput
-                                :label="t('supplier.contacts.observation')"
-                                type="textarea"
-                                v-model="row.observation"
-                                fill-input
-                                autogrow
-                            />
-                        </div>
+                        <QInput
+                            :label="t('supplier.contacts.observation')"
+                            type="textarea"
+                            v-model="row.observation"
+                            fill-input
+                            autogrow
+                        />
                         <div class="col-1 row justify-center items-center">
                             <QIcon
                                 name="delete"
diff --git a/src/pages/Supplier/Card/SupplierFiscalData.vue b/src/pages/Supplier/Card/SupplierFiscalData.vue
index e633334c9..b39e42d1b 100644
--- a/src/pages/Supplier/Card/SupplierFiscalData.vue
+++ b/src/pages/Supplier/Card/SupplierFiscalData.vue
@@ -57,105 +57,85 @@ function handleLocation(data, location) {
     >
         <template #form="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.name"
-                        :label="t('supplier.fiscalData.name')"
-                        clearable
-                    />
-                </div>
-                <div class="col">
-                    <VnInput
-                        v-model="data.nif"
-                        :label="t('supplier.fiscalData.nif')"
-                        clearable
-                    />
-                </div>
+                <VnInput
+                    v-model="data.name"
+                    :label="t('supplier.fiscalData.name')"
+                    clearable
+                />
+                <VnInput
+                    v-model="data.nif"
+                    :label="t('supplier.fiscalData.nif')"
+                    clearable
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.account"
-                        :label="t('supplier.fiscalData.account')"
-                        clearable
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('supplier.fiscalData.sageTaxTypeFk')"
-                        v-model="data.sageTaxTypeFk"
-                        :options="sageTaxTypesOptions"
-                        option-value="id"
-                        option-label="vat"
-                        hide-selected
-                        map-options
-                    />
-                </div>
+                <VnInput
+                    v-model="data.account"
+                    :label="t('supplier.fiscalData.account')"
+                    clearable
+                />
+                <VnSelectFilter
+                    :label="t('supplier.fiscalData.sageTaxTypeFk')"
+                    v-model="data.sageTaxTypeFk"
+                    :options="sageTaxTypesOptions"
+                    option-value="id"
+                    option-label="vat"
+                    hide-selected
+                    map-options
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('supplier.fiscalData.sageWithholdingFk')"
-                        v-model="data.sageWithholdingFk"
-                        :options="sageWithholdingsOptions"
-                        option-value="id"
-                        option-label="withholding"
-                        hide-selected
-                        map-options
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('supplier.fiscalData.sageTransactionTypeFk')"
-                        v-model="data.sageTransactionTypeFk"
-                        :options="sageTransactionTypesOptions"
-                        option-value="id"
-                        option-label="transaction"
-                        hide-selected
-                        map-options
-                    />
-                </div>
+                <VnSelectFilter
+                    :label="t('supplier.fiscalData.sageWithholdingFk')"
+                    v-model="data.sageWithholdingFk"
+                    :options="sageWithholdingsOptions"
+                    option-value="id"
+                    option-label="withholding"
+                    hide-selected
+                    map-options
+                />
+                <VnSelectFilter
+                    :label="t('supplier.fiscalData.sageTransactionTypeFk')"
+                    v-model="data.sageTransactionTypeFk"
+                    :options="sageTransactionTypesOptions"
+                    option-value="id"
+                    option-label="transaction"
+                    hide-selected
+                    map-options
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('supplier.fiscalData.supplierActivityFk')"
-                        v-model="data.supplierActivityFk"
-                        :options="supplierActivitiesOptions"
-                        option-value="code"
-                        option-label="name"
-                        hide-selected
-                        map-options
-                    />
-                </div>
-                <div class="col">
-                    <VnInput
-                        v-model="data.healthRegister"
-                        :label="t('supplier.fiscalData.healthRegister')"
-                        clearable
-                    />
-                </div>
+                <VnSelectFilter
+                    :label="t('supplier.fiscalData.supplierActivityFk')"
+                    v-model="data.supplierActivityFk"
+                    :options="supplierActivitiesOptions"
+                    option-value="code"
+                    option-label="name"
+                    hide-selected
+                    map-options
+                />
+                <VnInput
+                    v-model="data.healthRegister"
+                    :label="t('supplier.fiscalData.healthRegister')"
+                    clearable
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
                     <VnInput
                         v-model="data.street"
                         :label="t('supplier.fiscalData.street')"
                         clearable
                     />
-                </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnLocation
-                        :rules="validate('Worker.postcode')"
-                        :roles-allowed-to-create="['deliveryAssistant']"
-                        :options="postcodesOptions"
-                        v-model="data.postCode"
-                        @update:model-value="(location) => handleLocation(data, location)"
-                    >
-                    </VnLocation>
-                </div>
+                <VnLocation
+                    :rules="validate('Worker.postcode')"
+                    :roles-allowed-to-create="['deliveryAssistant']"
+                    :options="postcodesOptions"
+                    v-model="data.postCode"
+                    @update:model-value="(location) => handleLocation(data, location)"
+                >
+                </VnLocation>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col flex justify-around">
diff --git a/src/pages/Supplier/SupplierCreate.vue b/src/pages/Supplier/SupplierCreate.vue
index d80bd2df8..7d45bac97 100644
--- a/src/pages/Supplier/SupplierCreate.vue
+++ b/src/pages/Supplier/SupplierCreate.vue
@@ -45,15 +45,13 @@ const redirectToSupplierFiscalData = (_, responseData) => {
         >
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnInput
-                            v-model="data.name"
-                            :label="t('supplier.create.supplierName')"
-                            @keyup="
-                                newSupplierForm.name = newSupplierForm.name.toUpperCase()
-                            "
-                        />
-                    </div>
+                    <VnInput
+                        v-model="data.name"
+                        :label="t('supplier.create.supplierName')"
+                        @keyup="
+                            newSupplierForm.name = newSupplierForm.name.toUpperCase()
+                        "
+                    />
                 </VnRow>
             </template>
         </FormModel>
diff --git a/src/pages/Travel/Card/TravelBasicData.vue b/src/pages/Travel/Card/TravelBasicData.vue
index 2edaac853..fce8beac9 100644
--- a/src/pages/Travel/Card/TravelBasicData.vue
+++ b/src/pages/Travel/Card/TravelBasicData.vue
@@ -29,75 +29,59 @@ const agenciesOptions = ref([]);
     >
         <template #form="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.ref"
-                        :label="t('travel.basicData.reference')"
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('travel.basicData.agency')"
-                        v-model="data.agencyModeFk"
-                        :options="agenciesOptions"
-                        option-value="id"
-                        option-label="name"
-                        map-options
-                        hide-selected
-                    />
-                </div>
+                <VnInput
+                    v-model="data.ref"
+                    :label="t('travel.basicData.reference')"
+                />
+                <VnSelectFilter
+                    :label="t('travel.basicData.agency')"
+                    v-model="data.agencyModeFk"
+                    :options="agenciesOptions"
+                    option-value="id"
+                    option-label="name"
+                    map-options
+                    hide-selected
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInputDate
-                        v-model="data.shipped"
-                        :label="t('travel.basicData.shipped')"
-                    />
-                </div>
-                <div class="col">
-                    <VnInputDate
-                        v-model="data.landed"
-                        :label="t('travel.basicData.landed')"
-                    />
-                </div>
+                <VnInputDate
+                    v-model="data.shipped"
+                    :label="t('travel.basicData.shipped')"
+                />
+                <VnInputDate
+                    v-model="data.landed"
+                    :label="t('travel.basicData.landed')"
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('travel.basicData.warehouseOut')"
-                        v-model="data.warehouseOutFk"
-                        :options="agenciesOptions"
-                        option-value="id"
-                        option-label="name"
-                        map-options
-                        hide-selected
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('travel.basicData.warehouseIn')"
-                        v-model="data.warehouseInFk"
-                        :options="agenciesOptions"
-                        option-value="id"
-                        option-label="name"
-                        map-options
-                        hide-selected
-                    />
-                </div>
+                <VnSelectFilter
+                    :label="t('travel.basicData.warehouseOut')"
+                    v-model="data.warehouseOutFk"
+                    :options="agenciesOptions"
+                    option-value="id"
+                    option-label="name"
+                    map-options
+                    hide-selected
+                />
+                <VnSelectFilter
+                    :label="t('travel.basicData.warehouseIn')"
+                    v-model="data.warehouseInFk"
+                    :options="agenciesOptions"
+                    option-value="id"
+                    option-label="name"
+                    map-options
+                    hide-selected
+                />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QCheckbox
-                        :label="t('travel.basicData.delivered')"
-                        v-model="data.isDelivered"
-                    />
-                </div>
-                <div class="col">
-                    <QCheckbox
-                        :label="t('travel.basicData.received')"
-                        v-model="data.isReceived"
-                    />
-                </div>
+                <QCheckbox
+                    :label="t('travel.basicData.delivered')"
+                    v-model="data.isDelivered"
+                />
+                <QCheckbox
+                    :label="t('travel.basicData.received')"
+                    v-model="data.isReceived"
+                />
             </VnRow>
         </template>
     </FormModel>
diff --git a/src/pages/Travel/Card/TravelThermographsForm.vue b/src/pages/Travel/Card/TravelThermographsForm.vue
index 4462846cb..33a13431e 100644
--- a/src/pages/Travel/Card/TravelThermographsForm.vue
+++ b/src/pages/Travel/Card/TravelThermographsForm.vue
@@ -236,104 +236,88 @@ const onThermographCreated = async (data) => {
             </Teleport>
             <QCard class="q-pa-lg">
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelectDialog
-                            :label="t('travel.thermographs.thermograph')"
-                            v-model="thermographForm.thermographId"
-                            :options="thermographsOptions"
-                            option-value="thermographFk"
-                            option-label="thermographFk"
-                            :disable="viewAction === 'edit'"
-                            :tooltip="t('New thermograph')"
-                        >
-                            <template #form>
-                                <CreateThermographForm
-                                    @on-data-saved="onThermographCreated($event, data)"
-                                />
-                            </template>
-                        </VnSelectDialog>
-                    </div>
-                    <div class="col">
-                        <VnInput
-                            v-model="thermographForm.state"
-                            :label="t('travel.thermographs.state')"
-                        />
-                    </div>
+                    <VnSelectDialog
+                        :label="t('travel.thermographs.thermograph')"
+                        v-model="thermographForm.thermographId"
+                        :options="thermographsOptions"
+                        option-value="thermographFk"
+                        option-label="thermographFk"
+                        :disable="viewAction === 'edit'"
+                        :tooltip="t('New thermograph')"
+                    >
+                        <template #form>
+                            <CreateThermographForm
+                                @on-data-saved="onThermographCreated($event, data)"
+                            />
+                        </template>
+                    </VnSelectDialog>
+                    <VnInput
+                        v-model="thermographForm.state"
+                        :label="t('travel.thermographs.state')"
+                    />
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnInput
-                            v-model="thermographForm.reference"
-                            :label="t('travel.thermographs.reference')"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('travel.thermographs.type')"
-                            v-model="thermographForm.dmsTypeId"
-                            :options="dmsTypesOptions"
-                            option-value="id"
-                            option-label="name"
-                        />
-                    </div>
+                    <VnInput
+                        v-model="thermographForm.reference"
+                        :label="t('travel.thermographs.reference')"
+                    />
+                    <VnSelectFilter
+                        :label="t('travel.thermographs.type')"
+                        v-model="thermographForm.dmsTypeId"
+                        :options="dmsTypesOptions"
+                        option-value="id"
+                        option-label="name"
+                    />
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('travel.thermographs.company')"
-                            v-model="thermographForm.companyId"
-                            :options="companiesOptions"
-                            option-value="id"
-                            option-label="code"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('travel.thermographs.warehouse')"
-                            v-model="thermographForm.warehouseId"
-                            :options="warehousesOptions"
-                            option-value="id"
-                            option-label="name"
-                        />
-                    </div>
+                    <VnSelectFilter
+                        :label="t('travel.thermographs.company')"
+                        v-model="thermographForm.companyId"
+                        :options="companiesOptions"
+                        option-value="id"
+                        option-label="code"
+                    />
+                    <VnSelectFilter
+                        :label="t('travel.thermographs.warehouse')"
+                        v-model="thermographForm.warehouseId"
+                        :options="warehousesOptions"
+                        option-value="id"
+                        option-label="name"
+                    />
                 </VnRow>
                 <VnRow v-if="viewAction === 'edit'" class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QInput
-                            :label="t('globals.description')"
-                            type="textarea"
-                            v-model="thermographForm.description"
-                            fill-input
-                        />
-                    </div>
+                    <QInput
+                        :label="t('globals.description')"
+                        type="textarea"
+                        v-model="thermographForm.description"
+                        fill-input
+                    />
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QFile
-                            ref="inputFileRef"
-                            :label="t('travel.thermographs.file')"
-                            multiple
-                            :accept="allowedContentTypes"
-                            v-model="thermographForm.files"
-                        >
-                            <template #append>
-                                <QIcon
-                                    name="vn:attach"
-                                    class="cursor-pointer q-mr-sm"
-                                    @click="inputFileRef.pickFiles()"
-                                >
-                                    <QTooltip>{{ t('Select files') }}</QTooltip>
-                                </QIcon>
-                                <QIcon name="info" class="cursor-pointer">
-                                    <QTooltip>{{
-                                        t('globals.allowedFilesText', {
-                                            allowedContentTypes: allowedContentTypes,
-                                        })
-                                    }}</QTooltip>
-                                </QIcon>
-                            </template>
-                        </QFile>
-                    </div>
+                    <QFile
+                        ref="inputFileRef"
+                        :label="t('travel.thermographs.file')"
+                        multiple
+                        :accept="allowedContentTypes"
+                        v-model="thermographForm.files"
+                    >
+                        <template #append>
+                            <QIcon
+                                name="vn:attach"
+                                class="cursor-pointer q-mr-sm"
+                                @click="inputFileRef.pickFiles()"
+                            >
+                                <QTooltip>{{ t('Select files') }}</QTooltip>
+                            </QIcon>
+                            <QIcon name="info" class="cursor-pointer">
+                                <QTooltip>{{
+                                    t('globals.allowedFilesText', {
+                                        allowedContentTypes: allowedContentTypes,
+                                    })
+                                }}</QTooltip>
+                            </QIcon>
+                        </template>
+                    </QFile>
                 </VnRow>
             </QCard>
         </QForm>
diff --git a/src/pages/Travel/TravelCreate.vue b/src/pages/Travel/TravelCreate.vue
index abee03562..82bf45250 100644
--- a/src/pages/Travel/TravelCreate.vue
+++ b/src/pages/Travel/TravelCreate.vue
@@ -68,52 +68,40 @@ const redirectToTravelBasicData = (_, { id }) => {
         >
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnInput v-model="data.ref" :label="t('globals.reference')" />
-                    </div>
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('globals.agency')"
-                            v-model="data.agencyModeFk"
-                            :options="agenciesOptions"
-                            option-value="agencyFk"
-                            option-label="name"
-                            hide-selected
-                        />
-                    </div>
+                    <VnInput v-model="data.ref" :label="t('globals.reference')" />
+                    <VnSelectFilter
+                        :label="t('globals.agency')"
+                        v-model="data.agencyModeFk"
+                        :options="agenciesOptions"
+                        option-value="agencyFk"
+                        option-label="name"
+                        hide-selected
+                    />
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnInputDate
-                            v-model="data.shipped"
-                            :label="t('globals.shipped')"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnInputDate :label="t('globals.landed')" v-model="data.landed" />
-                    </div>
+                    <VnInputDate
+                        v-model="data.shipped"
+                        :label="t('globals.shipped')"
+                    />
+                    <VnInputDate :label="t('globals.landed')" v-model="data.landed" />
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('globals.wareHouseOut')"
-                            v-model="data.warehouseOutFk"
-                            :options="warehousesOptions"
-                            option-value="id"
-                            option-label="name"
-                            hide-selected
-                        />
-                    </div>
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('globals.wareHouseIn')"
-                            v-model="data.warehouseInFk"
-                            :options="warehousesOptions"
-                            option-value="id"
-                            option-label="name"
-                            hide-selected
-                        />
-                    </div>
+                    <VnSelectFilter
+                        :label="t('globals.wareHouseOut')"
+                        v-model="data.warehouseOutFk"
+                        :options="warehousesOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                    />
+                    <VnSelectFilter
+                        :label="t('globals.wareHouseIn')"
+                        v-model="data.warehouseInFk"
+                        :options="warehousesOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                    />
                 </VnRow>
             </template>
         </FormModel>
diff --git a/src/pages/Wagon/WagonCreate.vue b/src/pages/Wagon/WagonCreate.vue
index cf6bc3ff2..411c36632 100644
--- a/src/pages/Wagon/WagonCreate.vue
+++ b/src/pages/Wagon/WagonCreate.vue
@@ -92,71 +92,63 @@ function filterType(val, update) {
         <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
             <QCard class="q-pa-md">
                 <div class="row q-col-gutter-md">
-                    <div class="col">
-                        <QInput
-                            filled
-                            v-model="wagon.label"
-                            :label="t('wagon.create.label')"
-                            type="number"
-                            min="0"
-                            :rules="[(val) => !!val || t('wagon.warnings.labelNotEmpty')]"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnInput
-                            filled
-                            v-model="wagon.plate"
-                            :label="t('wagon.create.plate')"
-                            :rules="[(val) => !!val || t('wagon.warnings.plateNotEmpty')]"
-                        />
-                    </div>
+                    <QInput
+                        filled
+                        v-model="wagon.label"
+                        :label="t('wagon.create.label')"
+                        type="number"
+                        min="0"
+                        :rules="[(val) => !!val || t('wagon.warnings.labelNotEmpty')]"
+                    />
+                    <VnInput
+                        filled
+                        v-model="wagon.plate"
+                        :label="t('wagon.create.plate')"
+                        :rules="[(val) => !!val || t('wagon.warnings.plateNotEmpty')]"
+                    />
                 </div>
                 <div class="row q-col-gutter-md">
-                    <div class="col">
-                        <QInput
-                            filled
-                            v-model="wagon.volume"
-                            :label="t('wagon.create.volume')"
-                            type="number"
-                            min="0"
-                            :rules="[
-                                (val) => !!val || t('wagon.warnings.volumeNotEmpty'),
-                            ]"
-                        />
-                    </div>
-                    <div class="col">
-                        <QSelect
-                            filled
-                            v-model="wagon.typeFk"
-                            use-input
-                            fill-input
-                            hide-selected
-                            input-debounce="0"
-                            option-label="name"
-                            option-value="id"
-                            emit-value
-                            map-options
-                            :label="t('wagon.create.type')"
-                            :options="filteredWagonTypes"
-                            :rules="[(val) => !!val || t('wagon.warnings.typeNotEmpty')]"
-                            @filter="filterType"
-                        >
-                            <template v-if="wagon.typeFk" #append>
-                                <QIcon
-                                    name="cancel"
-                                    @click.stop.prevent="wagon.typeFk = null"
-                                    class="cursor-pointer"
-                                />
-                            </template>
-                            <template #no-option>
-                                <QItem>
-                                    <QItemSection class="text-grey">
-                                        {{ t('wagon.warnings.noData') }}
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </QSelect>
-                    </div>
+                    <QInput
+                        filled
+                        v-model="wagon.volume"
+                        :label="t('wagon.create.volume')"
+                        type="number"
+                        min="0"
+                        :rules="[
+                            (val) => !!val || t('wagon.warnings.volumeNotEmpty'),
+                        ]"
+                    />
+                    <QSelect
+                        filled
+                        v-model="wagon.typeFk"
+                        use-input
+                        fill-input
+                        hide-selected
+                        input-debounce="0"
+                        option-label="name"
+                        option-value="id"
+                        emit-value
+                        map-options
+                        :label="t('wagon.create.type')"
+                        :options="filteredWagonTypes"
+                        :rules="[(val) => !!val || t('wagon.warnings.typeNotEmpty')]"
+                        @filter="filterType"
+                    >
+                        <template v-if="wagon.typeFk" #append>
+                            <QIcon
+                                name="cancel"
+                                @click.stop.prevent="wagon.typeFk = null"
+                                class="cursor-pointer"
+                            />
+                        </template>
+                        <template #no-option>
+                            <QItem>
+                                <QItemSection class="text-grey">
+                                    {{ t('wagon.warnings.noData') }}
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </QSelect>
                 </div>
             </QCard>
             <div class="q-mt-md">
diff --git a/src/pages/Worker/Card/WorkerPBX.vue b/src/pages/Worker/Card/WorkerPBX.vue
index 681194061..3bba5b33e 100644
--- a/src/pages/Worker/Card/WorkerPBX.vue
+++ b/src/pages/Worker/Card/WorkerPBX.vue
@@ -57,13 +57,11 @@ const updateModelValue = (data) => {
     >
         <template #form="{}">
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        :label="t('worker.summary.sipExtension')"
-                        v-model="extension"
-                        @update:model-value="updateModelValue"
-                    />
-                </div>
+                <VnInput
+                    :label="t('worker.summary.sipExtension')"
+                    v-model="extension"
+                    @update:model-value="updateModelValue"
+                />
             </VnRow>
         </template>
     </FormModel>
diff --git a/src/pages/Worker/WorkerCreate.vue b/src/pages/Worker/WorkerCreate.vue
index eef29a8a4..1d988165a 100644
--- a/src/pages/Worker/WorkerCreate.vue
+++ b/src/pages/Worker/WorkerCreate.vue
@@ -108,92 +108,71 @@ onMounted(async () => {
         >
             <template #form="{ data, validate }">
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnInput
-                            v-model="data.firstName"
-                            :label="t('worker.create.name')"
-                            :rules="validate('Worker.firstName')"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnInput
-                            v-model="data.lastNames"
-                            :label="t('worker.create.lastName')"
-                            :rules="validate('Worker.lastNames')"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnInputDate
-                            v-model="data.birth"
-                            :label="t('worker.create.birth')"
-                            :rules="validate('Worker.birth')"
-                        />
-                    </div>
+                    <VnInput
+                        v-model="data.firstName"
+                        :label="t('worker.create.name')"
+                        :rules="validate('Worker.firstName')"
+                    />
+                    <VnInput
+                        v-model="data.lastNames"
+                        :label="t('worker.create.lastName')"
+                        :rules="validate('Worker.lastNames')"
+                    />
+                    <VnInputDate
+                        v-model="data.birth"
+                        :label="t('worker.create.birth')"
+                        :rules="validate('Worker.birth')"
+                    />
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnInput
-                            v-model="data.fi"
-                            :label="t('worker.create.fi')"
-                            :rules="validate('Worker.fi')"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnInput
-                            v-model="data.code"
-                            :label="t('worker.create.code')"
-                            :rules="validate('Worker.code')"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnInput
-                            v-model="data.phone"
-                            :label="t('worker.create.phone')"
-                            :rules="validate('Worker.phone')"
-                        />
-                    </div>
+                    <VnInput
+                        v-model="data.fi"
+                        :label="t('worker.create.fi')"
+                        :rules="validate('Worker.fi')"
+                    />
+                    <VnInput
+                        v-model="data.code"
+                        :label="t('worker.create.code')"
+                        :rules="validate('Worker.code')"
+                    />
+                    <VnInput
+                        v-model="data.phone"
+                        :label="t('worker.create.phone')"
+                        :rules="validate('Worker.phone')"
+                    />
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnLocation
-                            :rules="validate('Worker.postcode')"
-                            :roles-allowed-to-create="['deliveryAssistant']"
-                            :options="postcodesOptions"
-                            v-model="data.location"
-                            @update:model-value="
-                                (location) => handleLocation(data, location)
-                            "
-                        >
-                        </VnLocation>
-                    </div>
+                    <VnLocation
+                        :rules="validate('Worker.postcode')"
+                        :roles-allowed-to-create="['deliveryAssistant']"
+                        :options="postcodesOptions"
+                        v-model="data.location"
+                        @update:model-value="
+                            (location) => handleLocation(data, location)
+                        "
+                    >
+                    </VnLocation>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnInput
-                            :label="t('worker.create.street')"
-                            v-model="data.street"
-                            :rules="validate('Worker.street')"
-                        />
-                    </div>
+                    <VnInput
+                        :label="t('worker.create.street')"
+                        v-model="data.street"
+                        :rules="validate('Worker.street')"
+                    />
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnInput
-                            v-model="data.name"
-                            :label="t('worker.create.webUser')"
-                            :rules="validate('Worker.name')"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnInput
-                            v-model="data.email"
-                            :label="t('worker.create.personalEmail')"
-                            :rules="validate('Worker.email')"
-                        />
-                    </div>
+                    <VnInput
+                        v-model="data.name"
+                        :label="t('worker.create.webUser')"
+                        :rules="validate('Worker.name')"
+                    />
+                    <VnInput
+                        v-model="data.email"
+                        :label="t('worker.create.personalEmail')"
+                        :rules="validate('Worker.email')"
+                    />
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
                         <VnSelectFilter
                             :label="t('worker.create.company')"
                             v-model="data.companyFk"
@@ -203,8 +182,6 @@ onMounted(async () => {
                             hide-selected
                             :rules="validate('Worker.company')"
                         />
-                    </div>
-                    <div class="col">
                         <VnSelectFilter
                             :label="t('worker.create.boss')"
                             v-model="data.bossFk"
@@ -226,37 +203,31 @@ onMounted(async () => {
                                 </QItem>
                             </template>
                         </VnSelectFilter>
-                    </div>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('worker.create.payMethods')"
-                            v-model="data.payMethodFk"
-                            :options="payMethodsOptions"
-                            option-value="id"
-                            option-label="name"
-                            map-options
-                            hide-selected
-                            :rules="validate('Worker.payMethodFk')"
-                        />
-                    </div>
-
-                    <div class="col">
-                        <VnInput
-                            v-model="data.iban"
-                            :label="t('worker.create.iban')"
-                            :rules="validate('Worker.iban')"
-                        >
-                            <template #append>
-                                <QIcon name="info" class="cursor-info">
-                                    <QTooltip>{{
-                                        t('components.iban_tooltip')
-                                    }}</QTooltip>
-                                </QIcon>
-                            </template>
-                        </VnInput>
-                    </div>
+                    <VnSelectFilter
+                        :label="t('worker.create.payMethods')"
+                        v-model="data.payMethodFk"
+                        :options="payMethodsOptions"
+                        option-value="id"
+                        option-label="name"
+                        map-options
+                        hide-selected
+                        :rules="validate('Worker.payMethodFk')"
+                    />
+                    <VnInput
+                        v-model="data.iban"
+                        :label="t('worker.create.iban')"
+                        :rules="validate('Worker.iban')"
+                    >
+                        <template #append>
+                            <QIcon name="info" class="cursor-info">
+                                <QTooltip>{{
+                                    t('components.iban_tooltip')
+                                }}</QTooltip>
+                            </QIcon>
+                        </template>
+                    </VnInput>
                     <VnSelectDialog
                         :label="t('worker.create.bankEntity')"
                         v-model="data.bankEntityFk"

From 934db329733c81741074a22cdb39ea37446350d6 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 24 Apr 2024 10:31:33 -0300
Subject: [PATCH 02/61] WIP

---
 src/components/CrudModel.vue     |   1 +
 src/css/app.scss                 |   5 +
 src/pages/Item/Card/ItemTags.vue | 176 ++++++++++++++++++++++++++++++-
 src/router/modules/item.js       |   4 +-
 4 files changed, 183 insertions(+), 3 deletions(-)

diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index fb3ac10c3..deec0e4fe 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -81,6 +81,7 @@ defineExpose({
     hasChanges,
     saveChanges,
     getChanges,
+    formData,
 });
 
 async function fetch(data) {
diff --git a/src/css/app.scss b/src/css/app.scss
index 25b484649..9037802ad 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -119,6 +119,11 @@ select:-webkit-autofill {
     font-variation-settings: 'FILL' 1;
 }
 
+.fill-icon-on-hover:hover {
+    font-variation-settings: 'FILL' 1;
+    cursor: pointer;
+}
+
 .vn-table-separation-row {
     height: 16px !important;
     background-color: var(--vn-section-color) !important;
diff --git a/src/pages/Item/Card/ItemTags.vue b/src/pages/Item/Card/ItemTags.vue
index 95f4380e4..bf18c682c 100644
--- a/src/pages/Item/Card/ItemTags.vue
+++ b/src/pages/Item/Card/ItemTags.vue
@@ -1 +1,175 @@
-<template>Item tags (CREAR CUANDO SE DESARROLLE EL MODULO DE ITEMS)</template>
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CrudModel from 'components/CrudModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FetchData from 'components/FetchData.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+import axios from 'axios';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const itemTagsRef = ref(null);
+const tagOptions = ref([]);
+
+// const getHighestPriority = () => {
+//     let max = 0;
+//     console.log('formData:: ', itemTagsRef.value.formData);
+//     itemTagsRef.value.formData.forEach((tag) => {
+//         if (tag.priority > max) max = tag.priority;
+//     });
+//     return max + 1;
+// };
+
+const getHighestPriority = computed(() => {
+    let max = 0;
+    if (!itemTagsRef.value || !itemTagsRef.value.length) return max;
+    console.log('formData:: ', itemTagsRef.value.formData);
+    itemTagsRef.value.formData.forEach((tag) => {
+        if (tag.priority > max) max = tag.priority;
+    });
+    return max + 1;
+});
+
+const getSelectedTagValues = async (tag) => {
+    try {
+        tag.value = null;
+        const filter = {
+            fields: ['value'],
+            order: 'value ASC',
+        };
+
+        const params = { filter: JSON.stringify(filter) };
+        const { data } = await axios.get(`Tags/${tag.selectedTag.id}/filterValue`, {
+            params,
+        });
+        tag.valueOptions = data;
+    } catch (err) {
+        console.error('Error getting selected tag values');
+    }
+};
+
+onMounted(() => {
+    if (itemTagsRef.value) itemTagsRef.value.reload();
+});
+</script>
+
+<template>
+    <FetchData
+        url="Tags"
+        :filter="{ fields: ['id', 'name', 'isFree', 'sourceTable'] }"
+        @on-fetch="(data) => (tagOptions = data)"
+        auto-load
+    />
+    <div class="full-width flex justify-center">
+        <QPage class="card-width q-pa-lg">
+            <CrudModel
+                ref="itemTagsRef"
+                :data-required="{
+                    itemFk: route.params.id,
+                    priority: getHighestPriority,
+                    tag: {
+                        isFree: undefined,
+                    },
+                }"
+                :default-remove="false"
+                :filter="{
+                    fields: ['id', 'itemFk', 'tagFk', 'value', 'priority'],
+                    where: { itemFk: route.params.id },
+                    order: 'priority ASC',
+                    include: {
+                        relation: 'tag',
+                        scope: {
+                            fields: ['id', 'name', 'isFree', 'sourceTable'],
+                        },
+                    },
+                }"
+                data-key="ItemTags"
+                model="ItemTags"
+                url="ItemTags"
+                save-url="Tags/onSubmit"
+            >
+                <template #body="{ rows }">
+                    <QCard class="q-pl-lg q-py-md">
+                        <VnRow
+                            v-for="(row, index) in rows"
+                            :key="index"
+                            class="row q-gutter-md q-mb-md"
+                        >
+                            <VnSelectFilter
+                                :label="t('Tag')"
+                                v-model="row.tagFk"
+                                :options="tagOptions"
+                                option-label="name"
+                                option-value="id"
+                                hide-selected
+                                @update:model-value="getSelectedTagValues(value)"
+                            />
+                            <VnSelectFilter
+                                v-if="row.tag?.isFree === false"
+                                :label="t('Value')"
+                                v-model="row.value"
+                                option-value="value"
+                                option-label="value"
+                                emit-value
+                                use-input
+                                :is-clearable="false"
+                            />
+                            <VnInput
+                                v-if="row.tag?.isFree || row.tag?.isFree == undefined"
+                                v-model="row.value"
+                                :label="t('Value')"
+                                :is-clearable="false"
+                            />
+                            <VnInput
+                                :label="t('Relevancy')"
+                                type="number"
+                                v-model="row.priority"
+                            />
+                            <div class="col-1 row justify-center items-center">
+                                <QIcon
+                                    @click="itemTagsRef.remove([row])"
+                                    class="fill-icon-on-hover"
+                                    color="primary"
+                                    name="delete"
+                                    size="sm"
+                                >
+                                    <QTooltip>
+                                        {{ t('Remove tag') }}
+                                    </QTooltip>
+                                </QIcon>
+                            </div>
+                        </VnRow>
+                        <VnRow>
+                            <QIcon
+                                @click="itemTagsRef.insert()"
+                                class="cursor-pointer"
+                                color="primary"
+                                name="add"
+                                size="sm"
+                            >
+                                <QTooltip>
+                                    {{ t('Add tag') }}
+                                </QTooltip>
+                            </QIcon>
+                        </VnRow>
+                    </QCard>
+                </template>
+            </CrudModel>
+        </QPage>
+    </div>
+</template>
+
+<i18n>
+es:
+    Remove tag: Quitar etiqueta
+    Add tag: Añadir etiqueta
+    Tag: Etiqueta
+    Value: Valor
+    Relevancy: Relevancia
+</i18n>
diff --git a/src/router/modules/item.js b/src/router/modules/item.js
index 70d49c56c..1b582d8e4 100644
--- a/src/router/modules/item.js
+++ b/src/router/modules/item.js
@@ -12,7 +12,7 @@ export default {
     redirect: { name: 'ItemMain' },
     menus: {
         main: ['ItemList', 'WasteBreakdown', 'ItemTypeList'],
-        card: ['ItemBasicData'],
+        card: ['ItemBasicData', 'ItemTags'],
     },
     children: [
         {
@@ -98,7 +98,7 @@ export default {
                     path: 'tags',
                     name: 'ItemTags',
                     meta: {
-                        title: 'Tags',
+                        title: 'tags',
                         icon: 'vn:tags',
                     },
                     component: () => import('src/pages/Item/Card/ItemTags.vue'),

From 42591d078119e6a1051669a104c977f7c6b4abc2 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 25 Apr 2024 14:27:56 +0200
Subject: [PATCH 03/61] feat #7271 router

---
 src/router/modules/index.js      |   2 +
 src/router/modules/zone.js       | 139 +++++++++++++++++++++++++++++++
 src/router/routes.js             |   2 +
 src/stores/useNavigationStore.js |   1 +
 4 files changed, 144 insertions(+)
 create mode 100644 src/router/modules/zone.js

diff --git a/src/router/modules/index.js b/src/router/modules/index.js
index 302ba7fe0..2fe40038f 100644
--- a/src/router/modules/index.js
+++ b/src/router/modules/index.js
@@ -15,6 +15,7 @@ import Department from './department';
 import Entry from './entry';
 import roadmap from './roadmap';
 import Parking from './parking';
+import Zone from './zone';
 
 export default [
     Item,
@@ -34,4 +35,5 @@ export default [
     Entry,
     roadmap,
     Parking,
+    Zone,
 ];
diff --git a/src/router/modules/zone.js b/src/router/modules/zone.js
new file mode 100644
index 000000000..be11ced11
--- /dev/null
+++ b/src/router/modules/zone.js
@@ -0,0 +1,139 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/zone',
+    name: 'Zone',
+    meta: {
+        title: 'zones',
+        icon: 'vn:zone',
+        moduleName: 'Zone',
+    },
+    component: RouterView,
+    redirect: { name: 'ZoneMain' },
+    menus: {
+        main: ['ZoneList', 'ZoneDeliveryList', 'ZoneUpcomingList'],
+        card: [],
+    },
+    children: [
+        {
+            path: '/zone',
+            name: 'ZoneMain',
+            component: () => import('src/pages/Zone/ZoneMain.vue'),
+            redirect: { name: 'ZoneList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'ZoneList',
+                    meta: {
+                        title: 'zonesList',
+                        icon: 'vn:zone',
+                    },
+                    component: () => import('src/pages/Zone/ZoneList.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'ZoneCreate',
+                    meta: {
+                        title: 'zoneCreate',
+                        icon: 'create',
+                    },
+                    component: () => import('src/pages/Zone/ZoneCreate.vue'),
+                },
+                {
+                    path: ':id/edit',
+                    name: 'ZoneEdit',
+                    meta: {
+                        title: 'zoneEdit',
+                        icon: 'edit',
+                    },
+                    component: () => import('src/pages/Zone/ZoneCreate.vue'),
+                },
+                {
+                    path: 'counter',
+                    name: 'ZoneCounter',
+                    meta: {
+                        title: 'zoneCounter',
+                        icon: 'add_circle',
+                    },
+                    component: () => import('src/pages/Zone/ZoneCounter.vue'),
+                },
+            ],
+        },
+        {
+            path: '/zone/delivery',
+            name: 'ZoneDeliveryMain',
+            component: () => import('src/pages/Zone/ZoneMain.vue'),
+            redirect: { name: 'ZoneDeliveryList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'ZoneDeliveryList',
+                    meta: {
+                        title: 'deliveryList',
+                        icon: 'today',
+                    },
+                    component: () =>
+                        import('src/pages/Zone/Delivery/ZoneDeliveryList.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'ZoneDeliveryCreate',
+                    meta: {
+                        title: 'deliveryCreate',
+                        icon: 'create',
+                    },
+                    component: () =>
+                        import('src/pages/Zone/Delivery/ZoneDeliveryCreate.vue'),
+                },
+                {
+                    path: ':id/edit',
+                    name: 'ZoneDeliveryEdit',
+                    meta: {
+                        title: 'deliveryEdit',
+                        icon: 'edit',
+                    },
+                    component: () =>
+                        import('src/pages/Zone/Delivery/ZoneDeliveryCreate.vue'),
+                },
+            ],
+        },
+        {
+            path: '/zone/upcoming',
+            name: 'ZoneUpcomingMain',
+            component: () => import('src/pages/Zone/ZoneMain.vue'),
+            redirect: { name: 'ZoneUpcomingList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'ZoneUpcomingList',
+                    meta: {
+                        title: 'upcomingList',
+                        icon: 'today',
+                    },
+                    component: () =>
+                        import('src/pages/Zone/Upcoming/ZoneUpcomingList.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'ZoneUpcomingCreate',
+                    meta: {
+                        title: 'upcomingCreate',
+                        icon: 'create',
+                    },
+                    component: () =>
+                        import('src/pages/Zone/Upcoming/ZoneUpcomingCreate.vue'),
+                },
+                {
+                    path: ':id/edit',
+                    name: 'ZoneUpcomingEdit',
+                    meta: {
+                        title: 'upcomingEdit',
+                        icon: 'edit',
+                    },
+                    component: () =>
+                        import('src/pages/Zone/Upcoming/ZoneUpcomingCreate.vue'),
+                },
+            ],
+        },
+    ],
+};
diff --git a/src/router/routes.js b/src/router/routes.js
index 51e726a62..14bf6665f 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -15,6 +15,7 @@ import order from 'src/router/modules/order';
 import entry from 'src/router/modules/entry';
 import roadmap from 'src/router/modules/roadmap';
 import parking from 'src/router/modules/parking';
+import zone from 'src/router/modules/zone';
 
 const routes = [
     {
@@ -71,6 +72,7 @@ const routes = [
             roadmap,
             entry,
             parking,
+            zone,
             {
                 path: '/:catchAll(.*)*',
                 name: 'NotFound',
diff --git a/src/stores/useNavigationStore.js b/src/stores/useNavigationStore.js
index f075301f6..ee1e04e9b 100644
--- a/src/stores/useNavigationStore.js
+++ b/src/stores/useNavigationStore.js
@@ -21,6 +21,7 @@ export const useNavigationStore = defineStore('navigationStore', () => {
         'ticket',
         'worker',
         'wagon',
+        'zone',
     ];
     const pinnedModules = ref([]);
     const role = useRole();

From b4e3157887e6ace9072ba5f686b9d26046bf2360 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 25 Apr 2024 14:28:06 +0200
Subject: [PATCH 04/61] feat #7271 i18n

---
 src/i18n/locale/en.yml | 6 ++++++
 src/i18n/locale/es.yml | 8 +++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index ff57bf968..aa65ce08c 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -1165,6 +1165,12 @@ item:
         type: Type
         intrastat: Intrastat
         origin: Origin
+zone:
+    pageTitles:
+        zones: Zone
+        zonesList: Zones
+        deliveryList: Delivery days
+        upcomingList: Upcoming deliveries
 components:
     topbar: {}
     itemsFilterPanel:
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index f9278a9b0..da421432d 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -287,7 +287,7 @@ customer:
             hasSepaVnl: Recibido B2B VNL
 entry:
     pageTitles:
-        entries: Entradas
+        entries: Entrasdadas
         list: Listado
         summary: Resumen
         basicData: Datos básicos
@@ -1164,6 +1164,12 @@ item:
         type: Tipo
         intrastat: Intrastat
         origin: Origen
+zone:
+    pageTitles:
+        zones: Zona
+        zonesList: Zonas
+        deliveryList: Días de entrega
+        upcomingList: Próximos repartos
 components:
     topbar: {}
     itemsFilterPanel:

From b1871c33fd0ad1eb86f7ca6985af6ec41a770709 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 25 Apr 2024 14:30:16 +0200
Subject: [PATCH 05/61] feat #7271 Zone Components boilerplate

---
 src/pages/Zone/Card/ZoneCard.vue              |   6 +
 .../Zone/Delivery/ZoneDeliveryCreate.vue      | 432 ++++++++++++++++++
 src/pages/Zone/Delivery/ZoneDeliveryList.vue  |  81 ++++
 .../Zone/Upcoming/ZoneUpcomingCreate.vue      | 432 ++++++++++++++++++
 src/pages/Zone/Upcoming/ZoneUpcomingList.vue  |  81 ++++
 src/pages/Zone/ZoneCreate.vue                 | 184 ++++++++
 src/pages/Zone/ZoneList.vue                   |  97 ++++
 src/pages/Zone/ZoneMain.vue                   |  17 +
 8 files changed, 1330 insertions(+)
 create mode 100644 src/pages/Zone/Card/ZoneCard.vue
 create mode 100644 src/pages/Zone/Delivery/ZoneDeliveryCreate.vue
 create mode 100644 src/pages/Zone/Delivery/ZoneDeliveryList.vue
 create mode 100644 src/pages/Zone/Upcoming/ZoneUpcomingCreate.vue
 create mode 100644 src/pages/Zone/Upcoming/ZoneUpcomingList.vue
 create mode 100644 src/pages/Zone/ZoneCreate.vue
 create mode 100644 src/pages/Zone/ZoneList.vue
 create mode 100644 src/pages/Zone/ZoneMain.vue

diff --git a/src/pages/Zone/Card/ZoneCard.vue b/src/pages/Zone/Card/ZoneCard.vue
new file mode 100644
index 000000000..948636c55
--- /dev/null
+++ b/src/pages/Zone/Card/ZoneCard.vue
@@ -0,0 +1,6 @@
+<script setup>
+import VnCard from 'components/common/VnCard.vue';
+</script>
+<template>
+    <VnCard data-key="Zone" base-url="Zones" />
+</template>
diff --git a/src/pages/Zone/Delivery/ZoneDeliveryCreate.vue b/src/pages/Zone/Delivery/ZoneDeliveryCreate.vue
new file mode 100644
index 000000000..a48eaf278
--- /dev/null
+++ b/src/pages/Zone/Delivery/ZoneDeliveryCreate.vue
@@ -0,0 +1,432 @@
+<script setup>
+import { computed, ref, onMounted, onUpdated } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+
+onMounted(() => fetch());
+onUpdated(() => fetch());
+
+const { t } = useI18n();
+const route = useRoute();
+const quasar = useQuasar();
+const router = useRouter();
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+const entityId = computed(() => $props.id || route.params.id);
+
+const zone = ref([]);
+const divisible = ref(false);
+const name = ref('');
+const colorPickerActive = ref(false);
+let originalData = { trays: [] };
+let zoneConfig;
+let zoneDeliveryColors;
+let currentTrayColorPicked;
+
+async function fetch() {
+    try {
+        await axios.get('ZoneConfigs').then(async (res) => {
+            if (res.data) {
+                zoneConfig = res.data[0];
+            }
+        });
+
+        await axios.get(`ZoneDeliveryColors`).then(async (res) => {
+            if (res.data) {
+                zoneDeliveryColors = res.data;
+                if (!entityId.value)
+                    zone.value.push({
+                        id: 0,
+                        position: 0,
+                        color: { ...zoneDeliveryColors[0] },
+                        action: 'add',
+                    });
+                else {
+                    await axios
+                        .get(`ZoneDeliveryTrays`, {
+                            params: { filter: { where: { typeFk: entityId.value } } },
+                        })
+                        .then(async (res) => {
+                            if (res.data) {
+                                for (let i = 0; i < res.data.length; i++) {
+                                    const tray = res.data[i];
+                                    zone.value.push({
+                                        id: res.data.length - i - 1,
+                                        position: tray.height,
+                                        color: {
+                                            ...zoneDeliveryColors.find((color) => {
+                                                return color.id === tray.colorFk;
+                                            }),
+                                        },
+                                        action: tray.height == 0 ? 'add' : 'delete',
+                                    });
+                                }
+                                zone.value.forEach((value) => {
+                                    originalData.trays.push({ ...value });
+                                });
+                            }
+                        });
+                }
+            }
+        });
+
+        if (entityId.value) {
+            await axios.get(`ZoneDeliverys/${entityId.value}`).then((res) => {
+                if (res.data) {
+                    originalData.name = name.value = res.data.name;
+                    originalData.divisible = divisible.value = res.data.divisible;
+                }
+            });
+        }
+    } catch (e) {
+        //
+    }
+}
+
+function addTray() {
+    if (
+        zone.value.find((tray) => {
+            return tray.position == null;
+        })
+    ) {
+        quasar.notify({
+            message: t('zone.warnings.uncompleteTrays'),
+            type: 'warning',
+        });
+        return;
+    }
+
+    if (zone.value.length < zoneConfig.maxTrays) {
+        zone.value.unshift({
+            id: zone.value.length,
+            position: null,
+            color: { ...zoneDeliveryColors[0] },
+            action: 'delete',
+        });
+    } else {
+        quasar.notify({
+            message: t('zone.warnings.maxTrays'),
+            type: 'warning',
+        });
+    }
+}
+
+function deleteTray(trayToDelete) {
+    zone.value = zone.value.filter((tray) => tray.id !== trayToDelete.id);
+    reorderIds();
+}
+
+function reorderIds() {
+    for (let index = zone.value.length - 1; index >= 0; index--) {
+        zone.value[index].id = index;
+    }
+}
+
+async function onSubmit() {
+    try {
+        const path = entityId.value
+            ? 'ZoneDeliverys/editZoneDelivery'
+            : 'ZoneDeliverys/createZoneDelivery';
+
+        const params = {
+            id: entityId.value,
+            name: name.value,
+            divisible: divisible.value,
+            trays: zone.value,
+        };
+
+        await axios.patch(path, params).then((res) => {
+            if (res.status == 204) router.push({ path: `/zone/type/list` });
+        });
+    } catch (error) {
+        //
+    }
+}
+
+function onReset() {
+    name.value = entityId.value ? originalData.name : null;
+    divisible.value = entityId.value ? originalData.divisible : false;
+    zone.value = entityId.value
+        ? [...originalData.trays]
+        : [
+              {
+                  id: 0,
+                  position: 0,
+                  color: { ...zoneDeliveryColors[0] },
+                  action: 'add',
+              },
+          ];
+}
+
+function doAction(tray) {
+    if (tray.action == 'add') {
+        addTray();
+    } else {
+        deleteTray(tray);
+    }
+}
+
+function showColorPicker(tray) {
+    colorPickerActive.value = true;
+    currentTrayColorPicked = zone.value.findIndex((val) => {
+        return val.id === tray.id;
+    });
+}
+
+function updateColor(newColor) {
+    zone.value[currentTrayColorPicked].color = {
+        ...zoneDeliveryColors.find((color) => {
+            return color.rgb === newColor;
+        }),
+    };
+}
+
+function onPositionBlur(tray) {
+    if (tray.position) {
+        if (tray.position == '' || tray.position < 0) {
+            tray.position = null;
+            return;
+        }
+        tray.position = parseInt(tray.position);
+        zone.value.sort((a, b) => b.position - a.position);
+        reorderIds();
+        for (let index = zone.value.length - 1; index > 0; index--) {
+            if (exceedMaxHeight(index - 1)) continue;
+            if (
+                zone.value[index - 1].position - zone.value[index].position >=
+                zoneConfig.minHeightBetweenTrays
+            ) {
+                continue;
+            } else {
+                zone.value[index - 1].position +=
+                    zoneConfig.minHeightBetweenTrays -
+                    (zone.value[index - 1].position - zone.value[index].position);
+
+                quasar.notify({
+                    message:
+                        t('zone.warnings.minHeightBetweenTrays') +
+                        zoneConfig.minHeightBetweenTrays +
+                        ' cm',
+                    type: 'warning',
+                });
+
+                exceedMaxHeight(index - 1);
+            }
+        }
+    }
+}
+
+function exceedMaxHeight(pos) {
+    if (zone.value[pos].position > zoneConfig.maxZoneHeight) {
+        zone.value.splice(pos, 1);
+        quasar.notify({
+            message: t('zone.warnings.maxZoneHeight') + zoneConfig.maxZoneHeight + ' cm',
+            type: 'warning',
+        });
+        return true;
+    }
+    return false;
+}
+</script>
+
+<template>
+    <QPage class="q-pa-sm q-mx-xl">
+        <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
+            <QCard class="q-pa-md">
+                <VnInput
+                    filled
+                    v-model="name"
+                    :label="t('zone.delivery.name')"
+                    :rules="[(val) => !!val || t('zone.warnings.nameNotEmpty')]"
+                />
+                <QCheckbox class="q-mb-sm" v-model="divisible" label="Divisible" />
+                <div class="zone-tray q-mx-lg" v-for="tray in zone" :key="tray.id">
+                    <div class="position">
+                        <QInput
+                            autofocus
+                            filled
+                            type="number"
+                            :class="{ isVisible: tray.action == 'add' }"
+                            v-model="tray.position"
+                            @blur="onPositionBlur(tray)"
+                        >
+                            <QTooltip :delay="2000">
+                                {{
+                                    t('zone.warnings.minHeightBetweenTrays') +
+                                    zoneConfig.minHeightBetweenTrays +
+                                    ' cm'
+                                }}
+                                <QSpace />
+                                {{
+                                    t('zone.warnings.maxZoneHeight') +
+                                    zoneConfig.maxZoneHeight +
+                                    ' cm'
+                                }}
+                            </QTooltip>
+                        </QInput>
+                    </div>
+                    <div class="shelving">
+                        <div class="shelving-half">
+                            <div class="shelving-up"></div>
+                            <div
+                                class="shelving-down"
+                                :style="{ backgroundColor: tray.color.rgb }"
+                                @click="showColorPicker(tray)"
+                            ></div>
+                        </div>
+                        <div
+                            class="shelving-divisible"
+                            :class="{ isVisible: !divisible }"
+                        ></div>
+                        <div class="shelving-half">
+                            <div class="shelving-up"></div>
+                            <div
+                                class="shelving-down"
+                                :style="{ backgroundColor: tray.color.rgb }"
+                                @click="showColorPicker(tray)"
+                            ></div>
+                        </div>
+                    </div>
+                    <div class="action-button">
+                        <QBtn
+                            flat
+                            round
+                            color="primary"
+                            :icon="tray.action"
+                            @click="doAction(tray)"
+                        />
+                    </div>
+                </div>
+                <div class="q-mb-sm wheels">
+                    <QIcon color="grey-6" name="trip_origin" size="xl" />
+                    <QIcon color="grey-6" name="trip_origin" size="xl" />
+                </div>
+                <QDialog
+                    v-model="colorPickerActive"
+                    position="right"
+                    :no-backdrop-dismiss="false"
+                >
+                    <QCard>
+                        <QCardSection>
+                            <div class="text-h6">{{ t('zone.delivery.trayColor') }}</div>
+                        </QCardSection>
+                        <QCardSection class="row items-center no-wrap">
+                            <QColor
+                                flat
+                                v-model="zone[currentTrayColorPicked].color.rgb"
+                                no-header
+                                no-footer
+                                default-view="palette"
+                                :palette="
+                                    zoneDeliveryColors.map((color) => {
+                                        return color.rgb;
+                                    })
+                                "
+                                @change="updateColor($event)"
+                            />
+                            <QBtn flat round icon="close" v-close-popup />
+                        </QCardSection>
+                    </QCard>
+                </QDialog>
+            </QCard>
+            <div class="q-mt-md">
+                <QBtn :label="t('zone.delivery.submit')" type="submit" color="primary" />
+                <QBtn
+                    :label="t('zone.delivery.reset')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                />
+            </div>
+        </QForm>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.q-page {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.q-form {
+    width: 70%;
+}
+
+.q-dialog {
+    .q-card {
+        width: 100%;
+    }
+}
+
+.wheels {
+    margin-left: 5%;
+    display: flex;
+    justify-content: space-around;
+}
+
+.zone-tray {
+    display: flex;
+    height: 6rem;
+
+    .position {
+        width: 20%;
+        border-right: 1rem solid gray;
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-end;
+        padding-right: 1rem;
+    }
+
+    .shelving {
+        display: flex;
+        width: 75%;
+
+        .shelving-half {
+            width: 50%;
+            height: 100%;
+
+            .shelving-up {
+                height: 80%;
+                width: 100%;
+            }
+
+            .shelving-down {
+                height: 20%;
+                width: 100%;
+            }
+        }
+
+        .shelving-divisible {
+            width: 1%;
+            height: 100%;
+            border-left: 0.5rem dashed grey;
+            border-right: 0.5rem dashed grey;
+        }
+    }
+
+    .action-button {
+        width: 10%;
+        border-left: 1rem solid gray;
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-start;
+        padding-left: 1rem;
+    }
+
+    .isVisible {
+        display: none;
+    }
+}
+</style>
diff --git a/src/pages/Zone/Delivery/ZoneDeliveryList.vue b/src/pages/Zone/Delivery/ZoneDeliveryList.vue
new file mode 100644
index 000000000..c7a3cbcdb
--- /dev/null
+++ b/src/pages/Zone/Delivery/ZoneDeliveryList.vue
@@ -0,0 +1,81 @@
+<script setup>
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import { useArrayData } from 'src/composables/useArrayData';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import CardList from 'components/ui/CardList.vue';
+import VnLv from 'components/ui/VnLv.vue';
+
+const quasar = useQuasar();
+const arrayData = useArrayData('ZoneDeliveryList');
+const store = arrayData.store;
+const router = useRouter();
+const { t } = useI18n();
+
+function navigate(id) {
+    router.push({ path: `/zone/type/${id}/edit` });
+}
+
+function create() {
+    router.push({ path: `/zone/type/create` });
+}
+
+async function remove(row) {
+    try {
+        const id = row.id;
+        await axios
+            .delete(`ZoneDeliverys/deleteZoneDelivery`, { params: { id } })
+            .then(async () => {
+                quasar.notify({
+                    message: t('zone.delivery.removeItem'),
+                    type: 'positive',
+                });
+                store.data.splice(store.data.indexOf(row), 1);
+            });
+    } catch (error) {
+        //
+    }
+}
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="ZoneDeliveryList"
+                url="/ZoneDeliverys"
+                order="id DESC"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="(row.name || '').toString()"
+                        :id="row.id"
+                        @click="navigate(row.id)"
+                    >
+                        <template #actions>
+                            <QBtn
+                                :label="t('components.smartCard.openCard')"
+                                @click.stop="navigate(row.id)"
+                                outline
+                            />
+                            <QBtn
+                                :label="t('zone.list.remove')"
+                                @click.stop="remove(row)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+        <QPageSticky position="bottom-right" :offset="[18, 18]">
+            <QBtn @click="create" fab icon="add" color="primary" />
+        </QPageSticky>
+    </QPage>
+</template>
diff --git a/src/pages/Zone/Upcoming/ZoneUpcomingCreate.vue b/src/pages/Zone/Upcoming/ZoneUpcomingCreate.vue
new file mode 100644
index 000000000..6bc04c428
--- /dev/null
+++ b/src/pages/Zone/Upcoming/ZoneUpcomingCreate.vue
@@ -0,0 +1,432 @@
+<script setup>
+import { computed, ref, onMounted, onUpdated } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+
+onMounted(() => fetch());
+onUpdated(() => fetch());
+
+const { t } = useI18n();
+const route = useRoute();
+const quasar = useQuasar();
+const router = useRouter();
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+const entityId = computed(() => $props.id || route.params.id);
+
+const zone = ref([]);
+const divisible = ref(false);
+const name = ref('');
+const colorPickerActive = ref(false);
+let originalData = { trays: [] };
+let zoneConfig;
+let zoneUpcomingColors;
+let currentTrayColorPicked;
+
+async function fetch() {
+    try {
+        await axios.get('ZoneConfigs').then(async (res) => {
+            if (res.data) {
+                zoneConfig = res.data[0];
+            }
+        });
+
+        await axios.get(`ZoneUpcomingColors`).then(async (res) => {
+            if (res.data) {
+                zoneUpcomingColors = res.data;
+                if (!entityId.value)
+                    zone.value.push({
+                        id: 0,
+                        position: 0,
+                        color: { ...zoneUpcomingColors[0] },
+                        action: 'add',
+                    });
+                else {
+                    await axios
+                        .get(`ZoneUpcomingTrays`, {
+                            params: { filter: { where: { typeFk: entityId.value } } },
+                        })
+                        .then(async (res) => {
+                            if (res.data) {
+                                for (let i = 0; i < res.data.length; i++) {
+                                    const tray = res.data[i];
+                                    zone.value.push({
+                                        id: res.data.length - i - 1,
+                                        position: tray.height,
+                                        color: {
+                                            ...zoneUpcomingColors.find((color) => {
+                                                return color.id === tray.colorFk;
+                                            }),
+                                        },
+                                        action: tray.height == 0 ? 'add' : 'delete',
+                                    });
+                                }
+                                zone.value.forEach((value) => {
+                                    originalData.trays.push({ ...value });
+                                });
+                            }
+                        });
+                }
+            }
+        });
+
+        if (entityId.value) {
+            await axios.get(`ZoneUpcomings/${entityId.value}`).then((res) => {
+                if (res.data) {
+                    originalData.name = name.value = res.data.name;
+                    originalData.divisible = divisible.value = res.data.divisible;
+                }
+            });
+        }
+    } catch (e) {
+        //
+    }
+}
+
+function addTray() {
+    if (
+        zone.value.find((tray) => {
+            return tray.position == null;
+        })
+    ) {
+        quasar.notify({
+            message: t('zone.warnings.uncompleteTrays'),
+            type: 'warning',
+        });
+        return;
+    }
+
+    if (zone.value.length < zoneConfig.maxTrays) {
+        zone.value.unshift({
+            id: zone.value.length,
+            position: null,
+            color: { ...zoneUpcomingColors[0] },
+            action: 'delete',
+        });
+    } else {
+        quasar.notify({
+            message: t('zone.warnings.maxTrays'),
+            type: 'warning',
+        });
+    }
+}
+
+function deleteTray(trayToDelete) {
+    zone.value = zone.value.filter((tray) => tray.id !== trayToDelete.id);
+    reorderIds();
+}
+
+function reorderIds() {
+    for (let index = zone.value.length - 1; index >= 0; index--) {
+        zone.value[index].id = index;
+    }
+}
+
+async function onSubmit() {
+    try {
+        const path = entityId.value
+            ? 'ZoneUpcomings/editZoneUpcoming'
+            : 'ZoneUpcomings/createZoneUpcoming';
+
+        const params = {
+            id: entityId.value,
+            name: name.value,
+            divisible: divisible.value,
+            trays: zone.value,
+        };
+
+        await axios.patch(path, params).then((res) => {
+            if (res.status == 204) router.push({ path: `/zone/type/list` });
+        });
+    } catch (error) {
+        //
+    }
+}
+
+function onReset() {
+    name.value = entityId.value ? originalData.name : null;
+    divisible.value = entityId.value ? originalData.divisible : false;
+    zone.value = entityId.value
+        ? [...originalData.trays]
+        : [
+              {
+                  id: 0,
+                  position: 0,
+                  color: { ...zoneUpcomingColors[0] },
+                  action: 'add',
+              },
+          ];
+}
+
+function doAction(tray) {
+    if (tray.action == 'add') {
+        addTray();
+    } else {
+        deleteTray(tray);
+    }
+}
+
+function showColorPicker(tray) {
+    colorPickerActive.value = true;
+    currentTrayColorPicked = zone.value.findIndex((val) => {
+        return val.id === tray.id;
+    });
+}
+
+function updateColor(newColor) {
+    zone.value[currentTrayColorPicked].color = {
+        ...zoneUpcomingColors.find((color) => {
+            return color.rgb === newColor;
+        }),
+    };
+}
+
+function onPositionBlur(tray) {
+    if (tray.position) {
+        if (tray.position == '' || tray.position < 0) {
+            tray.position = null;
+            return;
+        }
+        tray.position = parseInt(tray.position);
+        zone.value.sort((a, b) => b.position - a.position);
+        reorderIds();
+        for (let index = zone.value.length - 1; index > 0; index--) {
+            if (exceedMaxHeight(index - 1)) continue;
+            if (
+                zone.value[index - 1].position - zone.value[index].position >=
+                zoneConfig.minHeightBetweenTrays
+            ) {
+                continue;
+            } else {
+                zone.value[index - 1].position +=
+                    zoneConfig.minHeightBetweenTrays -
+                    (zone.value[index - 1].position - zone.value[index].position);
+
+                quasar.notify({
+                    message:
+                        t('zone.warnings.minHeightBetweenTrays') +
+                        zoneConfig.minHeightBetweenTrays +
+                        ' cm',
+                    type: 'warning',
+                });
+
+                exceedMaxHeight(index - 1);
+            }
+        }
+    }
+}
+
+function exceedMaxHeight(pos) {
+    if (zone.value[pos].position > zoneConfig.maxZoneHeight) {
+        zone.value.splice(pos, 1);
+        quasar.notify({
+            message: t('zone.warnings.maxZoneHeight') + zoneConfig.maxZoneHeight + ' cm',
+            type: 'warning',
+        });
+        return true;
+    }
+    return false;
+}
+</script>
+
+<template>
+    <QPage class="q-pa-sm q-mx-xl">
+        <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
+            <QCard class="q-pa-md">
+                <VnInput
+                    filled
+                    v-model="name"
+                    :label="t('zone.upcoming.name')"
+                    :rules="[(val) => !!val || t('zone.warnings.nameNotEmpty')]"
+                />
+                <QCheckbox class="q-mb-sm" v-model="divisible" label="Divisible" />
+                <div class="zone-tray q-mx-lg" v-for="tray in zone" :key="tray.id">
+                    <div class="position">
+                        <QInput
+                            autofocus
+                            filled
+                            type="number"
+                            :class="{ isVisible: tray.action == 'add' }"
+                            v-model="tray.position"
+                            @blur="onPositionBlur(tray)"
+                        >
+                            <QTooltip :delay="2000">
+                                {{
+                                    t('zone.warnings.minHeightBetweenTrays') +
+                                    zoneConfig.minHeightBetweenTrays +
+                                    ' cm'
+                                }}
+                                <QSpace />
+                                {{
+                                    t('zone.warnings.maxZoneHeight') +
+                                    zoneConfig.maxZoneHeight +
+                                    ' cm'
+                                }}
+                            </QTooltip>
+                        </QInput>
+                    </div>
+                    <div class="shelving">
+                        <div class="shelving-half">
+                            <div class="shelving-up"></div>
+                            <div
+                                class="shelving-down"
+                                :style="{ backgroundColor: tray.color.rgb }"
+                                @click="showColorPicker(tray)"
+                            ></div>
+                        </div>
+                        <div
+                            class="shelving-divisible"
+                            :class="{ isVisible: !divisible }"
+                        ></div>
+                        <div class="shelving-half">
+                            <div class="shelving-up"></div>
+                            <div
+                                class="shelving-down"
+                                :style="{ backgroundColor: tray.color.rgb }"
+                                @click="showColorPicker(tray)"
+                            ></div>
+                        </div>
+                    </div>
+                    <div class="action-button">
+                        <QBtn
+                            flat
+                            round
+                            color="primary"
+                            :icon="tray.action"
+                            @click="doAction(tray)"
+                        />
+                    </div>
+                </div>
+                <div class="q-mb-sm wheels">
+                    <QIcon color="grey-6" name="trip_origin" size="xl" />
+                    <QIcon color="grey-6" name="trip_origin" size="xl" />
+                </div>
+                <QDialog
+                    v-model="colorPickerActive"
+                    position="right"
+                    :no-backdrop-dismiss="false"
+                >
+                    <QCard>
+                        <QCardSection>
+                            <div class="text-h6">{{ t('zone.upcoming.trayColor') }}</div>
+                        </QCardSection>
+                        <QCardSection class="row items-center no-wrap">
+                            <QColor
+                                flat
+                                v-model="zone[currentTrayColorPicked].color.rgb"
+                                no-header
+                                no-footer
+                                default-view="palette"
+                                :palette="
+                                    zoneUpcomingColors.map((color) => {
+                                        return color.rgb;
+                                    })
+                                "
+                                @change="updateColor($event)"
+                            />
+                            <QBtn flat round icon="close" v-close-popup />
+                        </QCardSection>
+                    </QCard>
+                </QDialog>
+            </QCard>
+            <div class="q-mt-md">
+                <QBtn :label="t('zone.upcoming.submit')" type="submit" color="primary" />
+                <QBtn
+                    :label="t('zone.upcoming.reset')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                />
+            </div>
+        </QForm>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.q-page {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.q-form {
+    width: 70%;
+}
+
+.q-dialog {
+    .q-card {
+        width: 100%;
+    }
+}
+
+.wheels {
+    margin-left: 5%;
+    display: flex;
+    justify-content: space-around;
+}
+
+.zone-tray {
+    display: flex;
+    height: 6rem;
+
+    .position {
+        width: 20%;
+        border-right: 1rem solid gray;
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-end;
+        padding-right: 1rem;
+    }
+
+    .shelving {
+        display: flex;
+        width: 75%;
+
+        .shelving-half {
+            width: 50%;
+            height: 100%;
+
+            .shelving-up {
+                height: 80%;
+                width: 100%;
+            }
+
+            .shelving-down {
+                height: 20%;
+                width: 100%;
+            }
+        }
+
+        .shelving-divisible {
+            width: 1%;
+            height: 100%;
+            border-left: 0.5rem dashed grey;
+            border-right: 0.5rem dashed grey;
+        }
+    }
+
+    .action-button {
+        width: 10%;
+        border-left: 1rem solid gray;
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-start;
+        padding-left: 1rem;
+    }
+
+    .isVisible {
+        display: none;
+    }
+}
+</style>
diff --git a/src/pages/Zone/Upcoming/ZoneUpcomingList.vue b/src/pages/Zone/Upcoming/ZoneUpcomingList.vue
new file mode 100644
index 000000000..5c417df8f
--- /dev/null
+++ b/src/pages/Zone/Upcoming/ZoneUpcomingList.vue
@@ -0,0 +1,81 @@
+<script setup>
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import { useArrayData } from 'src/composables/useArrayData';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import CardList from 'components/ui/CardList.vue';
+import VnLv from 'components/ui/VnLv.vue';
+
+const quasar = useQuasar();
+const arrayData = useArrayData('ZoneUpcomingList');
+const store = arrayData.store;
+const router = useRouter();
+const { t } = useI18n();
+
+function navigate(id) {
+    router.push({ path: `/zone/type/${id}/edit` });
+}
+
+function create() {
+    router.push({ path: `/zone/type/create` });
+}
+
+async function remove(row) {
+    try {
+        const id = row.id;
+        await axios
+            .delete(`ZoneUpcomings/deleteZoneUpcoming`, { params: { id } })
+            .then(async () => {
+                quasar.notify({
+                    message: t('zone.upcoming.removeItem'),
+                    type: 'positive',
+                });
+                store.data.splice(store.data.indexOf(row), 1);
+            });
+    } catch (error) {
+        //
+    }
+}
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="ZoneUpcomingList"
+                url="/ZoneUpcomings"
+                order="id DESC"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="(row.name || '').toString()"
+                        :id="row.id"
+                        @click="navigate(row.id)"
+                    >
+                        <template #actions>
+                            <QBtn
+                                :label="t('components.smartCard.openCard')"
+                                @click.stop="navigate(row.id)"
+                                outline
+                            />
+                            <QBtn
+                                :label="t('zone.list.remove')"
+                                @click.stop="remove(row)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+        <QPageSticky position="bottom-right" :offset="[18, 18]">
+            <QBtn @click="create" fab icon="add" color="primary" />
+        </QPageSticky>
+    </QPage>
+</template>
diff --git a/src/pages/Zone/ZoneCreate.vue b/src/pages/Zone/ZoneCreate.vue
new file mode 100644
index 000000000..8c0ba8c17
--- /dev/null
+++ b/src/pages/Zone/ZoneCreate.vue
@@ -0,0 +1,184 @@
+<script setup>
+import { computed, onMounted, onUpdated, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { QIcon, QInput, QItem, QItemSection, QSelect } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useRoute, useRouter } from 'vue-router';
+import axios from 'axios';
+
+onMounted(() => fetch());
+onUpdated(() => fetch());
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+const entityId = computed(() => $props.id || route.params.id);
+
+let zoneTypes = [];
+let originalData = {};
+const zone = ref({});
+const filteredZoneTypes = ref(zoneTypes);
+
+async function onSubmit() {
+    try {
+        const params = {
+            id: entityId.value,
+            label: zone.value.label,
+            plate: zone.value.plate,
+            volume: zone.value.volume,
+            typeFk: zone.value.typeFk,
+        };
+        await axios.patch('Zones', params).then((res) => {
+            if (res.status == 200) router.push({ path: `/zone/list` });
+        });
+    } catch (error) {
+        //
+    }
+}
+
+async function onReset() {
+    if (entityId.value) {
+        zone.value = { ...originalData };
+    } else {
+        zone.value = {};
+    }
+}
+
+async function fetch() {
+    try {
+        await axios.get('ZoneTypes').then(async (res) => {
+            if (res.data) {
+                filteredZoneTypes.value = zoneTypes = res.data;
+            }
+        });
+        if (entityId.value) {
+            await axios.get(`Zones/${entityId.value}`).then(async (res) => {
+                const data = res.data;
+                if (data) {
+                    zone.value.label = data.label;
+                    zone.value.plate = data.plate;
+                    zone.value.volume = data.volume;
+                    zone.value.typeFk = data.typeFk;
+                    originalData = { ...zone.value };
+                }
+            });
+        }
+    } catch (e) {
+        //
+    }
+}
+
+function filterType(val, update) {
+    update(() => {
+        const needle = val.toLowerCase();
+        filteredZoneTypes.value = zoneTypes.filter(
+            (v) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    });
+}
+</script>
+
+<template>
+    <QPage class="q-pa-sm q-mx-xl">
+        <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
+            <QCard class="q-pa-md">
+                <div class="row q-col-gutter-md">
+                    <div class="col">
+                        <QInput
+                            filled
+                            v-model="zone.label"
+                            :label="t('zone.create.label')"
+                            type="number"
+                            min="0"
+                            :rules="[(val) => !!val || t('zone.warnings.labelNotEmpty')]"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnInput
+                            filled
+                            v-model="zone.plate"
+                            :label="t('zone.create.plate')"
+                            :rules="[(val) => !!val || t('zone.warnings.plateNotEmpty')]"
+                        />
+                    </div>
+                </div>
+                <div class="row q-col-gutter-md">
+                    <div class="col">
+                        <QInput
+                            filled
+                            v-model="zone.volume"
+                            :label="t('zone.create.volume')"
+                            type="number"
+                            min="0"
+                            :rules="[(val) => !!val || t('zone.warnings.volumeNotEmpty')]"
+                        />
+                    </div>
+                    <div class="col">
+                        <QSelect
+                            filled
+                            v-model="zone.typeFk"
+                            use-input
+                            fill-input
+                            hide-selected
+                            input-debounce="0"
+                            option-label="name"
+                            option-value="id"
+                            emit-value
+                            map-options
+                            :label="t('zone.create.type')"
+                            :options="filteredZoneTypes"
+                            :rules="[(val) => !!val || t('zone.warnings.typeNotEmpty')]"
+                            @filter="filterType"
+                        >
+                            <template v-if="zone.typeFk" #append>
+                                <QIcon
+                                    name="cancel"
+                                    @click.stop.prevent="zone.typeFk = null"
+                                    class="cursor-pointer"
+                                />
+                            </template>
+                            <template #no-option>
+                                <QItem>
+                                    <QItemSection class="text-grey">
+                                        {{ t('zone.warnings.noData') }}
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </QSelect>
+                    </div>
+                </div>
+            </QCard>
+            <div class="q-mt-md">
+                <QBtn :label="t('zone.type.submit')" type="submit" color="primary" />
+                <QBtn
+                    :label="t('zone.type.reset')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                />
+            </div>
+        </QForm>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.q-page {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.q-form {
+    width: 70%;
+}
+</style>
diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
new file mode 100644
index 000000000..00502e1f7
--- /dev/null
+++ b/src/pages/Zone/ZoneList.vue
@@ -0,0 +1,97 @@
+<script setup>
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import { useArrayData } from 'src/composables/useArrayData';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import CardList from 'components/ui/CardList.vue';
+import VnLv from 'components/ui/VnLv.vue';
+
+const quasar = useQuasar();
+const arrayData = useArrayData('ZoneList');
+const store = arrayData.store;
+const router = useRouter();
+const { t } = useI18n();
+
+const filter = {
+    include: {
+        relation: 'type',
+        scope: {
+            fields: 'name',
+        },
+    },
+};
+
+function navigate(id) {
+    router.push({ path: `/zone/${id}/edit` });
+}
+
+function create() {
+    router.push({ path: `/zone/create` });
+}
+
+async function remove(row) {
+    try {
+        await axios.delete(`Zones/${row.id}`).then(async () => {
+            quasar.notify({
+                message: t('zone.list.removeItem'),
+                type: 'positive',
+            });
+            store.data.splice(store.data.indexOf(row), 1);
+        });
+    } catch (error) {
+        //
+    }
+}
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="ZoneList"
+                url="/Zones"
+                order="id DESC"
+                :filter="filter"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="(row.label || '').toString()"
+                        :id="row.id"
+                        @click="navigate(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv
+                                :label="t('zone.list.plate')"
+                                :title-label="t('zone.list.plate')"
+                                :value="row.plate"
+                            />
+                            <VnLv :label="t('zone.list.volume')" :value="row?.volume" />
+                            <VnLv :label="t('zone.list.type')" :value="row?.type?.name" />
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('components.smartCard.openCard')"
+                                @click.stop="navigate(row.id)"
+                                outline
+                            />
+                            <QBtn
+                                :label="t('zone.list.remove')"
+                                @click.stop="remove(row)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+        <QPageSticky position="bottom-right" :offset="[18, 18]">
+            <QBtn @click="create" fab icon="add" color="primary" />
+        </QPageSticky>
+    </QPage>
+</template>
diff --git a/src/pages/Zone/ZoneMain.vue b/src/pages/Zone/ZoneMain.vue
new file mode 100644
index 000000000..66ce78f23
--- /dev/null
+++ b/src/pages/Zone/ZoneMain.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const stateStore = useStateStore();
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
+            <LeftMenu />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
+</template>

From f14d6310514c949c81de6ac07083dd686e37e87b Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 25 Apr 2024 14:32:42 +0200
Subject: [PATCH 06/61] feat #7271 ZoneDescriptor

---
 src/pages/Zone/Card/ZoneDescriptor.vue        | 127 ++++++++++++++++++
 .../Zone/Card/ZoneDescriptorMenuItems.vue     | 108 +++++++++++++++
 src/pages/Zone/Card/ZoneDescriptorProxy.vue   |  16 +++
 3 files changed, 251 insertions(+)
 create mode 100644 src/pages/Zone/Card/ZoneDescriptor.vue
 create mode 100644 src/pages/Zone/Card/ZoneDescriptorMenuItems.vue
 create mode 100644 src/pages/Zone/Card/ZoneDescriptorProxy.vue

diff --git a/src/pages/Zone/Card/ZoneDescriptor.vue b/src/pages/Zone/Card/ZoneDescriptor.vue
new file mode 100644
index 000000000..665cb6f0e
--- /dev/null
+++ b/src/pages/Zone/Card/ZoneDescriptor.vue
@@ -0,0 +1,127 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import ZoneDescriptorMenuItems from './ZoneDescriptorMenuItems.vue';
+
+import useCardDescription from 'src/composables/useCardDescription';
+import { toDate } from 'src/filters';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const { t } = useI18n();
+
+const filter = {
+    fields: [
+        'id',
+        'ref',
+        'shipped',
+        'landed',
+        'totalEntries',
+        'warehouseInFk',
+        'warehouseOutFk',
+        'cargoSupplierFk',
+        'agencyModeFk',
+    ],
+    include: [
+        {
+            relation: 'warehouseIn',
+            scope: {
+                fields: ['name'],
+            },
+        },
+        {
+            relation: 'warehouseOut',
+            scope: {
+                fields: ['name'],
+            },
+        },
+    ],
+};
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const data = ref(useCardDescription());
+
+const setData = (entity) => {
+    data.value = useCardDescription(entity.ref, entity.id);
+};
+</script>
+
+<template>
+    <CardDescriptor
+        module="Zone"
+        :url="`Zones/${entityId}`"
+        :title="data.title"
+        :subtitle="data.subtitle"
+        :filter="filter"
+        @on-fetch="setData"
+        data-key="travelData"
+    >
+        <template #header-extra-action>
+            <QBtn
+                round
+                flat
+                dense
+                size="md"
+                icon="local_airport"
+                color="white"
+                class="link"
+                :to="{ name: 'ZoneList' }"
+            >
+                <QTooltip>
+                    {{ t('Go to module index') }}
+                </QTooltip>
+            </QBtn>
+        </template>
+        <template #menu="{ entity }">
+            <ZoneDescriptorMenuItems :travel="entity" />
+        </template>
+        <template #body="{ entity }">
+            <VnLv :label="t('globals.wareHouseIn')" :value="entity.warehouseIn.name" />
+            <VnLv :label="t('globals.wareHouseOut')" :value="entity.warehouseOut.name" />
+            <VnLv :label="t('globals.shipped')" :value="toDate(entity.shipped)" />
+            <VnLv :label="t('globals.landed')" :value="toDate(entity.landed)" />
+            <VnLv :label="t('globals.totalEntries')" :value="entity.totalEntries" />
+        </template>
+        <template #actions="{ entity }">
+            <QCardActions>
+                <QBtn
+                    :to="{
+                        name: 'ZoneList',
+                        query: {
+                            params: JSON.stringify({
+                                agencyModeFk: entity.agencyModeFk,
+                            }),
+                        },
+                    }"
+                    size="md"
+                    icon="local_airport"
+                    color="primary"
+                >
+                    <QTooltip>{{ t('All travels with current agency') }}</QTooltip>
+                </QBtn>
+            </QCardActions>
+        </template>
+    </CardDescriptor>
+</template>
+
+<i18n>
+es:
+    Go to module index: Ir al índice del módulo
+    The travel will be deleted: El envío será eliminado
+    Do you want to delete this travel?: ¿Quieres eliminar este envío?
+    All travels with current agency: Todos los envíos con la agencia actual
+</i18n>
diff --git a/src/pages/Zone/Card/ZoneDescriptorMenuItems.vue b/src/pages/Zone/Card/ZoneDescriptorMenuItems.vue
new file mode 100644
index 000000000..920d83dfe
--- /dev/null
+++ b/src/pages/Zone/Card/ZoneDescriptorMenuItems.vue
@@ -0,0 +1,108 @@
+<script setup>
+import { computed } from 'vue';
+import { useQuasar } from 'quasar';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import VnConfirm from 'components/ui/VnConfirm.vue';
+
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+import { useRole } from 'src/composables/useRole';
+
+const $props = defineProps({
+    travel: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const { t } = useI18n();
+const router = useRouter();
+const quasar = useQuasar();
+const { notify } = useNotify();
+const role = useRole();
+
+const redirectToCreateView = (queryParams) => {
+    router.push({ name: 'ZoneCreate', query: { travelData: queryParams } });
+};
+
+const cloneZone = () => {
+    const stringifiedZoneData = JSON.stringify($props.travel);
+    redirectToCreateView(stringifiedZoneData);
+};
+
+const cloneZoneWithEntries = () => {
+    try {
+        axios.post(`Zones/${$props.travel.id}/cloneWithEntries`);
+        notify('globals.dataSaved', 'positive');
+    } catch (err) {
+        console.err('Error cloning travel with entries');
+    }
+};
+
+const isBuyer = computed(() => {
+    return role.hasAny(['buyer']);
+});
+
+const openDeleteEntryDialog = (id) => {
+    quasar
+        .dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('The travel will be deleted'),
+                message: t('Do you want to delete this travel?'),
+            },
+        })
+        .onOk(async () => {
+            await deleteZone(id);
+        });
+};
+
+const deleteZone = async (id) => {
+    try {
+        await axios.delete(`Zones/${id}`);
+        router.push({ name: 'ZoneList' });
+        notify('globals.dataDeleted', 'positive');
+    } catch (err) {
+        console.error('Error deleting travel');
+    }
+};
+</script>
+
+<template>
+    <QItem v-ripple clickable @click="cloneZone(travel)">
+        <QItemSection>{{ t('travel.summary.cloneShipping') }}</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable @click="cloneZoneWithEntries()">
+        <QItemSection>
+            {{ t('travel.summary.CloneZoneAndEntries') }}
+        </QItemSection>
+    </QItem>
+    <QItem
+        v-if="isBuyer && travel.totalEntries === 0"
+        v-ripple
+        clickable
+        @click="openDeleteEntryDialog(travel.id)"
+    >
+        <QItemSection>
+            {{ t('travel.summary.deleteZone') }}
+        </QItemSection>
+    </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection>
+            <RouterLink
+                :to="{ name: 'EntryCreate', query: { travelFk: travel.id } }"
+                class="color-vn-text"
+            >
+                {{ t('travel.summary.AddEntry') }}
+            </RouterLink>
+        </QItemSection>
+    </QItem>
+</template>
+
+<i18n>
+es:
+    The travel will be deleted: El envío será eliminado
+    Do you want to delete this travel?: ¿Quieres eliminar este envío?
+</i18n>
diff --git a/src/pages/Zone/Card/ZoneDescriptorProxy.vue b/src/pages/Zone/Card/ZoneDescriptorProxy.vue
new file mode 100644
index 000000000..15c5fb0e5
--- /dev/null
+++ b/src/pages/Zone/Card/ZoneDescriptorProxy.vue
@@ -0,0 +1,16 @@
+<script setup>
+import ZoneDescriptor from './ZoneDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <QPopupProxy>
+        <ZoneDescriptor v-if="$props.id" :id="$props.id" />
+    </QPopupProxy>
+</template>

From ac219bfbb79d748b9f19d51d816d457af235368e Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 30 Apr 2024 16:15:48 -0300
Subject: [PATCH 07/61] Item shelvings

---
 src/i18n/locale/en.yml               |   1 +
 src/i18n/locale/es.yml               |   1 +
 src/pages/Item/Card/ItemShelving.vue | 275 +++++++++++++++++++++++++++
 src/pages/Item/locale/en.yml         |  14 ++
 src/pages/Item/locale/es.yml         |  14 ++
 src/router/modules/item.js           |  10 +
 6 files changed, 315 insertions(+)
 create mode 100644 src/pages/Item/Card/ItemShelving.vue
 create mode 100644 src/pages/Item/locale/en.yml
 create mode 100644 src/pages/Item/locale/es.yml

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index abe59fe18..1000fd308 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -1135,6 +1135,7 @@ item:
         tax: Tax
         barcode: Barcode
         botanical: Botanical
+        shelving: Shelving
     descriptor:
         item: Item
         buyer: Buyer
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 06aa057e3..2727b9113 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -1134,6 +1134,7 @@ item:
         botanical: 'Botánico'
         barcode: 'Código de barras'
         log: Historial
+        shelving: Carros
     descriptor:
         item: Artículo
         buyer: Comprador
diff --git a/src/pages/Item/Card/ItemShelving.vue b/src/pages/Item/Card/ItemShelving.vue
new file mode 100644
index 000000000..573c4be0c
--- /dev/null
+++ b/src/pages/Item/Card/ItemShelving.vue
@@ -0,0 +1,275 @@
+<script setup>
+import { onMounted, ref, computed, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+
+import { toDateFormat } from 'src/filters/date.js';
+import { dashIfEmpty } from 'src/filters';
+import { useArrayData } from 'src/composables/useArrayData';
+import useNotify from 'src/composables/useNotify.js';
+import { useVnConfirm } from 'composables/useVnConfirm';
+import axios from 'axios';
+
+const route = useRoute();
+const { t } = useI18n();
+const { notify } = useNotify();
+const { openConfirmationModal } = useVnConfirm();
+
+const rowsSelected = ref([]);
+const parkingsOptions = ref([]);
+const shelvingsOptions = ref([]);
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'parking':
+        case 'shelving':
+        case 'label':
+        case 'packing':
+        case 'itemFk':
+            return { [param]: value };
+    }
+};
+
+const params = reactive({ itemFk: route.params.id });
+
+const arrayData = useArrayData('ItemShelvings', {
+    url: 'ItemShelvingPlacementSupplyStocks',
+    userParams: params,
+    exprBuilder: exprBuilder,
+});
+const rows = computed(() => arrayData.store.data || []);
+
+const applyColumnFilter = async (col) => {
+    try {
+        const paramKey = col.columnFilter?.filterParamKey || col.field;
+        params[paramKey] = col.columnFilter.filterValue;
+        await arrayData.addFilter({ filter: null, params });
+    } catch (err) {
+        console.error('Error applying column filter', err);
+    }
+};
+
+const getInputEvents = (col) => {
+    return col.columnFilter.type === 'select'
+        ? { 'update:modelValue': () => applyColumnFilter(col) }
+        : {
+              'keyup.enter': () => applyColumnFilter(col),
+          };
+};
+
+const columns = computed(() => [
+    {
+        label: t('shelvings.created'),
+        name: 'created',
+        field: 'created',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+        format: (val) => toDateFormat(val),
+    },
+
+    {
+        label: t('shelvings.item'),
+        name: 'item',
+        field: 'itemFk',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+    },
+    {
+        label: t('shelvings.concept'),
+        name: 'concept',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+    },
+    {
+        label: t('shelvings.parking'),
+        name: 'parking',
+        field: 'parking',
+        align: 'left',
+        sortable: true,
+        format: (val) => dashIfEmpty(val),
+        columnFilter: {
+            component: VnSelect,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: parkingsOptions.value,
+                'option-value': 'code',
+                'option-label': 'code',
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('shelvings.shelving'),
+        name: 'shelving',
+        field: 'shelving',
+        align: 'left',
+        sortable: true,
+        format: (val) => dashIfEmpty(val),
+        columnFilter: {
+            component: VnSelect,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: shelvingsOptions.value,
+                'option-value': 'code',
+                'option-label': 'code',
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('shelvings.label'),
+        name: 'label',
+        align: 'left',
+        sortable: true,
+        format: (_, row) => (row.stock / row.packing).toFixed(2),
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterParamKey: 'label',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('shelvings.packing'),
+        field: 'packing',
+        name: 'packing',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+        format: (val) => dashIfEmpty(val),
+    },
+]);
+
+const totalLabels = computed(() =>
+    rows.value.reduce((acc, row) => acc + row.stock / row.packing, 0).toFixed(2)
+);
+
+const removeLines = async () => {
+    try {
+        const itemShelvingIds = rowsSelected.value.map((row) => row.itemShelvingFk);
+        await axios.post('ItemShelvings/deleteItemShelvings', { itemShelvingIds });
+        rowsSelected.value = [];
+        notify('shelvings.shelvingsRemoved', 'positive');
+        await arrayData.fetch({ append: false });
+    } catch (err) {
+        console.error('Error removing lines', err);
+    }
+};
+onMounted(async () => {
+    await arrayData.fetch({ append: false });
+});
+</script>
+
+<template>
+    <FetchData
+        url="parkings"
+        :filter="{ fields: ['code'], order: 'code ASC' }"
+        auto-load
+        @on-fetch="(data) => (parkingsOptions = data)"
+    />
+    <FetchData
+        url="shelvings"
+        :filter="{ fields: ['code'], order: 'code ASC' }"
+        auto-load
+        @on-fetch="(data) => (shelvingsOptions = data)"
+    />
+    <QToolbar class="bg-vn-dark justify-end">
+        <div id="st-data" class="q-py-sm flex items-center">
+            <div class="q-pa-md q-mr-lg" style="border: 2px solid #222">
+                <QCardSection horizontal>
+                    <span class="text-weight-bold text-subtitle1 text-center full-width">
+                        {{ t('shelvings.total') }}
+                    </span>
+                </QCardSection>
+                <QCardSection class="column items-center" horizontal>
+                    <div>
+                        <span class="details-label"
+                            >{{ t('shelvings.totalLabels') }}
+                        </span>
+                        <span>: {{ totalLabels }}</span>
+                    </div>
+                </QCardSection>
+            </div>
+            <QBtn
+                color="primary"
+                icon="delete"
+                :disabled="!rowsSelected.length"
+                @click="
+                    openConfirmationModal(
+                        t('shelvings.removeConfirmTitle'),
+                        t('shelvings.removeConfirmSubtitle'),
+                        removeLines
+                    )
+                "
+            >
+                <QTooltip>
+                    {{ t('shelvings.removeLines') }}
+                </QTooltip>
+            </QBtn>
+        </div>
+        <QSpace />
+        <div id="st-actions"></div>
+    </QToolbar>
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :rows="rows"
+            :columns="columns"
+            row-key="id"
+            :pagination="{ rowsPerPage: 0 }"
+            class="full-width q-mt-md"
+            selection="multiple"
+            v-model:selected="rowsSelected"
+            :no-data-label="t('globals.noResults')"
+        >
+            <template #top-row="{ cols }">
+                <QTr>
+                    <QTd />
+                    <QTd
+                        v-for="(col, index) in cols"
+                        :key="index"
+                        style="max-width: 100px"
+                    >
+                        <component
+                            :is="col.columnFilter.component"
+                            v-if="col.columnFilter"
+                            v-model="col.columnFilter.filterValue"
+                            v-bind="col.columnFilter.attrs"
+                            v-on="col.columnFilter.event(col)"
+                            dense
+                        />
+                    </QTd>
+                </QTr>
+            </template>
+            <template #body-cell-concept="{ row }">
+                <QTd @click.stop>
+                    <span class="link">{{ row.longName }}</span>
+                    <ItemDescriptorProxy :id="row.itemFk" />
+                </QTd>
+            </template>
+        </QTable>
+    </QPage>
+</template>
diff --git a/src/pages/Item/locale/en.yml b/src/pages/Item/locale/en.yml
new file mode 100644
index 000000000..19bbd7f06
--- /dev/null
+++ b/src/pages/Item/locale/en.yml
@@ -0,0 +1,14 @@
+shelvings:
+    created: Created
+    item: Item
+    concept: Concept
+    parking: Parking
+    shelving: Shelving
+    label: Label
+    packing: Packing
+    total: Total
+    totalLabels: Total labels
+    removeLines: Remove selected lines
+    shelvingsRemoved: ItemShelvings removed
+    removeConfirmTitle: Selected lines will be deleted
+    removeConfirmSubtitle: Are you sure you want to continue?
diff --git a/src/pages/Item/locale/es.yml b/src/pages/Item/locale/es.yml
new file mode 100644
index 000000000..6f99bb4be
--- /dev/null
+++ b/src/pages/Item/locale/es.yml
@@ -0,0 +1,14 @@
+shelvings:
+    created: Creado
+    item: Artículo
+    concept: Concepto
+    parking: Parking
+    shelving: Matrícula
+    label: Etiqueta
+    packing: Packing
+    total: Total
+    totalLabels: Total etiquetas
+    removeLines: Eliminar líneas seleccionadas
+    shelvingsRemoved: Carros eliminados
+    removeConfirmTitle: Las líneas seleccionadas serán eliminadas
+    removeConfirmSubtitle: ¿Seguro que quieres continuar?
diff --git a/src/router/modules/item.js b/src/router/modules/item.js
index bc1e72a94..59bd07d20 100644
--- a/src/router/modules/item.js
+++ b/src/router/modules/item.js
@@ -20,6 +20,7 @@ export default {
             'ItemTax',
             'ItemBotanical',
             'ItemBarcode',
+            'ItemShelving',
         ],
     },
     children: [
@@ -157,6 +158,15 @@ export default {
                     },
                     component: () => import('src/pages/Item/Card/ItemBotanical.vue'),
                 },
+                {
+                    path: 'shelving',
+                    name: 'ItemShelving',
+                    meta: {
+                        title: 'shelving',
+                        icon: 'vn:inventory',
+                    },
+                    component: () => import('src/pages/Item/Card/ItemShelving.vue'),
+                },
             ],
         },
     ],

From 455f47d46fb382935e058da3cd3776615dc02396 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 2 May 2024 10:23:35 +0200
Subject: [PATCH 08/61] feat: refs #5919 set store.data

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

diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index 6d0badffb..a062e4d80 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onBeforeMount, computed } from 'vue';
+import { onBeforeMount, computed, watchEffect } from 'vue';
 import { useRoute, onBeforeRouteUpdate } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'src/composables/useArrayData';
@@ -47,6 +47,11 @@ if (props.baseUrl) {
         }
     });
 }
+
+watchEffect(() => {
+    if (Array.isArray(arrayData.store.data))
+        arrayData.store.data = arrayData.store.data[0];
+});
 </script>
 <template>
     <Teleport

From 554b9e814b9af83e65c091cf1d0a30c61d6ead3e Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 2 May 2024 09:08:03 -0300
Subject: [PATCH 09/61] WIP

---
 src/components/FilterItemForm.vue           |  11 +-
 src/pages/Entry/Card/EntryBuysImport.vue    |   1 +
 src/pages/Item/Card/CreateIntrastatForm.vue |  52 +++++
 src/pages/Item/Card/ItemBasicData.vue       | 240 +++++++++++++++++++-
 src/pages/Item/locale/en.yml                |  17 ++
 src/pages/Item/locale/es.yml                |  17 ++
 6 files changed, 334 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/Item/Card/CreateIntrastatForm.vue

diff --git a/src/components/FilterItemForm.vue b/src/components/FilterItemForm.vue
index e031999e2..00659f8fd 100644
--- a/src/components/FilterItemForm.vue
+++ b/src/components/FilterItemForm.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref, reactive, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
 
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
@@ -12,10 +11,16 @@ import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import axios from 'axios';
 import { dashIfEmpty } from 'src/filters';
 
+const props = defineProps({
+    url: {
+        type: String,
+        required: true,
+    },
+});
+
 const emit = defineEmits(['itemSelected']);
 
 const { t } = useI18n();
-const route = useRoute();
 
 const itemFilter = {
     include: [
@@ -100,7 +105,7 @@ const fetchResults = async () => {
         }
         filter.where = where;
 
-        const { data } = await axios.get(`Entries/${route.params.id}/lastItemBuys`, {
+        const { data } = await axios.get(props.url, {
             params: { filter: JSON.stringify(filter) },
         });
         tableRows.value = data;
diff --git a/src/pages/Entry/Card/EntryBuysImport.vue b/src/pages/Entry/Card/EntryBuysImport.vue
index 705f56b68..6d856f068 100644
--- a/src/pages/Entry/Card/EntryBuysImport.vue
+++ b/src/pages/Entry/Card/EntryBuysImport.vue
@@ -251,6 +251,7 @@ const redirectToBuysView = () => {
                                 >
                                     <template #form>
                                         <FilterItemForm
+                                            :url="`Entries/${route.params.id}/lastItemBuys`"
                                             @item-selected="row[col.field] = $event"
                                         />
                                     </template>
diff --git a/src/pages/Item/Card/CreateIntrastatForm.vue b/src/pages/Item/Card/CreateIntrastatForm.vue
new file mode 100644
index 000000000..3fd1ffe22
--- /dev/null
+++ b/src/pages/Item/Card/CreateIntrastatForm.vue
@@ -0,0 +1,52 @@
+<script setup>
+import { reactive, ref, onMounted, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import VnInput from 'src/components/common/VnInput.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import FormModelPopup from 'components/FormModelPopup.vue';
+
+const { t } = useI18n();
+const emit = defineEmits(['onDataSaved']);
+const route = useRoute();
+
+const identifierInputRef = ref(null);
+const intrastatFormData = reactive({});
+
+const onDataSaved = (formData, requestResponse) => {
+    emit('onDataSaved', formData, requestResponse);
+};
+
+onMounted(async () => {
+    await nextTick();
+    identifierInputRef.value.focus();
+});
+</script>
+
+<template>
+    <FormModelPopup
+        :url-update="`Items/${route.params.id}/createIntrastat`"
+        model="itemGenus"
+        :title="t('createIntrastatForm.title')"
+        :form-initial-data="intrastatFormData"
+        @on-data-saved="onDataSaved"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    ref="identifierInputRef"
+                    :label="t('createIntrastatForm.identifier')"
+                    type="number"
+                    v-model.number="data.intrastatId"
+                    :required="true"
+                />
+                <VnInput
+                    :label="t('createIntrastatForm.description')"
+                    v-model="data.description"
+                    :required="true"
+                />
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
diff --git a/src/pages/Item/Card/ItemBasicData.vue b/src/pages/Item/Card/ItemBasicData.vue
index 334cf049d..dc6868fba 100644
--- a/src/pages/Item/Card/ItemBasicData.vue
+++ b/src/pages/Item/Card/ItemBasicData.vue
@@ -1 +1,239 @@
-<template>Item basic data</template>
+<script setup>
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
+import FilterItemForm from 'src/components/FilterItemForm.vue';
+import CreateIntrastatForm from './CreateIntrastatForm.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const itemTypesOptions = ref([]);
+const itemsWithNameOptions = ref([]);
+const intrastatsOptions = ref([]);
+const expensesOptions = ref([]);
+
+const onIntrastatCreated = (response, formData) => {
+    intrastatsOptions.value = [...intrastatsOptions.value, response];
+    formData.intrastatFk = response.id;
+};
+</script>
+<template>
+    <FetchData
+        url="ItemTypes"
+        :filter="{
+            fields: ['id', 'name', 'categoryFk'],
+            include: 'category',
+            order: 'name ASC',
+        }"
+        @on-fetch="(data) => (itemTypesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Items/withName"
+        :filter="{
+            fields: ['id', 'name'],
+            order: 'id DESC',
+        }"
+        @on-fetch="(data) => (itemsWithNameOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Intrastats"
+        :filter="{
+            fields: ['id', 'description'],
+            order: 'description ASC',
+        }"
+        @on-fetch="(data) => (intrastatsOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Expenses"
+        :filter="{
+            fields: ['id', 'name'],
+            order: 'name ASC',
+        }"
+        @on-fetch="(data) => (expensesOptions = data)"
+        auto-load
+    />
+    <FormModel
+        :url="`Items/${route.params.id}`"
+        :url-update="`Items/${route.params.id}`"
+        model="item"
+        auto-load
+        :clear-store-on-unmount="false"
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnSelect
+                    :label="t('basicData.type')"
+                    v-model="data.typeFk"
+                    :options="itemTypesOptions"
+                    option-value="id"
+                    option-label="name"
+                    hide-selected
+                    map-options
+                >
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            <QItemSection>
+                                <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
+                                <QItemLabel caption>
+                                    {{ scope.opt?.category?.name }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelect>
+                <VnInput :label="t('basicData.reference')" v-model="data.comment" />
+                <VnInput :label="t('basicData.relevancy')" v-model="data.relevancy" />
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput :label="t('basicData.stems')" v-model="data.stems" />
+                <VnInput
+                    :label="t('basicData.multiplier')"
+                    v-model="data.stemMultiplier"
+                />
+                <VnSelectDialog
+                    :label="t('basicData.generic')"
+                    v-model="data.genericFk"
+                    :options="itemsWithNameOptions"
+                    option-value="id"
+                    option-label="name"
+                    map-options
+                    hide-selected
+                    action-icon="filter_alt"
+                >
+                    <template #form>
+                        <FilterItemForm
+                            url="Items/withName"
+                            @item-selected="data.genericFk = $event"
+                        />
+                    </template>
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            <QItemSection>
+                                <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
+                                <QItemLabel caption> #{{ scope.opt?.id }} </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelectDialog>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnSelectDialog
+                    :label="t('basicData.intrastat')"
+                    v-model="data.intrastatFk"
+                    :options="intrastatsOptions"
+                    option-value="id"
+                    option-label="description"
+                    map-options
+                    hide-selected
+                >
+                    <template #form>
+                        <CreateIntrastatForm
+                            @on-data-saved="
+                                (_, requestResponse) =>
+                                    onIntrastatCreated(requestResponse, data)
+                            "
+                        />
+                    </template>
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            <QItemSection>
+                                <QItemLabel>{{ scope.opt?.description }}</QItemLabel>
+                                <QItemLabel caption> #{{ scope.opt?.id }} </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelectDialog>
+                <div class="col">
+                    <VnSelect
+                        :label="t('basicData.expense')"
+                        v-model="data.expenseFk"
+                        :options="expensesOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        map-options
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    :label="t('basicData.weightByPiece')"
+                    v-model.number="data.weightByPiece"
+                    :min="0"
+                    type="number"
+                />
+                <VnInput
+                    :label="t('basicData.boxUnits')"
+                    v-model.number="data.packingOut"
+                    :min="0"
+                    type="number"
+                />
+                <VnInput
+                    :label="t('basicData.recycledPlastic')"
+                    v-model.number="data.recycledPlastic"
+                    :min="0"
+                    type="number"
+                />
+                <VnInput
+                    :label="t('basicData.nonRecycledPlastic')"
+                    v-model.number="data.nonRecycledPlastic"
+                    :min="0"
+                    type="number"
+                />
+            </VnRow>
+            <!-- <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        :label="t('entry.basicData.observation')"
+                        type="textarea"
+                        v-model="data.observation"
+                        :maxlength="45"
+                        counter
+                        fill-input
+                    />
+                </div>
+            </VnRow> -->
+            <!-- <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox
+                        v-model="data.isOrdered"
+                        :label="t('entry.basicData.ordered')"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        v-model="data.isConfirmed"
+                        :label="t('entry.basicData.confirmed')"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        v-model="data.isExcludedFromAvailable"
+                        :label="t('entry.basicData.excludedFromAvailable')"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox v-model="data.isRaid" :label="t('entry.basicData.raid')" />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        v-if="isAdministrative()"
+                        v-model="data.isBooked"
+                        :label="t('entry.basicData.booked')"
+                    />
+                </div>
+            </VnRow> -->
+        </template>
+    </FormModel>
+</template>
diff --git a/src/pages/Item/locale/en.yml b/src/pages/Item/locale/en.yml
index ec3b134e8..410ed5edc 100644
--- a/src/pages/Item/locale/en.yml
+++ b/src/pages/Item/locale/en.yml
@@ -11,3 +11,20 @@ itemDiary:
     showBefore: Show what's before the inventory
     since: Since
     warehouse: Warehouse
+basicData:
+    type: Type
+    reference: Reference
+    relevancy: Relevancy
+    stems: Stems
+    multiplier: Multiplier
+    generic: Generic
+    intrastat: Intrastat
+    expense: Expense
+    weightByPiece: Weight/Piece
+    boxUnits: Units/Box
+    recycledPlastic: Recycled plastic
+    nonRecycledPlastic: Non recycled plastic
+createIntrastatForm:
+    title: New intrastat
+    identifier: Identifier
+    description: Description
diff --git a/src/pages/Item/locale/es.yml b/src/pages/Item/locale/es.yml
index 4f76313fa..6540c36c8 100644
--- a/src/pages/Item/locale/es.yml
+++ b/src/pages/Item/locale/es.yml
@@ -11,3 +11,20 @@ itemDiary:
     showBefore: Mostrar lo anterior al inventario
     since: Desde
     warehouse: Almacén
+basicData:
+    type: Tipo
+    reference: Referencia
+    relevancy: Relevancia
+    stems: Tallos
+    multiplier: Multiplicador
+    generic: Genérico
+    intrastat: Intrastat
+    expense: Gasto
+    weightByPiece: Peso (gramos)/tallo
+    boxUnits: Unidades/caja
+    recycledPlastic: Plástico reciclado
+    nonRecycledPlastic: Plástico no reciclado
+createIntrastatForm:
+    title: Nuevo intrastat
+    identifier: Identificador
+    description: Descripción

From cb0d7214650b02e1ab5a7af4e348e037a03b8e84 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 2 May 2024 14:40:56 +0200
Subject: [PATCH 10/61] feat: zoneSummary

---
 src/pages/Zone/Card/ZoneSummary.vue | 94 +++++++++++++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 src/pages/Zone/Card/ZoneSummary.vue

diff --git a/src/pages/Zone/Card/ZoneSummary.vue b/src/pages/Zone/Card/ZoneSummary.vue
new file mode 100644
index 000000000..00df03cb0
--- /dev/null
+++ b/src/pages/Zone/Card/ZoneSummary.vue
@@ -0,0 +1,94 @@
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { dashIfEmpty } from 'src/filters';
+import { getUrl } from 'src/composables/getUrl';
+import VnLv from 'src/components/ui/VnLv.vue';
+import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
+import CardSummary from 'components/ui/CardSummary.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const entityId = computed(() => $props.id || route.params.id);
+const zoneUrl = ref();
+
+onMounted(async () => {
+    zoneUrl.value = (await getUrl('')) + `zone/${entityId.value}/`;
+});
+
+const filter = computed(() => {
+    return { where: { id: entityId.value } };
+});
+</script>
+
+<template>
+    <CardSummary
+        data-key="zoneData"
+        ref="summary"
+        :url="`Zones/summary`"
+        :filter="filter"
+    >
+        <template #header="{ entity }">
+            <div>{{ entity.id }} - {{ entity.firstName }} {{ entity.lastName }}</div>
+        </template>
+        <template #body="{ entity: zone }">
+            <QCard class="vn-one">
+                <VnTitle
+                    :url="zoneUrl + `basic-data`"
+                    :text="t('zone.summary.basicData')"
+                />
+                <VnLv :label="t('zone.card.name')" :value="zone.user?.nickname" />
+                <VnLv
+                    :label="t('zone.list.department')"
+                    :value="zone.department?.department?.name"
+                />
+                <VnLv :label="t('zone.list.email')" :value="zone.user.email" copy />
+                <VnLv :label="t('zone.summary.boss')" link>
+                    <template #value>
+                        <VnUserLink
+                            v-if="zone.boss"
+                            :name="dashIfEmpty(zone.boss?.name)"
+                            :zone-id="zone.bossFk"
+                        />
+                    </template>
+                </VnLv>
+                <VnLv :value="zone.mobileExtension">
+                    <template #label>
+                        {{ t('zone.summary.phoneExtension') }}
+                        <VnLinkPhone :phone-number="zone.mobileExtension" />
+                    </template>
+                </VnLv>
+                <VnLv :value="zone.phone">
+                    <template #label>
+                        {{ t('zone.summary.entPhone') }}
+                        <VnLinkPhone :phone-number="zone.phone" />
+                    </template>
+                </VnLv>
+                <VnLv :label="t('zone.summary.locker')" :value="zone.locker" />
+            </QCard>
+            <QCard class="vn-one">
+                <VnTitle :text="t('zone.summary.userData')" />
+                <VnLv :label="t('zone.summary.userId')" :value="zone.user.id" />
+                <VnLv :label="t('zone.card.name')" :value="zone.user.nickname" />
+                <VnLv :label="t('zone.summary.role')" :value="zone.user.role.name" />
+                <VnLv :value="zone?.sip?.extension">
+                    <template #label>
+                        {{ t('zone.summary.sipExtension') }}
+                        <VnLinkPhone :phone-number="zone?.sip?.extension" />
+                    </template>
+                </VnLv>
+            </QCard>
+        </template>
+    </CardSummary>
+</template>

From d68934a5269ff18f69ef8398e32914228bccab22 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 2 May 2024 11:51:04 -0300
Subject: [PATCH 11/61] Item basic data

---
 src/pages/Item/Card/ItemBasicData.vue | 66 ++++++++++++---------------
 src/pages/Item/locale/en.yml          |  7 +++
 src/pages/Item/locale/es.yml          |  7 +++
 3 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/src/pages/Item/Card/ItemBasicData.vue b/src/pages/Item/Card/ItemBasicData.vue
index dc6868fba..7e8fa1d92 100644
--- a/src/pages/Item/Card/ItemBasicData.vue
+++ b/src/pages/Item/Card/ItemBasicData.vue
@@ -192,48 +192,42 @@ const onIntrastatCreated = (response, formData) => {
                     type="number"
                 />
             </VnRow>
-            <!-- <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QInput
-                        :label="t('entry.basicData.observation')"
-                        type="textarea"
-                        v-model="data.observation"
-                        :maxlength="45"
-                        counter
-                        fill-input
-                    />
-                </div>
-            </VnRow> -->
-            <!-- <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <QCheckbox v-model="data.isActive" :label="t('basicData.isActive')" />
+                <QCheckbox v-model="data.hasKgPrice" :label="t('basicData.hasKgPrice')" />
+                <div>
                     <QCheckbox
-                        v-model="data.isOrdered"
-                        :label="t('entry.basicData.ordered')"
+                        v-model="data.isFragile"
+                        :label="t('basicData.isFragile')"
+                        class="q-mr-sm"
                     />
+                    <QIcon name="info" class="cursor-pointer" size="xs">
+                        <QTooltip max-width="300px">
+                            {{ t('basicData.isFragileTooltip') }}
+                        </QTooltip>
+                    </QIcon>
                 </div>
-                <div class="col">
+                <div>
                     <QCheckbox
-                        v-model="data.isConfirmed"
-                        :label="t('entry.basicData.confirmed')"
+                        v-model="data.isPhotoRequested"
+                        :label="t('basicData.isPhotoRequested')"
+                        class="q-mr-sm"
                     />
+                    <QIcon name="info" class="cursor-pointer" size="xs">
+                        <QTooltip>
+                            {{ t('basicData.isPhotoRequestedTooltip') }}
+                        </QTooltip>
+                    </QIcon>
                 </div>
-                <div class="col">
-                    <QCheckbox
-                        v-model="data.isExcludedFromAvailable"
-                        :label="t('entry.basicData.excludedFromAvailable')"
-                    />
-                </div>
-                <div class="col">
-                    <QCheckbox v-model="data.isRaid" :label="t('entry.basicData.raid')" />
-                </div>
-                <div class="col">
-                    <QCheckbox
-                        v-if="isAdministrative()"
-                        v-model="data.isBooked"
-                        :label="t('entry.basicData.booked')"
-                    />
-                </div>
-            </VnRow> -->
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <QInput
+                    :label="t('basicData.description')"
+                    type="textarea"
+                    v-model="data.description"
+                    fill-input
+                />
+            </VnRow>
         </template>
     </FormModel>
 </template>
diff --git a/src/pages/Item/locale/en.yml b/src/pages/Item/locale/en.yml
index 410ed5edc..35d65b2da 100644
--- a/src/pages/Item/locale/en.yml
+++ b/src/pages/Item/locale/en.yml
@@ -24,6 +24,13 @@ basicData:
     boxUnits: Units/Box
     recycledPlastic: Recycled plastic
     nonRecycledPlastic: Non recycled plastic
+    description: Description
+    isActive: Active
+    hasKgPrice: Price in kg
+    isFragile: Fragile
+    isFragileTooltip: Is shown at website, app that this item cannot travel (wreath, palms, ...)
+    isPhotoRequested: Do photo
+    isPhotoRequestedTooltip: This item does need a photo
 createIntrastatForm:
     title: New intrastat
     identifier: Identifier
diff --git a/src/pages/Item/locale/es.yml b/src/pages/Item/locale/es.yml
index 6540c36c8..498520c26 100644
--- a/src/pages/Item/locale/es.yml
+++ b/src/pages/Item/locale/es.yml
@@ -24,6 +24,13 @@ basicData:
     boxUnits: Unidades/caja
     recycledPlastic: Plástico reciclado
     nonRecycledPlastic: Plástico no reciclado
+    description: Descripción
+    isActive: Activo
+    hasKgPrice: Precio en kg
+    isFragile: Frágil
+    isFragileTooltip: Se muestra en la web app, que este artículo no puede viajar (coronas, palmas, ...)
+    isPhotoRequested: Hacer foto
+    isPhotoRequestedTooltip: Este artículo necesita una foto
 createIntrastatForm:
     title: Nuevo intrastat
     identifier: Identificador

From 1a5f2fbea2a7c821ca7d9e70fa5224f6a82dc22f Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 3 May 2024 12:30:53 +0200
Subject: [PATCH 12/61] feat: refs #7271 advanced structure

---
 src/i18n/locale/en.yml                       |   4 +
 src/i18n/locale/es.yml                       |   6 +-
 src/pages/Zone/Card/ZoneBasicData.vue        | 103 +++++++++++++++++++
 src/pages/Zone/Card/ZoneCalendar.vue         |   0
 src/pages/Zone/Card/ZoneLocations.vue        |   0
 src/pages/Zone/Card/ZoneLog.vue              |   6 ++
 src/pages/Zone/Card/ZoneSummary.vue          |   3 +
 src/pages/Zone/Card/ZoneWarehouses.vue       |  59 +++++++++++
 src/pages/Zone/Delivery/ZoneDeliveryList.vue |   3 +-
 src/pages/Zone/Upcoming/ZoneUpcomingList.vue |   3 +-
 src/pages/Zone/ZoneCreate.vue                |   8 +-
 src/pages/Zone/ZoneDeliveryDays.vue          |   0
 src/pages/Zone/ZoneFilterPanel.vue           |  55 ++++++++++
 src/pages/Zone/ZoneList.vue                  |  67 +++++++-----
 src/pages/Zone/ZoneUpcoming.vue              |  53 ++++++++++
 src/pages/Zone/locale/en.yml                 |  19 ++++
 src/pages/Zone/locale/es.yml                 |  19 ++++
 17 files changed, 376 insertions(+), 32 deletions(-)
 create mode 100644 src/pages/Zone/Card/ZoneBasicData.vue
 create mode 100644 src/pages/Zone/Card/ZoneCalendar.vue
 create mode 100644 src/pages/Zone/Card/ZoneLocations.vue
 create mode 100644 src/pages/Zone/Card/ZoneLog.vue
 create mode 100644 src/pages/Zone/Card/ZoneSummary.vue
 create mode 100644 src/pages/Zone/Card/ZoneWarehouses.vue
 create mode 100644 src/pages/Zone/ZoneDeliveryDays.vue
 create mode 100644 src/pages/Zone/ZoneFilterPanel.vue
 create mode 100644 src/pages/Zone/ZoneUpcoming.vue
 create mode 100644 src/pages/Zone/locale/en.yml
 create mode 100644 src/pages/Zone/locale/es.yml

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index aa65ce08c..a580f2553 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -90,6 +90,10 @@ globals:
         basicData: Basic data
         log: Logs
         parkingList: Parkings list
+        zones: Zones
+        zonesList: Zones
+        deliveryList: Delivery days
+        upcomingList: Upcoming deliveries
     created: Created
     worker: Worker
     now: Now
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index da421432d..ef7ebf22b 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -90,6 +90,10 @@ globals:
         basicData: Datos básicos
         log: Historial
         parkingList: Listado de parkings
+        zones: Zonas
+        zonesList: Zonas
+        deliveryList: Días de entrega
+        upcomingList: Próximos repartos
     created: Fecha creación
     worker: Trabajador
     now: Ahora
@@ -287,7 +291,7 @@ customer:
             hasSepaVnl: Recibido B2B VNL
 entry:
     pageTitles:
-        entries: Entrasdadas
+        entries: Entradas
         list: Listado
         summary: Resumen
         basicData: Datos básicos
diff --git a/src/pages/Zone/Card/ZoneBasicData.vue b/src/pages/Zone/Card/ZoneBasicData.vue
new file mode 100644
index 000000000..5d57b920e
--- /dev/null
+++ b/src/pages/Zone/Card/ZoneBasicData.vue
@@ -0,0 +1,103 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'src/components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import { QCheckbox } from 'quasar';
+
+const route = useRoute();
+const { t } = useI18n();
+const zoneFilter = {
+    include: [
+        {
+            relation: 'agency',
+            scope: {
+                fields: ['name'],
+                include: { relation: 'agencyModeFk', scope: { fields: ['id'] } },
+            },
+        },
+        { relation: 'sip', scope: { fields: ['extension', 'secret'] } },
+        { relation: 'department', scope: { include: { relation: 'department' } } },
+        { relation: 'client', scope: { fields: ['phone'] } },
+    ],
+};
+const agencyFilter = {
+    fields: ['id', 'name'],
+    order: 'name ASC',
+    limit: 30,
+};
+</script>
+
+<template>
+    <FetchData
+        :filter="agencyFilter"
+        @on-fetch="(data) => (agencyOptions = data)"
+        auto-load
+        url="agencies"
+    />
+    <FetchData
+        :filter="zoneFilter"
+        @on-fetch="(data) => (zoneOptions = data)"
+        auto-load
+        url="zones"
+    />
+
+    <FormModel
+        :filter="zoneFilter"
+        :url="`zone/${route.params.id}/basic-data`"
+        auto-load
+        model="Zone"
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput :label="t('Name')" clearable v-model="data.zone.name" />
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput v-model="data.agency.name" :label="t('Agency')" clearable />
+                <VnInput v-model="data.zone.itemMaxSize" :label="t('Max m³')" clearable />
+                <VnInput v-model="data.zone.m3Max" :label="t('Maximum m³')" clearable />
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    v-model="data.zone.travelingDays"
+                    :label="t('Traveling days')"
+                    clearable
+                />
+                <VnInput v-model="data.zone.hour" :label="t('Closing')" clearable />
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput v-model="data.zone.price" :label="t('Price')" clearable />
+                <VnInput v-model="data.zone.bonus" :label="t('Bonus')" clearable />
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    v-model="data.zone.inflation"
+                    :label="t('Inflation')"
+                    clearable
+                />
+                <QCheckbox v-model="data.zone.isVolumetric" :label="t('Volumetric')" />
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
+
+<i18n>
+es:
+    Name: Nombre
+    Agency: Agencia
+    Max m³: Medida máxima
+    Maximum m³: M³ maximo
+    Traveling days: Dias de viaje
+    Closing: Cierre
+    Price: Precio
+    Bonus: Bonificación
+    Inflation: Inflación
+    Volumetric: Volumétrico
+</i18n>
diff --git a/src/pages/Zone/Card/ZoneCalendar.vue b/src/pages/Zone/Card/ZoneCalendar.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pages/Zone/Card/ZoneLocations.vue b/src/pages/Zone/Card/ZoneLocations.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pages/Zone/Card/ZoneLog.vue b/src/pages/Zone/Card/ZoneLog.vue
new file mode 100644
index 000000000..373d210b5
--- /dev/null
+++ b/src/pages/Zone/Card/ZoneLog.vue
@@ -0,0 +1,6 @@
+<script setup>
+import VnLog from 'src/components/common/VnLog.vue';
+</script>
+<template>
+    <VnLog model="Zone" url="/ZoneLogs"></VnLog>
+</template>
diff --git a/src/pages/Zone/Card/ZoneSummary.vue b/src/pages/Zone/Card/ZoneSummary.vue
new file mode 100644
index 000000000..63090b5d4
--- /dev/null
+++ b/src/pages/Zone/Card/ZoneSummary.vue
@@ -0,0 +1,3 @@
+<template>
+    <div>Si</div>
+</template>
diff --git a/src/pages/Zone/Card/ZoneWarehouses.vue b/src/pages/Zone/Card/ZoneWarehouses.vue
new file mode 100644
index 000000000..67a81ba4d
--- /dev/null
+++ b/src/pages/Zone/Card/ZoneWarehouses.vue
@@ -0,0 +1,59 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import CardList from 'components/CardList.vue';
+import VnLv from 'components/ui/VnLv.vue';
+
+const route = useRoute();
+
+function deleteWarehouse() {
+    let row = this.deleteRow;
+    if (!row) return;
+    return this.$http.delete(`${this.path}/${row.id}`).then(() => {
+        let index = this.$.data.indexOf(row);
+        if (index !== -1) this.$.data.splice(index, 1);
+        this.deleteRow = null;
+    });
+}
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="ZoneWarehouses"
+                :url="`Zones/${route.params.id}/warehouses`"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="row.name"
+                        :id="row.id"
+                    >
+                        <template #list-items>
+                            <VnLv :value="row.name" />
+                            <QIcon
+                                name="delete"
+                                size="sm"
+                                class="cursor-pointer"
+                                color="primary"
+                                @click="deleteWarehouse()"
+                            >
+                                <QTooltip>
+                                    {{ t('Remove row') }}
+                                </QTooltip>
+                            </QIcon>
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
+
+<i18n>
+    es:
+        Remove row: Eliminar fila
+</i18n>
diff --git a/src/pages/Zone/Delivery/ZoneDeliveryList.vue b/src/pages/Zone/Delivery/ZoneDeliveryList.vue
index c7a3cbcdb..695388a9b 100644
--- a/src/pages/Zone/Delivery/ZoneDeliveryList.vue
+++ b/src/pages/Zone/Delivery/ZoneDeliveryList.vue
@@ -6,7 +6,6 @@ import { useArrayData } from 'src/composables/useArrayData';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import CardList from 'components/ui/CardList.vue';
-import VnLv from 'components/ui/VnLv.vue';
 
 const quasar = useQuasar();
 const arrayData = useArrayData('ZoneDeliveryList');
@@ -45,7 +44,7 @@ async function remove(row) {
         <div class="vn-card-list">
             <VnPaginate
                 data-key="ZoneDeliveryList"
-                url="/ZoneDeliverys"
+                url="/Zones/getEvents"
                 order="id DESC"
                 auto-load
             >
diff --git a/src/pages/Zone/Upcoming/ZoneUpcomingList.vue b/src/pages/Zone/Upcoming/ZoneUpcomingList.vue
index 5c417df8f..2d3016f25 100644
--- a/src/pages/Zone/Upcoming/ZoneUpcomingList.vue
+++ b/src/pages/Zone/Upcoming/ZoneUpcomingList.vue
@@ -6,7 +6,6 @@ import { useArrayData } from 'src/composables/useArrayData';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import CardList from 'components/ui/CardList.vue';
-import VnLv from 'components/ui/VnLv.vue';
 
 const quasar = useQuasar();
 const arrayData = useArrayData('ZoneUpcomingList');
@@ -45,7 +44,7 @@ async function remove(row) {
         <div class="vn-card-list">
             <VnPaginate
                 data-key="ZoneUpcomingList"
-                url="/ZoneUpcomings"
+                url="/Zones/getUpcomingDeliveries"
                 order="id DESC"
                 auto-load
             >
diff --git a/src/pages/Zone/ZoneCreate.vue b/src/pages/Zone/ZoneCreate.vue
index 8c0ba8c17..93ea9589b 100644
--- a/src/pages/Zone/ZoneCreate.vue
+++ b/src/pages/Zone/ZoneCreate.vue
@@ -96,7 +96,7 @@ function filterType(val, update) {
                         <QInput
                             filled
                             v-model="zone.label"
-                            :label="t('zone.create.label')"
+                            :label="t('zone.create.name')"
                             type="number"
                             min="0"
                             :rules="[(val) => !!val || t('zone.warnings.labelNotEmpty')]"
@@ -106,7 +106,7 @@ function filterType(val, update) {
                         <VnInput
                             filled
                             v-model="zone.plate"
-                            :label="t('zone.create.plate')"
+                            :label="t('zone.create.agency')"
                             :rules="[(val) => !!val || t('zone.warnings.plateNotEmpty')]"
                         />
                     </div>
@@ -116,7 +116,7 @@ function filterType(val, update) {
                         <QInput
                             filled
                             v-model="zone.volume"
-                            :label="t('zone.create.volume')"
+                            :label="t('zone.create.close')"
                             type="number"
                             min="0"
                             :rules="[(val) => !!val || t('zone.warnings.volumeNotEmpty')]"
@@ -134,7 +134,7 @@ function filterType(val, update) {
                             option-value="id"
                             emit-value
                             map-options
-                            :label="t('zone.create.type')"
+                            :label="t('zone.create.price')"
                             :options="filteredZoneTypes"
                             :rules="[(val) => !!val || t('zone.warnings.typeNotEmpty')]"
                             @filter="filterType"
diff --git a/src/pages/Zone/ZoneDeliveryDays.vue b/src/pages/Zone/ZoneDeliveryDays.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pages/Zone/ZoneFilterPanel.vue b/src/pages/Zone/ZoneFilterPanel.vue
new file mode 100644
index 000000000..94765919d
--- /dev/null
+++ b/src/pages/Zone/ZoneFilterPanel.vue
@@ -0,0 +1,55 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnInput from 'components/common/VnInput.vue';
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+    exprBuilder: {
+        type: Function,
+        default: null,
+    },
+});
+const agencies = ref([]);
+</script>
+
+<template>
+    <FetchData
+        url="agencies"
+        limit="30"
+        @on-fetch="(data) => (agencies = data)"
+        auto-load
+    />
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #body="{ params }">
+            <QItem>
+                <QItemSection>
+                    <VnInput :label="t('Name')" v-model="params.name" is-outlined />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('Agency')"
+                        v-model="params.agencyModefK"
+                        :options="agencies"
+                        option-value="id"
+                        option-label="name"
+                        @input-value="agencies.fetch()"
+                        dense
+                        outlined
+                        rounded
+                    >
+                    </VnSelectFilter>
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnFilterPanel>
+</template>
diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index 00502e1f7..2140c5e14 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/src/pages/Zone/ZoneList.vue
@@ -7,21 +7,15 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import CardList from 'components/ui/CardList.vue';
 import VnLv from 'components/ui/VnLv.vue';
+import FetchData from 'src/components/FetchData.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const quasar = useQuasar();
 const arrayData = useArrayData('ZoneList');
 const store = arrayData.store;
 const router = useRouter();
 const { t } = useI18n();
-
-const filter = {
-    include: {
-        relation: 'type',
-        scope: {
-            fields: 'name',
-        },
-    },
-};
+const { viewSummary } = useSummaryDialog();
 
 function navigate(id) {
     router.push({ path: `/zone/${id}/edit` });
@@ -44,18 +38,25 @@ async function remove(row) {
         //
     }
 }
+
+function extractHour(dateTime) {
+    const date = new Date(dateTime);
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    return `${hours}:${minutes}`;
+}
 </script>
 
 <template>
+    <FetchData
+        url="/Agencies"
+        @on-fetch="(data) => (agencyOptions = data)"
+        :filter="{ fields: ['id', 'name'] }"
+        auto-load
+    />
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
-            <VnPaginate
-                data-key="ZoneList"
-                url="/Zones"
-                order="id DESC"
-                :filter="filter"
-                auto-load
-            >
+            <VnPaginate data-key="ZoneList" url="/Zones" order="id DESC" auto-load>
                 <template #body="{ rows }">
                     <CardList
                         v-for="row of rows"
@@ -66,12 +67,23 @@ async function remove(row) {
                     >
                         <template #list-items>
                             <VnLv
-                                :label="t('zone.list.plate')"
-                                :title-label="t('zone.list.plate')"
-                                :value="row.plate"
+                                :label="t('zone.list.id')"
+                                :title-label="t('zone.list.id')"
+                                :value="row.id"
                             />
-                            <VnLv :label="t('zone.list.volume')" :value="row?.volume" />
-                            <VnLv :label="t('zone.list.type')" :value="row?.type?.name" />
+                            <VnLv :label="t('zone.list.name')" :value="row?.name" />
+                            <VnLv
+                                :label="t('zone.list.agency')"
+                                :options="agencyOptions"
+                                option-value="id"
+                                option-label="name"
+                                :value="row?.agencyFk"
+                            />
+                            <VnLv
+                                :label="t('zone.list.close')"
+                                :value="extractHour(row?.hour)"
+                            />
+                            <VnLv :label="t('zone.list.price')" :value="row?.price" />
                         </template>
                         <template #actions>
                             <QBtn
@@ -80,7 +92,14 @@ async function remove(row) {
                                 outline
                             />
                             <QBtn
-                                :label="t('zone.list.remove')"
+                                :label="t('zone.list.openSummary')"
+                                @click.stop="viewSummary(row.id, ZoneSummary)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                            <!--AQUI PONER BOTÓN CLONAR-->
+                            <QBtn
+                                :label="t('zone.list.clone')"
                                 @click.stop="remove(row)"
                                 color="primary"
                                 style="margin-top: 15px"
@@ -91,7 +110,9 @@ async function remove(row) {
             </VnPaginate>
         </div>
         <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn @click="create" fab icon="add" color="primary" />
+            <QBtn @click="create" fab icon="add" color="primary">
+                <QTooltip>{{ t('zone.list.create') }}</QTooltip>
+            </QBtn>
         </QPageSticky>
     </QPage>
 </template>
diff --git a/src/pages/Zone/ZoneUpcoming.vue b/src/pages/Zone/ZoneUpcoming.vue
new file mode 100644
index 000000000..d405c95f6
--- /dev/null
+++ b/src/pages/Zone/ZoneUpcoming.vue
@@ -0,0 +1,53 @@
+<script setup>
+import { ref, computed } from 'vue';
+import ZoneFilterPanel from 'components/InvoiceOutNegativeFilter.vue';
+import VnSubToolbar from 'components/ui/VnSubToolbar.vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const arrayData = ref(null);
+const rows = computed(() => arrayData.value.store.data);
+
+const columns = computed(() => [
+    {
+        label: t('Province'),
+        //field: '',
+        //name: '',
+        align: 'left',
+    },
+    {
+        label: t('Closing'),
+        //field: '',
+        //name: '',
+        align: 'left',
+    },
+    {
+        label: t('Id'),
+        //field: '',
+        //name: '',
+        align: 'left',
+    },
+]);
+
+function getWeekDay(jsonDate) {
+    const weekDay = new Date(jsonDate).getDay();
+
+    return this.days[weekDay].locale;
+}
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <ZoneFilterPanel data-key="ZoneUpcoming" />
+        </QScrollArea>
+    </QDrawer>
+    <VnSubToolbar />
+    <QPage class="column items-center q-pa-md">
+        <span>
+            {{ t(`${getWeekDay(/*detail.shipped*/)}`) }} -
+            {{ t /*'detail.shipped'*/() }}
+        </span>
+        <QTable :columns="columns" :rows="rows" class="full-width q-mt-md"> </QTable>
+    </QPage>
+</template>
diff --git a/src/pages/Zone/locale/en.yml b/src/pages/Zone/locale/en.yml
new file mode 100644
index 000000000..e62111d57
--- /dev/null
+++ b/src/pages/Zone/locale/en.yml
@@ -0,0 +1,19 @@
+zone:
+    list:
+        volume: Volume
+        clone: Clone
+        id: Id
+        name: Name
+        agency: Agency
+        close: Close
+        price: Price
+        create: Create zone
+        openSummary: Details
+    create:
+        name: Name
+        agency: Agency
+        close: Close
+        price: Price
+    type:
+        submit: Save
+        reset: Reset
diff --git a/src/pages/Zone/locale/es.yml b/src/pages/Zone/locale/es.yml
new file mode 100644
index 000000000..5d7a265bf
--- /dev/null
+++ b/src/pages/Zone/locale/es.yml
@@ -0,0 +1,19 @@
+zone:
+    list:
+        volume: Volumen
+        clone: Clonar
+        id: Id
+        name: Nombre
+        agency: Agencia
+        close: Cierre
+        price: Precio
+        create: Crear zona
+        openSummary: Detalles
+    create:
+        name: Nombre
+        agency: Agencia
+        close: Cierre
+        price: Precio
+    type:
+        submit: Guardar
+        reset: Reiniciar

From 710b45f43ab0ecf3a90142708f060bfe3151f782 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Fri, 3 May 2024 14:49:50 +0200
Subject: [PATCH 13/61] refs #6842 isFreelance

---
 src/pages/Worker/Card/WorkerCalendar.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/pages/Worker/Card/WorkerCalendar.vue b/src/pages/Worker/Card/WorkerCalendar.vue
index 288e78dcf..c0a70571e 100644
--- a/src/pages/Worker/Card/WorkerCalendar.vue
+++ b/src/pages/Worker/Card/WorkerCalendar.vue
@@ -13,7 +13,7 @@ import axios from 'axios';
 const stateStore = useStateStore();
 const route = useRoute();
 const { t } = useI18n();
-
+const workerIsFreelance = ref();
 const workerCalendarFilterRef = ref(null);
 const workerCalendarRef = ref(null);
 const absenceType = ref(null);
@@ -32,6 +32,12 @@ const onFetchActiveContract = (data) => {
     hasWorkCenter.value = Boolean(data?.workCenterFk);
 };
 
+const isFreelance = async () => {
+    const { data } = await axios.get(`Workers/${route.params.id}`);
+
+    workerIsFreelance.value = data.isFreelance;
+};
+
 const addEvent = (day, newEvent, isFestive = false) => {
     const timestamp = new Date(day).getTime();
     let event = eventsMap.value[timestamp];
@@ -128,6 +134,7 @@ const refreshData = () => {
     updateYearHolidays();
     updateContractHolidays();
     getAbsences();
+    isFreelance();
 };
 
 const onDeletedEvent = (timestamp) => {
@@ -151,6 +158,11 @@ watch([year, businessFk], () => refreshData());
         @on-fetch="(data) => (isSubordinate = data)"
         auto-load
     />
+    <FetchData
+        :url="`Workers/${route.params.id}`"
+        @on-fetch="(data) => (workerIsFreelance = data.isFreelance)"
+        auto-load
+    />
     <template v-if="stateStore.isHeaderMounted()">
         <Teleport to="#actions-append">
             <div class="row q-gutter-x-sm">
@@ -181,7 +193,7 @@ watch([year, businessFk], () => refreshData());
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center">
-        <QCard v-if="!hasWorkCenter">
+        <QCard v-if="workerIsFreelance">
             <QCardSection class="text-center">
                 {{ t('Autonomous worker') }}
             </QCardSection>

From 743faef9567f4c7f942a3ebd1d27b45d0f510aec Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 3 May 2024 15:05:37 +0200
Subject: [PATCH 14/61] fix: #6842 Not update calendar correctly

---
 src/pages/Worker/Card/WorkerCalendar.vue   | 13 ++++++++++++-
 src/pages/Worker/Card/WorkerDescriptor.vue |  1 -
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/pages/Worker/Card/WorkerCalendar.vue b/src/pages/Worker/Card/WorkerCalendar.vue
index c0a70571e..6677cb351 100644
--- a/src/pages/Worker/Card/WorkerCalendar.vue
+++ b/src/pages/Worker/Card/WorkerCalendar.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from 'vue';
+import { nextTick, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
@@ -10,6 +10,8 @@ import WorkerCalendarItem from 'pages/Worker/Card/WorkerCalendarItem.vue';
 import { useStateStore } from 'stores/useStateStore';
 import axios from 'axios';
 
+import { useRouter } from 'vue-router';
+const router = useRouter();
 const stateStore = useStateStore();
 const route = useRoute();
 const { t } = useI18n();
@@ -143,12 +145,21 @@ const onDeletedEvent = (timestamp) => {
     if (festiveEventsMap.value[timestamp])
         eventsMap.value[timestamp] = festiveEventsMap.value[timestamp];
 };
+const activeContractRef = ref(null);
 
+watch(
+    () => router.currentRoute.value.params.id,
+    async () => {
+        await nextTick();
+        await activeContractRef.value.fetch();
+    }
+);
 watch([year, businessFk], () => refreshData());
 </script>
 
 <template>
     <FetchData
+        ref="activeContractRef"
         :url="`Workers/${route.params.id}/activeContract`"
         @on-fetch="onFetchActiveContract"
         auto-load
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index 6f05fcdfb..922c31d99 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -36,7 +36,6 @@ const filter = computed(() => {
 });
 
 const sip = ref(null);
-
 watch(
     () => [worker.value?.sip?.extension, state.get('extension')],
     ([newWorkerSip, newStateExtension], [oldWorkerSip, oldStateExtension]) => {

From f3b1de1ee41777981e0bc7e6cbc654f075745693 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 3 May 2024 17:19:13 -0300
Subject: [PATCH 15/61] Item tags

---
 src/pages/Item/Card/ItemTags.vue | 119 +++++++++++++++----------------
 src/pages/Item/locale/en.yml     |   6 ++
 src/pages/Item/locale/es.yml     |   6 ++
 3 files changed, 69 insertions(+), 62 deletions(-)

diff --git a/src/pages/Item/Card/ItemTags.vue b/src/pages/Item/Card/ItemTags.vue
index 3067c9768..01df1009b 100644
--- a/src/pages/Item/Card/ItemTags.vue
+++ b/src/pages/Item/Card/ItemTags.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, computed } from 'vue';
+import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -10,65 +10,58 @@ import FetchData from 'components/FetchData.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 
 import axios from 'axios';
-import { useArrayData } from 'composables/useArrayData';
 
 const route = useRoute();
 const { t } = useI18n();
 
 const itemTagsRef = ref(null);
 const tagOptions = ref([]);
-
-const arrayData = useArrayData('ItemTags');
-const itemTags = computed(() => {
-    console.log('arrayData.store.data:: ', arrayData.store.data);
-    let map = new Map();
-    (arrayData.store.data || []).forEach((tag) => {
-        map.set(tag.id, tag);
-    });
-    return map;
-});
-// const getHighestPriority = () => {
-//     let max = 0;
-//     console.log('formData:: ', itemTagsRef.value.formData);
-//     itemTagsRef.value.formData.forEach((tag) => {
-//         if (tag.priority > max) max = tag.priority;
-//     });
-//     return max + 1;
-// };
-
-const getHighestPriority = computed(() => {
-    let max = 0;
-    if (!itemTagsRef.value || !itemTagsRef.value.length) return max;
-    console.log('formData:: ', itemTagsRef.value.formData);
-    itemTagsRef.value.formData.forEach((tag) => {
-        if (tag.priority > max) max = tag.priority;
-    });
-    return max + 1;
-});
+const valueOptionsMap = ref(new Map());
 
 const getSelectedTagValues = async (tag) => {
     try {
-        console.log('tag:: ', tag);
-        tag.value = null;
+        if (!tag.tagFk && tag.tag.isFree) return;
         const filter = {
             fields: ['value'],
             order: 'value ASC',
         };
 
         const params = { filter: JSON.stringify(filter) };
-        const { data } = await axios.get(`Tags/${tag.selectedTag.id}/filterValue`, {
+        const { data } = await axios.get(`Tags/${tag.tagFk}/filterValue`, {
             params,
         });
-        tag.valueOptions = data;
+        valueOptionsMap.value.set(tag.tagFk, data);
     } catch (err) {
         console.error('Error getting selected tag values');
     }
 };
 
-onMounted(() => {
-    // if (itemTagsRef.value) itemTagsRef.value.reload();
-    console.log('itemTagsRef:: ', itemTagsRef.value.formData);
-});
+const onItemTagsFetched = async (itemTags) => {
+    (itemTags || []).forEach((tag) => {
+        getSelectedTagValues(tag);
+    });
+};
+
+const handleTagSelected = (rows, index, tag) => {
+    rows[index].tag = tag;
+    rows[index].tagFk = tag.id;
+    rows[index].value = null;
+    getSelectedTagValues(rows[index]);
+};
+
+const getHighestPriority = (rows) => {
+    let max = 0;
+    rows.forEach((tag) => {
+        if (tag.priority > max) max = tag.priority;
+    });
+    return max + 1;
+};
+
+const insertTag = (rows) => {
+    itemTagsRef.value.insert();
+    itemTagsRef.value.formData[itemTagsRef.value.formData.length - 1].priority =
+        getHighestPriority(rows);
+};
 </script>
 
 <template>
@@ -85,14 +78,17 @@ onMounted(() => {
                 data-key="ItemTags"
                 model="ItemTags"
                 url="ItemTags"
-                save-url="Tags/onSubmit"
-                auto-load
+                update-url="Tags/onSubmit"
                 :data-required="{
+                    $index: undefined,
                     itemFk: route.params.id,
-                    priority: getHighestPriority,
+                    priority: undefined,
                     tag: {
                         isFree: undefined,
+                        value: undefined,
+                        name: undefined,
                     },
+                    tagFk: undefined,
                 }"
                 :default-remove="false"
                 :filter="{
@@ -106,6 +102,8 @@ onMounted(() => {
                         },
                     },
                 }"
+                auto-load
+                @on-fetch="onItemTagsFetched"
             >
                 <template #body="{ rows }">
                     <QCard class="q-pl-lg q-py-md">
@@ -115,32 +113,39 @@ onMounted(() => {
                             class="row q-gutter-md q-mb-md"
                         >
                             <VnSelect
-                                :label="t('Tag')"
-                                v-model="row.tagFk"
+                                :label="t('itemTags.tag')"
                                 :options="tagOptions"
+                                :model-value="row.tag"
                                 option-label="name"
-                                option-value="id"
                                 hide-selected
-                                @update:model-value="getSelectedTagValues(row)"
+                                @update:model-value="
+                                    ($event) => handleTagSelected(rows, index, $event)
+                                "
                             />
                             <VnSelect
                                 v-if="row.tag?.isFree === false"
+                                :key="row.tagFk"
                                 :label="t('Value')"
                                 v-model="row.value"
-                                option-value="value"
+                                :options="valueOptionsMap.get(row.tagFk)"
                                 option-label="value"
+                                option-value="value"
                                 emit-value
                                 use-input
+                                class="col"
                                 :is-clearable="false"
                             />
                             <VnInput
-                                v-if="row.tag?.isFree || row.tag?.isFree == undefined"
+                                v-else-if="
+                                    row.tag?.isFree || row.tag?.isFree == undefined
+                                "
                                 v-model="row.value"
-                                :label="t('Value')"
+                                :label="t('itemTags.value')"
                                 :is-clearable="false"
+                                style="width: 100%"
                             />
                             <VnInput
-                                :label="t('Relevancy')"
+                                :label="t('itemTags.relevancy')"
                                 type="number"
                                 v-model="row.priority"
                             />
@@ -153,37 +158,27 @@ onMounted(() => {
                                     size="sm"
                                 >
                                     <QTooltip>
-                                        {{ t('Remove tag') }}
+                                        {{ t('itemTags.removeTag') }}
                                     </QTooltip>
                                 </QIcon>
                             </div>
                         </VnRow>
                         <VnRow>
                             <QIcon
-                                @click="itemTagsRef.insert()"
+                                @click="insertTag(rows)"
                                 class="cursor-pointer"
                                 color="primary"
                                 name="add"
                                 size="sm"
                             >
                                 <QTooltip>
-                                    {{ t('Add tag') }}
+                                    {{ t('itemTags.addTag') }}
                                 </QTooltip>
                             </QIcon>
                         </VnRow>
                     </QCard>
                 </template>
             </CrudModel>
-            <pre>{{ itemTags }}</pre>
         </QPage>
     </div>
 </template>
-
-<i18n>
-es:
-    Remove tag: Quitar etiqueta
-    Add tag: Añadir etiqueta
-    Tag: Etiqueta
-    Value: Valor
-    Relevancy: Relevancia
-</i18n>
diff --git a/src/pages/Item/locale/en.yml b/src/pages/Item/locale/en.yml
index 9acd1de4d..2ffcd3661 100644
--- a/src/pages/Item/locale/en.yml
+++ b/src/pages/Item/locale/en.yml
@@ -34,3 +34,9 @@ lastEntries:
     package: Package
     freight: Freight
     comission: Comission
+itemTags:
+    removeTag: Remove tag
+    addTag: Add tag
+    tag: Tag
+    value: Value
+    relevancy: Relevancy
diff --git a/src/pages/Item/locale/es.yml b/src/pages/Item/locale/es.yml
index 46e0d9eb7..3047239f2 100644
--- a/src/pages/Item/locale/es.yml
+++ b/src/pages/Item/locale/es.yml
@@ -34,3 +34,9 @@ lastEntries:
     package: Embalaje
     freight: Porte
     comission: Comisión
+itemTags:
+    removeTag: Quitar etiqueta
+    addTag: Añadir etiqueta
+    tag: Etiqueta
+    value: Valor
+    relevancy: Relevancia

From dbc9e9dd712e457ef2ef241b53d9007f2ce31787 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Sun, 5 May 2024 19:13:36 -0300
Subject: [PATCH 16/61] Sales monitor base

---
 src/i18n/locale/en.yml             |   4 +
 src/i18n/locale/es.yml             |   4 +
 src/pages/Monitor/MonitorMain.vue  |  18 ++
 src/pages/Monitor/SalesMonitor.vue | 270 +++++++++++++++++++++++++++++
 src/router/modules/index.js        |   2 +
 src/router/modules/monitor.js      |  42 +++++
 src/router/routes.js               |   2 +
 src/stores/useNavigationStore.js   |   2 +-
 8 files changed, 343 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Monitor/MonitorMain.vue
 create mode 100644 src/pages/Monitor/SalesMonitor.vue
 create mode 100644 src/router/modules/monitor.js

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 0e27eeade..7acc2043d 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -1235,6 +1235,10 @@ zone:
         zonesList: Zones
         deliveryList: Delivery days
         upcomingList: Upcoming deliveries
+monitor:
+    pageTitles:
+        monitors: Monitors
+        salesMonitor: Sales monitor
 components:
     topbar: {}
     itemsFilterPanel:
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index bc246a6cb..6e466f483 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -1234,6 +1234,10 @@ zone:
         zonesList: Zonas
         deliveryList: Días de entrega
         upcomingList: Próximos repartos
+monitors:
+    pageTitles:
+        monitors: Monitores
+        salesMonitor: Monitor de ventas
 components:
     topbar: {}
     itemsFilterPanel:
diff --git a/src/pages/Monitor/MonitorMain.vue b/src/pages/Monitor/MonitorMain.vue
new file mode 100644
index 000000000..c1f2a31db
--- /dev/null
+++ b/src/pages/Monitor/MonitorMain.vue
@@ -0,0 +1,18 @@
+<script setup>
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+
+const stateStore = useStateStore();
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
+            <LeftMenu />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
+</template>
diff --git a/src/pages/Monitor/SalesMonitor.vue b/src/pages/Monitor/SalesMonitor.vue
new file mode 100644
index 000000000..842474545
--- /dev/null
+++ b/src/pages/Monitor/SalesMonitor.vue
@@ -0,0 +1,270 @@
+<script setup>
+import { onMounted, ref, computed, reactive, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+// import { toDateFormat } from 'src/filters/date.js';
+import { useSession } from 'composables/useSession';
+import { dashIfEmpty } from 'src/filters';
+// import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+// import { useVnConfirm } from 'composables/useVnConfirm';
+import axios from 'axios';
+
+const router = useRouter();
+const { getTokenMultimedia } = useSession();
+const token = getTokenMultimedia();
+const stateStore = useStateStore();
+const { t } = useI18n();
+// const { viewSummary } = useSummaryDialog();
+// const { openConfirmationModal } = useVnConfirm();
+
+const paginateRef = ref(null);
+const itemTypesOptions = ref([]);
+const originsOptions = ref([]);
+const buyersOptions = ref([]);
+const intrastatOptions = ref([]);
+const itemCategoriesOptions = ref([]);
+const visibleColumns = ref([]);
+const allColumnNames = ref([]);
+
+// const exprBuilder = (param, value) => {
+//     switch (param) {
+//         case 'category':
+//             return { 'ic.name': value };
+//         case 'buyerFk':
+//             return { 'it.workerFk': value };
+//         case 'grouping':
+//             return { 'b.grouping': value };
+//         case 'packing':
+//             return { 'b.packing': value };
+//         case 'origin':
+//             return { 'ori.code': value };
+//         case 'typeFk':
+//             return { 'i.typeFk': value };
+//         case 'intrastat':
+//             return { 'intr.description': value };
+//         case 'name':
+//             return { 'i.name': { like: `%${value}%` } };
+//         case 'producer':
+//             return { 'pr.name': { like: `%${value}%` } };
+//         case 'id':
+//         case 'size':
+//         case 'subname':
+//         case 'isActive':
+//         case 'weightByPiece':
+//         case 'stemMultiplier':
+//         case 'stems':
+//             return { [`i.${param}`]: value };
+//     }
+// };
+
+// const params = reactive({ isFloramondo: false, isActive: true });
+
+// const applyColumnFilter = async (col) => {
+//     try {
+//         const paramKey = col.columnFilter?.filterParamKey || col.field;
+//         params[paramKey] = col.columnFilter.filterValue;
+//         await paginateRef.value.addFilter(null, params);
+//     } catch (err) {
+//         console.error('Error applying column filter', err);
+//     }
+// };
+
+// const getInputEvents = (col) => {
+//     return col.columnFilter.type === 'select'
+//         ? { 'update:modelValue': () => applyColumnFilter(col) }
+//         : {
+//               'keyup.enter': () => applyColumnFilter(col),
+//           };
+// };
+
+const columns = computed(() => [
+    {
+        label: '',
+        name: 'picture',
+        align: 'left',
+        columnFilter: null,
+    },
+    {
+        label: t('item.list.id'),
+        name: 'id',
+        field: 'id',
+        align: 'left',
+        sortable: true,
+        // columnFilter: {
+        //     component: VnInput,
+        //     type: 'text',
+        //     filterValue: null,
+        //     event: getInputEvents,
+        //     attrs: {
+        //         dense: true,
+        //     },
+        // },
+    },
+    {
+        label: t('item.list.grouping'),
+        field: 'grouping',
+        name: 'grouping',
+        align: 'left',
+        sortable: true,
+        // columnFilter: {
+        //     component: VnInput,
+        //     type: 'text',
+        //     filterValue: null,
+        //     event: getInputEvents,
+        //     attrs: {
+        //         dense: true,
+        //     },
+        // },
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('item.list.packing'),
+        field: 'packing',
+        name: 'packing',
+        align: 'left',
+        sortable: true,
+        // columnFilter: {
+        //     component: VnInput,
+        //     type: 'text',
+        //     filterValue: null,
+        //     event: getInputEvents,
+        //     attrs: {
+        //         dense: true,
+        //     },
+        // },
+        format: (val) => dashIfEmpty(val),
+    },
+]);
+
+const redirectToItemCreate = () => {
+    // router.push({ name: 'ItemCreate' });
+};
+
+const redirectToItemSummary = (id) => {
+    router.push({ name: 'ItemSummary', params: { id } });
+};
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+    const filteredColumns = columns.value.filter(
+        (col) => col.name !== 'picture' && col.name !== 'actions'
+    );
+    allColumnNames.value = filteredColumns.map((col) => col.name);
+});
+
+onUnmounted(() => (stateStore.rightDrawer = false));
+</script>
+
+<template>
+    <FetchData
+        url="ItemTypes"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        auto-load
+        @on-fetch="(data) => (itemTypesOptions = data)"
+    />
+    <FetchData
+        url="ItemCategories"
+        :filter="{ fields: ['name'], order: 'name ASC' }"
+        auto-load
+        @on-fetch="(data) => (itemCategoriesOptions = data)"
+    />
+    <FetchData
+        url="Intrastats"
+        :filter="{ fields: ['description'], order: 'description ASC' }"
+        auto-load
+        @on-fetch="(data) => (intrastatOptions = data)"
+    />
+    <FetchData
+        url="Origins"
+        :filter="{ fields: ['code'], order: 'code ASC' }"
+        auto-load
+        @on-fetch="(data) => (originsOptions = data)"
+    />
+    <FetchData
+        url="TicketRequests/getItemTypeWorker"
+        :filter="{ fields: ['id', 'nickname'], order: 'nickname ASC' }"
+        auto-load
+        @on-fetch="(data) => (buyersOptions = data)"
+    />
+
+    <QToolbar class="bg-vn-dark justify-end">
+        <div id="st-data">
+            <TableVisibleColumns
+                :all-columns="allColumnNames"
+                table-code="itemsIndex"
+                labels-traductions-path="item.list"
+                @on-config-saved="visibleColumns = ['picture', ...$event, 'actions']"
+            />
+        </div>
+        <QSpace />
+        <div id="st-actions"></div>
+    </QToolbar>
+
+    <QPage class="column items-center q-pa-md">
+        <VnPaginate
+            ref="paginateRef"
+            data-key="ItemList"
+            url="Items/filter"
+            :order="['isActive DESC', 'name', 'id']"
+            :limit="12"
+            :expr-builder="exprBuilder"
+            :user-params="params"
+            :offset="50"
+            auto-load
+        >
+            <template #body="{ rows }">
+                <QTable
+                    :rows="rows"
+                    :columns="columns"
+                    row-key="id"
+                    :pagination="{ rowsPerPage: 0 }"
+                    class="full-width q-mt-md"
+                    :visible-columns="visibleColumns"
+                    :no-data-label="t('globals.noResults')"
+                    @row-click="(_, row) => redirectToItemSummary(row.id)"
+                >
+                    <!-- <template #top-row="{ cols }">
+                        <QTr>
+                            <QTd
+                                v-for="(col, index) in cols"
+                                :key="index"
+                                style="max-width: 100px"
+                            >
+                                <component
+                                    :is="col.columnFilter.component"
+                                    v-if="col.columnFilter"
+                                    v-model="col.columnFilter.filterValue"
+                                    v-bind="col.columnFilter.attrs"
+                                    v-on="col.columnFilter.event(col)"
+                                    dense
+                                />
+                            </QTd>
+                        </QTr>
+                    </template> -->
+                    <template #body-cell-picture="{ row }">
+                        <QTd>
+                            <QImg
+                                :src="`/api/Images/catalog/50x50/${row.id}/download?access_token=${token}`"
+                                spinner-color="primary"
+                                :ratio="1"
+                                height="50px"
+                                width="50px"
+                                class="image"
+                            />
+                        </QTd>
+                    </template>
+                </QTable>
+            </template>
+        </VnPaginate>
+    </QPage>
+</template>
diff --git a/src/router/modules/index.js b/src/router/modules/index.js
index 7fff2f2e5..38bcd54d5 100644
--- a/src/router/modules/index.js
+++ b/src/router/modules/index.js
@@ -18,6 +18,7 @@ import Parking from './parking';
 import Agency from './agency';
 import ItemType from './itemType';
 import Zone from './zone';
+import Monitor from './monitor';
 
 export default [
     Item,
@@ -40,4 +41,5 @@ export default [
     Agency,
     ItemType,
     Zone,
+    Monitor,
 ];
diff --git a/src/router/modules/monitor.js b/src/router/modules/monitor.js
new file mode 100644
index 000000000..0ce6e153b
--- /dev/null
+++ b/src/router/modules/monitor.js
@@ -0,0 +1,42 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/monitor',
+    name: 'Monitor',
+    meta: {
+        title: 'monitors',
+        icon: 'vn:grid',
+        moduleName: 'Monitor',
+    },
+    component: RouterView,
+    redirect: { name: 'MonitorMain' },
+    menus: {
+        main: ['SalesMonitor'],
+        card: [],
+    },
+    children: [
+        {
+            path: '',
+            name: 'MonitorMain',
+            component: () => import('src/pages/Monitor/MonitorMain.vue'),
+            redirect: { name: 'SalesMonitor' },
+            children: [
+                {
+                    path: 'index',
+                    name: 'SalesMonitor',
+                    meta: {
+                        title: 'salesMonitor',
+                        icon: 'vn:grid',
+                    },
+                    component: () => import('src/pages/Monitor/SalesMonitor.vue'),
+                },
+            ],
+        },
+        // {
+        //     name: 'ItemCard',
+        //     path: ':id',
+        //     component: () => import('src/pages/Item/Card/ItemCard.vue'),
+        //     children: [],
+        // },
+    ],
+};
diff --git a/src/router/routes.js b/src/router/routes.js
index 04780ee17..6a0430d51 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -18,6 +18,7 @@ import roadmap from 'src/router/modules/roadmap';
 import parking from 'src/router/modules/parking';
 import agency from 'src/router/modules/agency';
 import zone from 'src/router/modules/zone';
+import monitor from 'src/router/modules/monitor';
 
 const routes = [
     {
@@ -65,6 +66,7 @@ const routes = [
             shelving,
             invoiceOut,
             invoiceIn,
+            monitor,
             wagon,
             order,
             route,
diff --git a/src/stores/useNavigationStore.js b/src/stores/useNavigationStore.js
index ee1e04e9b..263a9dec8 100644
--- a/src/stores/useNavigationStore.js
+++ b/src/stores/useNavigationStore.js
@@ -15,6 +15,7 @@ export const useNavigationStore = defineStore('navigationStore', () => {
         'travel',
         'invoiceOut',
         'invoiceIn',
+        'monitor',
         'supplier',
         'claim',
         'route',
@@ -31,7 +32,6 @@ export const useNavigationStore = defineStore('navigationStore', () => {
         for (const module of modules) {
             const moduleDef = routes.find((route) => toLowerCamel(route.name) === module);
             if (!moduleDef) continue;
-
             const item = addMenuItem(module, moduleDef, modulesRoutes.value);
             if (!item) continue;
 

From 0f5d06614d2c1e0e21a433be89957ea340c43b49 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 6 May 2024 07:24:52 +0200
Subject: [PATCH 17/61] feat: VnInput numberValidation

---
 src/components/common/VnInput.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 96028862a..0d7d6edca 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -52,6 +52,12 @@ const focus = () => {
 defineExpose({
     focus,
 });
+
+const inputRules = (val) => {
+    const { min } = vnInputRef.value.$attrs;
+    if (min >= 0)
+        if (val.toString().indexOf('.') < min) return t('inputMin', { value: min });
+};
 </script>
 
 <template>
@@ -68,6 +74,8 @@ defineExpose({
             :class="{ required: $attrs.required }"
             @keyup.enter="onEnterPress()"
             :clearable="false"
+            :rules="[inputRules]"
+            :lazy-rules="true"
         >
             <template v-if="$slots.prepend" #prepend>
                 <slot name="prepend" />
@@ -85,3 +93,9 @@ defineExpose({
         </QInput>
     </div>
 </template>
+<i18n>
+    en:
+        inputMin: Must be more than {value}
+    es:
+        inputMin: Debe ser mayor a {value}
+</i18n>

From f85665b271e1c01a665a1369052446a67f916ba0 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 6 May 2024 08:37:41 +0200
Subject: [PATCH 18/61] fix: replace QToolbar by Teleport

---
 src/pages/Item/Card/ItemShelving.vue | 76 +++++++++++++++-------------
 1 file changed, 41 insertions(+), 35 deletions(-)

diff --git a/src/pages/Item/Card/ItemShelving.vue b/src/pages/Item/Card/ItemShelving.vue
index 573c4be0c..830628f3b 100644
--- a/src/pages/Item/Card/ItemShelving.vue
+++ b/src/pages/Item/Card/ItemShelving.vue
@@ -14,6 +14,9 @@ import { useArrayData } from 'src/composables/useArrayData';
 import useNotify from 'src/composables/useNotify.js';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import axios from 'axios';
+import { useStateStore } from 'stores/useStateStore';
+
+const stateStore = useStateStore();
 
 const route = useRoute();
 const { t } = useI18n();
@@ -197,43 +200,46 @@ onMounted(async () => {
         auto-load
         @on-fetch="(data) => (shelvingsOptions = data)"
     />
-    <QToolbar class="bg-vn-dark justify-end">
-        <div id="st-data" class="q-py-sm flex items-center">
-            <div class="q-pa-md q-mr-lg" style="border: 2px solid #222">
-                <QCardSection horizontal>
-                    <span class="text-weight-bold text-subtitle1 text-center full-width">
-                        {{ t('shelvings.total') }}
-                    </span>
-                </QCardSection>
-                <QCardSection class="column items-center" horizontal>
-                    <div>
-                        <span class="details-label"
-                            >{{ t('shelvings.totalLabels') }}
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#st-data">
+            <div class="q-py-sm flex items-center">
+                <div class="q-pa-md q-mr-lg" style="border: 2px solid #222">
+                    <QCardSection horizontal>
+                        <span
+                            class="text-weight-bold text-subtitle1 text-center full-width"
+                        >
+                            {{ t('shelvings.total') }}
                         </span>
-                        <span>: {{ totalLabels }}</span>
-                    </div>
-                </QCardSection>
+                    </QCardSection>
+                    <QCardSection class="column items-center" horizontal>
+                        <div>
+                            <span class="details-label"
+                                >{{ t('shelvings.totalLabels') }}
+                            </span>
+                            <span>: {{ totalLabels }}</span>
+                        </div></QCardSection
+                    >
+                </div>
+                <QBtn
+                    color="primary"
+                    icon="delete"
+                    :disabled="!rowsSelected.length"
+                    @click="
+                        openConfirmationModal(
+                            t('shelvings.removeConfirmTitle'),
+                            t('shelvings.removeConfirmSubtitle'),
+                            removeLines
+                        )
+                    "
+                >
+                    <QTooltip>
+                        {{ t('shelvings.removeLines') }}
+                    </QTooltip>
+                </QBtn>
             </div>
-            <QBtn
-                color="primary"
-                icon="delete"
-                :disabled="!rowsSelected.length"
-                @click="
-                    openConfirmationModal(
-                        t('shelvings.removeConfirmTitle'),
-                        t('shelvings.removeConfirmSubtitle'),
-                        removeLines
-                    )
-                "
-            >
-                <QTooltip>
-                    {{ t('shelvings.removeLines') }}
-                </QTooltip>
-            </QBtn>
-        </div>
-        <QSpace />
-        <div id="st-actions"></div>
-    </QToolbar>
+        </Teleport>
+    </template>
+
     <QPage class="column items-center q-pa-md">
         <QTable
             :rows="rows"

From 62bf968b0bb056c4669d377cec72589891ee7439 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 6 May 2024 08:41:12 +0200
Subject: [PATCH 19/61] change action to st-actions

---
 src/pages/Item/Card/ItemShelving.vue | 62 ++++++++++++++--------------
 1 file changed, 30 insertions(+), 32 deletions(-)

diff --git a/src/pages/Item/Card/ItemShelving.vue b/src/pages/Item/Card/ItemShelving.vue
index 830628f3b..7e7faab36 100644
--- a/src/pages/Item/Card/ItemShelving.vue
+++ b/src/pages/Item/Card/ItemShelving.vue
@@ -202,42 +202,40 @@ onMounted(async () => {
     />
     <template v-if="stateStore.isHeaderMounted()">
         <Teleport to="#st-data">
-            <div class="q-py-sm flex items-center">
-                <div class="q-pa-md q-mr-lg" style="border: 2px solid #222">
-                    <QCardSection horizontal>
-                        <span
-                            class="text-weight-bold text-subtitle1 text-center full-width"
-                        >
-                            {{ t('shelvings.total') }}
+            <div class="q-pa-md q-mr-lg q-ma-xs" style="border: 2px solid #222">
+                <QCardSection horizontal>
+                    <span class="text-weight-bold text-subtitle1 text-center full-width">
+                        {{ t('shelvings.total') }}
+                    </span>
+                </QCardSection>
+                <QCardSection class="column items-center" horizontal>
+                    <div>
+                        <span class="details-label"
+                            >{{ t('shelvings.totalLabels') }}
                         </span>
-                    </QCardSection>
-                    <QCardSection class="column items-center" horizontal>
-                        <div>
-                            <span class="details-label"
-                                >{{ t('shelvings.totalLabels') }}
-                            </span>
-                            <span>: {{ totalLabels }}</span>
-                        </div></QCardSection
-                    >
-                </div>
-                <QBtn
-                    color="primary"
-                    icon="delete"
-                    :disabled="!rowsSelected.length"
-                    @click="
-                        openConfirmationModal(
-                            t('shelvings.removeConfirmTitle'),
-                            t('shelvings.removeConfirmSubtitle'),
-                            removeLines
-                        )
-                    "
+                        <span>: {{ totalLabels }}</span>
+                    </div></QCardSection
                 >
-                    <QTooltip>
-                        {{ t('shelvings.removeLines') }}
-                    </QTooltip>
-                </QBtn>
             </div>
         </Teleport>
+        <Teleport to="#st-actions">
+            <QBtn
+                color="primary"
+                icon="delete"
+                :disabled="!rowsSelected.length"
+                @click="
+                    openConfirmationModal(
+                        t('shelvings.removeConfirmTitle'),
+                        t('shelvings.removeConfirmSubtitle'),
+                        removeLines
+                    )
+                "
+            >
+                <QTooltip>
+                    {{ t('shelvings.removeLines') }}
+                </QTooltip>
+            </QBtn>
+        </Teleport>
     </template>
 
     <QPage class="column items-center q-pa-md">

From 6a81076874456a8a31510bf8f77af13e107eff1e Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 6 May 2024 08:45:29 +0200
Subject: [PATCH 20/61] fix: replace inputMin rule

---
 src/components/common/VnInput.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 0d7d6edca..3f7e46367 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -55,8 +55,7 @@ defineExpose({
 
 const inputRules = (val) => {
     const { min } = vnInputRef.value.$attrs;
-    if (min >= 0)
-        if (val.toString().indexOf('.') < min) return t('inputMin', { value: min });
+    if (min >= 0) if (Math.floor(val) < min) return t('inputMin', { value: min });
 };
 </script>
 

From 49b6c57ad4b34505f7add33c21449d04b229aade Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 6 May 2024 08:53:12 +0200
Subject: [PATCH 21/61] fix: show Color

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

diff --git a/src/components/FilterItemForm.vue b/src/components/FilterItemForm.vue
index 00659f8fd..7af9adf93 100644
--- a/src/components/FilterItemForm.vue
+++ b/src/components/FilterItemForm.vue
@@ -78,7 +78,7 @@ const tableColumns = computed(() => [
     {
         label: t('entry.buys.color'),
         name: 'ink',
-        field: 'inkName',
+        field: (row) => row?.ink?.name,
         align: 'left',
     },
 ]);

From 4d490652ea4c009e3ddf9b80bc1aea26f8767a0d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 6 May 2024 10:11:07 +0200
Subject: [PATCH 22/61] feat #7271: add template

---
 src/pages/Zone/Card/ZoneLocations.vue  |  1 +
 src/pages/Zone/Card/ZoneWarehouses.vue | 12 +++---------
 src/pages/Zone/ZoneDeliveryDays.vue    |  1 +
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/pages/Zone/Card/ZoneLocations.vue b/src/pages/Zone/Card/ZoneLocations.vue
index e69de29bb..e4305c898 100644
--- a/src/pages/Zone/Card/ZoneLocations.vue
+++ b/src/pages/Zone/Card/ZoneLocations.vue
@@ -0,0 +1 @@
+<template>Zone Locations</template>
diff --git a/src/pages/Zone/Card/ZoneWarehouses.vue b/src/pages/Zone/Card/ZoneWarehouses.vue
index 67a81ba4d..7ff73a5e9 100644
--- a/src/pages/Zone/Card/ZoneWarehouses.vue
+++ b/src/pages/Zone/Card/ZoneWarehouses.vue
@@ -6,15 +6,9 @@ import VnLv from 'components/ui/VnLv.vue';
 
 const route = useRoute();
 
-function deleteWarehouse() {
-    let row = this.deleteRow;
-    if (!row) return;
-    return this.$http.delete(`${this.path}/${row.id}`).then(() => {
-        let index = this.$.data.indexOf(row);
-        if (index !== -1) this.$.data.splice(index, 1);
-        this.deleteRow = null;
-    });
-}
+const deleteWarehouse = () => {
+    return true;
+};
 </script>
 
 <template>
diff --git a/src/pages/Zone/ZoneDeliveryDays.vue b/src/pages/Zone/ZoneDeliveryDays.vue
index e69de29bb..485500dba 100644
--- a/src/pages/Zone/ZoneDeliveryDays.vue
+++ b/src/pages/Zone/ZoneDeliveryDays.vue
@@ -0,0 +1 @@
+<template>Zone Delivery days</template>

From 1a68cc0ced65ef0c67ad6ceaf5659651512da842 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 6 May 2024 15:00:18 +0200
Subject: [PATCH 23/61] refs #6877 change attender

---
 src/pages/Item/ItemRequest.vue | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/pages/Item/ItemRequest.vue b/src/pages/Item/ItemRequest.vue
index 1872ad859..599ae2c5f 100644
--- a/src/pages/Item/ItemRequest.vue
+++ b/src/pages/Item/ItemRequest.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed, onMounted, onBeforeMount, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-
+import FetchData from 'components/FetchData.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
@@ -9,7 +9,7 @@ import VnInput from 'src/components/common/VnInput.vue';
 import ItemRequestDenyForm from './ItemRequestDenyForm.vue';
 import ItemRequestFilter from './ItemRequestFilter.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-
+import VnSelect from 'components/common/VnSelect.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { useArrayData } from 'composables/useArrayData';
 import { toDateFormat } from 'src/filters/date';
@@ -21,7 +21,7 @@ import axios from 'axios';
 const { t } = useI18n();
 const { notify } = useNotify();
 const stateStore = useStateStore();
-
+const workersOptions = ref([]);
 let filterParams = ref({});
 const denyFormRef = ref(null);
 const denyRequestId = ref(null);
@@ -206,6 +206,13 @@ onBeforeMount(() => {
 </script>
 
 <template>
+    <FetchData
+        url="Workers"
+        :filter="{ where: { role: 'buyer' } }"
+        order="id"
+        @on-fetch="(data) => (workersOptions = data)"
+        auto-load
+    />
     <template v-if="stateStore.isHeaderMounted()">
         <Teleport to="#searchbar">
             <VnSearchbar
@@ -278,8 +285,15 @@ onBeforeMount(() => {
             </template>
             <template #body-cell-attender="{ row }">
                 <QTd>
-                    <QBtn flat dense color="primary"> {{ row.attenderName }}</QBtn>
-                    <WorkerDescriptorProxy :id="row.attenderFk" />
+                    {{ row.attenderFk }}
+                    <VnSelect
+                        v-model="row.attenderFk"
+                        :options="workersOptions"
+                        hide-selected
+                        option-label="firstName"
+                        option-value="id"
+                        dense
+                    />
                 </QTd>
             </template>
             <template #body-cell-item="{ row }">

From 4caf27b4f88b6430001c2aedbc1f3b0f5150d966 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Tue, 7 May 2024 08:37:52 +0200
Subject: [PATCH 24/61] deploy: init version 2422

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 063cf6de4..7be20a842 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "24.20.0",
+    "version": "24.22.0",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",

From b9c6b01437816e84c532750c616d70bfca2514a8 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Tue, 7 May 2024 08:59:55 +0200
Subject: [PATCH 25/61] refs #6877 update model

---
 src/pages/Item/ItemRequest.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/Item/ItemRequest.vue b/src/pages/Item/ItemRequest.vue
index 599ae2c5f..fac77c693 100644
--- a/src/pages/Item/ItemRequest.vue
+++ b/src/pages/Item/ItemRequest.vue
@@ -293,6 +293,7 @@ onBeforeMount(() => {
                         option-label="firstName"
                         option-value="id"
                         dense
+                        @update:model-value="row.attenderFk"
                     />
                 </QTd>
             </template>

From ac0993aa11e40a72126ac232d713269ab706c9f0 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Tue, 7 May 2024 10:20:26 +0200
Subject: [PATCH 26/61] refs #6842 pr changes

---
 src/pages/Worker/Card/WorkerCalendar.vue | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/pages/Worker/Card/WorkerCalendar.vue b/src/pages/Worker/Card/WorkerCalendar.vue
index 6677cb351..2e525aa30 100644
--- a/src/pages/Worker/Card/WorkerCalendar.vue
+++ b/src/pages/Worker/Card/WorkerCalendar.vue
@@ -16,6 +16,7 @@ const stateStore = useStateStore();
 const route = useRoute();
 const { t } = useI18n();
 const workerIsFreelance = ref();
+const WorkerFreelanceRef = ref();
 const workerCalendarFilterRef = ref(null);
 const workerCalendarRef = ref(null);
 const absenceType = ref(null);
@@ -34,12 +35,6 @@ const onFetchActiveContract = (data) => {
     hasWorkCenter.value = Boolean(data?.workCenterFk);
 };
 
-const isFreelance = async () => {
-    const { data } = await axios.get(`Workers/${route.params.id}`);
-
-    workerIsFreelance.value = data.isFreelance;
-};
-
 const addEvent = (day, newEvent, isFestive = false) => {
     const timestamp = new Date(day).getTime();
     let event = eventsMap.value[timestamp];
@@ -136,7 +131,7 @@ const refreshData = () => {
     updateYearHolidays();
     updateContractHolidays();
     getAbsences();
-    isFreelance();
+    WorkerFreelanceRef.value.fetch();
 };
 
 const onDeletedEvent = (timestamp) => {
@@ -172,6 +167,7 @@ watch([year, businessFk], () => refreshData());
     <FetchData
         :url="`Workers/${route.params.id}`"
         @on-fetch="(data) => (workerIsFreelance = data.isFreelance)"
+        ref="WorkerFreelanceRef"
         auto-load
     />
     <template v-if="stateStore.isHeaderMounted()">

From c0dd140a3ab0a22d475be5216421e50186721128 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 7 May 2024 11:38:12 +0200
Subject: [PATCH 27/61] fix: validTag

---
 src/components/common/VnSelect.vue | 3 ++-
 src/pages/Item/Card/ItemTags.vue   | 9 ++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 05c74f00a..e8083dec2 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -57,7 +57,7 @@ const $props = defineProps({
 });
 
 const { t } = useI18n();
-const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
+const requiredFieldRule = (val) => val ?? t('globals.fieldRequired');
 
 const { optionLabel, optionValue, options, modelValue } = toRefs($props);
 const myOptions = ref([]);
@@ -167,6 +167,7 @@ watch(modelValue, (newValue) => {
         hide-selected
         fill-input
         ref="vnSelectRef"
+        lazy-rules
         :class="{ required: $attrs.required }"
         :rules="$attrs.required ? [requiredFieldRule] : null"
         virtual-scroll-slice-size="options.length"
diff --git a/src/pages/Item/Card/ItemTags.vue b/src/pages/Item/Card/ItemTags.vue
index 01df1009b..b3cdfffb1 100644
--- a/src/pages/Item/Card/ItemTags.vue
+++ b/src/pages/Item/Card/ItemTags.vue
@@ -105,7 +105,7 @@ const insertTag = (rows) => {
                 auto-load
                 @on-fetch="onItemTagsFetched"
             >
-                <template #body="{ rows }">
+                <template #body="{ rows, validate }">
                     <QCard class="q-pl-lg q-py-md">
                         <VnRow
                             v-for="(row, index) in rows"
@@ -121,6 +121,8 @@ const insertTag = (rows) => {
                                 @update:model-value="
                                     ($event) => handleTagSelected(rows, index, $event)
                                 "
+                                :required="true"
+                                :rules="validate('itemTag.tagFk')"
                             />
                             <VnSelect
                                 v-if="row.tag?.isFree === false"
@@ -134,6 +136,8 @@ const insertTag = (rows) => {
                                 use-input
                                 class="col"
                                 :is-clearable="false"
+                                :required="false"
+                                :rules="validate('itemTag.tagFk')"
                             />
                             <VnInput
                                 v-else-if="
@@ -148,6 +152,8 @@ const insertTag = (rows) => {
                                 :label="t('itemTags.relevancy')"
                                 type="number"
                                 v-model="row.priority"
+                                :required="true"
+                                :rules="validate('itemTag.priority')"
                             />
                             <div class="col-1 row justify-center items-center">
                                 <QIcon
@@ -167,6 +173,7 @@ const insertTag = (rows) => {
                             <QIcon
                                 @click="insertTag(rows)"
                                 class="cursor-pointer"
+                                :disable="!validRow"
                                 color="primary"
                                 name="add"
                                 size="sm"

From a691644b9aed1e81ca4054c98ee75cf33c5ccf2a Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Tue, 7 May 2024 13:38:25 +0200
Subject: [PATCH 28/61] refs #6877 changes filter date

---
 src/filters/dateRange.js                |  2 +-
 src/pages/Item/Card/ItemLastEntries.vue | 25 ++++++++-----------------
 src/pages/Item/ItemRequest.vue          |  3 ++-
 src/pages/Item/ItemRequestFilter.vue    | 11 +----------
 4 files changed, 12 insertions(+), 29 deletions(-)

diff --git a/src/filters/dateRange.js b/src/filters/dateRange.js
index 4c0cfe654..d014f57fc 100644
--- a/src/filters/dateRange.js
+++ b/src/filters/dateRange.js
@@ -2,7 +2,7 @@ export default function dateRange(value) {
     const minHour = new Date(value);
     minHour.setHours(0, 0, 0, 0);
     const maxHour = new Date(value);
-    maxHour.setHours(23, 59, 59, 59);
+    maxHour.setHours(22, 59, 59, 59);
 
     return [minHour, maxHour];
 }
diff --git a/src/pages/Item/Card/ItemLastEntries.vue b/src/pages/Item/Card/ItemLastEntries.vue
index 5200db239..9071cc6eb 100644
--- a/src/pages/Item/Card/ItemLastEntries.vue
+++ b/src/pages/Item/Card/ItemLastEntries.vue
@@ -2,7 +2,7 @@
 import { onMounted, computed, onUnmounted, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-
+import { dateRange } from 'src/filters';
 import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 
@@ -29,28 +29,19 @@ const exprBuilder = (param, value) => {
         case 'landed':
             return {
                 'tr.landed': {
-                    between: getDateRange(value),
+                    between: dateRange(value),
                 },
             };
     }
 };
 
-const dateRange = reactive({
+const datedRange = reactive({
     from: null,
     to: null,
 });
 
-const getDateRange = (val) => {
-    const minHour = new Date(val);
-    minHour.setHours(0, 0, 0, 0);
-    const maxHour = new Date(val);
-    maxHour.setHours(23, 59, 59, 59);
-
-    return [minHour, maxHour];
-};
-
 const from = computed({
-    get: () => dateRange.from,
+    get: () => datedRange.from,
     set: (val) => {
         updateFrom(val);
         updateFilter();
@@ -58,7 +49,7 @@ const from = computed({
 });
 
 const to = computed({
-    get: () => dateRange.to,
+    get: () => datedRange.to,
     set: (val) => {
         updateTo(val);
         updateFilter();
@@ -173,17 +164,17 @@ const fetchItemLastEntries = async () => {
 
 const updateFrom = async (date) => {
     date.setHours(0, 0, 0, 0);
-    dateRange.from = date.toISOString();
+    datedRange.from = date.toISOString();
 };
 
 const updateTo = async (date) => {
     date.setHours(23, 59, 59, 59);
-    dateRange.to = date.toISOString();
+    datedRange.to = date.toISOString();
 };
 
 const updateFilter = async () => {
     arrayData.store.userFilter.where.landed = {
-        between: [dateRange.from, dateRange.to],
+        between: [datedRange.from, datedRange.to],
     };
     await fetchItemLastEntries();
 };
diff --git a/src/pages/Item/ItemRequest.vue b/src/pages/Item/ItemRequest.vue
index fac77c693..9ce8ac370 100644
--- a/src/pages/Item/ItemRequest.vue
+++ b/src/pages/Item/ItemRequest.vue
@@ -147,6 +147,7 @@ const confirmRequest = async (request) => {
             const params = {
                 itemFk: request.itemFk,
                 quantity: request.saleQuantity,
+                attenderFk: request.attenderFk,
             };
 
             const { data } = await axios.post(
@@ -293,7 +294,7 @@ onBeforeMount(() => {
                         option-label="firstName"
                         option-value="id"
                         dense
-                        @update:model-value="row.attenderFk"
+                        @update:model-value="(event) => (row.attenderFk = event)"
                     />
                 </QTd>
             </template>
diff --git a/src/pages/Item/ItemRequestFilter.vue b/src/pages/Item/ItemRequestFilter.vue
index e142c28d3..2fbe849d1 100644
--- a/src/pages/Item/ItemRequestFilter.vue
+++ b/src/pages/Item/ItemRequestFilter.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-
+import { dateRange } from 'src/filters';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
@@ -44,15 +44,6 @@ const exprBuilder = (param, value) => {
     }
 };
 
-const dateRange = (value) => {
-    const minHour = new Date(value);
-    minHour.setHours(0, 0, 0, 0);
-    const maxHour = new Date(value);
-    maxHour.setHours(23, 59, 59, 59);
-
-    return [minHour, maxHour];
-};
-
 const add = (paramsObj, key) => {
     if (paramsObj[key] === undefined) {
         paramsObj[key] = 1;

From 9a6dd6577460fb2fca8c486f62339670e4b900f8 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 8 May 2024 07:52:18 +0200
Subject: [PATCH 29/61] feat: remove deprecatedHour fn

---
 src/pages/Zone/Card/ZoneDescriptor.vue | 11 ++---------
 src/pages/Zone/ZoneList.vue            | 10 ++--------
 2 files changed, 4 insertions(+), 17 deletions(-)

diff --git a/src/pages/Zone/Card/ZoneDescriptor.vue b/src/pages/Zone/Card/ZoneDescriptor.vue
index 486e4f063..93e951801 100644
--- a/src/pages/Zone/Card/ZoneDescriptor.vue
+++ b/src/pages/Zone/Card/ZoneDescriptor.vue
@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
 
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-import ZoneDescriptorMenuItems from './ZoneDescriptorMenuItems.vue';
+import { toTimeFormat } from 'src/filters/date';
 
 import useCardDescription from 'src/composables/useCardDescription';
 
@@ -40,13 +40,6 @@ const data = ref(useCardDescription());
 const setData = (entity) => {
     data.value = useCardDescription(entity.ref, entity.id);
 };
-
-function extractHour(dateTime) {
-    const date = new Date(dateTime);
-    const hours = date.getHours().toString().padStart(2, '0');
-    const minutes = date.getMinutes().toString().padStart(2, '0');
-    return `${hours}:${minutes}`;
-}
 </script>
 
 <template>
@@ -81,7 +74,7 @@ function extractHour(dateTime) {
         <template #body="{ entity }">
             {{ console.log('entity', entity) }}
             <VnLv :label="t('Agency')" :value="entity.agencyMode.name" />
-            <VnLv :label="t('Closing hour')" :value="extractHour(entity.hour)" />
+            <VnLv :label="t('Closing hour')" :value="toTimeFormat(entity.hour)" />
             <VnLv :label="t('zoneing days')" :value="entity.zoneingDays" />
             <VnLv :label="t('Price')" :value="entity.price" />
             <VnLv :label="t('Bonus')" :value="entity.bonus" />
diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index 2140c5e14..f260eb134 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/src/pages/Zone/ZoneList.vue
@@ -9,6 +9,7 @@ import CardList from 'components/ui/CardList.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import FetchData from 'src/components/FetchData.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { toTimeFormat } from 'src/filters/date';
 
 const quasar = useQuasar();
 const arrayData = useArrayData('ZoneList');
@@ -38,13 +39,6 @@ async function remove(row) {
         //
     }
 }
-
-function extractHour(dateTime) {
-    const date = new Date(dateTime);
-    const hours = date.getHours().toString().padStart(2, '0');
-    const minutes = date.getMinutes().toString().padStart(2, '0');
-    return `${hours}:${minutes}`;
-}
 </script>
 
 <template>
@@ -81,7 +75,7 @@ function extractHour(dateTime) {
                             />
                             <VnLv
                                 :label="t('zone.list.close')"
-                                :value="extractHour(row?.hour)"
+                                :value="toTimeFormat(row?.hour)"
                             />
                             <VnLv :label="t('zone.list.price')" :value="row?.price" />
                         </template>

From 1b65ec7c3889e98c0e8e5684430fe32a42efe1da Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Wed, 8 May 2024 09:39:26 +0200
Subject: [PATCH 30/61] refs #6877 fix filterdate

---
 src/filters/dateRange.js             | 2 +-
 src/pages/Item/ItemRequestFilter.vue | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/filters/dateRange.js b/src/filters/dateRange.js
index d014f57fc..4c0cfe654 100644
--- a/src/filters/dateRange.js
+++ b/src/filters/dateRange.js
@@ -2,7 +2,7 @@ export default function dateRange(value) {
     const minHour = new Date(value);
     minHour.setHours(0, 0, 0, 0);
     const maxHour = new Date(value);
-    maxHour.setHours(22, 59, 59, 59);
+    maxHour.setHours(23, 59, 59, 59);
 
     return [minHour, maxHour];
 }
diff --git a/src/pages/Item/ItemRequestFilter.vue b/src/pages/Item/ItemRequestFilter.vue
index 2fbe849d1..2c056acc6 100644
--- a/src/pages/Item/ItemRequestFilter.vue
+++ b/src/pages/Item/ItemRequestFilter.vue
@@ -192,6 +192,7 @@ const decrement = (paramsObj, key) => {
                             v-model="params.from"
                             @update:model-value="searchFn()"
                             is-outlined
+                            emit-date-format
                         />
                     </QItemSection>
                 </QItem>
@@ -202,6 +203,7 @@ const decrement = (paramsObj, key) => {
                             v-model="params.to"
                             @update:model-value="searchFn()"
                             is-outlined
+                            emit-date-format
                         />
                     </QItemSection>
                 </QItem>

From a1f785ccbe2fef3e341066a2f6bf5aa5eee8d3d6 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 8 May 2024 11:02:40 +0200
Subject: [PATCH 31/61] feat: refs #5919 WIP workerlocker

---
 src/components/FormModel.vue           |  5 ++-
 src/i18n/locale/en.yml                 |  1 +
 src/i18n/locale/es.yml                 |  1 +
 src/pages/Worker/Card/WorkerLocker.vue | 46 ++++++++++++++++++++++++++
 src/pages/Worker/locale/es.yml         |  1 +
 src/router/modules/worker.js           | 10 ++++++
 6 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Worker/Card/WorkerLocker.vue

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index b18433d4e..aea4923a9 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -156,9 +156,12 @@ const startFormWatcher = () => {
 
 async function fetch() {
     try {
-        const { data } = await axios.get($props.url, {
+        let { data } = await axios.get($props.url, {
             params: { filter: JSON.stringify($props.filter) },
         });
+
+        if (Array.isArray(data)) data = data[0];
+
         state.set($props.model, data);
         originalData.value = data && JSON.parse(JSON.stringify(data));
 
diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index d8fb231f0..743165a3d 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -826,6 +826,7 @@ worker:
         log: Log
         calendar: Calendar
         timeControl: Time control
+        locker: Locker
     list:
         name: Name
         email: Email
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 67e075935..556e328f1 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -824,6 +824,7 @@ worker:
         log: Historial
         calendar: Calendario
         timeControl: Control de horario
+        locker: Taquilla
     list:
         name: Nombre
         email: Email
diff --git a/src/pages/Worker/Card/WorkerLocker.vue b/src/pages/Worker/Card/WorkerLocker.vue
new file mode 100644
index 000000000..403aa7160
--- /dev/null
+++ b/src/pages/Worker/Card/WorkerLocker.vue
@@ -0,0 +1,46 @@
+<script setup>
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import FormModel from 'components/FormModel.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+const fetchData = ref();
+const lockers = ref([]);
+const filter = ref({ where: {} });
+
+const getLockers = async (workerLocker) => {
+    console.log(workerLocker);
+    filter.value.where.gender = workerLocker.sex;
+    await fetchData.value.fetch();
+};
+</script>
+<template>
+    <FetchData
+        ref="fetchData"
+        url="Lockers/codes"
+        :filter="filter"
+        @on-fetch="(data) => (lockers = data)"
+    />
+    <FormModel
+        :url="`Workers/locker`"
+        model="Worker"
+        :filter="{ where: { id: route.params.id } }"
+        @on-fetch="getLockers"
+        auto-load
+    >
+        <template #form="{ data }">
+            <VnSelect
+                :label="t('Locker')"
+                v-model="data.locker"
+                :options="lockers"
+                option-label="code"
+                option-value="id"
+                hide-selected
+            />
+        </template>
+    </FormModel>
+</template>
diff --git a/src/pages/Worker/locale/es.yml b/src/pages/Worker/locale/es.yml
index 86dd9d0d9..a960dffe6 100644
--- a/src/pages/Worker/locale/es.yml
+++ b/src/pages/Worker/locale/es.yml
@@ -1,2 +1,3 @@
 Search worker: Buscar trabajador
 You can search by worker id or name: Puedes buscar por id o nombre del trabajador
+Locker: Taquilla
diff --git a/src/router/modules/worker.js b/src/router/modules/worker.js
index d4d3bc3e7..384978d13 100644
--- a/src/router/modules/worker.js
+++ b/src/router/modules/worker.js
@@ -22,6 +22,7 @@ export default {
             'WorkerCalendar',
             'WorkerDms',
             'WorkerTimeControl',
+            'WorkerLocker',
         ],
         departmentCard: ['BasicData'],
     },
@@ -167,6 +168,15 @@ export default {
                     component: () =>
                         import('src/pages/Worker/Card/WorkerTimeControl.vue'),
                 },
+                {
+                    name: 'WorkerLocker',
+                    path: 'locker',
+                    meta: {
+                        title: 'locker',
+                        icon: 'lock',
+                    },
+                    component: () => import('src/pages/Worker/Card/WorkerLocker.vue'),
+                },
             ],
         },
     ],

From 26506c1f9f96e29cb6130307b2c58c41cb1d6643 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Wed, 8 May 2024 13:27:42 +0200
Subject: [PATCH 32/61] refs #6877 remove update

---
 src/pages/Item/ItemRequest.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/Item/ItemRequest.vue b/src/pages/Item/ItemRequest.vue
index 9ce8ac370..735f3a7b7 100644
--- a/src/pages/Item/ItemRequest.vue
+++ b/src/pages/Item/ItemRequest.vue
@@ -286,7 +286,6 @@ onBeforeMount(() => {
             </template>
             <template #body-cell-attender="{ row }">
                 <QTd>
-                    {{ row.attenderFk }}
                     <VnSelect
                         v-model="row.attenderFk"
                         :options="workersOptions"
@@ -294,7 +293,6 @@ onBeforeMount(() => {
                         option-label="firstName"
                         option-value="id"
                         dense
-                        @update:model-value="(event) => (row.attenderFk = event)"
                     />
                 </QTd>
             </template>

From fdd94b09f3ae5724132aace12b46279aa5e05220 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 8 May 2024 11:43:18 +0000
Subject: [PATCH 33/61] style: fix searchba input width

---
 src/pages/Customer/CustomerMain.vue | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
index d7b900e1f..f0dc2e500 100644
--- a/src/pages/Customer/CustomerMain.vue
+++ b/src/pages/Customer/CustomerMain.vue
@@ -15,10 +15,3 @@ const stateStore = useStateStore();
         <RouterView></RouterView>
     </QPageContainer>
 </template>
-
-<style lang="scss">
-#searchbar,
-.search-panel {
-    width: 400px;
-}
-</style>

From 0ebb9c6c5269592115d7b7b9d62edaff8284ffa0 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 8 May 2024 13:43:45 +0200
Subject: [PATCH 34/61] fix: unnexpected bottom spca

---
 src/components/common/VnInput.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 3f7e46367..684770e9c 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -53,10 +53,12 @@ defineExpose({
     focus,
 });
 
-const inputRules = (val) => {
-    const { min } = vnInputRef.value.$attrs;
-    if (min >= 0) if (Math.floor(val) < min) return t('inputMin', { value: min });
-};
+const inputRules = [
+    (val) => {
+        const { min } = vnInputRef.value.$attrs;
+        if (min >= 0) if (Math.floor(val) < min) return t('inputMin', { value: min });
+    },
+];
 </script>
 
 <template>
@@ -73,8 +75,9 @@ const inputRules = (val) => {
             :class="{ required: $attrs.required }"
             @keyup.enter="onEnterPress()"
             :clearable="false"
-            :rules="[inputRules]"
+            :rules="inputRules"
             :lazy-rules="true"
+            hide-bottom-space
         >
             <template v-if="$slots.prepend" #prepend>
                 <slot name="prepend" />

From 5bdbbf426a8cf0d2537245ecf325df03de7b31ea Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 8 May 2024 10:43:18 -0300
Subject: [PATCH 35/61] Tables development

---
 src/components/ui/CardSummary.vue       |   9 +-
 src/i18n/locale/en.yml                  |   5 +-
 src/i18n/locale/es.yml                  |   5 +-
 src/pages/Monitor/MonitorList.vue       |  69 +++
 src/pages/Monitor/SalesClientsTable.vue | 219 +++++++++
 src/pages/Monitor/SalesMonitor.vue      | 270 ----------
 src/pages/Monitor/SalesOrdersTable.vue  | 198 ++++++++
 src/pages/Monitor/SalesTicketsTable.vue | 622 ++++++++++++++++++++++++
 src/pages/Monitor/locale/en.yml         |  40 ++
 src/pages/Monitor/locale/es.yml         |  40 ++
 src/pages/Ticket/Card/TicketSale.vue    |   1 +
 src/router/modules/monitor.js           |  22 +-
 src/router/modules/ticket.js            |  11 +-
 13 files changed, 1221 insertions(+), 290 deletions(-)
 create mode 100644 src/pages/Monitor/MonitorList.vue
 create mode 100644 src/pages/Monitor/SalesClientsTable.vue
 delete mode 100644 src/pages/Monitor/SalesMonitor.vue
 create mode 100644 src/pages/Monitor/SalesOrdersTable.vue
 create mode 100644 src/pages/Monitor/SalesTicketsTable.vue
 create mode 100644 src/pages/Monitor/locale/en.yml
 create mode 100644 src/pages/Monitor/locale/es.yml
 create mode 100644 src/pages/Ticket/Card/TicketSale.vue

diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index 1a4514ef5..e52be753f 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -54,6 +54,13 @@ async function fetch() {
     emit('onFetch', Array.isArray(data) ? data[0] : data);
     isLoading.value = false;
 }
+
+const showRedirectToSummaryIcon = computed(() => {
+    const routeExists = route.matched.some(
+        (route) => route.name === `${route.meta.moduleName}Summary`
+    );
+    return !isSummary.value && route.meta.moduleName && routeExists;
+});
 </script>
 
 <template>
@@ -64,7 +71,7 @@ async function fetch() {
                 <div class="summaryHeader bg-primary q-pa-sm text-weight-bolder">
                     <slot name="header-left">
                         <router-link
-                            v-if="!isSummary && route.meta.moduleName"
+                            v-if="showRedirectToSummaryIcon"
                             class="header link"
                             :to="{
                                 name: `${route.meta.moduleName}Summary`,
diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 7acc2043d..946e3242c 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -426,6 +426,7 @@ ticket:
         boxing: Boxing
         sms: Sms
         notes: Notes
+        sale: Sale
     list:
         nickname: Nickname
         state: State
@@ -1237,8 +1238,8 @@ zone:
         upcomingList: Upcoming deliveries
 monitor:
     pageTitles:
-        monitors: Monitors
-        salesMonitor: Sales monitor
+        monitors: Monitores
+        list: Listado
 components:
     topbar: {}
     itemsFilterPanel:
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 6e466f483..5a7999b9e 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -424,6 +424,7 @@ ticket:
         boxing: Encajado
         sms: Sms
         notes: Notas
+        sale: Lineas del pedido
     list:
         nickname: Alias
         state: Estado
@@ -1234,10 +1235,10 @@ zone:
         zonesList: Zonas
         deliveryList: Días de entrega
         upcomingList: Próximos repartos
-monitors:
+monitor:
     pageTitles:
         monitors: Monitores
-        salesMonitor: Monitor de ventas
+        list: Listado
 components:
     topbar: {}
     itemsFilterPanel:
diff --git a/src/pages/Monitor/MonitorList.vue b/src/pages/Monitor/MonitorList.vue
new file mode 100644
index 000000000..c7db282c1
--- /dev/null
+++ b/src/pages/Monitor/MonitorList.vue
@@ -0,0 +1,69 @@
+<script setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { useStateStore } from 'stores/useStateStore';
+import SalesClientTable from './SalesClientsTable.vue';
+import SalesOrdersTable from './SalesOrdersTable.vue';
+import SalesTicketsTable from './SalesTicketsTable.vue';
+
+const { t } = useI18n();
+const stateStore = useStateStore();
+
+const expanded = ref(true);
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+});
+
+onUnmounted(() => (stateStore.rightDrawer = false));
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <QExpansionItem
+            v-model="expanded"
+            dense
+            :duration="150"
+            class="full-width q-mb-lg"
+        >
+            <template v-if="!expanded" #header>
+                <div class="row full-width">
+                    <span class="flex col text-body1">
+                        {{ t('salesMonitor.clientsOnWebsite') }}
+                    </span>
+                    <span class="flex col q-ml-xl text-body1">
+                        {{ t('salesMonitor.recentOrderActions') }}
+                    </span>
+                </div>
+            </template>
+            <template #default>
+                <QCard class="card">
+                    <QCardSection class="col">
+                        <span class="flex col q-mb-sm text-body1">
+                            {{ t('salesMonitor.clientsOnWebsite') }}
+                        </span>
+                        <SalesClientTable />
+                    </QCardSection>
+                    <QCardSection class="col">
+                        <span class="flex col q-mb-sm text-body1">
+                            {{ t('salesMonitor.recentOrderActions') }}
+                        </span>
+                        <SalesOrdersTable />
+                    </QCardSection>
+                </QCard>
+            </template>
+        </QExpansionItem>
+        <SalesTicketsTable />
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.card {
+    display: flex;
+
+    @media (max-width: $breakpoint-md-max) {
+        flex-direction: column;
+    }
+}
+</style>
diff --git a/src/pages/Monitor/SalesClientsTable.vue b/src/pages/Monitor/SalesClientsTable.vue
new file mode 100644
index 000000000..84cccf91b
--- /dev/null
+++ b/src/pages/Monitor/SalesClientsTable.vue
@@ -0,0 +1,219 @@
+<script setup>
+import { ref, computed, reactive, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+
+import { toDateFormat } from 'src/filters/date.js';
+import { dashIfEmpty } from 'src/filters';
+
+const { t } = useI18n();
+
+const paginateRef = ref(null);
+const workersActiveOptions = ref([]);
+const clientsOptions = ref([]);
+
+const from = ref(Date.vnNew());
+const to = ref(Date.vnNew());
+
+const dateRange = computed(() => {
+    const minHour = new Date(from.value);
+    minHour.setHours(0, 0, 0, 0);
+    const maxHour = new Date(to.value);
+    maxHour.setHours(23, 59, 59, 59);
+    return [minHour, maxHour];
+});
+
+const filter = reactive({
+    where: {
+        'v.stamp': {
+            between: [from.value, to.value],
+        },
+    },
+});
+
+watch(dateRange, (val) => {
+    filter.where['v.stamp'].between = val;
+    paginateRef.value.fetch();
+});
+
+function exprBuilder(param, value) {
+    switch (param) {
+        case 'clientFk':
+            return { [`c.id`]: value };
+        case 'salesPersonFk':
+            return { [`c.${param}`]: value };
+    }
+}
+
+const params = reactive({});
+
+const applyColumnFilter = async (col) => {
+    try {
+        const paramKey = col.columnFilter?.filterParamKey || col.field;
+        params[paramKey] = col.columnFilter.filterValue;
+        await paginateRef.value.addFilter(null, params);
+    } catch (err) {
+        console.error('Error applying column filter', err);
+    }
+};
+
+const columns = computed(() => [
+    {
+        label: t('salesClientsTable.date'),
+        name: 'date',
+        field: 'dated',
+        align: 'left',
+        columnFilter: null,
+        sortable: true,
+        format: (val) => toDateFormat(val),
+    },
+    {
+        label: t('salesClientsTable.hour'),
+        name: 'hour',
+        field: 'hour',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('salesClientsTable.salesPerson'),
+        name: 'salesPerson',
+        field: 'salesPerson',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelect,
+            filterParamKey: 'salesPersonFk',
+            type: 'select',
+            filterValue: null,
+            attrs: {
+                options: workersActiveOptions.value,
+                'option-value': 'id',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('salesClientsTable.client'),
+        field: 'clientName',
+        name: 'client',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelect,
+            filterParamKey: 'clientFk',
+            type: 'select',
+            filterValue: null,
+            attrs: {
+                options: clientsOptions.value,
+                'option-value': 'id',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
+        format: (val) => dashIfEmpty(val),
+    },
+]);
+</script>
+
+<template>
+    <FetchData
+        url="Workers/activeWithInheritedRole"
+        :filter="{
+            fields: ['id', 'nickname'],
+            order: 'nickname ASC',
+            where: { role: 'salesPerson' },
+        }"
+        auto-load
+        @on-fetch="(data) => (workersActiveOptions = data)"
+    />
+    <FetchData
+        url="Clients"
+        :filter="{
+            fields: ['id', 'name'],
+            order: 'name ASC',
+        }"
+        auto-load
+        @on-fetch="(data) => (clientsOptions = data)"
+    />
+    <QCard style="max-height: 380px; overflow-y: scroll">
+        <VnPaginate
+            ref="paginateRef"
+            data-key="SalesMonitorClients"
+            url="SalesMonitors/clientsFilter"
+            order="dated DESC, hour DESC"
+            :limit="6"
+            :expr-builder="exprBuilder"
+            :user-params="params"
+            :filter="filter"
+            :offset="50"
+            auto-load
+        >
+            <template #body="{ rows }">
+                <QTable
+                    :rows="rows"
+                    :columns="columns"
+                    row-key="id"
+                    :pagination="{ rowsPerPage: 0 }"
+                    class="full-width"
+                    :no-data-label="t('globals.noResults')"
+                >
+                    <template #top>
+                        <VnInputDate
+                            :label="t('salesClientsTable.from')"
+                            dense
+                            emit-date-format
+                            v-model="from"
+                            class="q-mr-lg"
+                            style="width: 150px"
+                        />
+                        <VnInputDate
+                            :label="t('salesClientsTable.to')"
+                            dense
+                            emit-date-format
+                            v-model="to"
+                            style="width: 150px"
+                        />
+                    </template>
+                    <template #top-row="{ cols }">
+                        <QTr>
+                            <QTd
+                                v-for="(col, index) in cols"
+                                :key="index"
+                                style="max-width: 100px"
+                            >
+                                <VnSelect
+                                    :is="col.columnFilter.component"
+                                    v-if="col.columnFilter"
+                                    v-model="col.columnFilter.filterValue"
+                                    v-bind="col.columnFilter.attrs"
+                                    @update:model-value="applyColumnFilter(col)"
+                                    dense
+                                />
+                            </QTd>
+                        </QTr>
+                    </template>
+                    <template #body-cell-salesPerson="{ row }">
+                        <QTd>
+                            <span class="link">{{ row.salesPerson }}</span>
+                            <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
+                        </QTd>
+                    </template>
+                    <template #body-cell-client="{ row }">
+                        <QTd>
+                            <span class="link">{{ row.clientName }}</span>
+                            <CustomerDescriptorProxy :id="row.clientFk" />
+                        </QTd>
+                    </template>
+                </QTable>
+            </template>
+        </VnPaginate>
+    </QCard>
+</template>
diff --git a/src/pages/Monitor/SalesMonitor.vue b/src/pages/Monitor/SalesMonitor.vue
deleted file mode 100644
index 842474545..000000000
--- a/src/pages/Monitor/SalesMonitor.vue
+++ /dev/null
@@ -1,270 +0,0 @@
-<script setup>
-import { onMounted, ref, computed, reactive, onUnmounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-
-import FetchData from 'components/FetchData.vue';
-import FetchedTags from 'components/ui/FetchedTags.vue';
-import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
-import VnPaginate from 'components/ui/VnPaginate.vue';
-
-import { useStateStore } from 'stores/useStateStore';
-// import { toDateFormat } from 'src/filters/date.js';
-import { useSession } from 'composables/useSession';
-import { dashIfEmpty } from 'src/filters';
-// import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-// import { useVnConfirm } from 'composables/useVnConfirm';
-import axios from 'axios';
-
-const router = useRouter();
-const { getTokenMultimedia } = useSession();
-const token = getTokenMultimedia();
-const stateStore = useStateStore();
-const { t } = useI18n();
-// const { viewSummary } = useSummaryDialog();
-// const { openConfirmationModal } = useVnConfirm();
-
-const paginateRef = ref(null);
-const itemTypesOptions = ref([]);
-const originsOptions = ref([]);
-const buyersOptions = ref([]);
-const intrastatOptions = ref([]);
-const itemCategoriesOptions = ref([]);
-const visibleColumns = ref([]);
-const allColumnNames = ref([]);
-
-// const exprBuilder = (param, value) => {
-//     switch (param) {
-//         case 'category':
-//             return { 'ic.name': value };
-//         case 'buyerFk':
-//             return { 'it.workerFk': value };
-//         case 'grouping':
-//             return { 'b.grouping': value };
-//         case 'packing':
-//             return { 'b.packing': value };
-//         case 'origin':
-//             return { 'ori.code': value };
-//         case 'typeFk':
-//             return { 'i.typeFk': value };
-//         case 'intrastat':
-//             return { 'intr.description': value };
-//         case 'name':
-//             return { 'i.name': { like: `%${value}%` } };
-//         case 'producer':
-//             return { 'pr.name': { like: `%${value}%` } };
-//         case 'id':
-//         case 'size':
-//         case 'subname':
-//         case 'isActive':
-//         case 'weightByPiece':
-//         case 'stemMultiplier':
-//         case 'stems':
-//             return { [`i.${param}`]: value };
-//     }
-// };
-
-// const params = reactive({ isFloramondo: false, isActive: true });
-
-// const applyColumnFilter = async (col) => {
-//     try {
-//         const paramKey = col.columnFilter?.filterParamKey || col.field;
-//         params[paramKey] = col.columnFilter.filterValue;
-//         await paginateRef.value.addFilter(null, params);
-//     } catch (err) {
-//         console.error('Error applying column filter', err);
-//     }
-// };
-
-// const getInputEvents = (col) => {
-//     return col.columnFilter.type === 'select'
-//         ? { 'update:modelValue': () => applyColumnFilter(col) }
-//         : {
-//               'keyup.enter': () => applyColumnFilter(col),
-//           };
-// };
-
-const columns = computed(() => [
-    {
-        label: '',
-        name: 'picture',
-        align: 'left',
-        columnFilter: null,
-    },
-    {
-        label: t('item.list.id'),
-        name: 'id',
-        field: 'id',
-        align: 'left',
-        sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
-    },
-    {
-        label: t('item.list.grouping'),
-        field: 'grouping',
-        name: 'grouping',
-        align: 'left',
-        sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
-        format: (val) => dashIfEmpty(val),
-    },
-    {
-        label: t('item.list.packing'),
-        field: 'packing',
-        name: 'packing',
-        align: 'left',
-        sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
-        format: (val) => dashIfEmpty(val),
-    },
-]);
-
-const redirectToItemCreate = () => {
-    // router.push({ name: 'ItemCreate' });
-};
-
-const redirectToItemSummary = (id) => {
-    router.push({ name: 'ItemSummary', params: { id } });
-};
-
-onMounted(async () => {
-    stateStore.rightDrawer = true;
-    const filteredColumns = columns.value.filter(
-        (col) => col.name !== 'picture' && col.name !== 'actions'
-    );
-    allColumnNames.value = filteredColumns.map((col) => col.name);
-});
-
-onUnmounted(() => (stateStore.rightDrawer = false));
-</script>
-
-<template>
-    <FetchData
-        url="ItemTypes"
-        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
-        auto-load
-        @on-fetch="(data) => (itemTypesOptions = data)"
-    />
-    <FetchData
-        url="ItemCategories"
-        :filter="{ fields: ['name'], order: 'name ASC' }"
-        auto-load
-        @on-fetch="(data) => (itemCategoriesOptions = data)"
-    />
-    <FetchData
-        url="Intrastats"
-        :filter="{ fields: ['description'], order: 'description ASC' }"
-        auto-load
-        @on-fetch="(data) => (intrastatOptions = data)"
-    />
-    <FetchData
-        url="Origins"
-        :filter="{ fields: ['code'], order: 'code ASC' }"
-        auto-load
-        @on-fetch="(data) => (originsOptions = data)"
-    />
-    <FetchData
-        url="TicketRequests/getItemTypeWorker"
-        :filter="{ fields: ['id', 'nickname'], order: 'nickname ASC' }"
-        auto-load
-        @on-fetch="(data) => (buyersOptions = data)"
-    />
-
-    <QToolbar class="bg-vn-dark justify-end">
-        <div id="st-data">
-            <TableVisibleColumns
-                :all-columns="allColumnNames"
-                table-code="itemsIndex"
-                labels-traductions-path="item.list"
-                @on-config-saved="visibleColumns = ['picture', ...$event, 'actions']"
-            />
-        </div>
-        <QSpace />
-        <div id="st-actions"></div>
-    </QToolbar>
-
-    <QPage class="column items-center q-pa-md">
-        <VnPaginate
-            ref="paginateRef"
-            data-key="ItemList"
-            url="Items/filter"
-            :order="['isActive DESC', 'name', 'id']"
-            :limit="12"
-            :expr-builder="exprBuilder"
-            :user-params="params"
-            :offset="50"
-            auto-load
-        >
-            <template #body="{ rows }">
-                <QTable
-                    :rows="rows"
-                    :columns="columns"
-                    row-key="id"
-                    :pagination="{ rowsPerPage: 0 }"
-                    class="full-width q-mt-md"
-                    :visible-columns="visibleColumns"
-                    :no-data-label="t('globals.noResults')"
-                    @row-click="(_, row) => redirectToItemSummary(row.id)"
-                >
-                    <!-- <template #top-row="{ cols }">
-                        <QTr>
-                            <QTd
-                                v-for="(col, index) in cols"
-                                :key="index"
-                                style="max-width: 100px"
-                            >
-                                <component
-                                    :is="col.columnFilter.component"
-                                    v-if="col.columnFilter"
-                                    v-model="col.columnFilter.filterValue"
-                                    v-bind="col.columnFilter.attrs"
-                                    v-on="col.columnFilter.event(col)"
-                                    dense
-                                />
-                            </QTd>
-                        </QTr>
-                    </template> -->
-                    <template #body-cell-picture="{ row }">
-                        <QTd>
-                            <QImg
-                                :src="`/api/Images/catalog/50x50/${row.id}/download?access_token=${token}`"
-                                spinner-color="primary"
-                                :ratio="1"
-                                height="50px"
-                                width="50px"
-                                class="image"
-                            />
-                        </QTd>
-                    </template>
-                </QTable>
-            </template>
-        </VnPaginate>
-    </QPage>
-</template>
diff --git a/src/pages/Monitor/SalesOrdersTable.vue b/src/pages/Monitor/SalesOrdersTable.vue
new file mode 100644
index 000000000..2e1d3aaed
--- /dev/null
+++ b/src/pages/Monitor/SalesOrdersTable.vue
@@ -0,0 +1,198 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+
+import { toDateFormat, toDateTimeFormat } from 'src/filters/date.js';
+import { toCurrency } from 'src/filters';
+import { useVnConfirm } from 'composables/useVnConfirm';
+import axios from 'axios';
+
+const { t } = useI18n();
+const { openConfirmationModal } = useVnConfirm();
+
+const router = useRouter();
+const paginateRef = ref(null);
+const workersActiveOptions = ref([]);
+const clientsOptions = ref([]);
+const selectedRows = ref([]);
+
+const dateRange = (value) => {
+    const minHour = new Date(value);
+    minHour.setHours(0, 0, 0, 0);
+    const maxHour = new Date(value);
+    maxHour.setHours(23, 59, 59, 59);
+
+    return [minHour, maxHour];
+};
+
+function exprBuilder(param, value) {
+    switch (param) {
+        case 'date_send':
+            return {
+                [`o.date_send`]: {
+                    between: dateRange(value),
+                },
+            };
+        case 'clientFk':
+            return { [`c.id`]: value };
+        case 'salesPersonFk':
+            return { [`c.${param}`]: value };
+    }
+}
+
+const columns = computed(() => [
+    {
+        label: t('salesOrdersTable.date'),
+        name: 'date',
+        field: 'dated',
+        align: 'left',
+        columnFilter: null,
+    },
+    {
+        label: t('salesOrdersTable.client'),
+        name: 'client',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('salesOrdersTable.salesPerson'),
+        name: 'salesPerson',
+        align: 'left',
+        sortable: true,
+    },
+]);
+
+const getBadgeColor = (date) => {
+    const today = Date.vnNew();
+    today.setHours(0, 0, 0, 0);
+
+    const orderLanded = new Date(date);
+    orderLanded.setHours(0, 0, 0, 0);
+
+    const difference = today - orderLanded;
+
+    if (difference == 0) return 'warning';
+    if (difference < 0) return 'success';
+    if (difference > 0) return 'alert';
+};
+
+const removeOrders = async () => {
+    try {
+        const selectedIds = selectedRows.value.map((row) => row.id);
+        const params = { deletes: selectedIds };
+        await axios.post('SalesMonitors/deleteOrders', params);
+        selectedRows.value = [];
+        await paginateRef.value.fetch();
+    } catch (err) {
+        console.error('Error deleting orders', err);
+    }
+};
+
+const redirectToOrderSummary = (orderId) => {
+    const url = `#/order/${orderId}/summary`;
+    window.open(url, '_blank');
+};
+</script>
+
+<template>
+    <FetchData
+        url="Workers/activeWithInheritedRole"
+        :filter="{
+            fields: ['id', 'nickname'],
+            order: 'nickname ASC',
+            where: { role: 'salesPerson' },
+        }"
+        auto-load
+        @on-fetch="(data) => (workersActiveOptions = data)"
+    />
+    <FetchData
+        url="Clients"
+        :filter="{
+            fields: ['id', 'name'],
+            order: 'name ASC',
+        }"
+        auto-load
+        @on-fetch="(data) => (clientsOptions = data)"
+    />
+
+    <QCard style="max-height: 380px; overflow-y: scroll">
+        <VnPaginate
+            ref="paginateRef"
+            data-key="SalesMonitorOrders"
+            url="SalesMonitors/ordersFilter"
+            order="date_make DESC"
+            :limit="6"
+            :expr-builder="exprBuilder"
+            auto-load
+        >
+            <template #body="{ rows }">
+                <QTable
+                    :rows="rows"
+                    :columns="columns"
+                    row-key="id"
+                    selection="multiple"
+                    v-model:selected="selectedRows"
+                    :pagination="{ rowsPerPage: 0 }"
+                    :no-data-label="t('globals.noResults')"
+                    @row-click="(_, row) => redirectToOrderSummary(row.id)"
+                >
+                    <template #top>
+                        <QBtn
+                            v-if="selectedRows.length > 0"
+                            icon="delete"
+                            size="md"
+                            color="primary"
+                            @click="
+                                openConfirmationModal(
+                                    t('salesOrdersTable.deleteConfirmTitle'),
+                                    t('salesOrdersTable.deleteConfirmMessage'),
+                                    removeOrders
+                                )
+                            "
+                        >
+                            <QTooltip>{{ t('salesOrdersTable.delete') }}</QTooltip>
+                        </QBtn>
+                    </template>
+                    <template #body-cell-date="{ row }">
+                        <QTd>
+                            <QBadge
+                                :color="getBadgeColor(row.date_send)"
+                                text-color="black"
+                                class="q-ma-none q-mb-md"
+                                dense
+                                style="font-size: 14px"
+                            >
+                                {{ toDateFormat(row.date_send) }}
+                            </QBadge>
+                            <div>{{ toDateTimeFormat(row.date_make) }}</div>
+                        </QTd>
+                    </template>
+                    <template #body-cell-client="{ row }">
+                        <QTd>
+                            <div class="q-mb-md">
+                                <span class="link">{{ row.salesPerson }}</span>
+                                <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
+                            </div>
+                            <span> {{ row.agencyName }}</span>
+                        </QTd>
+                    </template>
+                    <template #body-cell-salesPerson="{ row }">
+                        <QTd>
+                            <div class="q-mb-md">
+                                <span class="link">{{ row.clientName }}</span>
+                                <CustomerDescriptorProxy :id="row.clientFk" />
+                            </div>
+                            <span>{{ toCurrency(row.import) }}</span>
+                        </QTd>
+                    </template>
+                </QTable>
+            </template>
+        </VnPaginate>
+    </QCard>
+</template>
diff --git a/src/pages/Monitor/SalesTicketsTable.vue b/src/pages/Monitor/SalesTicketsTable.vue
new file mode 100644
index 000000000..d82a5f2ca
--- /dev/null
+++ b/src/pages/Monitor/SalesTicketsTable.vue
@@ -0,0 +1,622 @@
+<script setup>
+import { ref, computed, onMounted, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
+import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
+import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
+import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
+import TicketSummary from 'src/pages/Ticket/Card/TicketSummary.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { toDateFormat, toTimeFormat } from 'src/filters/date.js';
+import { toCurrency } from 'src/filters';
+
+const { t } = useI18n();
+
+const router = useRouter();
+const paginateRef = ref(null);
+const workersActiveOptions = ref([]);
+const provincesOptions = ref([]);
+const statesOptions = ref([]);
+const zonesOptions = ref([]);
+const visibleColumns = ref([]);
+const allColumnNames = ref([]);
+const { viewSummary } = useSummaryDialog();
+
+const dateRange = (value) => {
+    const minHour = new Date(value);
+    minHour.setHours(0, 0, 0, 0);
+    const maxHour = new Date(value);
+    maxHour.setHours(23, 59, 59, 59);
+
+    return [minHour, maxHour];
+};
+
+function exprBuilder(param, value) {
+    switch (param) {
+        case 'stateFk':
+            return { 'ts.stateFk': value };
+        case 'salesPersonFk':
+            return { 'c.salesPersonFk': value };
+        case 'provinceFk':
+            return { 'a.provinceFk': value };
+        case 'theoreticalHour':
+            return { 'z.hour': value };
+        case 'practicalHour':
+            return { 'zed.etc': value };
+        case 'shippedDate':
+            return {
+                't.shipped': {
+                    between: dateRange(value),
+                },
+            };
+        case 'nickname':
+            return { [`t.nickname`]: { like: `%${value}%` } };
+        case 'zoneFk':
+        case 'totalWithVat':
+            return { [`t.${param}`]: value };
+    }
+}
+
+const filter = { order: ['totalProblems DESC'] };
+let params = reactive({});
+
+const applyColumnFilter = async (col) => {
+    try {
+        const paramKey = col.columnFilter?.filterParamKey || col.field;
+        params[paramKey] = col.columnFilter.filterValue;
+        await paginateRef.value.addFilter(null, params);
+    } catch (err) {
+        console.error('Error applying column filter', err);
+    }
+};
+
+const getInputEvents = (col) => {
+    return col.columnFilter.type === 'select' || col.columnFilter.type === 'date'
+        ? { 'update:modelValue': () => applyColumnFilter(col) }
+        : {
+              'keyup.enter': () => applyColumnFilter(col),
+          };
+};
+
+const fetchParams = ($params = {}) => {
+    const excludedParams = ['search', 'clientFk', 'orderFk', 'refFk', 'scopeDays'];
+
+    const hasExcludedParams = excludedParams.some((param) => {
+        return $params && $params[param] != undefined;
+    });
+    const hasParams = Object.entries($params).length;
+    if (!hasParams || !hasExcludedParams) $params.scopeDays = 1;
+
+    if (typeof $params.scopeDays === 'number') {
+        const from = Date.vnNew();
+        from.setHours(0, 0, 0, 0);
+
+        const to = new Date(from.getTime());
+        to.setDate(to.getDate() + $params.scopeDays);
+        to.setHours(23, 59, 59, 999);
+
+        Object.assign($params, { from, to });
+    }
+    return { tableOrder: 'totalProblems DESC', ...$params };
+};
+
+const columns = computed(() => [
+    {
+        label: t('salesTicketsTable.problems'),
+        name: 'problems',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+    },
+    {
+        label: t('salesTicketsTable.identifier'),
+        name: 'identifier',
+        field: 'id',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.client'),
+        name: 'client',
+        align: 'left',
+        field: 'nickname',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.salesPerson'),
+        name: 'salesPerson',
+        field: 'userName',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelect,
+            filterParamKey: 'salesPersonFk',
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: workersActiveOptions.value,
+                'option-value': 'id',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.date'),
+        name: 'date',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInputDate,
+            filterParamKey: 'shippedDate',
+            type: 'date',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.theoretical'),
+        name: 'theoretical',
+        field: 'zoneLanding',
+        align: 'left',
+        sortable: true,
+        format: (val) => toTimeFormat(val),
+    },
+    {
+        label: t('salesTicketsTable.practical'),
+        name: 'practical',
+        field: 'practicalHour',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.preparation'),
+        name: 'preparation',
+        field: 'shipped',
+        align: 'left',
+        sortable: true,
+        format: (val) => toTimeFormat(val),
+    },
+
+    {
+        label: t('salesTicketsTable.province'),
+        name: 'province',
+        field: 'province',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelect,
+            filterParamKey: 'provinceFk',
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: provincesOptions.value,
+                'option-value': 'id',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.state'),
+        name: 'state',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelect,
+            filterParamKey: 'stateFk',
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: statesOptions.value,
+                'option-value': 'id',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.isFragile'),
+        name: 'isFragile',
+        field: 'isFragile',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.zone'),
+        name: 'zone',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelect,
+            filterParamKey: 'zoneFk',
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: zonesOptions.value,
+                'option-value': 'id',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('salesTicketsTable.total'),
+        name: 'total',
+        field: 'totalWithVat',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        name: 'rowActions',
+        align: 'left',
+        sortable: true,
+    },
+]);
+
+const getBadgeAttrs = (date) => {
+    let today = Date.vnNew();
+    today.setHours(0, 0, 0, 0);
+    let timeTicket = new Date(date);
+    timeTicket.setHours(0, 0, 0, 0);
+
+    let comparation = today - timeTicket;
+
+    if (comparation == 0) return { color: 'warning', 'text-color': 'black' };
+    if (comparation < 0) return { color: 'success', 'text-color': 'black' };
+    return { color: 'transparent', 'text-color': 'white' };
+};
+
+const redirectToTicketSummary = (id) => {
+    router.push({ name: 'TicketSummary', params: { id } });
+};
+
+const stateColors = {
+    notice: 'info',
+    success: 'positive',
+    warning: 'warning',
+    alert: 'negative',
+};
+
+const totalPriceColor = (ticket) => {
+    const total = parseInt(ticket.totalWithVat);
+    if (total > 0 && total < 50) return 'warning';
+};
+
+const formatShippedDate = (date) => {
+    if (!date) return '-';
+    const split1 = date.split('T');
+    const [year, month, day] = split1[0].split('-');
+    const _date = new Date(year, month - 1, day);
+    return toDateFormat(_date);
+};
+
+onMounted(async () => {
+    const filteredColumns = columns.value.filter((col) => col.name !== 'rowActions');
+    allColumnNames.value = filteredColumns.map((col) => col.name);
+    params = fetchParams();
+    await paginateRef.value.addFilter(null, params);
+});
+</script>
+
+<template>
+    <FetchData
+        url="Workers/activeWithInheritedRole"
+        :filter="{
+            fields: ['id', 'nickname'],
+            order: 'nickname ASC',
+            where: { role: 'salesPerson' },
+        }"
+        auto-load
+        @on-fetch="(data) => (workersActiveOptions = data)"
+    />
+    <FetchData
+        url="Provinces"
+        :filter="{
+            fields: ['id', 'name'],
+            order: 'name ASC',
+        }"
+        auto-load
+        @on-fetch="(data) => (provincesOptions = data)"
+    />
+    <FetchData
+        url="States"
+        :filter="{
+            fields: ['id', 'name'],
+            order: 'name ASC',
+        }"
+        auto-load
+        @on-fetch="(data) => (statesOptions = data)"
+    />
+    <FetchData
+        url="Zones"
+        :filter="{
+            fields: ['id', 'name'],
+            order: 'name ASC',
+        }"
+        auto-load
+        @on-fetch="(data) => (zonesOptions = data)"
+    />
+    <VnPaginate
+        ref="paginateRef"
+        data-key="SalesMonitorTickets"
+        url="SalesMonitors/salesFilter"
+        :filter="filter"
+        :limit="20"
+        :expr-builder="exprBuilder"
+        :user-params="params"
+        :offset="50"
+    >
+        <template #body="{ rows }">
+            <QTable
+                :rows="rows"
+                :columns="columns"
+                row-key="id"
+                :pagination="{ rowsPerPage: 0 }"
+                :visible-columns="visibleColumns"
+                :no-data-label="t('globals.noResults')"
+                @row-click="(_, row) => redirectToTicketSummary(row.id)"
+            >
+                <template #top>
+                    <TableVisibleColumns
+                        :all-columns="allColumnNames"
+                        table-code="ticketsMonitor"
+                        labels-traductions-path="salesTicketsTable"
+                        @on-config-saved="visibleColumns = [...$event, 'rowActions']"
+                    />
+                </template>
+                <template #top-row="{ cols }">
+                    <QTr>
+                        <QTd
+                            v-for="(col, index) in cols"
+                            :key="index"
+                            style="max-width: 100px"
+                        >
+                            <component
+                                :is="col.columnFilter.component"
+                                v-if="col.columnFilter"
+                                v-model="col.columnFilter.filterValue"
+                                v-bind="col.columnFilter.attrs"
+                                v-on="col.columnFilter.event(col)"
+                                dense
+                            />
+                        </QTd>
+                    </QTr>
+                </template>
+                <template #body-cell-problems="{ row }">
+                    <QTd class="q-gutter-x-sm">
+                        <QIcon
+                            v-if="row.isTaxDataChecked === 0"
+                            name="vn:no036"
+                            color="primary"
+                            size="xs"
+                        >
+                            <QTooltip>{{
+                                t('salesTicketsTable.noVerifiedData')
+                            }}</QTooltip>
+                        </QIcon>
+                        <QIcon
+                            v-if="row.hasTicketRequest"
+                            name="vn:buyrequest"
+                            color="primary"
+                            size="xs"
+                        >
+                            <QTooltip>{{
+                                t('salesTicketsTable.purchaseRequest')
+                            }}</QTooltip>
+                        </QIcon>
+                        <QIcon
+                            v-if="row.itemShortage"
+                            name="vn:unavailable"
+                            color="primary"
+                            size="xs"
+                        >
+                            <QTooltip>{{ t('salesTicketsTable.notVisible') }}</QTooltip>
+                        </QIcon>
+                        <QIcon
+                            v-if="row.isFreezed"
+                            name="vn:frozen"
+                            color="primary"
+                            size="xs"
+                        >
+                            <QTooltip>{{ t('salesTicketsTable.clientFrozen') }}</QTooltip>
+                        </QIcon>
+                        <QIcon
+                            v-if="row.risk"
+                            name="vn:risk"
+                            :color="row.hasHighRisk ? 'negative' : 'primary'"
+                            size="xs"
+                        >
+                            <QTooltip
+                                >{{ t('salesTicketsTable.risk') }}:
+                                {{ row.risk }}</QTooltip
+                            >
+                        </QIcon>
+                        <QIcon
+                            v-if="row.hasComponentLack"
+                            name="vn:components"
+                            color="primary"
+                            size="xs"
+                        >
+                            <QTooltip>{{
+                                t('salesTicketsTable.componentLack')
+                            }}</QTooltip>
+                        </QIcon>
+                        <QIcon
+                            v-if="row.isTooLittle"
+                            name="vn:isTooLittle"
+                            color="primary"
+                            size="xs"
+                        >
+                            <QTooltip>{{ t('salesTicketsTable.tooLittle') }}</QTooltip>
+                        </QIcon>
+                    </QTd>
+                </template>
+                <template #body-cell-identifier="{ row }">
+                    <QTd>
+                        <span class="link" @click.stop.prevent>{{ row.id }}</span>
+                        <TicketDescriptorProxy :id="row.id" />
+                    </QTd>
+                </template>
+                <template #body-cell-client="{ row }">
+                    <QTd @click.stop.prevent>
+                        <span class="link">{{ row.nickname }}</span>
+                        <CustomerDescriptorProxy :id="row.clientFk" />
+                    </QTd>
+                </template>
+                <template #body-cell-salesPerson="{ row }">
+                    <QTd @click.stop.prevent>
+                        <span class="link">{{ row.userName }}</span>
+                        <WorkerDescriptorProxy :id="row.salesPersonFk" />
+                    </QTd>
+                </template>
+                <template #body-cell-date="{ row }">
+                    <QTd>
+                        <QBadge
+                            v-bind="getBadgeAttrs(row.shippedDate)"
+                            class="q-ma-none"
+                            dense
+                            style="font-size: 14px"
+                        >
+                            {{ formatShippedDate(row.shippedDate) }}
+                        </QBadge>
+                    </QTd>
+                </template>
+                <template #body-cell-state="{ row }">
+                    <QTd @click.stop.prevent>
+                        <div v-if="row.refFk">
+                            <span class="link">{{ row.refFk }}</span>
+                            <InvoiceOutDescriptorProxy :id="row.invoiceOutId" />
+                        </div>
+                        <QBadge
+                            v-else
+                            :color="stateColors[row.classColor] || 'transparent'"
+                            :text-color="stateColors[row.classColor] ? 'black' : 'white'"
+                            dense
+                            style="font-size: 14px"
+                        >
+                            {{ row.state }}
+                        </QBadge>
+                    </QTd>
+                </template>
+                <template #body-cell-isFragile="{ row }">
+                    <QTd>
+                        <QIcon
+                            v-if="row.isFragile"
+                            name="local_bar"
+                            color="primary"
+                            size="sm"
+                        >
+                            <QTooltip>{{ t('salesTicketsTable.isFragile') }}</QTooltip>
+                        </QIcon>
+                    </QTd>
+                </template>
+                <template #body-cell-zone="{ row }">
+                    <QTd @click.stop.prevent>
+                        <span class="link">{{ row.zoneName }}</span>
+                        <ZoneDescriptorProxy :id="row.zoneFk" />
+                    </QTd>
+                </template>
+                <template #body-cell-total="{ row }">
+                    <QTd>
+                        <QBadge
+                            :color="totalPriceColor(row) || 'transparent'"
+                            :text-color="totalPriceColor(row) ? 'black' : 'white'"
+                            dense
+                            style="font-size: 14px"
+                        >
+                            {{ toCurrency(row.totalWithVat) }}
+                        </QBadge>
+                    </QTd>
+                </template>
+                <template #body-cell-rowActions="{ row }">
+                    <QTd @click.stop.prevent>
+                        <QBtn
+                            icon="vn:lines"
+                            color="primary"
+                            size="md"
+                            class="q-mr-sm"
+                            flat
+                            dense
+                            :to="{ name: 'TicketSale', params: { id: row.id } }"
+                        >
+                            <QTooltip>{{ t('salesTicketsTable.goToLines') }}</QTooltip>
+                        </QBtn>
+                        <QBtn
+                            icon="preview"
+                            color="primary"
+                            size="md"
+                            dense
+                            flat
+                            @click="viewSummary(row.id, TicketSummary)"
+                        >
+                            <QTooltip>{{ t('salesTicketsTable.preview') }}</QTooltip>
+                        </QBtn>
+                    </QTd>
+                </template>
+            </QTable>
+        </template>
+    </VnPaginate>
+</template>
diff --git a/src/pages/Monitor/locale/en.yml b/src/pages/Monitor/locale/en.yml
new file mode 100644
index 000000000..a449225ed
--- /dev/null
+++ b/src/pages/Monitor/locale/en.yml
@@ -0,0 +1,40 @@
+salesMonitor:
+    clientsOnWebsite: Clients on website
+    recentOrderActions: Recent order actions
+salesClientsTable:
+    from: From
+    to: To
+    date: Date
+    hour: Hour
+    salesPerson: Salesperson
+    client: Client
+salesOrdersTable:
+    delete: Delete
+    date: Date
+    client: Client
+    salesPerson: Salesperson
+    deleteConfirmTitle: Delete selected elements
+    deleteConfirmMessage: All the selected elements will be deleted. Are you sure you want to continue?
+salesTicketsTable:
+    problems: Problems
+    noVerifiedData: No verified data
+    notVisible: Not visible
+    purchaseRequest: Purchase request
+    clientFrozen: Client frozen
+    risk: Risk
+    componentLack: Component lack
+    tooLittle: Ticket too little
+    identifier: Identifier
+    client: Client
+    salesPerson: Salesperson
+    date: Date
+    theoretical: Theoretical
+    practical: Practical
+    province: Province
+    state: State
+    isFragile: Is fragile
+    zone: Zone
+    goToLines: Go to lines
+    preview: Preview
+    total: Total
+    preparation: Preparation
diff --git a/src/pages/Monitor/locale/es.yml b/src/pages/Monitor/locale/es.yml
new file mode 100644
index 000000000..6ed6604be
--- /dev/null
+++ b/src/pages/Monitor/locale/es.yml
@@ -0,0 +1,40 @@
+salesMonitor:
+    clientsOnWebsite: Clientes activos en la web
+    recentOrderActions: Acciones recientes en pedidos
+salesClientsTable:
+    from: Desde
+    to: Hasta
+    date: Fecha
+    hour: Hora
+    salesPerson: Comercial
+    client: Cliente
+salesOrdersTable:
+    delete: Eliminar
+    date: Fecha
+    client: Cliente
+    salesPerson: Comercial
+    deleteConfirmTitle: Eliminar los elementos seleccionados
+    deleteConfirmMessage: Todos los elementos seleccionados serán eliminados. ¿Seguro que quieres continuar?
+salesTicketsTable:
+    problems: Problemas
+    noVerifiedData: Sin datos comprobados
+    notVisible: No visible
+    purchaseRequest: Petición de compra
+    clientFrozen: Cliente congelado
+    risk: Riesgo
+    componentLack: Faltan componentes
+    tooLittle: Ticket demasiado pequeño
+    identifier: Identificador
+    client: Cliente
+    salesPerson: Comercial
+    date: Fecha
+    theoretical: Teórica
+    practical: Práctica
+    province: Provincia
+    state: Estado
+    isFragile: Es frágil
+    zone: Zona
+    goToLines: Ir a líneas
+    preview: Vista previa
+    total: Total
+    preparation: Preparación
diff --git a/src/pages/Ticket/Card/TicketSale.vue b/src/pages/Ticket/Card/TicketSale.vue
new file mode 100644
index 000000000..02cccaff2
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketSale.vue
@@ -0,0 +1 @@
+<template>Ticket sale</template>
diff --git a/src/router/modules/monitor.js b/src/router/modules/monitor.js
index 0ce6e153b..6c388a474 100644
--- a/src/router/modules/monitor.js
+++ b/src/router/modules/monitor.js
@@ -5,13 +5,13 @@ export default {
     name: 'Monitor',
     meta: {
         title: 'monitors',
-        icon: 'vn:grid',
+        icon: 'grid_view',
         moduleName: 'Monitor',
     },
     component: RouterView,
     redirect: { name: 'MonitorMain' },
     menus: {
-        main: ['SalesMonitor'],
+        main: ['MonitorList'],
         card: [],
     },
     children: [
@@ -19,24 +19,18 @@ export default {
             path: '',
             name: 'MonitorMain',
             component: () => import('src/pages/Monitor/MonitorMain.vue'),
-            redirect: { name: 'SalesMonitor' },
+            redirect: { name: 'MonitorList' },
             children: [
                 {
-                    path: 'index',
-                    name: 'SalesMonitor',
+                    path: 'list',
+                    name: 'MonitorList',
                     meta: {
-                        title: 'salesMonitor',
-                        icon: 'vn:grid',
+                        title: 'list',
+                        icon: 'grid_view',
                     },
-                    component: () => import('src/pages/Monitor/SalesMonitor.vue'),
+                    component: () => import('src/pages/Monitor/MonitorList.vue'),
                 },
             ],
         },
-        // {
-        //     name: 'ItemCard',
-        //     path: ':id',
-        //     component: () => import('src/pages/Item/Card/ItemCard.vue'),
-        //     children: [],
-        // },
     ],
 };
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index eb6c1b6d2..6cb7291dc 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -12,7 +12,7 @@ export default {
     redirect: { name: 'TicketMain' },
     menus: {
         main: ['TicketList'],
-        card: ['TicketBoxing', 'TicketSms'],
+        card: ['TicketBoxing', 'TicketSms', 'TicketSale'],
     },
     children: [
         {
@@ -66,6 +66,15 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/Card/TicketBasicData.vue'),
                 },
+                {
+                    name: 'TicketSale',
+                    path: 'sale',
+                    meta: {
+                        title: 'sale',
+                        icon: 'vn:lines',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketSale.vue'),
+                },
                 {
                     path: 'boxing',
                     name: 'TicketBoxing',

From 399c2723a945ff21249ab5dc99fe5aec35429152 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 8 May 2024 10:58:27 -0300
Subject: [PATCH 36/61] change monitor list layout

---
 src/pages/Monitor/MonitorList.vue | 59 +++++++++++++++----------------
 1 file changed, 29 insertions(+), 30 deletions(-)

diff --git a/src/pages/Monitor/MonitorList.vue b/src/pages/Monitor/MonitorList.vue
index c7db282c1..a084f0c99 100644
--- a/src/pages/Monitor/MonitorList.vue
+++ b/src/pages/Monitor/MonitorList.vue
@@ -21,46 +21,45 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 
 <template>
     <QPage class="column items-center q-pa-md">
-        <QExpansionItem
-            v-model="expanded"
-            dense
-            :duration="150"
-            class="full-width q-mb-lg"
-        >
-            <template v-if="!expanded" #header>
-                <div class="row full-width">
-                    <span class="flex col text-body1">
-                        {{ t('salesMonitor.clientsOnWebsite') }}
-                    </span>
-                    <span class="flex col q-ml-xl text-body1">
-                        {{ t('salesMonitor.recentOrderActions') }}
-                    </span>
-                </div>
-            </template>
-            <template #default>
-                <QCard class="card">
-                    <QCardSection class="col">
-                        <span class="flex col q-mb-sm text-body1">
+        <QCard class="full-width q-mb-lg">
+            <QExpansionItem v-model="expanded" dense :duration="150">
+                <template v-if="!expanded" #header>
+                    <div class="row full-width">
+                        <span class="flex col text-body1">
                             {{ t('salesMonitor.clientsOnWebsite') }}
                         </span>
-                        <SalesClientTable />
-                    </QCardSection>
-                    <QCardSection class="col">
-                        <span class="flex col q-mb-sm text-body1">
+                        <span class="flex col q-ml-xl text-body1">
                             {{ t('salesMonitor.recentOrderActions') }}
                         </span>
-                        <SalesOrdersTable />
-                    </QCardSection>
-                </QCard>
-            </template>
-        </QExpansionItem>
+                    </div>
+                </template>
+                <template #default>
+                    <div class="expansion-tables-container">
+                        <QCardSection class="col">
+                            <span class="flex col q-mb-sm text-body1">
+                                {{ t('salesMonitor.clientsOnWebsite') }}
+                            </span>
+                            <SalesClientTable />
+                        </QCardSection>
+                        <QCardSection class="col">
+                            <span class="flex col q-mb-sm text-body1">
+                                {{ t('salesMonitor.recentOrderActions') }}
+                            </span>
+                            <SalesOrdersTable />
+                        </QCardSection>
+                    </div>
+                </template>
+            </QExpansionItem>
+        </QCard>
+
         <SalesTicketsTable />
     </QPage>
 </template>
 
 <style lang="scss" scoped>
-.card {
+.expansion-tables-container {
     display: flex;
+    border-top: 1px solid $color-spacer;
 
     @media (max-width: $breakpoint-md-max) {
         flex-direction: column;

From e74afae5b3ed9f3d248ee0a908671ba77defaa29 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 8 May 2024 12:04:23 -0300
Subject: [PATCH 37/61] remove padding bottom from some inputs

---
 src/pages/Monitor/SalesTicketsTable.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/Monitor/SalesTicketsTable.vue b/src/pages/Monitor/SalesTicketsTable.vue
index d82a5f2ca..584a36c72 100644
--- a/src/pages/Monitor/SalesTicketsTable.vue
+++ b/src/pages/Monitor/SalesTicketsTable.vue
@@ -441,6 +441,7 @@ onMounted(async () => {
                                 v-bind="col.columnFilter.attrs"
                                 v-on="col.columnFilter.event(col)"
                                 dense
+                                style="padding-bottom: 0"
                             />
                         </QTd>
                     </QTr>

From a3ce81d66d3dc65efeaa9b3377869470793fbe84 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 8 May 2024 15:23:52 -0300
Subject: [PATCH 38/61] Zone list

---
 src/pages/Zone/Card/ZoneSummary.vue | 22 ++++---
 src/pages/Zone/ZoneList.vue         | 86 +++++++++++++-------------
 src/pages/Zone/locale/en.yml        |  2 +
 src/pages/Zone/locale/es.yml        |  2 +
 src/router/modules/zone.js          | 96 ++++++++++++++---------------
 5 files changed, 106 insertions(+), 102 deletions(-)

diff --git a/src/pages/Zone/Card/ZoneSummary.vue b/src/pages/Zone/Card/ZoneSummary.vue
index 00df03cb0..90241c9a3 100644
--- a/src/pages/Zone/Card/ZoneSummary.vue
+++ b/src/pages/Zone/Card/ZoneSummary.vue
@@ -28,19 +28,25 @@ onMounted(async () => {
 });
 
 const filter = computed(() => {
-    return { where: { id: entityId.value } };
+    const params = {
+        filter: {
+            include: {
+                relation: 'agencyMode',
+                fields: ['name'],
+            },
+            where: {
+                id: entityId.value,
+            },
+        },
+    };
+    return params;
 });
 </script>
 
 <template>
-    <CardSummary
-        data-key="zoneData"
-        ref="summary"
-        :url="`Zones/summary`"
-        :filter="filter"
-    >
+    <CardSummary data-key="zoneData" ref="summary" url="Zones/findOne" :filter="filter">
         <template #header="{ entity }">
-            <div>{{ entity.id }} - {{ entity.firstName }} {{ entity.lastName }}</div>
+            <div>#{{ entity.id }} - {{ entity.name }}</div>
         </template>
         <template #body="{ entity: zone }">
             <QCard class="vn-one">
diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index f260eb134..2b18df033 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/src/pages/Zone/ZoneList.vue
@@ -1,63 +1,61 @@
 <script setup>
 import axios from 'axios';
-import { useQuasar } from 'quasar';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import { useArrayData } from 'src/composables/useArrayData';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import CardList from 'components/ui/CardList.vue';
 import VnLv from 'components/ui/VnLv.vue';
-import FetchData from 'src/components/FetchData.vue';
+import ZoneSummary from 'src/pages/Zone/Card/ZoneSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { toTimeFormat } from 'src/filters/date';
+import { toCurrency } from 'filters/index';
+import { useVnConfirm } from 'composables/useVnConfirm';
+import useNotify from 'src/composables/useNotify.js';
 
-const quasar = useQuasar();
-const arrayData = useArrayData('ZoneList');
-const store = arrayData.store;
-const router = useRouter();
 const { t } = useI18n();
+const router = useRouter();
+const { notify } = useNotify();
 const { viewSummary } = useSummaryDialog();
+const { openConfirmationModal } = useVnConfirm();
 
-function navigate(id) {
-    router.push({ path: `/zone/${id}/edit` });
-}
+const redirectToZoneSummary = (id) => {
+    router.push({ name: 'ZoneSummary', params: { id } });
+};
 
-function create() {
+function redirectToCreateView() {
     router.push({ path: `/zone/create` });
 }
 
-async function remove(row) {
+async function clone(id) {
     try {
-        await axios.delete(`Zones/${row.id}`).then(async () => {
-            quasar.notify({
-                message: t('zone.list.removeItem'),
-                type: 'positive',
-            });
-            store.data.splice(store.data.indexOf(row), 1);
-        });
+        await axios.post(`Zones/${id}/clone`);
+        notify(t('globals.dataSaved'), 'positive');
+        //TODO: Redireccionar Zone Basic data cuando exista
+        // router.push({ name: 'ZoneBasicData', params: { id: row.id } });
     } catch (error) {
-        //
+        console.error('Error cloning zone: ', error);
     }
 }
 </script>
 
 <template>
-    <FetchData
-        url="/Agencies"
-        @on-fetch="(data) => (agencyOptions = data)"
-        :filter="{ fields: ['id', 'name'] }"
-        auto-load
-    />
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
-            <VnPaginate data-key="ZoneList" url="/Zones" order="id DESC" auto-load>
+            <VnPaginate
+                data-key="ZoneList"
+                url="Zones"
+                :filter="{
+                    include: { relation: 'agencyMode', scope: { fields: ['name'] } },
+                }"
+                auto-load
+            >
                 <template #body="{ rows }">
                     <CardList
                         v-for="row of rows"
                         :key="row.id"
-                        :title="(row.label || '').toString()"
+                        :title="row.name"
                         :id="row.id"
-                        @click="navigate(row.id)"
+                        @click="redirectToZoneSummary(row.id)"
                     >
                         <template #list-items>
                             <VnLv
@@ -68,22 +66,29 @@ async function remove(row) {
                             <VnLv :label="t('zone.list.name')" :value="row?.name" />
                             <VnLv
                                 :label="t('zone.list.agency')"
-                                :options="agencyOptions"
-                                option-value="id"
-                                option-label="name"
-                                :value="row?.agencyFk"
+                                :value="row.agencyMode?.name"
                             />
                             <VnLv
                                 :label="t('zone.list.close')"
                                 :value="toTimeFormat(row?.hour)"
                             />
-                            <VnLv :label="t('zone.list.price')" :value="row?.price" />
+                            <VnLv
+                                :label="t('zone.list.price')"
+                                :value="toCurrency(row?.price)"
+                            />
                         </template>
                         <template #actions>
                             <QBtn
-                                :label="t('components.smartCard.openCard')"
-                                @click.stop="navigate(row.id)"
+                                :label="t('zone.list.clone')"
+                                @click.stop="
+                                    openConfirmationModal(
+                                        t('zone.list.confirmCloneTitle'),
+                                        t('zone.list.confirmCloneSubtitle'),
+                                        () => clone(row.id)
+                                    )
+                                "
                                 outline
+                                style="margin-top: 15px"
                             />
                             <QBtn
                                 :label="t('zone.list.openSummary')"
@@ -91,20 +96,13 @@ async function remove(row) {
                                 color="primary"
                                 style="margin-top: 15px"
                             />
-                            <!--AQUI PONER BOTÓN CLONAR-->
-                            <QBtn
-                                :label="t('zone.list.clone')"
-                                @click.stop="remove(row)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
                         </template>
                     </CardList>
                 </template>
             </VnPaginate>
         </div>
         <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn @click="create" fab icon="add" color="primary">
+            <QBtn @click="redirectToCreateView()" fab icon="add" color="primary">
                 <QTooltip>{{ t('zone.list.create') }}</QTooltip>
             </QBtn>
         </QPageSticky>
diff --git a/src/pages/Zone/locale/en.yml b/src/pages/Zone/locale/en.yml
index e62111d57..273092f88 100644
--- a/src/pages/Zone/locale/en.yml
+++ b/src/pages/Zone/locale/en.yml
@@ -9,6 +9,8 @@ zone:
         price: Price
         create: Create zone
         openSummary: Details
+        confirmCloneTitle: All it's properties will be copied
+        confirmCloneSubtitle: Do you want to clone this zone?
     create:
         name: Name
         agency: Agency
diff --git a/src/pages/Zone/locale/es.yml b/src/pages/Zone/locale/es.yml
index 5d7a265bf..e1f928621 100644
--- a/src/pages/Zone/locale/es.yml
+++ b/src/pages/Zone/locale/es.yml
@@ -9,6 +9,8 @@ zone:
         price: Precio
         create: Crear zona
         openSummary: Detalles
+        confirmCloneTitle: Todas sus propiedades serán copiadas
+        confirmCloneSubtitle: ¿Seguro que quieres clonar esta zona?
     create:
         name: Nombre
         agency: Agencia
diff --git a/src/router/modules/zone.js b/src/router/modules/zone.js
index 079dfaa84..e01099ff3 100644
--- a/src/router/modules/zone.js
+++ b/src/router/modules/zone.js
@@ -11,58 +11,54 @@ export default {
     component: RouterView,
     redirect: { name: 'ZoneMain' },
     menus: {
-        main: [
-            /*'ZoneList', 'ZoneDeliveryList', 'ZoneUpcomingList'*/
-        ],
-        card: [
-            //
-        ],
+        main: ['ZoneList', 'ZoneDeliveryList', 'ZoneUpcomingList'],
+        card: [],
     },
     children: [
-        // {
-        // path: '/zone',
-        // name: 'ZoneMain',
-        // component: () => import('src/pages/Zone/ZoneMain.vue'),
-        // redirect: { name: 'ZoneList' },
-        // children: [
-        //     {
-        //         path: 'list',
-        //         name: 'ZoneList',
-        //         meta: {
-        //             title: 'zonesList',
-        //             icon: 'vn:zone',
-        //         },
-        //         component: () => import('src/pages/Zone/ZoneList.vue'),
-        //     },
-        // {
-        //     path: 'create',
-        //     name: 'ZoneCreate',
-        //     meta: {
-        //         title: 'zoneCreate',
-        //         icon: 'create',
-        //     },
-        //     component: () => import('src/pages/Zone/ZoneCreate.vue'),
-        // },
-        // {
-        //     path: ':id/edit',
-        //     name: 'ZoneEdit',
-        //     meta: {
-        //         title: 'zoneEdit',
-        //         icon: 'edit',
-        //     },
-        //     component: () => import('src/pages/Zone/ZoneCreate.vue'),
-        // },
-        // {
-        //     path: 'counter',
-        //     name: 'ZoneCounter',
-        //     meta: {
-        //         title: 'zoneCounter',
-        //         icon: 'add_circle',
-        //     },
-        //     component: () => import('src/pages/Zone/ZoneCounter.vue'),
-        // },
-        // ],
-        // },
+        {
+            path: '/zone',
+            name: 'ZoneMain',
+            component: () => import('src/pages/Zone/ZoneMain.vue'),
+            redirect: { name: 'ZoneList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'ZoneList',
+                    meta: {
+                        title: 'zonesList',
+                        icon: 'vn:zone',
+                    },
+                    component: () => import('src/pages/Zone/ZoneList.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'ZoneCreate',
+                    meta: {
+                        title: 'zoneCreate',
+                        icon: 'create',
+                    },
+                    component: () => import('src/pages/Zone/ZoneCreate.vue'),
+                },
+                {
+                    path: ':id/edit',
+                    name: 'ZoneEdit',
+                    meta: {
+                        title: 'zoneEdit',
+                        icon: 'edit',
+                    },
+                    component: () => import('src/pages/Zone/ZoneCreate.vue'),
+                },
+                {
+                    path: 'counter',
+                    name: 'ZoneCounter',
+                    meta: {
+                        title: 'zoneCounter',
+                        icon: 'add_circle',
+                    },
+                    component: () => import('src/pages/Zone/ZoneCounter.vue'),
+                },
+            ],
+        },
         {
             name: 'ZoneCard',
             path: ':id',

From 9b9e482fa76e1b75af4c0c677ac801e7c947f8bf Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 9 May 2024 08:21:30 -0300
Subject: [PATCH 39/61] Zone list and Zone summary

---
 src/pages/Zone/Card/ZoneSummary.vue          | 119 ++++++++++---------
 src/pages/Zone/Delivery/ZoneDeliveryList.vue |   2 +-
 src/pages/Zone/Upcoming/ZoneUpcomingList.vue |   2 +-
 src/pages/Zone/ZoneCreate.vue                |  12 +-
 src/pages/Zone/ZoneFilterPanel.vue           |  34 +++---
 src/pages/Zone/ZoneList.vue                  |  88 +++++++++++---
 src/pages/Zone/locale/en.yml                 |  55 +++++----
 src/pages/Zone/locale/es.yml                 |  55 +++++----
 src/router/modules/zone.js                   |  11 +-
 9 files changed, 243 insertions(+), 135 deletions(-)

diff --git a/src/pages/Zone/Card/ZoneSummary.vue b/src/pages/Zone/Card/ZoneSummary.vue
index 90241c9a3..b39d2aaab 100644
--- a/src/pages/Zone/Card/ZoneSummary.vue
+++ b/src/pages/Zone/Card/ZoneSummary.vue
@@ -2,14 +2,16 @@
 import { ref, onMounted, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { dashIfEmpty } from 'src/filters';
-import { getUrl } from 'src/composables/getUrl';
+
 import VnLv from 'src/components/ui/VnLv.vue';
-import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import CardSummary from 'components/ui/CardSummary.vue';
-import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 
+import { getUrl } from 'src/composables/getUrl';
+import { toCurrency } from 'filters/index';
+import { toTimeFormat } from 'src/filters/date';
+import axios from 'axios';
+
 const route = useRoute();
 const { t } = useI18n();
 
@@ -23,77 +25,84 @@ const $props = defineProps({
 const entityId = computed(() => $props.id || route.params.id);
 const zoneUrl = ref();
 
-onMounted(async () => {
-    zoneUrl.value = (await getUrl('')) + `zone/${entityId.value}/`;
+const filter = computed(() => {
+    const filter = {
+        include: {
+            relation: 'agencyMode',
+            fields: ['name'],
+        },
+        where: {
+            id: route.params.id,
+        },
+    };
+    return filter;
 });
 
-const filter = computed(() => {
+const columns = computed(() => [
+    {
+        label: t('summary.name'),
+        name: 'name',
+        field: 'warehouse',
+        align: 'left',
+        format: (val) => val.name,
+    },
+]);
+const warehouses = ref([]);
+
+const getWarehouses = async () => {
     const params = {
         filter: {
             include: {
-                relation: 'agencyMode',
+                relation: 'warehouse',
                 fields: ['name'],
             },
-            where: {
-                id: entityId.value,
-            },
         },
     };
-    return params;
+
+    const { data } = await axios.get(`Zones/${entityId.value}/warehouses`, { params });
+    warehouses.value = data;
+};
+
+onMounted(async () => {
+    zoneUrl.value = (await getUrl('')) + `zone/${entityId.value}/`;
+    await getWarehouses();
 });
 </script>
 
 <template>
-    <CardSummary data-key="zoneData" ref="summary" url="Zones/findOne" :filter="filter">
+    <CardSummary
+        data-key="ZoneSummary"
+        ref="summary"
+        url="Zones/findOne"
+        :filter="filter"
+    >
         <template #header="{ entity }">
             <div>#{{ entity.id }} - {{ entity.name }}</div>
         </template>
         <template #body="{ entity: zone }">
             <QCard class="vn-one">
-                <VnTitle
-                    :url="zoneUrl + `basic-data`"
-                    :text="t('zone.summary.basicData')"
-                />
-                <VnLv :label="t('zone.card.name')" :value="zone.user?.nickname" />
-                <VnLv
-                    :label="t('zone.list.department')"
-                    :value="zone.department?.department?.name"
-                />
-                <VnLv :label="t('zone.list.email')" :value="zone.user.email" copy />
-                <VnLv :label="t('zone.summary.boss')" link>
-                    <template #value>
-                        <VnUserLink
-                            v-if="zone.boss"
-                            :name="dashIfEmpty(zone.boss?.name)"
-                            :zone-id="zone.bossFk"
-                        />
-                    </template>
-                </VnLv>
-                <VnLv :value="zone.mobileExtension">
-                    <template #label>
-                        {{ t('zone.summary.phoneExtension') }}
-                        <VnLinkPhone :phone-number="zone.mobileExtension" />
-                    </template>
-                </VnLv>
-                <VnLv :value="zone.phone">
-                    <template #label>
-                        {{ t('zone.summary.entPhone') }}
-                        <VnLinkPhone :phone-number="zone.phone" />
-                    </template>
-                </VnLv>
-                <VnLv :label="t('zone.summary.locker')" :value="zone.locker" />
+                <VnTitle :url="zoneUrl + `basic-data`" :text="t('summary.basicData')" />
+                <VnLv :label="t('summary.agency')" :value="zone.agencyMode?.name" />
+                <VnLv :label="t('summary.price')" :value="toCurrency(zone.price)" />
+                <VnLv :label="t('summary.bonus')" :value="toCurrency(zone.bonus)" />
             </QCard>
             <QCard class="vn-one">
-                <VnTitle :text="t('zone.summary.userData')" />
-                <VnLv :label="t('zone.summary.userId')" :value="zone.user.id" />
-                <VnLv :label="t('zone.card.name')" :value="zone.user.nickname" />
-                <VnLv :label="t('zone.summary.role')" :value="zone.user.role.name" />
-                <VnLv :value="zone?.sip?.extension">
-                    <template #label>
-                        {{ t('zone.summary.sipExtension') }}
-                        <VnLinkPhone :phone-number="zone?.sip?.extension" />
-                    </template>
-                </VnLv>
+                <VnTitle :url="zoneUrl + `basic-data`" :text="t('summary.basicData')" />
+                <VnLv :label="t('summary.closeHour')" :value="toTimeFormat(zone.hour)" />
+                <VnLv :label="t('summary.travelingDays')" :value="zone.travelingDays" />
+                <QCheckbox
+                    :label="t('summary.volumetric')"
+                    v-model="zone.isVolumetric"
+                    :disable="true"
+                />
+            </QCard>
+            <QCard class="full-width">
+                <VnTitle :url="zoneUrl + `warehouses`" :text="t('summary.warehouse')" />
+                <QTable
+                    :columns="columns"
+                    :rows="warehouses"
+                    :no-data-label="t('globals.noResults')"
+                />
             </QCard>
         </template>
     </CardSummary>
diff --git a/src/pages/Zone/Delivery/ZoneDeliveryList.vue b/src/pages/Zone/Delivery/ZoneDeliveryList.vue
index 695388a9b..ca87dbd84 100644
--- a/src/pages/Zone/Delivery/ZoneDeliveryList.vue
+++ b/src/pages/Zone/Delivery/ZoneDeliveryList.vue
@@ -63,7 +63,7 @@ async function remove(row) {
                                 outline
                             />
                             <QBtn
-                                :label="t('zone.list.remove')"
+                                :label="t('list.remove')"
                                 @click.stop="remove(row)"
                                 color="primary"
                                 style="margin-top: 15px"
diff --git a/src/pages/Zone/Upcoming/ZoneUpcomingList.vue b/src/pages/Zone/Upcoming/ZoneUpcomingList.vue
index 2d3016f25..89e53132e 100644
--- a/src/pages/Zone/Upcoming/ZoneUpcomingList.vue
+++ b/src/pages/Zone/Upcoming/ZoneUpcomingList.vue
@@ -63,7 +63,7 @@ async function remove(row) {
                                 outline
                             />
                             <QBtn
-                                :label="t('zone.list.remove')"
+                                :label="t('list.remove')"
                                 @click.stop="remove(row)"
                                 color="primary"
                                 style="margin-top: 15px"
diff --git a/src/pages/Zone/ZoneCreate.vue b/src/pages/Zone/ZoneCreate.vue
index 93ea9589b..c287bce42 100644
--- a/src/pages/Zone/ZoneCreate.vue
+++ b/src/pages/Zone/ZoneCreate.vue
@@ -96,7 +96,7 @@ function filterType(val, update) {
                         <QInput
                             filled
                             v-model="zone.label"
-                            :label="t('zone.create.name')"
+                            :label="t('create.name')"
                             type="number"
                             min="0"
                             :rules="[(val) => !!val || t('zone.warnings.labelNotEmpty')]"
@@ -106,7 +106,7 @@ function filterType(val, update) {
                         <VnInput
                             filled
                             v-model="zone.plate"
-                            :label="t('zone.create.agency')"
+                            :label="t('create.agency')"
                             :rules="[(val) => !!val || t('zone.warnings.plateNotEmpty')]"
                         />
                     </div>
@@ -116,7 +116,7 @@ function filterType(val, update) {
                         <QInput
                             filled
                             v-model="zone.volume"
-                            :label="t('zone.create.close')"
+                            :label="t('create.close')"
                             type="number"
                             min="0"
                             :rules="[(val) => !!val || t('zone.warnings.volumeNotEmpty')]"
@@ -134,7 +134,7 @@ function filterType(val, update) {
                             option-value="id"
                             emit-value
                             map-options
-                            :label="t('zone.create.price')"
+                            :label="t('create.price')"
                             :options="filteredZoneTypes"
                             :rules="[(val) => !!val || t('zone.warnings.typeNotEmpty')]"
                             @filter="filterType"
@@ -158,9 +158,9 @@ function filterType(val, update) {
                 </div>
             </QCard>
             <div class="q-mt-md">
-                <QBtn :label="t('zone.type.submit')" type="submit" color="primary" />
+                <QBtn :label="t('type.submit')" type="submit" color="primary" />
                 <QBtn
-                    :label="t('zone.type.reset')"
+                    :label="t('type.reset')"
                     type="reset"
                     color="primary"
                     flat
diff --git a/src/pages/Zone/ZoneFilterPanel.vue b/src/pages/Zone/ZoneFilterPanel.vue
index 94765919d..32026bd5b 100644
--- a/src/pages/Zone/ZoneFilterPanel.vue
+++ b/src/pages/Zone/ZoneFilterPanel.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import VnInput from 'components/common/VnInput.vue';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -17,37 +17,43 @@ const props = defineProps({
         default: null,
     },
 });
+
 const agencies = ref([]);
 </script>
 
 <template>
-    <FetchData
-        url="agencies"
-        limit="30"
-        @on-fetch="(data) => (agencies = data)"
-        auto-load
-    />
+    <FetchData url="agencies" @on-fetch="(data) => (agencies = data)" auto-load />
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
-        <template #body="{ params }">
+        <template #tags="{ tag }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`filterPanel.${tag.label}`) }}: </strong>
+                <span>{{ tag.value }}</span>
+            </div>
+        </template>
+        <template #body="{ params, searchFn }">
             <QItem>
                 <QItemSection>
-                    <VnInput :label="t('Name')" v-model="params.name" is-outlined />
+                    <VnInput
+                        :label="t('filterPanel.name')"
+                        v-model="params.name"
+                        is-outlined
+                    />
                 </QItemSection>
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
-                        :label="t('Agency')"
-                        v-model="params.agencyModefK"
+                    <VnSelect
+                        :label="t('filterPanel.agencyModeFk')"
+                        v-model="params.agencyModeFk"
                         :options="agencies"
                         option-value="id"
                         option-label="name"
-                        @input-value="agencies.fetch()"
+                        @update:model-value="searchFn()"
                         dense
                         outlined
                         rounded
                     >
-                    </VnSelectFilter>
+                    </VnSelect>
                 </QItemSection>
             </QItem>
         </template>
diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index 2b18df033..cf9acf3e7 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/src/pages/Zone/ZoneList.vue
@@ -1,17 +1,24 @@
 <script setup>
-import axios from 'axios';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import { onMounted } from 'vue';
+
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import CardList from 'components/ui/CardList.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import ZoneSummary from 'src/pages/Zone/Card/ZoneSummary.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import ZoneFilterPanel from './ZoneFilterPanel.vue';
+
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { toTimeFormat } from 'src/filters/date';
 import { toCurrency } from 'filters/index';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import useNotify from 'src/composables/useNotify.js';
+import { useStateStore } from 'stores/useStateStore';
+import axios from 'axios';
 
+const stateStore = useStateStore();
 const { t } = useI18n();
 const router = useRouter();
 const { notify } = useNotify();
@@ -26,19 +33,70 @@ function redirectToCreateView() {
     router.push({ path: `/zone/create` });
 }
 
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'name':
+            return {
+                name: { like: `%${value}%` },
+            };
+        case 'code':
+            return {
+                code: { like: `%${value}%` },
+            };
+        case 'agencyModeFk':
+            return {
+                agencyModeFk: value,
+            };
+        case 'search':
+            if (value) {
+                if (!isNaN(value)) {
+                    return { id: value };
+                } else {
+                    return {
+                        name: {
+                            like: `%${value}%`,
+                        },
+                    };
+                }
+            }
+    }
+};
+
 async function clone(id) {
     try {
         await axios.post(`Zones/${id}/clone`);
         notify(t('globals.dataSaved'), 'positive');
-        //TODO: Redireccionar Zone Basic data cuando exista
-        // router.push({ name: 'ZoneBasicData', params: { id: row.id } });
+        router.push({ name: 'ZoneBasicData', params: { id } });
     } catch (error) {
         console.error('Error cloning zone: ', error);
     }
 }
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+});
 </script>
 
 <template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="ZoneList"
+                url="Zones"
+                :filter="{
+                    include: { relation: 'agencyMode', scope: { fields: ['name'] } },
+                }"
+                :expr-builder="exprBuilder"
+                :label="t('list.searchZone')"
+                :info="t('list.searchInfo')"
+            />
+        </Teleport>
+    </template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" />
+        </QScrollArea>
+    </QDrawer>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate
@@ -59,31 +117,31 @@ async function clone(id) {
                     >
                         <template #list-items>
                             <VnLv
-                                :label="t('zone.list.id')"
-                                :title-label="t('zone.list.id')"
+                                :label="t('list.id')"
+                                :title-label="t('list.id')"
                                 :value="row.id"
                             />
-                            <VnLv :label="t('zone.list.name')" :value="row?.name" />
+                            <VnLv :label="t('list.name')" :value="row?.name" />
                             <VnLv
-                                :label="t('zone.list.agency')"
+                                :label="t('list.agency')"
                                 :value="row.agencyMode?.name"
                             />
                             <VnLv
-                                :label="t('zone.list.close')"
+                                :label="t('list.close')"
                                 :value="toTimeFormat(row?.hour)"
                             />
                             <VnLv
-                                :label="t('zone.list.price')"
+                                :label="t('list.price')"
                                 :value="toCurrency(row?.price)"
                             />
                         </template>
                         <template #actions>
                             <QBtn
-                                :label="t('zone.list.clone')"
+                                :label="t('list.clone')"
                                 @click.stop="
                                     openConfirmationModal(
-                                        t('zone.list.confirmCloneTitle'),
-                                        t('zone.list.confirmCloneSubtitle'),
+                                        t('list.confirmCloneTitle'),
+                                        t('list.confirmCloneSubtitle'),
                                         () => clone(row.id)
                                     )
                                 "
@@ -91,7 +149,7 @@ async function clone(id) {
                                 style="margin-top: 15px"
                             />
                             <QBtn
-                                :label="t('zone.list.openSummary')"
+                                :label="t('list.openSummary')"
                                 @click.stop="viewSummary(row.id, ZoneSummary)"
                                 color="primary"
                                 style="margin-top: 15px"
@@ -103,7 +161,7 @@ async function clone(id) {
         </div>
         <QPageSticky position="bottom-right" :offset="[18, 18]">
             <QBtn @click="redirectToCreateView()" fab icon="add" color="primary">
-                <QTooltip>{{ t('zone.list.create') }}</QTooltip>
+                <QTooltip>{{ t('list.create') }}</QTooltip>
             </QBtn>
         </QPageSticky>
     </QPage>
diff --git a/src/pages/Zone/locale/en.yml b/src/pages/Zone/locale/en.yml
index 273092f88..65067e6d9 100644
--- a/src/pages/Zone/locale/en.yml
+++ b/src/pages/Zone/locale/en.yml
@@ -1,21 +1,34 @@
-zone:
-    list:
-        volume: Volume
-        clone: Clone
-        id: Id
-        name: Name
-        agency: Agency
-        close: Close
-        price: Price
-        create: Create zone
-        openSummary: Details
-        confirmCloneTitle: All it's properties will be copied
-        confirmCloneSubtitle: Do you want to clone this zone?
-    create:
-        name: Name
-        agency: Agency
-        close: Close
-        price: Price
-    type:
-        submit: Save
-        reset: Reset
+list:
+    clone: Clone
+    id: Id
+    name: Name
+    agency: Agency
+    close: Close
+    price: Price
+    create: Create zone
+    openSummary: Details
+    confirmCloneTitle: All it's properties will be copied
+    confirmCloneSubtitle: Do you want to clone this zone?
+    searchZone: Search zones
+    searchInfo: Search zone by id or name
+create:
+    name: Name
+    agency: Agency
+    close: Close
+    price: Price
+type:
+    submit: Save
+    reset: Reset
+summary:
+    agency: Agency
+    price: Price
+    basicData: Basic data
+    bonus: Bonus
+    closeHour: Close hour
+    travelingDays: Traveling days
+    volumetric: Volumetric
+    warehouse: Warehouse
+    name: Name
+filterPanel:
+    name: Name
+    agencyModeFk: Agency
diff --git a/src/pages/Zone/locale/es.yml b/src/pages/Zone/locale/es.yml
index e1f928621..df889db10 100644
--- a/src/pages/Zone/locale/es.yml
+++ b/src/pages/Zone/locale/es.yml
@@ -1,21 +1,34 @@
-zone:
-    list:
-        volume: Volumen
-        clone: Clonar
-        id: Id
-        name: Nombre
-        agency: Agencia
-        close: Cierre
-        price: Precio
-        create: Crear zona
-        openSummary: Detalles
-        confirmCloneTitle: Todas sus propiedades serán copiadas
-        confirmCloneSubtitle: ¿Seguro que quieres clonar esta zona?
-    create:
-        name: Nombre
-        agency: Agencia
-        close: Cierre
-        price: Precio
-    type:
-        submit: Guardar
-        reset: Reiniciar
+list:
+    clone: Clonar
+    id: Id
+    name: Nombre
+    agency: Agencia
+    close: Cierre
+    price: Precio
+    create: Crear zona
+    openSummary: Detalles
+    confirmCloneTitle: Todas sus propiedades serán copiadas
+    confirmCloneSubtitle: ¿Seguro que quieres clonar esta zona?
+    searchZone: Buscar zonas
+    searchInfo: Buscar zonas por identificador o nombre
+create:
+    name: Nombre
+    agency: Agencia
+    close: Cierre
+    price: Precio
+type:
+    submit: Guardar
+    reset: Reiniciar
+summary:
+    agency: Agencia
+    price: Precio
+    basicData: Datos básicos
+    bonus: Bonificaciones
+    closeHour: Hora de cierre
+    travelingDays: Días de viaje
+    volumetric: Volumétrico
+    warehouse: Almacén
+    name: Nombre
+filterPanel:
+    name: Nombre
+    agencyModeFk: Agencia
diff --git a/src/router/modules/zone.js b/src/router/modules/zone.js
index e01099ff3..d39ed82d0 100644
--- a/src/router/modules/zone.js
+++ b/src/router/modules/zone.js
@@ -12,7 +12,7 @@ export default {
     redirect: { name: 'ZoneMain' },
     menus: {
         main: ['ZoneList', 'ZoneDeliveryList', 'ZoneUpcomingList'],
-        card: [],
+        card: ['ZoneBasicData'],
     },
     children: [
         {
@@ -74,6 +74,15 @@ export default {
                     },
                     component: () => import('src/pages/Zone/Card/ZoneSummary.vue'),
                 },
+                {
+                    name: 'ZoneBasicData',
+                    path: 'basic-data',
+                    meta: {
+                        title: 'basicData',
+                        icon: 'vn:settings',
+                    },
+                    component: () => import('src/pages/Zone/Card/ZoneBasicData.vue'),
+                },
                 // {
                 //     path: '/zone/delivery',
                 //     name: 'ZoneDeliveryMain',

From 2df0c1eba92fd27446e3d4e72ff2f5a9224e257d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 9 May 2024 13:26:53 +0200
Subject: [PATCH 40/61] fix: ticketsMonitor title

---
 src/pages/Monitor/MonitorList.vue | 12 ++++++++++--
 src/pages/Monitor/locale/en.yml   |  1 +
 src/pages/Monitor/locale/es.yml   |  1 +
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/pages/Monitor/MonitorList.vue b/src/pages/Monitor/MonitorList.vue
index a084f0c99..60c6ca164 100644
--- a/src/pages/Monitor/MonitorList.vue
+++ b/src/pages/Monitor/MonitorList.vue
@@ -51,8 +51,16 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 </template>
             </QExpansionItem>
         </QCard>
-
-        <SalesTicketsTable />
+        <QCard class="full-width q-mb-lg">
+            <QItem class="justify-between">
+                <QItemLabel class="slider-container">
+                    <span class="text-body1"
+                        >{{ t('salesMonitor.ticketsMonitor') }}
+                    </span>
+                    <QCardSection class="col"><SalesTicketsTable /> </QCardSection>
+                </QItemLabel>
+            </QItem>
+        </QCard>
     </QPage>
 </template>
 
diff --git a/src/pages/Monitor/locale/en.yml b/src/pages/Monitor/locale/en.yml
index a449225ed..de3e7d735 100644
--- a/src/pages/Monitor/locale/en.yml
+++ b/src/pages/Monitor/locale/en.yml
@@ -1,6 +1,7 @@
 salesMonitor:
     clientsOnWebsite: Clients on website
     recentOrderActions: Recent order actions
+    ticketsMonitor: Tickets monitor
 salesClientsTable:
     from: From
     to: To
diff --git a/src/pages/Monitor/locale/es.yml b/src/pages/Monitor/locale/es.yml
index 6ed6604be..a717df4ad 100644
--- a/src/pages/Monitor/locale/es.yml
+++ b/src/pages/Monitor/locale/es.yml
@@ -1,6 +1,7 @@
 salesMonitor:
     clientsOnWebsite: Clientes activos en la web
     recentOrderActions: Acciones recientes en pedidos
+    ticketsMonitor: Monitor de tickets
 salesClientsTable:
     from: Desde
     to: Hasta

From a6ec40beb475951873a213da38cec04e6509563e Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 9 May 2024 13:32:03 +0200
Subject: [PATCH 41/61] fix: style second row

---
 src/pages/Monitor/SalesOrdersTable.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/pages/Monitor/SalesOrdersTable.vue b/src/pages/Monitor/SalesOrdersTable.vue
index 2e1d3aaed..d8e28f6b7 100644
--- a/src/pages/Monitor/SalesOrdersTable.vue
+++ b/src/pages/Monitor/SalesOrdersTable.vue
@@ -176,8 +176,8 @@ const redirectToOrderSummary = (orderId) => {
                     <template #body-cell-client="{ row }">
                         <QTd>
                             <div class="q-mb-md">
-                                <span class="link">{{ row.salesPerson }}</span>
-                                <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
+                                <span class="link">{{ row.clientName }}</span>
+                                <CustomerDescriptorProxy :id="row.clientFk" />
                             </div>
                             <span> {{ row.agencyName }}</span>
                         </QTd>
@@ -185,8 +185,8 @@ const redirectToOrderSummary = (orderId) => {
                     <template #body-cell-salesPerson="{ row }">
                         <QTd>
                             <div class="q-mb-md">
-                                <span class="link">{{ row.clientName }}</span>
-                                <CustomerDescriptorProxy :id="row.clientFk" />
+                                <span class="link">{{ row.salesPerson }}</span>
+                                <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
                             </div>
                             <span>{{ toCurrency(row.import) }}</span>
                         </QTd>
@@ -196,3 +196,8 @@ const redirectToOrderSummary = (orderId) => {
         </VnPaginate>
     </QCard>
 </template>
+<style lang="scss" scoped>
+.q-td {
+    color: gray;
+}
+</style>

From 7cc5c0bdbd51e2dcb7e2c1ef4a83fae7e894dbf2 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 9 May 2024 08:40:09 -0300
Subject: [PATCH 42/61] Fix client table initial request

---
 src/pages/Monitor/SalesClientsTable.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Monitor/SalesClientsTable.vue b/src/pages/Monitor/SalesClientsTable.vue
index 84cccf91b..3f2389471 100644
--- a/src/pages/Monitor/SalesClientsTable.vue
+++ b/src/pages/Monitor/SalesClientsTable.vue
@@ -32,7 +32,7 @@ const dateRange = computed(() => {
 const filter = reactive({
     where: {
         'v.stamp': {
-            between: [from.value, to.value],
+            between: dateRange.value,
         },
     },
 });
@@ -148,7 +148,7 @@ const columns = computed(() => [
             ref="paginateRef"
             data-key="SalesMonitorClients"
             url="SalesMonitors/clientsFilter"
-            order="dated DESC, hour DESC"
+            :order="['dated DESC', 'hour DESC']"
             :limit="6"
             :expr-builder="exprBuilder"
             :user-params="params"

From b4f983b9462d168cc4670c678fbc0ce6d253b593 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 9 May 2024 09:15:52 -0300
Subject: [PATCH 43/61] Add searchbar

---
 src/components/ui/VnSearchbar.vue |  4 ++--
 src/pages/Monitor/MonitorList.vue | 12 ++++++++++++
 src/pages/Monitor/locale/en.yml   |  3 +++
 src/pages/Monitor/locale/es.yml   |  3 +++
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 344267ef7..aaf197d74 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -81,14 +81,14 @@ async function search() {
     const staticParams = Object.entries(store.userParams).filter(
         ([key, value]) => value && (props.staticParams || []).includes(key)
     );
-    // const filter =props?.where? { where: JSON.parse(props.where) }: {}
+    store.skip = 0;
     await arrayData.applyFilter({
         params: {
-            // filter ,
             ...Object.fromEntries(staticParams),
             search: searchText.value,
         },
     });
+
     if (!props.redirect) return;
 
     if (props.customRouteRedirectName)
diff --git a/src/pages/Monitor/MonitorList.vue b/src/pages/Monitor/MonitorList.vue
index a084f0c99..03b6eb920 100644
--- a/src/pages/Monitor/MonitorList.vue
+++ b/src/pages/Monitor/MonitorList.vue
@@ -6,6 +6,7 @@ import { useStateStore } from 'stores/useStateStore';
 import SalesClientTable from './SalesClientsTable.vue';
 import SalesOrdersTable from './SalesOrdersTable.vue';
 import SalesTicketsTable from './SalesTicketsTable.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
 
 const { t } = useI18n();
 const stateStore = useStateStore();
@@ -20,6 +21,17 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 </script>
 
 <template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="SalesMonitorTickets"
+                url="SalesMonitors/salesFilter"
+                :redirect="false"
+                :label="t('searchBar.label')"
+                :info="t('searchBar.info')"
+            />
+        </Teleport>
+    </template>
     <QPage class="column items-center q-pa-md">
         <QCard class="full-width q-mb-lg">
             <QExpansionItem v-model="expanded" dense :duration="150">
diff --git a/src/pages/Monitor/locale/en.yml b/src/pages/Monitor/locale/en.yml
index a449225ed..8732077b0 100644
--- a/src/pages/Monitor/locale/en.yml
+++ b/src/pages/Monitor/locale/en.yml
@@ -38,3 +38,6 @@ salesTicketsTable:
     preview: Preview
     total: Total
     preparation: Preparation
+searchBar:
+    label: Search tickets
+    info: Search tickets by id or alias
diff --git a/src/pages/Monitor/locale/es.yml b/src/pages/Monitor/locale/es.yml
index 6ed6604be..3e7cc3f5b 100644
--- a/src/pages/Monitor/locale/es.yml
+++ b/src/pages/Monitor/locale/es.yml
@@ -38,3 +38,6 @@ salesTicketsTable:
     preview: Vista previa
     total: Total
     preparation: Preparación
+searchBar:
+    label: Buscar tickets
+    info: Buscar tickets por identificador o alias

From 104ea5b8e5bab18ff56e1c73fed8f34fb0352035 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 9 May 2024 17:46:24 +0200
Subject: [PATCH 44/61] feat: refreshInterval

---
 src/pages/Monitor/SalesTicketsTable.vue | 21 +++++++++++++++++----
 src/pages/Monitor/locale/en.yml         |  1 +
 src/pages/Monitor/locale/es.yml         |  1 +
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/pages/Monitor/SalesTicketsTable.vue b/src/pages/Monitor/SalesTicketsTable.vue
index 584a36c72..f451123e9 100644
--- a/src/pages/Monitor/SalesTicketsTable.vue
+++ b/src/pages/Monitor/SalesTicketsTable.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, reactive } from 'vue';
+import { ref, computed, onMounted, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -19,9 +19,9 @@ import VnInputDate from 'src/components/common/VnInputDate.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { toDateFormat, toTimeFormat } from 'src/filters/date.js';
 import { toCurrency } from 'src/filters';
-
+const DEFAULT_AUTO_REFRESH = 1000;
 const { t } = useI18n();
-
+const autoRefresh = ref(false);
 const router = useRouter();
 const paginateRef = ref(null);
 const workersActiveOptions = ref([]);
@@ -328,7 +328,15 @@ const getBadgeAttrs = (date) => {
     if (comparation < 0) return { color: 'success', 'text-color': 'black' };
     return { color: 'transparent', 'text-color': 'white' };
 };
-
+let refreshTimer = null;
+const autoRefreshHandler = (value) => {
+    if (value)
+        refreshTimer = setInterval(() => paginateRef.value.fetch(), DEFAULT_AUTO_REFRESH);
+    else {
+        clearInterval(refreshTimer);
+        refreshTimer = null;
+    }
+};
 const redirectToTicketSummary = (id) => {
     router.push({ name: 'TicketSummary', params: { id } });
 };
@@ -426,6 +434,11 @@ onMounted(async () => {
                         labels-traductions-path="salesTicketsTable"
                         @on-config-saved="visibleColumns = [...$event, 'rowActions']"
                     />
+                    <QCheckbox
+                        v-model="autoRefresh"
+                        :label="t('salesTicketsTable.autoRefresh')"
+                        @update:model-value="autoRefreshHandler"
+                    />
                 </template>
                 <template #top-row="{ cols }">
                     <QTr>
diff --git a/src/pages/Monitor/locale/en.yml b/src/pages/Monitor/locale/en.yml
index de3e7d735..40dfacb1c 100644
--- a/src/pages/Monitor/locale/en.yml
+++ b/src/pages/Monitor/locale/en.yml
@@ -17,6 +17,7 @@ salesOrdersTable:
     deleteConfirmTitle: Delete selected elements
     deleteConfirmMessage: All the selected elements will be deleted. Are you sure you want to continue?
 salesTicketsTable:
+    autoRefresh: Auto-refresh
     problems: Problems
     noVerifiedData: No verified data
     notVisible: Not visible
diff --git a/src/pages/Monitor/locale/es.yml b/src/pages/Monitor/locale/es.yml
index a717df4ad..029b9759a 100644
--- a/src/pages/Monitor/locale/es.yml
+++ b/src/pages/Monitor/locale/es.yml
@@ -17,6 +17,7 @@ salesOrdersTable:
     deleteConfirmTitle: Eliminar los elementos seleccionados
     deleteConfirmMessage: Todos los elementos seleccionados serán eliminados. ¿Seguro que quieres continuar?
 salesTicketsTable:
+    autoRefresh: Auto-refresco
     problems: Problemas
     noVerifiedData: Sin datos comprobados
     notVisible: No visible

From 7216b90a3eddbf3ffa2f65c579b14315fdd5edea Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 9 May 2024 15:13:45 -0300
Subject: [PATCH 45/61] Fix filter panel bug

---
 src/components/ui/VnFilterPanel.vue | 2 +-
 src/pages/Zone/ZoneFilterPanel.vue  | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index eb0bbbe66..dac028965 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -147,7 +147,7 @@ const customTags = computed(() =>
 
 async function remove(key) {
     userParams.value[key] = null;
-    await search();
+    await arrayData.applyFilter({ params: userParams.value });
     emit('remove', key);
 }
 
diff --git a/src/pages/Zone/ZoneFilterPanel.vue b/src/pages/Zone/ZoneFilterPanel.vue
index 32026bd5b..c84355eb0 100644
--- a/src/pages/Zone/ZoneFilterPanel.vue
+++ b/src/pages/Zone/ZoneFilterPanel.vue
@@ -23,7 +23,11 @@ const agencies = ref([]);
 
 <template>
     <FetchData url="agencies" @on-fetch="(data) => (agencies = data)" auto-load />
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+    <VnFilterPanel
+        :data-key="props.dataKey"
+        :search-button="true"
+        :hidden-tags="['search']"
+    >
         <template #tags="{ tag }">
             <div class="q-gutter-x-xs">
                 <strong>{{ t(`filterPanel.${tag.label}`) }}: </strong>

From 7f185c091bb331b3fc421b64f4d5648a5086c0ff Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 10 May 2024 08:13:02 +0200
Subject: [PATCH 46/61] feat: add descriptor

---
 src/i18n/locale/en.yml           |  6 ------
 src/i18n/locale/es.yml           |  7 +------
 src/pages/Zone/Card/ZoneCard.vue | 11 ++++++++++-
 src/pages/Zone/locale/en.yml     |  6 ++++++
 src/pages/Zone/locale/es.yml     |  8 ++++++++
 5 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index d8fb231f0..c5f923855 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -1234,12 +1234,6 @@ item/itemType:
         itemType: Item type
         basicData: Basic data
         summary: Summary
-zone:
-    pageTitles:
-        zones: Zone
-        zonesList: Zones
-        deliveryList: Delivery days
-        upcomingList: Upcoming deliveries
 components:
     topbar: {}
     itemsFilterPanel:
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 67e075935..3b417c3a6 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -1233,12 +1233,7 @@ item/itemType:
         itemType: Familia
         basicData: Datos básicos
         summary: Resumen
-zone:
-    pageTitles:
-        zones: Zona
-        zonesList: Zonas
-        deliveryList: Días de entrega
-        upcomingList: Próximos repartos
+
 components:
     topbar: {}
     itemsFilterPanel:
diff --git a/src/pages/Zone/Card/ZoneCard.vue b/src/pages/Zone/Card/ZoneCard.vue
index 948636c55..9d6895f36 100644
--- a/src/pages/Zone/Card/ZoneCard.vue
+++ b/src/pages/Zone/Card/ZoneCard.vue
@@ -1,6 +1,15 @@
 <script setup>
 import VnCard from 'components/common/VnCard.vue';
+import ZoneDescriptor from './ZoneDescriptor.vue';
 </script>
 <template>
-    <VnCard data-key="Zone" base-url="Zones" />
+    <VnCard
+        data-key="Zone"
+        base-url="Zones"
+        :descriptor="ZoneDescriptor"
+        searchbar-data-key="ZoneList"
+        searchbar-url="Zones/filter"
+        searchbar-label="Search zones"
+        searchbar-info="You can search by zone reference"
+    />
 </template>
diff --git a/src/pages/Zone/locale/en.yml b/src/pages/Zone/locale/en.yml
index 65067e6d9..d0a22ebcd 100644
--- a/src/pages/Zone/locale/en.yml
+++ b/src/pages/Zone/locale/en.yml
@@ -1,3 +1,9 @@
+zone:
+    pageTitles:
+        zones: Zone
+        zonesList: Zones
+        deliveryList: Delivery days
+        upcomingList: Upcoming deliveries
 list:
     clone: Clone
     id: Id
diff --git a/src/pages/Zone/locale/es.yml b/src/pages/Zone/locale/es.yml
index df889db10..3062950c8 100644
--- a/src/pages/Zone/locale/es.yml
+++ b/src/pages/Zone/locale/es.yml
@@ -1,3 +1,9 @@
+zone:
+    pageTitles:
+        zones: Zonas
+        zonesList: Zonas
+        deliveryList: Días de entrega
+        upcomingList: Próximos repartos
 list:
     clone: Clonar
     id: Id
@@ -32,3 +38,5 @@ summary:
 filterPanel:
     name: Nombre
     agencyModeFk: Agencia
+Search zones: Buscar zonas
+You can search by zone reference: Puedes buscar por referencia de la zona

From 2697078a557ac85d3f7c6fd3f22e5c5690e35fc3 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 10 May 2024 08:40:47 +0200
Subject: [PATCH 47/61] feat: Replace CarList by Table

---
 src/pages/Zone/ZoneList.vue | 168 ++++++++++++++++++++++++------------
 1 file changed, 114 insertions(+), 54 deletions(-)

diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index cf9acf3e7..f3de8a41a 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/src/pages/Zone/ZoneList.vue
@@ -1,7 +1,8 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { onMounted } from 'vue';
+import { onMounted, computed } from 'vue';
+import { dashIfEmpty, toCurrency, toDate } from 'src/filters';
 
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import CardList from 'components/ui/CardList.vue';
@@ -12,7 +13,6 @@ import ZoneFilterPanel from './ZoneFilterPanel.vue';
 
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { toTimeFormat } from 'src/filters/date';
-import { toCurrency } from 'filters/index';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import useNotify from 'src/composables/useNotify.js';
 import { useStateStore } from 'stores/useStateStore';
@@ -25,13 +25,56 @@ const { notify } = useNotify();
 const { viewSummary } = useSummaryDialog();
 const { openConfirmationModal } = useVnConfirm();
 
-const redirectToZoneSummary = (id) => {
+const redirectToZoneSummary = (event, { id }) => {
     router.push({ name: 'ZoneSummary', params: { id } });
 };
 
 function redirectToCreateView() {
     router.push({ path: `/zone/create` });
 }
+const columns = computed(() => [
+    {
+        name: 'ID',
+        label: t('list.id'),
+        field: (row) => row.id,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'name',
+        label: t('list.name'),
+        field: (row) => row.name,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'agency',
+        label: t('list.agency'),
+        field: (row) => row?.agencyMode?.name,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'close',
+        label: t('list.close'),
+        field: (row) => (row?.hour ? toTimeFormat(row?.hour) : '-'),
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'price',
+        label: t('list.price'),
+        field: (row) => (row?.price ? toCurrency(row.price) : '-'),
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'actions',
+        label: '',
+        sortable: false,
+        align: 'right',
+    },
+]);
 
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -71,7 +114,13 @@ async function clone(id) {
         console.error('Error cloning zone: ', error);
     }
 }
-
+const handleClone = (id) => {
+    openConfirmationModal(
+        t('list.confirmCloneTitle'),
+        t('list.confirmCloneSubtitle'),
+        () => clone(id)
+    );
+};
 onMounted(async () => {
     stateStore.rightDrawer = true;
 });
@@ -97,8 +146,8 @@ onMounted(async () => {
             <ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" />
         </QScrollArea>
     </QDrawer>
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
+    <QPage class="column items-center">
+        <div style="width: 100%">
             <VnPaginate
                 data-key="ZoneList"
                 url="Zones"
@@ -108,54 +157,65 @@ onMounted(async () => {
                 auto-load
             >
                 <template #body="{ rows }">
-                    <CardList
-                        v-for="row of rows"
-                        :key="row.id"
-                        :title="row.name"
-                        :id="row.id"
-                        @click="redirectToZoneSummary(row.id)"
-                    >
-                        <template #list-items>
-                            <VnLv
-                                :label="t('list.id')"
-                                :title-label="t('list.id')"
-                                :value="row.id"
-                            />
-                            <VnLv :label="t('list.name')" :value="row?.name" />
-                            <VnLv
-                                :label="t('list.agency')"
-                                :value="row.agencyMode?.name"
-                            />
-                            <VnLv
-                                :label="t('list.close')"
-                                :value="toTimeFormat(row?.hour)"
-                            />
-                            <VnLv
-                                :label="t('list.price')"
-                                :value="toCurrency(row?.price)"
-                            />
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('list.clone')"
-                                @click.stop="
-                                    openConfirmationModal(
-                                        t('list.confirmCloneTitle'),
-                                        t('list.confirmCloneSubtitle'),
-                                        () => clone(row.id)
-                                    )
-                                "
-                                outline
-                                style="margin-top: 15px"
-                            />
-                            <QBtn
-                                :label="t('list.openSummary')"
-                                @click.stop="viewSummary(row.id, ZoneSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
+                    <div class="q-pa-md">
+                        <QTable
+                            :rows="rows"
+                            :columns="columns"
+                            row-key="clientId"
+                            class="full-width"
+                            @row-click="redirectToZoneSummary"
+                        >
+                            <template #header="props">
+                                <QTr :props="props" class="bg">
+                                    <QTh
+                                        v-for="col in props.cols"
+                                        :key="col.name"
+                                        :props="props"
+                                    >
+                                        {{ t(col.label) }}
+                                        <QTooltip v-if="col.tooltip">{{
+                                            col.tooltip
+                                        }}</QTooltip>
+                                    </QTh>
+                                </QTr>
+                            </template>
+
+                            <template #body-cell="props">
+                                <QTd :props="props">
+                                    <QTr :props="props" class="cursor-pointer">
+                                        {{ props.value }}
+                                    </QTr></QTd
+                                ></template
+                            >
+                            <template #body-cell-actions="props">
+                                <QTd :props="props">
+                                    <div class="table-actions">
+                                        <QIcon
+                                            style="margin-top: 15px"
+                                            name="vn:clone"
+                                            size="sm"
+                                            color="primary"
+                                            @click.stop="handleClone(props.row.id)"
+                                        >
+                                            <QTooltip>{{
+                                                t('globals.clone')
+                                            }}</QTooltip> </QIcon
+                                        ><QIcon
+                                            style="margin-top: 15px"
+                                            name="preview"
+                                            size="sm"
+                                            color="primary"
+                                            @click.stop="
+                                                viewSummary(props.row.id, ZoneSummary)
+                                            "
+                                        >
+                                            <QTooltip>{{ t('Preview') }}</QTooltip>
+                                        </QIcon>
+                                    </div>
+                                </QTd>
+                            </template>
+                        </QTable>
+                    </div>
                 </template>
             </VnPaginate>
         </div>

From 1100588af589193c69242a28e04237feaabb75f1 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 10 May 2024 08:40:56 +0200
Subject: [PATCH 48/61] fix: minor size icons

---
 src/pages/Route/RouteAutonomous.vue | 2 +-
 src/pages/Route/RouteList.vue       | 4 ++--
 src/pages/Route/RouteRoadmap.vue    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/Route/RouteAutonomous.vue b/src/pages/Route/RouteAutonomous.vue
index 0ecf0a971..238dce070 100644
--- a/src/pages/Route/RouteAutonomous.vue
+++ b/src/pages/Route/RouteAutonomous.vue
@@ -280,7 +280,7 @@ function navigateToRouteSummary(event, row) {
                                     <div class="table-actions">
                                         <QIcon
                                             name="preview"
-                                            size="xs"
+                                            size="sm"
                                             color="primary"
                                             @click.stop="
                                                 viewSummary(
diff --git a/src/pages/Route/RouteList.vue b/src/pages/Route/RouteList.vue
index c0888a225..73801e13a 100644
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@@ -422,7 +422,7 @@ const openTicketsDialog = (id) => {
                                     <div class="flex items-center no-wrap table-actions">
                                         <QIcon
                                             name="vn:ticketAdd"
-                                            size="xs"
+                                            size="sm"
                                             color="primary"
                                             class="cursor-pointer"
                                             @click="openTicketsDialog(props?.row?.id)"
@@ -431,7 +431,7 @@ const openTicketsDialog = (id) => {
                                         </QIcon>
                                         <QIcon
                                             name="preview"
-                                            size="xs"
+                                            size="sm"
                                             color="primary"
                                             @click="
                                                 viewSummary(props?.row?.id, RouteSummary)
diff --git a/src/pages/Route/RouteRoadmap.vue b/src/pages/Route/RouteRoadmap.vue
index 7a7dbd948..2ed8b6a9a 100644
--- a/src/pages/Route/RouteRoadmap.vue
+++ b/src/pages/Route/RouteRoadmap.vue
@@ -242,7 +242,7 @@ function navigateToRoadmapSummary(event, row) {
                                     <div class="flex items-center table-actions">
                                         <QIcon
                                             name="preview"
-                                            size="xs"
+                                            size="sm"
                                             color="primary"
                                             @click.stop="
                                                 viewSummary(

From 049564f443143054889e6017c0804970b4f39a98 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 10 May 2024 08:45:38 +0200
Subject: [PATCH 49/61] fix: Descriptor

---
 src/pages/Zone/Card/ZoneDescriptor.vue | 24 ++++++------------------
 src/pages/Zone/locale/es.yml           |  2 +-
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/src/pages/Zone/Card/ZoneDescriptor.vue b/src/pages/Zone/Card/ZoneDescriptor.vue
index 93e951801..8f0aa9e07 100644
--- a/src/pages/Zone/Card/ZoneDescriptor.vue
+++ b/src/pages/Zone/Card/ZoneDescriptor.vue
@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import { toTimeFormat } from 'src/filters/date';
+import { toCurrency } from 'filters/index';
 
 import useCardDescription from 'src/composables/useCardDescription';
 
@@ -73,24 +74,11 @@ const setData = (entity) => {
         </template> -->
         <template #body="{ entity }">
             {{ console.log('entity', entity) }}
-            <VnLv :label="t('Agency')" :value="entity.agencyMode.name" />
-            <VnLv :label="t('Closing hour')" :value="toTimeFormat(entity.hour)" />
-            <VnLv :label="t('zoneing days')" :value="entity.zoneingDays" />
-            <VnLv :label="t('Price')" :value="entity.price" />
-            <VnLv :label="t('Bonus')" :value="entity.bonus" />
+            <VnLv :label="t('summary.agency')" :value="entity.agencyMode.name" />
+            <VnLv :label="t('summary.closeHour')" :value="toTimeFormat(entity.hour)" />
+            <VnLv :label="t('summary.travelingDays')" :value="entity.travelingDays" />
+            <VnLv :label="t('summary.price')" :value="toCurrency(entity.price)" />
+            <VnLv :label="t('summary.bonus')" :value="toCurrency(entity.bonus)" />
         </template>
     </CardDescriptor>
 </template>
-
-<i18n>
-es:
-    Summary: Detalles
-    The zone will be deleted: El envío será eliminado
-    Do you want to delete this zone?: ¿Quieres eliminar este envío?
-    All zones with current agency: Todos los envíos con la agencia actual
-    Agency: Agencia
-    Closing hour: Hora de cierre
-    zoneing days: Días de viaje
-    Price: Precio
-    Bonus: Bonificación
-</i18n>
diff --git a/src/pages/Zone/locale/es.yml b/src/pages/Zone/locale/es.yml
index 3062950c8..ad740d5f7 100644
--- a/src/pages/Zone/locale/es.yml
+++ b/src/pages/Zone/locale/es.yml
@@ -29,7 +29,7 @@ summary:
     agency: Agencia
     price: Precio
     basicData: Datos básicos
-    bonus: Bonificaciones
+    bonus: Bonificación
     closeHour: Hora de cierre
     travelingDays: Días de viaje
     volumetric: Volumétrico

From daf1d4de2dab1bab3b32d977b66350889c3d6c7d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 10 May 2024 08:51:47 +0200
Subject: [PATCH 50/61] style changes

---
 src/css/app.scss            | 4 ++++
 src/pages/Zone/ZoneList.vue | 8 ++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index 2e524e693..1b2e56add 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -182,3 +182,7 @@ input::-webkit-inner-spin-button {
 .q-scrollarea__content {
     max-width: 100%;
 }
+
+.mt-15 {
+    margin-top: 15px;
+}
diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index f3de8a41a..c220ebb7b 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/src/pages/Zone/ZoneList.vue
@@ -146,8 +146,8 @@ onMounted(async () => {
             <ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" />
         </QScrollArea>
     </QDrawer>
-    <QPage class="column items-center">
-        <div style="width: 100%">
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="ZoneList"
                 url="Zones"
@@ -191,7 +191,7 @@ onMounted(async () => {
                                 <QTd :props="props">
                                     <div class="table-actions">
                                         <QIcon
-                                            style="margin-top: 15px"
+                                            class="mt-15"
                                             name="vn:clone"
                                             size="sm"
                                             color="primary"
@@ -201,7 +201,7 @@ onMounted(async () => {
                                                 t('globals.clone')
                                             }}</QTooltip> </QIcon
                                         ><QIcon
-                                            style="margin-top: 15px"
+                                            class="mt-15"
                                             name="preview"
                                             size="sm"
                                             color="primary"

From 7fd4c43b8bbbcdb5383e52b7b6da56b3d32fd5c7 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 10 May 2024 13:07:58 +0200
Subject: [PATCH 51/61] feat: refs #5919 workerlocker

---
 src/components/FormModel.vue           |  2 +-
 src/pages/Worker/Card/WorkerLocker.vue | 38 ++++++++++++++++----------
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index aea4923a9..2c2acb61c 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -160,7 +160,7 @@ async function fetch() {
             params: { filter: JSON.stringify($props.filter) },
         });
 
-        if (Array.isArray(data)) data = data[0];
+        if (Array.isArray(data)) data = data[0] ?? {};
 
         state.set($props.model, data);
         originalData.value = data && JSON.parse(JSON.stringify(data));
diff --git a/src/pages/Worker/Card/WorkerLocker.vue b/src/pages/Worker/Card/WorkerLocker.vue
index 403aa7160..d7cd10b48 100644
--- a/src/pages/Worker/Card/WorkerLocker.vue
+++ b/src/pages/Worker/Card/WorkerLocker.vue
@@ -1,22 +1,31 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import { useRole } from 'src/composables/useRole';
 import FormModel from 'components/FormModel.vue';
-import FetchData from 'src/components/FetchData.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
+import { useArrayData } from 'src/composables/useArrayData';
+import FetchData from 'components/FetchData.vue';
 
-const route = useRoute();
+const { hasAny } = useRole();
 const { t } = useI18n();
 const fetchData = ref();
 const lockers = ref([]);
-const filter = ref({ where: {} });
+const { store } = useArrayData('Worker');
+const entityId = computed(() => useRoute().params.id);
+const filter = computed(() => ({
+    where: {
+        gender: store.data?.sex,
+        or: [{ workerFk: null }, { workerFk: entityId.value }],
+    },
+}));
 
-const getLockers = async (workerLocker) => {
-    console.log(workerLocker);
-    filter.value.where.gender = workerLocker.sex;
-    await fetchData.value.fetch();
-};
+const canEdit = () => hasAny(['productionBoss', 'hr']);
+
+const save = async (data) =>
+    await axios.patch(`Lockers/${data.id}`, { workerFk: entityId.value });
 </script>
 <template>
     <FetchData
@@ -26,20 +35,21 @@ const getLockers = async (workerLocker) => {
         @on-fetch="(data) => (lockers = data)"
     />
     <FormModel
-        :url="`Workers/locker`"
-        model="Worker"
-        :filter="{ where: { id: route.params.id } }"
-        @on-fetch="getLockers"
+        :url="`Workers/${entityId}/locker`"
+        model="worker"
         auto-load
+        :save-fn="save"
+        @on-fetch="() => canEdit() && fetchData.fetch()"
     >
         <template #form="{ data }">
             <VnSelect
                 :label="t('Locker')"
-                v-model="data.locker"
+                v-model="data.id"
                 :options="lockers"
                 option-label="code"
                 option-value="id"
                 hide-selected
+                :readonly="!canEdit()"
             />
         </template>
     </FormModel>

From a692ca4a1828ab356a90bba2d90fc1f1e7751e0e Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 10 May 2024 16:01:32 +0200
Subject: [PATCH 52/61] feat: refs #5919 test & set workerFk null.

---
 src/pages/Worker/Card/WorkerLocker.vue        | 18 +++++++++++++-----
 .../integration/worker/workerLocker.spec.js   | 19 +++++++++++++++++++
 2 files changed, 32 insertions(+), 5 deletions(-)
 create mode 100644 test/cypress/integration/worker/workerLocker.spec.js

diff --git a/src/pages/Worker/Card/WorkerLocker.vue b/src/pages/Worker/Card/WorkerLocker.vue
index d7cd10b48..171074b20 100644
--- a/src/pages/Worker/Card/WorkerLocker.vue
+++ b/src/pages/Worker/Card/WorkerLocker.vue
@@ -12,6 +12,7 @@ import FetchData from 'components/FetchData.vue';
 const { hasAny } = useRole();
 const { t } = useI18n();
 const fetchData = ref();
+const originaLockerId = ref();
 const lockers = ref([]);
 const { store } = useArrayData('Worker');
 const entityId = computed(() => useRoute().params.id);
@@ -22,10 +23,17 @@ const filter = computed(() => ({
     },
 }));
 
-const canEdit = () => hasAny(['productionBoss', 'hr']);
+const save = async (data) => {
+    const lockerId = data.id ?? originaLockerId.value;
+    const workerFk = lockerId == originaLockerId.value ? null : entityId.value;
 
-const save = async (data) =>
-    await axios.patch(`Lockers/${data.id}`, { workerFk: entityId.value });
+    await axios.patch(`Lockers/${lockerId}`, { workerFk });
+};
+
+const init = async (data) => {
+    await fetchData.value.fetch();
+    originaLockerId.value = data.id;
+};
 </script>
 <template>
     <FetchData
@@ -39,7 +47,7 @@ const save = async (data) =>
         model="worker"
         auto-load
         :save-fn="save"
-        @on-fetch="() => canEdit() && fetchData.fetch()"
+        @on-fetch="init"
     >
         <template #form="{ data }">
             <VnSelect
@@ -49,7 +57,7 @@ const save = async (data) =>
                 option-label="code"
                 option-value="id"
                 hide-selected
-                :readonly="!canEdit()"
+                :readonly="!hasAny(['productionBoss', 'hr'])"
             />
         </template>
     </FormModel>
diff --git a/test/cypress/integration/worker/workerLocker.spec.js b/test/cypress/integration/worker/workerLocker.spec.js
new file mode 100644
index 000000000..8c1886438
--- /dev/null
+++ b/test/cypress/integration/worker/workerLocker.spec.js
@@ -0,0 +1,19 @@
+describe('WorkerList', () => {
+    const workerId = 1110;
+    const lockerCode = '200A';
+    const input = '.q-card input';
+    const firstOpt = '[role="listbox"] .q-item:nth-child(1)';
+    beforeEach(() => {
+        cy.viewport(1280, 720);
+        cy.login('productionBoss');
+        cy.visit(`/#/worker/${workerId}/locker`);
+    });
+
+    it('should allocates a locker', () => {
+        cy.get(input).click();
+        cy.get(input).type(lockerCode);
+        cy.get(firstOpt).click();
+        cy.saveCard();
+        cy.get(input).invoke('val').should('eq', lockerCode);
+    });
+});

From cd0dd6a735ef50eb4337ac57b4972d184bc209a9 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 10 May 2024 16:12:52 +0200
Subject: [PATCH 53/61] feat: refs #5919 changeLog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e34523545..fd8a900b6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+-   (Worker) => Se crea la sección Taquilla
+
 ### Fixed
 
 -   (General) => Se vuelven a mostrar los parámetros en la url al aplicar un filtro

From a28d18f1e1632b23a5c748fb3b078ed8edd709f1 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 13 May 2024 09:30:03 +0200
Subject: [PATCH 54/61] fix: redirection when clone and styles

---
 src/css/app.scss            |  4 ---
 src/pages/Zone/ZoneList.vue | 60 ++++++++++++++++---------------------
 2 files changed, 26 insertions(+), 38 deletions(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index 1b2e56add..2e524e693 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -182,7 +182,3 @@ input::-webkit-inner-spin-button {
 .q-scrollarea__content {
     max-width: 100%;
 }
-
-.mt-15 {
-    margin-top: 15px;
-}
diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index c220ebb7b..3806a519e 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/src/pages/Zone/ZoneList.vue
@@ -106,13 +106,9 @@ const exprBuilder = (param, value) => {
 };
 
 async function clone(id) {
-    try {
-        await axios.post(`Zones/${id}/clone`);
-        notify(t('globals.dataSaved'), 'positive');
-        router.push({ name: 'ZoneBasicData', params: { id } });
-    } catch (error) {
-        console.error('Error cloning zone: ', error);
-    }
+    const { data } = await axios.post(`Zones/${id}/clone`);
+    notify(t('globals.dataSaved'), 'positive');
+    router.push({ name: 'ZoneBasicData', params: { id: data.id } });
 }
 const handleClone = (id) => {
     openConfirmationModal(
@@ -154,6 +150,7 @@ onMounted(async () => {
                 :filter="{
                     include: { relation: 'agencyMode', scope: { fields: ['name'] } },
                 }"
+                :limit="20"
                 auto-load
             >
                 <template #body="{ rows }">
@@ -184,34 +181,29 @@ onMounted(async () => {
                                 <QTd :props="props">
                                     <QTr :props="props" class="cursor-pointer">
                                         {{ props.value }}
-                                    </QTr></QTd
-                                ></template
-                            >
+                                    </QTr>
+                                </QTd>
+                            </template>
                             <template #body-cell-actions="props">
-                                <QTd :props="props">
-                                    <div class="table-actions">
-                                        <QIcon
-                                            class="mt-15"
-                                            name="vn:clone"
-                                            size="sm"
-                                            color="primary"
-                                            @click.stop="handleClone(props.row.id)"
-                                        >
-                                            <QTooltip>{{
-                                                t('globals.clone')
-                                            }}</QTooltip> </QIcon
-                                        ><QIcon
-                                            class="mt-15"
-                                            name="preview"
-                                            size="sm"
-                                            color="primary"
-                                            @click.stop="
-                                                viewSummary(props.row.id, ZoneSummary)
-                                            "
-                                        >
-                                            <QTooltip>{{ t('Preview') }}</QTooltip>
-                                        </QIcon>
-                                    </div>
+                                <QTd :props="props" class="q-gutter-x-sm">
+                                    <QIcon
+                                        name="vn:clone"
+                                        size="sm"
+                                        color="primary"
+                                        @click.stop="handleClone(props.row.id)"
+                                    >
+                                        <QTooltip>{{ t('globals.clone') }}</QTooltip>
+                                    </QIcon>
+                                    <QIcon
+                                        name="preview"
+                                        size="sm"
+                                        color="primary"
+                                        @click.stop="
+                                            viewSummary(props.row.id, ZoneSummary)
+                                        "
+                                    >
+                                        <QTooltip>{{ t('Preview') }}</QTooltip>
+                                    </QIcon>
                                 </QTd>
                             </template>
                         </QTable>

From 14910c5899f437b32295cd9ba3bbbbc5edb6d255 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Mon, 13 May 2024 12:46:25 +0200
Subject: [PATCH 55/61] feat: refs #7271 basicData and Log

---
 src/pages/Zone/Card/ZoneBasicData.vue  | 58 +++++++-------------------
 src/pages/Zone/Card/ZoneDescriptor.vue |  6 +--
 src/router/modules/zone.js             | 11 ++++-
 3 files changed, 29 insertions(+), 46 deletions(-)

diff --git a/src/pages/Zone/Card/ZoneBasicData.vue b/src/pages/Zone/Card/ZoneBasicData.vue
index 5d57b920e..00f34b431 100644
--- a/src/pages/Zone/Card/ZoneBasicData.vue
+++ b/src/pages/Zone/Card/ZoneBasicData.vue
@@ -1,34 +1,23 @@
 <script setup>
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-
+import { ref } from 'vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'src/components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import { QCheckbox } from 'quasar';
+import VnInputTime from 'src/components/common/VnInputTime.vue';
 
 const route = useRoute();
 const { t } = useI18n();
-const zoneFilter = {
-    include: [
-        {
-            relation: 'agency',
-            scope: {
-                fields: ['name'],
-                include: { relation: 'agencyModeFk', scope: { fields: ['id'] } },
-            },
-        },
-        { relation: 'sip', scope: { fields: ['extension', 'secret'] } },
-        { relation: 'department', scope: { include: { relation: 'department' } } },
-        { relation: 'client', scope: { fields: ['phone'] } },
-    ],
-};
+
 const agencyFilter = {
     fields: ['id', 'name'],
     order: 'name ASC',
     limit: 30,
 };
+const agencyOptions = ref([]);
 </script>
 
 <template>
@@ -36,53 +25,38 @@ const agencyFilter = {
         :filter="agencyFilter"
         @on-fetch="(data) => (agencyOptions = data)"
         auto-load
-        url="agencies"
-    />
-    <FetchData
-        :filter="zoneFilter"
-        @on-fetch="(data) => (zoneOptions = data)"
-        auto-load
-        url="zones"
+        url="AgencyModes"
     />
 
-    <FormModel
-        :filter="zoneFilter"
-        :url="`zone/${route.params.id}/basic-data`"
-        auto-load
-        model="Zone"
-    >
+    <FormModel :url="`Zones/${route.params.id}`" auto-load model="zone">
         <template #form="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
-                <VnInput :label="t('Name')" clearable v-model="data.zone.name" />
+                <VnInput :label="t('Name')" clearable v-model="data.name" />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <VnInput v-model="data.agency.name" :label="t('Agency')" clearable />
-                <VnInput v-model="data.zone.itemMaxSize" :label="t('Max m³')" clearable />
-                <VnInput v-model="data.zone.m3Max" :label="t('Maximum m³')" clearable />
+                <VnInput v-model="data.agencyModeFk" :label="t('Agency')" clearable />
+                <VnInput v-model="data.itemMaxSize" :label="t('Max m³')" clearable />
+                <VnInput v-model="data.m3Max" :label="t('Maximum m³')" clearable />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
                 <VnInput
-                    v-model="data.zone.travelingDays"
+                    v-model="data.travelingDays"
                     :label="t('Traveling days')"
                     clearable
                 />
-                <VnInput v-model="data.zone.hour" :label="t('Closing')" clearable />
+                <VnInputTime v-model="data.hour" :label="t('Closing')" clearable />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <VnInput v-model="data.zone.price" :label="t('Price')" clearable />
-                <VnInput v-model="data.zone.bonus" :label="t('Bonus')" clearable />
+                <VnInput v-model="data.price" :label="t('Price')" clearable />
+                <VnInput v-model="data.bonus" :label="t('Bonus')" clearable />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <VnInput
-                    v-model="data.zone.inflation"
-                    :label="t('Inflation')"
-                    clearable
-                />
-                <QCheckbox v-model="data.zone.isVolumetric" :label="t('Volumetric')" />
+                <VnInput v-model="data.inflation" :label="t('Inflation')" clearable />
+                <QCheckbox v-model="data.isVolumetric" :label="t('Volumetric')" />
             </VnRow>
         </template>
     </FormModel>
diff --git a/src/pages/Zone/Card/ZoneDescriptor.vue b/src/pages/Zone/Card/ZoneDescriptor.vue
index 8f0aa9e07..f257a3159 100644
--- a/src/pages/Zone/Card/ZoneDescriptor.vue
+++ b/src/pages/Zone/Card/ZoneDescriptor.vue
@@ -9,6 +9,7 @@ import { toTimeFormat } from 'src/filters/date';
 import { toCurrency } from 'filters/index';
 
 import useCardDescription from 'src/composables/useCardDescription';
+import ZoneDescriptorMenuItems from './ZoneDescriptorMenuItems.vue';
 
 const $props = defineProps({
     id: {
@@ -69,11 +70,10 @@ const setData = (entity) => {
                 </QTooltip>
             </QBtn>
         </template>
-        <!-- <template #menu="{ entity }">
+        <template #menu="{ entity }">
             <ZoneDescriptorMenuItems :zone="entity" />
-        </template> -->
+        </template>
         <template #body="{ entity }">
-            {{ console.log('entity', entity) }}
             <VnLv :label="t('summary.agency')" :value="entity.agencyMode.name" />
             <VnLv :label="t('summary.closeHour')" :value="toTimeFormat(entity.hour)" />
             <VnLv :label="t('summary.travelingDays')" :value="entity.travelingDays" />
diff --git a/src/router/modules/zone.js b/src/router/modules/zone.js
index d39ed82d0..01c23c499 100644
--- a/src/router/modules/zone.js
+++ b/src/router/modules/zone.js
@@ -12,7 +12,7 @@ export default {
     redirect: { name: 'ZoneMain' },
     menus: {
         main: ['ZoneList', 'ZoneDeliveryList', 'ZoneUpcomingList'],
-        card: ['ZoneBasicData'],
+        card: ['ZoneBasicData', 'ZoneHistory'],
     },
     children: [
         {
@@ -83,6 +83,15 @@ export default {
                     },
                     component: () => import('src/pages/Zone/Card/ZoneBasicData.vue'),
                 },
+                {
+                    name: 'ZoneHistory',
+                    path: 'history',
+                    meta: {
+                        title: 'log',
+                        icon: 'history',
+                    },
+                    component: () => import('src/pages/Zone/Card/ZoneLog.vue'),
+                },
                 // {
                 //     path: '/zone/delivery',
                 //     name: 'ZoneDeliveryMain',

From a94c1a32e10ff80484b4884ef7e0f591e5335a30 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 13 May 2024 14:13:41 +0200
Subject: [PATCH 56/61] fix: show label agency instead id

---
 src/pages/Zone/Card/ZoneBasicData.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/pages/Zone/Card/ZoneBasicData.vue b/src/pages/Zone/Card/ZoneBasicData.vue
index 00f34b431..819fec7e3 100644
--- a/src/pages/Zone/Card/ZoneBasicData.vue
+++ b/src/pages/Zone/Card/ZoneBasicData.vue
@@ -8,6 +8,7 @@ import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import { QCheckbox } from 'quasar';
 import VnInputTime from 'src/components/common/VnInputTime.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -29,13 +30,21 @@ const agencyOptions = ref([]);
     />
 
     <FormModel :url="`Zones/${route.params.id}`" auto-load model="zone">
-        <template #form="{ data }">
+        <template #form="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <VnInput :label="t('Name')" clearable v-model="data.name" />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <VnInput v-model="data.agencyModeFk" :label="t('Agency')" clearable />
+                <VnSelect
+                    option-label="name"
+                    option-value="id"
+                    v-model="data.agencyModeFk"
+                    :rules="validate('zone.agencyModeFk')"
+                    :options="agencyOptions"
+                    :label="t('Agency')"
+                    clearable
+                />
                 <VnInput v-model="data.itemMaxSize" :label="t('Max m³')" clearable />
                 <VnInput v-model="data.m3Max" :label="t('Maximum m³')" clearable />
             </VnRow>

From 289bdeecae0645252b5c811b5117429c3861ee58 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 14 May 2024 10:41:07 +0200
Subject: [PATCH 57/61] fix: Workers/isActive

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

diff --git a/src/pages/Zone/Card/ZoneBasicData.vue b/src/pages/Zone/Card/ZoneBasicData.vue
index 819fec7e3..19fbe49d3 100644
--- a/src/pages/Zone/Card/ZoneBasicData.vue
+++ b/src/pages/Zone/Card/ZoneBasicData.vue
@@ -26,7 +26,7 @@ const agencyOptions = ref([]);
         :filter="agencyFilter"
         @on-fetch="(data) => (agencyOptions = data)"
         auto-load
-        url="AgencyModes"
+        url="AgencyModes/isActive"
     />
 
     <FormModel :url="`Zones/${route.params.id}`" auto-load model="zone">

From fa82efe5d25a4f7a2dce4c94b0f044511c1e07af Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 14 May 2024 10:41:28 +0200
Subject: [PATCH 58/61] fix: limit width some fields

---
 quasar.config.js                      |  2 +-
 src/pages/Zone/Card/ZoneBasicData.vue | 23 ++++++++++++++++++++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/quasar.config.js b/quasar.config.js
index dd7a91002..b59c62eeb 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -29,7 +29,7 @@ module.exports = configure(function (/* ctx */) {
         // app boot file (/src/boot)
         // --> boot files are part of "main.js"
         // https://v2.quasar.dev/quasar-cli/boot-files
-        boot: ['i18n', 'axios', 'vnDate', 'validations', 'quasar.defaults'],
+        boot: ['i18n', 'axios', 'vnDate', 'validations', 'quasar', 'quasar.defaults'],
 
         // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
         css: ['app.scss'],
diff --git a/src/pages/Zone/Card/ZoneBasicData.vue b/src/pages/Zone/Card/ZoneBasicData.vue
index 19fbe49d3..d5b727112 100644
--- a/src/pages/Zone/Card/ZoneBasicData.vue
+++ b/src/pages/Zone/Card/ZoneBasicData.vue
@@ -43,10 +43,23 @@ const agencyOptions = ref([]);
                     :rules="validate('zone.agencyModeFk')"
                     :options="agencyOptions"
                     :label="t('Agency')"
+                    emit-value
+                    map-options
+                    use-input
+                    hide-bottom-space
+                />
+                <VnInput
+                    class="mw-10"
+                    v-model="data.itemMaxSize"
+                    :label="t('Max m³')"
+                    clearable
+                />
+                <VnInput
+                    class="mw-10"
+                    v-model="data.m3Max"
+                    :label="t('Maximum m³')"
                     clearable
                 />
-                <VnInput v-model="data.itemMaxSize" :label="t('Max m³')" clearable />
-                <VnInput v-model="data.m3Max" :label="t('Maximum m³')" clearable />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
@@ -70,7 +83,11 @@ const agencyOptions = ref([]);
         </template>
     </FormModel>
 </template>
-
+<style lang="scss" scoped>
+.mw-10 {
+    max-width: 10vw;
+}
+</style>
 <i18n>
 es:
     Name: Nombre

From c443b0a00f29c870323a3ba475ac4bed9ae3afae Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 14 May 2024 10:50:29 +0200
Subject: [PATCH 59/61] feat: input validations

---
 src/pages/Zone/Card/ZoneBasicData.vue | 28 ++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/pages/Zone/Card/ZoneBasicData.vue b/src/pages/Zone/Card/ZoneBasicData.vue
index d5b727112..7a2c505fa 100644
--- a/src/pages/Zone/Card/ZoneBasicData.vue
+++ b/src/pages/Zone/Card/ZoneBasicData.vue
@@ -53,12 +53,16 @@ const agencyOptions = ref([]);
                     v-model="data.itemMaxSize"
                     :label="t('Max m³')"
                     clearable
+                    type="number"
+                    min="0"
                 />
                 <VnInput
                     class="mw-10"
                     v-model="data.m3Max"
                     :label="t('Maximum m³')"
                     clearable
+                    type="number"
+                    min="0"
                 />
             </VnRow>
 
@@ -67,18 +71,36 @@ const agencyOptions = ref([]);
                     v-model="data.travelingDays"
                     :label="t('Traveling days')"
                     clearable
+                    type="number"
+                    min="0"
                 />
                 <VnInputTime v-model="data.hour" :label="t('Closing')" clearable />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <VnInput v-model="data.price" :label="t('Price')" clearable />
-                <VnInput v-model="data.bonus" :label="t('Bonus')" clearable />
+                <VnInput
+                    v-model="data.price"
+                    :label="t('Price')"
+                    type="number"
+                    min="0"
+                    clearable
+                />
+                <VnInput
+                    v-model="data.bonus"
+                    :label="t('Bonus')"
+                    type="number"
+                    min="0"
+                    clearable
+                />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
                 <VnInput v-model="data.inflation" :label="t('Inflation')" clearable />
-                <QCheckbox v-model="data.isVolumetric" :label="t('Volumetric')" />
+                <QCheckbox
+                    v-model="data.isVolumetric"
+                    :label="t('Volumetric')"
+                    :toggle-indeterminate="false"
+                />
             </VnRow>
         </template>
     </FormModel>

From cb40505f82c90be4d29a742bc6d939e55d957a7e Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 14 May 2024 11:11:28 +0200
Subject: [PATCH 60/61] fix: VnLocation > workercreate

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

diff --git a/test/cypress/integration/VnLocation.spec.js b/test/cypress/integration/VnLocation.spec.js
index f373bad8a..008594642 100644
--- a/test/cypress/integration/VnLocation.spec.js
+++ b/test/cypress/integration/VnLocation.spec.js
@@ -1,13 +1,13 @@
 const locationOptions = '[role="listbox"] > div.q-virtual-scroll__content > .q-item';
 describe('VnLocation', () => {
     const dialogInputs = '.q-dialog label input';
-    describe('Create', () => {
+    describe('Worker Create', () => {
         const inputLocation =
-            '.q-form .q-card> :nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control';
+            '.q-form .q-card > :nth-child(3) > .q-field > .q-field__inner > .q-field__control > .q-field__control-container';
         beforeEach(() => {
             cy.viewport(1280, 720);
             cy.login('developer');
-            cy.visit('/#/worker/create');
+            cy.visit('/#/worker/create', { timeout: 5000 });
             cy.waitForElement('.q-card');
         });
         it('Show all options', function () {
@@ -25,8 +25,9 @@ describe('VnLocation', () => {
             cy.get(inputLocation).clear();
             cy.get(inputLocation).type('ecuador');
             cy.get(locationOptions).should('have.length.at.least', 1);
-            cy.get(`${locationOptions}:nth-child(1)`).click();
-            cy.get(inputLocation + '> :nth-child(2) > .q-icon').click();
+            cy.get(
+                '.q-form .q-card > :nth-child(3) > .q-field > .q-field__inner > .q-field__control > :nth-child(3) > .q-icon'
+            ).click();
         });
     });
     describe('Fiscal-data', () => {

From f4dd9b84fd5c4be44ae856aaa8f645beb9b402ae Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 14 May 2024 11:42:34 +0200
Subject: [PATCH 61/61] fix: VnLocation > fiscal-data

---
 src/components/CreateNewPostcodeForm.vue    |  7 ++++---
 test/cypress/integration/VnLocation.spec.js | 12 ++++++------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/CreateNewPostcodeForm.vue b/src/components/CreateNewPostcodeForm.vue
index fd8570176..064ad1631 100644
--- a/src/components/CreateNewPostcodeForm.vue
+++ b/src/components/CreateNewPostcodeForm.vue
@@ -127,9 +127,10 @@ const onProvinceCreated = async ({ name }, formData) => {
                         <CreateNewProvinceForm
                             @on-data-saved="onProvinceCreated($event, data)"
                         />
-                    </template>
-                </VnSelectDialog>
-                <VnSelect
+                    </template> </VnSelectDialog
+            ></VnRow>
+            <VnRow class="row q-gutter-md q-mb-xl"
+                ><VnSelect
                     :label="t('Country')"
                     :options="countriesOptions"
                     hide-selected
diff --git a/test/cypress/integration/VnLocation.spec.js b/test/cypress/integration/VnLocation.spec.js
index 008594642..d1cddd0e7 100644
--- a/test/cypress/integration/VnLocation.spec.js
+++ b/test/cypress/integration/VnLocation.spec.js
@@ -34,26 +34,26 @@ describe('VnLocation', () => {
         beforeEach(() => {
             cy.viewport(1280, 720);
             cy.login('developer');
-            cy.visit('/#/supplier/567/fiscal-data', { timeout: 2000 });
-            cy.waitForElement('.q-card');
+            cy.visit('/#/supplier/567/fiscal-data', { timeout: 7000 });
+            cy.waitForElement('.q-form');
         });
         it('Create postCode', function () {
             cy.get(
-                ':nth-child(6) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(3) > .q-icon'
+                ':nth-child(6) > .q-field > .q-field__inner > .q-field__control > :nth-child(3) > .q-icon'
             ).click();
             cy.get('.q-card > h1').should('have.text', 'New postcode');
             cy.get(dialogInputs).eq(0).clear('12');
             cy.get(dialogInputs).eq(0).type('1234453');
             cy.selectOption(
-                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(4) > :nth-child(2) > .q-field > .q-field__inner > .q-field__control ',
+                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(4)   > .q-select > .q-field__inner > .q-field__control ',
                 'Valencia'
             );
             cy.selectOption(
-                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(5) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control ',
+                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(5)   > .q-select > .q-field__inner > .q-field__control ',
                 'Province one'
             );
             cy.selectOption(
-                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(5) > :nth-child(2) > .q-field > .q-field__inner > .q-field__control ',
+                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(6)  > .q-select > .q-field__inner > .q-field__control ',
                 'España'
             );
             cy.get('.q-mt-lg > .q-btn--standard').click();